<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="设备ID" prop="deviceId">
        <el-input
          v-model="queryParams.deviceId"
          placeholder="请输入设备ID"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          v-model="queryParams.deviceName"
          placeholder="请输入设备名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="设备IP" prop="ipAddress">
        <el-input
          v-model="queryParams.ipAddress"
          placeholder="请输入设备IP"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="固件版本号" prop="firmwareVersion">
        <el-input
          v-model="queryParams.firmwareVersion"
          placeholder="请输入固件版本号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="最后在线时间" prop="lastOnline">
        <el-date-picker clearable
          v-model="queryParams.lastOnline"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择最后在线时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['devices:devices:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['devices:devices:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['devices:devices:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['devices:devices:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table 
      v-loading="loading" 
      :data="devicesList" 
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="ID" align="center" prop="id" /> -->
      <el-table-column label="设备ID" min-width="100" align="center" prop="deviceId">
        <template #default="scope">
          <div @click="shouxqpop(scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.deviceId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center" prop="deviceName" />
      <el-table-column label="设备类型" align="center" prop="deviceType" />
      <el-table-column label="设备状态" align="center" prop="status" />
      <el-table-column label="设备IP" align="center" prop="ipAddress" />
      <el-table-column label="固件版本号" align="center" prop="firmwareVersion" />
      <el-table-column label="最后在线时间" align="center" prop="lastOnline" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.lastOnline, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['devices:devices:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['devices:devices:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!--数据展示-->
     <el-dialog title="设备信息" v-model="detailspop" fullscreen append-to-body>
      <el-tabs 
        v-if="detailspop"
        type="border-card"
        @tab-click="tabclick"
      >
        <el-tab-pane label="实时数据" style="padding: 25px;">
          <!-- <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-row :gutter="100">
              <el-col :span="20">
                <el-descriptions title="" border>
                  <el-descriptions-item label="项目名称">YT123456789</el-descriptions-item>
                  <el-descriptions-item label="用户项目名">FD456123</el-descriptions-item>
                  <el-descriptions-item label="固件版本">DF1.0.0</el-descriptions-item>
                  <el-descriptions-item label="设备ID">{{ssdata.deviceId}}</el-descriptions-item>
                  <el-descriptions-item label="SIM卡号">455345648789423</el-descriptions-item>
                  <el-descriptions-item label="状态">在线50天</el-descriptions-item>
                </el-descriptions>
              </el-col>
              <el-col :span="4">
                  <img src="@/assets/images/ewcode.png" width="80" height="80">
              </el-col>
              
            </el-row>
            
          </div> -->

          
          <!-- <el-row :gutter="30" style="margin-bottom: 30px;">

              <el-col :span="12">
                <div style="width: 100%;padding:10px 25px 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            
                  <el-divider content-position="left" style="margin-bottom: 30px;">
                    <div style="font-size: 18px;color: #278ed9;">系统状态</div>
                  </el-divider>

                  <div style="display: flex;justify-content: space-between;padding:10px 30px 30px;">
                    <div style="display: flex;width: 100px;height: 100px;align-items: center;justify-content: center;border-radius: 50%;border:2px solid #16599d;text-align: center;">
                      <div style="color: #16599d;">
                        <div style="font-size: 16px;">总电压(v)</div>
                        <div style="padding-top: 2px;font-size: 26px;font-weight: bold;">88</div>
                      </div>
                      </div>

                      <div style="display: flex;width: 100px;height: 100px;align-items: center;justify-content: center;border-radius: 50%;border:2px solid #168a9d;text-align: center;">
                      <div style="color: #168a9d;">
                        <div style="font-size: 16px;">总电流(A)</div>
                        <div style="padding-top: 2px;font-size: 26px;font-weight: bold;">69</div>
                      </div>
                      </div>

                      <div style="display: flex;width: 100px;height: 100px;align-items: center;justify-content: center;border-radius: 50%;border:2px solid #56a51a;text-align: center;">
                      <div style="color: #56a51a;">
                        <div style="font-size: 16px;">SOC(%)</div>
                        <div style="padding-top: 2px;font-size: 26px;font-weight: bold;">95</div>
                      </div>
                      </div>

                      <div style="display: flex;width: 100px;height: 100px;align-items: center;justify-content: center;border-radius: 50%;border:2px solid #978c12;text-align: center;">
                      <div style="color: #978c12;">
                        <div style="font-size: 16px;">SOH(%)</div>
                        <div style="padding-top: 2px;font-size: 26px;font-weight: bold;">86</div>
                      </div>
                      </div>
                  </div>

                <el-descriptions title="" border>
                  <el-descriptions-item label-width="150" label="最高单体(V)">5</el-descriptions-item>
                  <el-descriptions-item label-width="150" label="最高单体位置">10</el-descriptions-item>
                  <el-descriptions-item label-width="150" label="最高温度(℃)">25</el-descriptions-item>
                  <el-descriptions-item label="最高温度位置">4</el-descriptions-item>
                  <el-descriptions-item label="最低单体(V)">2</el-descriptions-item>
                  <el-descriptions-item label="最低单体位置">15</el-descriptions-item>
                  <el-descriptions-item label="最低温度(℃)">30</el-descriptions-item>
                  <el-descriptions-item label="最低温度位置">5</el-descriptions-item>

                  <el-descriptions-item label="平均单体(V)">3</el-descriptions-item>
                  <el-descriptions-item label="压差单体(V)">0.005</el-descriptions-item>
                  <el-descriptions-item label="平均温度(℃)">20</el-descriptions-item>
                  <el-descriptions-item label="温差单体(℃)">0</el-descriptions-item>
                </el-descriptions>
            
                </div>
                
              </el-col>
              <el-col :span="12">
                <div style="width: 100%;padding:10px 25px 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
                  <el-divider content-position="left" style="margin-bottom: 30px;">
                    <div style="font-size: 18px;color: #278ed9;">故障信息</div>
                  </el-divider>
                  <el-table 
                  style="width:100%;margin-top: 10px;"
                  :data="guzdata"
                  border
                  stripe
                  height="300px"
                >
                    <el-table-column label="故障名称" min-width="100" align="center" prop="name" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column label="时间" min-width="180" align="center" prop="date" :show-overflow-tooltip="true" />
                    
                </el-table>
                </div>
                 
              </el-col>
              
            </el-row>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">运行状态</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="充放电状态">充电</el-descriptions-item>
              <el-descriptions-item label="加热状态">否</el-descriptions-item>
              <el-descriptions-item label="系统状态">禁充禁放</el-descriptions-item>
              <el-descriptions-item label="自检代码">7</el-descriptions-item>
              <el-descriptions-item label="高压检测1(V)">50</el-descriptions-item>
              <el-descriptions-item label="高压检测2(V)">51</el-descriptions-item>
              <el-descriptions-item label="高压检测3(V)">52</el-descriptions-item>
              <el-descriptions-item label="高压检测4(V)">0</el-descriptions-item>

              <el-descriptions-item label="常电电压(V)">50</el-descriptions-item>
              <el-descriptions-item label="keyOn(V)">12</el-descriptions-item>
              <el-descriptions-item label="黏连代码">5</el-descriptions-item>
              <el-descriptions-item label="绝缘度(Ω/V)">6520</el-descriptions-item>

              <el-descriptions-item label="绝缘电阻Rp(kΩ)">50</el-descriptions-item>
              <el-descriptions-item label="绝缘电阻Rn(kΩ)">65555</el-descriptions-item>
              <el-descriptions-item label="休眠计时时间(min)">5</el-descriptions-item>
              <el-descriptions-item label="休眠剩余时间(min)">650</el-descriptions-item>

              <el-descriptions-item label="RL1">断开(粘连)</el-descriptions-item>
              <el-descriptions-item label="RL2">断开</el-descriptions-item>
              <el-descriptions-item label="RL3">断开(粘连)</el-descriptions-item>
              <el-descriptions-item label="RL4">断开</el-descriptions-item>

              <el-descriptions-item label="RL5">断开(粘连)</el-descriptions-item>
              <el-descriptions-item label="RL6">断开</el-descriptions-item>
              <el-descriptions-item label="RL7">断开(粘连)</el-descriptions-item>
              <el-descriptions-item label="RL8">断开</el-descriptions-item>
            </el-descriptions>
          </div>
          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">充电</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="A+(V)">12</el-descriptions-item>
              <el-descriptions-item label="充电机通信状态">0</el-descriptions-item>
              <el-descriptions-item label="请求充电电压(V)">禁充禁放</el-descriptions-item>
              <el-descriptions-item label="请求充电电流(A)">7</el-descriptions-item>
              <el-descriptions-item label="本次充电时间(h)">0.1</el-descriptions-item>
              <el-descriptions-item label="本次充电容量(Ah)">51</el-descriptions-item>
              <el-descriptions-item label="充电机输出电压(V)">52</el-descriptions-item>
              <el-descriptions-item label="充电机输出电流(A)">0</el-descriptions-item>

              <el-descriptions-item label="本次充电能量(kWh)">5</el-descriptions-item>
              <el-descriptions-item label="cc2电阻(Ω)">12</el-descriptions-item>
              <el-descriptions-item label="cc电阻(Ω)">5</el-descriptions-item>
              <el-descriptions-item label="CP占空比(%)">20</el-descriptions-item>

              <el-descriptions-item label="国标状态1">50</el-descriptions-item>
              <el-descriptions-item label="国标状态2">65</el-descriptions-item>
              <el-descriptions-item label="NTC1(℃)">5</el-descriptions-item>
              <el-descriptions-item label="NTC2(℃)">6</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">统计</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="循环次数">12</el-descriptions-item>
              <el-descriptions-item label="累计运行时间">0</el-descriptions-item>
              <el-descriptions-item label="累计充电时间(h)">禁充禁放</el-descriptions-item>
              <el-descriptions-item label="累计放电时间(h)">7</el-descriptions-item>
              <el-descriptions-item label="本次放电容量(Ah)">0.1</el-descriptions-item>
              <el-descriptions-item label="本次放电能量(KWh)">51</el-descriptions-item>
              <el-descriptions-item label="累计充电容量(Ah)">52</el-descriptions-item>
              <el-descriptions-item label="累计放电容量(Ah)">0</el-descriptions-item>

              <el-descriptions-item label="累计充电能量(kWh)">5</el-descriptions-item>
              <el-descriptions-item label="累计放电能量(kWh)">12</el-descriptions-item>
              <el-descriptions-item label="本次放电时间(h)">5</el-descriptions-item>
              <el-descriptions-item label="本次运行时间">20</el-descriptions-item>
            </el-descriptions>
          </div> -->

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">充电详情</div>
            </el-divider>

            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="慢充电流(A)">{{chargingDetails.acChargeCurrent}}</el-descriptions-item>
              <el-descriptions-item label="慢充电压(V)">{{chargingDetails.acChargeVoltage}}</el-descriptions-item>
              <el-descriptions-item label="慢充CP值">{{chargingDetails.acCpValue}}</el-descriptions-item>
              <el-descriptions-item label="慢充枪阻值">{{chargingDetails.acGunResistance}}</el-descriptions-item>
              <el-descriptions-item label="慢充阶段">{{chargingDetails.acStage}}</el-descriptions-item>
              <el-descriptions-item label="慢充停止码">{{chargingDetails.acStopCode}}</el-descriptions-item>
              <el-descriptions-item label="充电时长(分钟)">{{chargingDetails.chargeTime}}</el-descriptions-item>
              <el-descriptions-item label="充电阶段">{{chargingDetails.chargingStage}}</el-descriptions-item>
              <el-descriptions-item label="快充电流(A)">{{chargingDetails.dcChargeCurrent}}</el-descriptions-item>
              <el-descriptions-item label="快充电压(V)">{{chargingDetails.dcChargeVoltage}}</el-descriptions-item>
              <el-descriptions-item label="快充阶段">{{chargingDetails.dcStage}}</el-descriptions-item>
              <el-descriptions-item label="快充停止码">{{chargingDetails.dcStopCode}}</el-descriptions-item>
            </el-descriptions>
          </div>


          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">单体电压/温度极值</div>
            </el-divider>

            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="最高温度探针序号">{{dtdywd.maxTempProbeNo}}</el-descriptions-item>
              <el-descriptions-item label="最高温度子系统号">{{dtdywd.maxTempSubsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="最高温度值(℃)">{{dtdywd.maxTempValue}}</el-descriptions-item>
              <el-descriptions-item label="最高电压电池单体代号">{{dtdywd.maxVoltageBatteryNo}}</el-descriptions-item>
              <el-descriptions-item label="最高电压电池子系统号">{{dtdywd.maxVoltageSubsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="电池单体电压最高值(V)">{{dtdywd.maxVoltageValue}}</el-descriptions-item>
              <el-descriptions-item label="最低温度探针序号">{{dtdywd.minTempProbeNo}}</el-descriptions-item>
              <el-descriptions-item label="最低温度子系统号">{{dtdywd.minTempSubsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="最低温度值(℃)">{{dtdywd.minTempValue}}</el-descriptions-item>
              <el-descriptions-item label="最低电压电池单体代号">{{dtdywd.minVoltageBatteryNo}}</el-descriptions-item>
              <el-descriptions-item label="最低电压电池子系统号">{{dtdywd.minVoltageSubsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="电池单体电压最低值(V)">{{dtdywd.minVoltageValue}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">实时运行</div>
            </el-divider>

            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="GPV电压(V)">{{runtimeData.gpvVoltage}}</el-descriptions-item>
              <el-descriptions-item label="绝缘电阻(KΩ)">{{runtimeData.insulationResistance}}</el-descriptions-item>
              <el-descriptions-item label="总里程(km)">{{runtimeData.mileage}}</el-descriptions-item>
              <el-descriptions-item label="行车上电阶段">{{runtimeData.powerStatus}}</el-descriptions-item>
              <el-descriptions-item label="行车阶段">{{runtimeData.runStatus}}</el-descriptions-item>
              <el-descriptions-item label="最大SOC(%)">{{runtimeData.socMax}}</el-descriptions-item>
              <el-descriptions-item label="最小SOC(%)">{{runtimeData.socMin}}</el-descriptions-item>
              <el-descriptions-item label="系统电流(A)">{{runtimeData.systemCurrent}}</el-descriptions-item>
              <el-descriptions-item label="系统电压(V)">{{runtimeData.systemVoltage}}</el-descriptions-item>
              <el-descriptions-item label="车速(km/h)">{{runtimeData.vehicleSpeed}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">SOP功率能力</div>
            </el-divider>

            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="慢充SOP(A)">{{BmsSopData.acChargeSop}}</el-descriptions-item>
              <el-descriptions-item label="充电SOP(A)">{{BmsSopData.chargeSop}}</el-descriptions-item>
              <el-descriptions-item label="10秒放电SOP(A)">{{BmsSopData.dischargeSop10s}}</el-descriptions-item>
              <el-descriptions-item label="30秒放电SOP(A)">{{BmsSopData.dischargeSop30s}}</el-descriptions-item>
              <el-descriptions-item label="60秒放电SOP(A)">{{BmsSopData.dischargeSop60s}}</el-descriptions-item>
              <el-descriptions-item label="持续放电SOP(A)">{{BmsSopData.dischargeSopContinuous}}</el-descriptions-item>
              <el-descriptions-item label="放电融合SOP(A)">{{BmsSopData.dischargeSopTotal}}</el-descriptions-item>
              <el-descriptions-item label="10秒回馈SOP(A)">{{BmsSopData.regenSop10s}}</el-descriptions-item>
              <el-descriptions-item label="30秒回馈SOP(A)">{{BmsSopData.regenSop30s}}</el-descriptions-item>
              <el-descriptions-item label="60秒回馈SOP(A)">{{BmsSopData.regenSop60s}}</el-descriptions-item>
               <el-descriptions-item label="持续回馈SOP(A)">{{BmsSopData.regenSopContinuous}}</el-descriptions-item>
              <el-descriptions-item label="回馈融合SOP(A)">{{BmsSopData.regenSopTotal}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">温度</div>
            </el-divider>

            <el-descriptions title="" border column="4" label-width="240">
              <el-descriptions-item label="可充电储能子系统个数">{{subsystemTem.subsystemCount}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能子系统号">{{subsystemTem.subsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能温度探针个数">{{subsystemTem.tempProbeCount}}</el-descriptions-item>
              <el-descriptions-item label="各温度探针检测的温度值数组(℃)">{{subsystemTem.temperatureValues}}</el-descriptions-item>
              
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">电压</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="单体电池电压数组(V)">{{subsystemVol.batteryVoltages}}</el-descriptions-item>
              <el-descriptions-item label="本帧单体电池总数">{{subsystemVol.frameBatteryCount}}</el-descriptions-item>
              <el-descriptions-item label="本帧起始电池序号">{{subsystemVol.frameStartBatteryNo}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能子系统个数">{{subsystemVol.subsystemCount}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能装置电流(A)">{{subsystemVol.subsystemCurrent}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能子系统号">{{subsystemVol.subsystemNo}}</el-descriptions-item>
              <el-descriptions-item label="可充电储能装置电压(V)">{{subsystemVol.subsystemVoltage}}</el-descriptions-item>
              <el-descriptions-item label="单体电池总数">{{subsystemVol.totalBatteryCount}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">系统状态</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="电池循环次数">{{systemStatus.cycleCount}}</el-descriptions-item>
              <el-descriptions-item label="ON/A+/CC状态">{{systemStatus.onaaccStatus}}</el-descriptions-item>
              <el-descriptions-item label="继电器状态">{{systemStatus.relayStatus}}</el-descriptions-item>
              <el-descriptions-item label="系统复位次数">{{systemStatus.resetCount}}</el-descriptions-item>
              <el-descriptions-item label="2.5V采样电压(V)">{{systemStatus.sample25v}}</el-descriptions-item>
              <el-descriptions-item label="5V采样电压(V)">{{systemStatus.sample5v}}</el-descriptions-item>
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">整车数据</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="充电状态">{{vehicleData.chargingStatus}}</el-descriptions-item>
              <el-descriptions-item label="DC-DC状态">{{vehicleData.dcdcStatus}}</el-descriptions-item>
              <el-descriptions-item label="档位">{{vehicleData.gearPosition}}</el-descriptions-item>
              <el-descriptions-item label="绝缘电阻(kΩ)">{{vehicleData.insulationResistance}}</el-descriptions-item>
              <el-descriptions-item label="运行模式">{{vehicleData.operationMode}}</el-descriptions-item>
              <el-descriptions-item label="SOC电量百分比(%)">{{vehicleData.soc}}</el-descriptions-item>
              <el-descriptions-item label="总电流(A)">{{vehicleData.totalCurrent}}</el-descriptions-item>
              <el-descriptions-item label="累计里程(km)">{{vehicleData.totalMileage}}</el-descriptions-item>
              <el-descriptions-item label="总电压(V)">{{vehicleData.totalVoltage}}</el-descriptions-item>
              <el-descriptions-item label="车速(km/h)">{{vehicleData.vehicleSpeed}}</el-descriptions-item>
              <el-descriptions-item label="车辆状态">{{vehicleData.vehicleStatus}}</el-descriptions-item>
              
            </el-descriptions>
          </div>

          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">电压通道</div>
            </el-divider>
            <el-descriptions title="" border column="4" label-width="200">
              <el-descriptions-item label="通道编号">{{volChann.channelIndex}}</el-descriptions-item>
              <el-descriptions-item label="通道类型(RTP/RTN)">{{volChann.channelType}}</el-descriptions-item>
              <el-descriptions-item label="电压(V)">{{volChann.voltage}}</el-descriptions-item>
            </el-descriptions>
          </div>


          <div ref="refChart" class="chart-cont2" style="width: 100%;height: 400px;margin-top: 20px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
          <div ref="refChart1" class="chart-cont2" style="width: 100%;height: 400px;margin-top: 20px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
          
          
       

        </el-tab-pane>
        <el-tab-pane label="位置信息" style="padding: 25px;">
          <div id="container" style="width: 100%; height: 750px;"></div>
        </el-tab-pane>
        <el-tab-pane label="运行历史" style="padding: 25px;">
          <div ref="yxChart" class="chart-cont2" style="width: 100%;height: 400px;margin: 20px 0 30px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
          
          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-table 
              style="width:100%;margin-top: 10px;"
              :data="cflist"
              border
              stripe
            >
                <el-table-column label="充放电状态" min-width="100" align="center" prop="status" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="开始时间" min-width="180" align="center" prop="startTime" :show-overflow-tooltip="true" />
                <el-table-column label="结束时间" min-width="180" align="center" prop="endTime" :show-overflow-tooltip="true" />
                <el-table-column label="开始SOC" min-width="180" align="center" prop="startSoc" :show-overflow-tooltip="true" />
                <el-table-column label="结束SOC" min-width="180" align="center" prop="endSoc" :show-overflow-tooltip="true" />
                <el-table-column label="本次时长(h)" min-width="180" align="center" prop="durationHours" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="固件升级" style="padding: 25px;">
          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <!-- <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
            > -->

              <!--:on-success="handleSuc"
              :before-upload="beforeAvatarUpload"
              -->
              <el-upload
              drag
              :headers="{
                Authorization:Token
              }"
              :data="{version:1}"
              class="upload-demo"
              :action="uploadUrl"
              
            >

              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                文件拖拽到这儿 或者 <em>点击上传</em>
              </div>
              <!-- <template #tip>
                <div class="el-upload__tip">
                  jpg/png files with a size less than 500kb
                </div>
              </template> -->
            </el-upload>
          </div>
           

            <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
              <el-divider content-position="left" style="margin-bottom: 30px;">
                <div style="font-size: 18px;color: #278ed9;">操作历史</div>
              </el-divider>
            <el-table 
              style="width:100%;margin-top: 10px;"
              :data="cfddata"
              border
              stripe
            >
                <el-table-column label="文件名" min-width="100" align="center" prop="name" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="升级状态" min-width="180" align="center" prop="ksdate" :show-overflow-tooltip="true" />
                <el-table-column label="创建者" min-width="180" align="center" prop="enddate" :show-overflow-tooltip="true" />
                <el-table-column label="创建日期" min-width="180" align="center" prop="kssoc" :show-overflow-tooltip="true" />
                <el-table-column label="开始时间" min-width="180" align="center" prop="jssoc" :show-overflow-tooltip="true" />
                <el-table-column label="结束时间" min-width="180" align="center" prop="bctime" :show-overflow-tooltip="true" />
                <el-table-column label="描述" min-width="300" align="center" prop="bctime" :show-overflow-tooltip="true" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史数据">
          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-table :data="hisdata" style="width: 100%">
              <el-table-column prop="date" align="center" label="时间" width="150" />
              <el-table-column align="center" label="系统信息">
                <el-table-column align="center" prop="" label="总电压(V)" width="100" />
                <el-table-column align="center" prop="" label="总电流(A)" width="100" />
                <el-table-column align="center" prop="" label="SOC(%)" width="100" />
              </el-table-column>

              <el-table-column align="center" label="故障信息">
                <el-table-column align="center" prop="" label="故障等级1" width="100" />
                <el-table-column align="center" prop="" label="故障等级2" width="100" />
                <el-table-column align="center" prop="" label="故障等级3" width="100" />
              </el-table-column>
              <el-table-column align="center" label="单体电压极值信息">
                <el-table-column align="center" prop="" label="最高单体电压(V)" width="140" />
                <el-table-column align="center" prop="" label="最高单体位置" width="140" />
                <el-table-column align="center" prop="" label="最低单体电压(V)" width="140" />
                <el-table-column align="center" prop="" label="最低单体位置" width="140" />
                <el-table-column align="center" prop="" label="最大单体压差(V)" width="140" />
                <el-table-column align="center" prop="" label="平均单体电压(V)" width="140" />
              </el-table-column>
              <el-table-column align="center" label="单体温度极值信息">
                <el-table-column align="center" prop="" label="最高单体温度(℃)" width="140" />
                <el-table-column align="center" prop="" label="最高温度位置" width="140" />
                <el-table-column align="center" prop="" label="最低单体温度(℃)" width="140" />
                <el-table-column align="center" prop="" label="最低温度位置" width="140" />
                <el-table-column align="center" prop="" label="最高单体温差(℃)" width="140" />
                <el-table-column align="center" prop="" label="平均单体温度(℃)" width="140" />
              </el-table-column>

              <el-table-column align="center" prop="" label="继电器状态" width="280" />
              <el-table-column align="center" prop="" label="充放电状态" width="100" />
              <el-table-column align="center" prop="" label="系统状态" width="100" />
              <el-table-column align="center" prop="" label="加热状态" width="100" />

              <el-table-column align="center" prop="" label="高压检测1(V)" width="120" />
              <el-table-column align="center" prop="" label="高压检测2(V)" width="120" />
              <el-table-column align="center" prop="" label="高压检测3(V)" width="120" />
              <el-table-column align="center" prop="" label="高压检测4(V)" width="120" />
              <el-table-column align="center" prop="" label="粘连代码" width="100" />
              <el-table-column align="center" prop="" label="自检代码" width="100" />
              <el-table-column align="center" prop="" label="国标状态" width="100" />
              <el-table-column align="center" prop="" label="国标子状态" width="100" />
              <el-table-column align="center" prop="" label="常电电压(V)" width="120" />
              <el-table-column align="center" prop="" label="KeyOne(V)" width="100" />
              <el-table-column align="center" prop="" label="A+(V)" width="100" />
              <el-table-column align="center" prop="" label="CC阻值" width="100" />

              <el-table-column align="center" label="运行状态信息">
                <el-table-column align="center" prop="" label="CP占空比(%)" width="140" />
                <el-table-column align="center" prop="" label="CC2阻值(Ω)" width="140" />
                <el-table-column align="center" prop="" label="NTC1(℃)" width="140" />
                <el-table-column align="center" prop="" label="NTC2(℃)" width="140" />
                <el-table-column align="center" prop="" label="充电机输出电压(V)" width="200" />
                <el-table-column align="center" prop="" label="充电机输出电流(A)" width="200" />
                <el-table-column align="center" prop="" label="充电机通信状态" width="140" />
                <el-table-column align="center" prop="" label="绝缘度(Ω/V)" width="140" />
                <el-table-column align="center" prop="" label="绝缘检测Rp(kΩ)" width="140" />
                <el-table-column align="center" prop="" label="绝缘检测Rn(kΩ)" width="140" />
                <el-table-column align="center" prop="" label="休眠计时(min)" width="140" />
                <el-table-column align="center" prop="" label="休眠剩余时间(min)" width="140" />
                <el-table-column align="center" prop="" label="请求充电电压" width="140" />
                <el-table-column align="center" prop="" label="请求充电电流" width="140" />
                <el-table-column align="center" prop="" label="循环次数" width="140" />
                <el-table-column align="center" prop="" label="本次充电容量(Ah)" width="140" />
                <el-table-column align="center" prop="" label="本次放电容量(Ah)" width="140" />
                <el-table-column align="center" prop="" label="本次充电能量(KWh)" width="160" />
                <el-table-column align="center" prop="" label="本次放电能量(KWh)" width="160" />
                <el-table-column align="center" prop="" label="累计充电容量(Ah)" width="140" />
                <el-table-column align="center" prop="" label="累计放电容量(Ah)" width="140" />

                <el-table-column align="center" prop="" label="累计充电能量(KWh)" width="160" />
                <el-table-column align="center" prop="" label="累计充电容量(Ah)" width="140" />
                <el-table-column align="center" prop="" label="累计放电容量(Ah)" width="140" />
                <el-table-column align="center" prop="" label="累计充电能量(KWh)" width="160" />
                <el-table-column align="center" prop="" label="累计放电能量(KWh)" width="160" />

                <el-table-column align="center" prop="" label="本次充电时长(h)" width="140" />
                <el-table-column align="center" prop="" label="本次放电时长(h)" width="140" />
                <el-table-column align="center" prop="" label="本次运行时长(h)" width="140" />
                <el-table-column align="center" prop="" label="累计充电时长(h)" width="140" />
                <el-table-column align="center" prop="" label="累计放电时长(h)" width="140" />
                <el-table-column align="center" prop="" label="累计运行时长(h)" width="140" />
              </el-table-column>

               <el-table-column align="center" label="单体电压">
                <el-table-column align="center" prop="" label="最高单体电压#1(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#2(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#3(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#4(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#5(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#6(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#7(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#8(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#9(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#10(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#11(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#12(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#13(V)" width="160" />

                <el-table-column align="center" prop="" label="最高单体电压#14(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#15(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#16(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#17(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#18(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#19(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#20(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#21(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#22(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#23(V)" width="160" />
                <el-table-column align="center" prop="" label="最高单体电压#24(V)" width="160" />
              </el-table-column>

              <el-table-column align="center" label="单体温度">
                <el-table-column align="center" prop="" label="单体温度#1(℃)" width="140" />
                <el-table-column align="center" prop="" label="单体温度#2(℃)" width="140" />
                <el-table-column align="center" prop="" label="单体温度#3(℃)" width="140" />
                <el-table-column align="center" prop="" label="单体温度#4(℃)" width="140" />
                <el-table-column align="center" prop="" label="单体温度#5(℃)" width="140" />
                <el-table-column align="center" prop="" label="单体温度#6(℃)" width="140" />
              </el-table-column>
            </el-table>
          </div>
           
        </el-tab-pane>
        <!-- <el-tab-pane label="数据分析" style="padding: 25px;">数据分析</el-tab-pane> -->
        <el-tab-pane label="设备报表" style="padding: 25px;">
          <div style="width: 100%;margin-bottom: 30px;padding: 25px;border-radius: 12px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);">
            <el-divider content-position="left" style="margin-bottom: 30px;">
              <div style="font-size: 18px;color: #278ed9;">设备运行统计</div>
            </el-divider>
            <div style="display: flex;padding:0 0 25px 8px;font-size: 16px;">
              <div>客户：<span></span></div>
              <div style="padding: 0 25px;">时间：<span>2026-01-01 至 2026-01-10</span></div>
              <div style="padding: 0 25px;">运行:<span>0天</span></div>
              <div>电池:<span>JD1234544948446565</span></div>
            </div>
            <div style="display: flex;width:100%;justify-content: space-between;">
              <div class="contont" style="padding-bottom:10px;">
                  <div class="tit">统计</div>
                  <el-descriptions 
                    title="" 
                    border 
                    column="2" 
                    label-width="200"
                    direction="vertical"
                  >
                    <el-descriptions-item align="center" label="放电/Ah">12</el-descriptions-item>
                    <el-descriptions-item align="center" label="放电/小时">5</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/Ah">120</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/小时">7</el-descriptions-item>
                  </el-descriptions>
              </div>
              <div class="contont" style="border-color:#67c23a;">
                  <div class="tit" style="border-color:#67c23a;color:#67c23a;">日平均</div>
                  <el-descriptions 
                    title="" 
                    border 
                    column="2" 
                    label-width="200"
                    direction="vertical"
                  >
                    <el-descriptions-item align="center" label="放电/Ah">12</el-descriptions-item>
                    <el-descriptions-item align="center" label="放电/小时">5</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/Ah">120</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/小时">7</el-descriptions-item>
                  </el-descriptions>
              </div>
              <div class="contont" style="border-color:#e6a23c;">
                  <div class="tit" style="border-color:#e6a23c;color:#e6a23c;">日最大</div>
                  <el-descriptions 
                    title="" 
                    border 
                    column="2" 
                    label-width="200"
                    direction="vertical"
                  >
                    <el-descriptions-item align="center" label="放电/Ah">12</el-descriptions-item>
                    <el-descriptions-item align="center" label="放电/小时">5</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/Ah">120</el-descriptions-item>
                    <el-descriptions-item align="center" label="充电/小时">7</el-descriptions-item>
                  </el-descriptions>
              </div>
              
            </div>
            <div style="width: 100%;margin-top: 30px;">
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:16%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;text-align: center;">
                    <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #a6a928;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">最大持续运行</div>
                    <div style="height: 60px;line-height: 60px;font-size: 20px;color: #a6a928;">10Ah|2小时|10</div>
                  </div>
                  <div style="width:16%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;text-align: center;">
                    <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #3ac2b7;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">最小电量%</div>
                    <div style="height: 60px;line-height: 60px;font-size: 20px;color: #3ac2b7;">50</div>
                  </div>
                  <div style="width:16%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;text-align: center;">
                    <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #35afd5;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">最大放电Ah/KWh</div>
                    <div style="height: 60px;line-height: 60px;font-size: 20px;color: #35afd5;">0Ah/0kwh</div>
                  </div>
                  <div style="width:16%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;text-align: center;">
                    <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #a97614;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">最高温度℃</div>
                    <div style="height: 60px;line-height: 60px;font-size: 20px;color: #a97614;">50</div>
                  </div>
                  <div style="width:16%;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;text-align: center;">
                    <div style="width: 100%;height: 50px;line-height: 50px;font-size: 18px;color: #7dab12;border-radius: 10px 10px 0 0;border-bottom: 3px solid #ebf5ff;">循环次数</div>
                    <div style="height: 60px;line-height: 60px;font-size: 20px;color: #7dab12;">5</div>
                  </div>
                </div>
              </div>
              
              <div ref="dcyxChart" class="chart-cont2" style="width: 100%;height: 400px;margin-top: 20px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
              <div ref="dcnlztChart" class="chart-cont2" style="width: 100%;height: 400px;margin-top: 20px;padding:10px;border-radius: 10px;box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);background: #fff;"></div>
              
          </div>
          
          
        </el-tab-pane>
      </el-tabs>
     </el-dialog>
  

    <!-- 添加或修改BBOX管理对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="devicesRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备ID" prop="deviceId">
          <el-input v-model="form.deviceId" placeholder="请输入设备ID" />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备IP" prop="ipAddress">
          <el-input v-model="form.ipAddress" placeholder="请输入设备IP" />
        </el-form-item>
        <el-form-item label="固件版本号" prop="firmwareVersion">
          <el-input v-model="form.firmwareVersion" placeholder="请输入固件版本号" />
        </el-form-item>
        <el-form-item label="最后在线时间" prop="lastOnline">
          <el-date-picker clearable
            style="width: 100%;"
            v-model="form.lastOnline"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择最后在线时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Devices">
import { 
  listDevices, 
  getDevices, 
  delDevices, 
  addDevices, 
  updateDevices,
  getreadata,
  gethistory,
  getgjhis
 } from "@/api/devices/devices"

import { getToken } from '@/utils/auth'

import * as echarts from 'echarts'
import { nextTick } from "vue"

const { proxy } = getCurrentInstance()

const devicesList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deviceId: null,
    deviceName: null,
    deviceType: null,
    status: null,
    ipAddress: null,
    firmwareVersion: null,
    lastOnline: null,
  },
  rules: {
    deviceId: [
      { required: true, message: "设备ID不能为空", trigger: "blur" }
    ],
    deviceName: [
      { required: true, message: "设备名称不能为空", trigger: "blur" }
    ],
    deviceType: [
      { required: true, message: "设备类型不能为空", trigger: "change" }
    ],
    status: [
      { required: true, message: "设备状态不能为空", trigger: "change" }
    ],
    updateTime: [
      { required: true, message: "更新时间不能为空", trigger: "blur" }
    ],
    updateBy: [
      { required: true, message: "更新人不能为空", trigger: "blur" }
    ],
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
  }
})

const { queryParams, form, rules } = toRefs(data)

const Token = `Bearer ${getToken()}`
      
const uploadUrl = `${import.meta.env.VITE_APP_BASE_API}/iot/ota/upload` 

/** 查询BBOX管理列表 */
function getList() {
  loading.value = true
  listDevices(queryParams.value).then(response => {
    devicesList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    deviceId: null,
    deviceName: null,
    deviceType: null,
    status: null,
    ipAddress: null,
    firmwareVersion: null,
    lastOnline: null,
    updateTime: null,
    updateBy: null,
    createTime: null,
    createBy: null
  }
  proxy.resetForm("devicesRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加BBOX管理"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _id = row.id || ids.value
  getDevices(_id).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改BBOX管理"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["devicesRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateDevices(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addDevices(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除BBOX管理编号为"' + _ids + '"的数据项？').then(function() {
    return delDevices(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('devices/devices/export', {
    ...queryParams.value
  }, `devices_${new Date().getTime()}.xlsx`)
}

getList()


//展示详情
let detailspop = ref(false)
let ssdata = ref({})

//充电详情
let chargingDetails = ref({})

//单体电压/温度极值
let dtdywd = ref({})

let runtimeData = ref({})

let BmsSopData = ref({})

let subsystemTem = ref({})

let subsystemVol = ref({})

let systemStatus = ref({})

let vehicleData = ref({})

let volChann = ref({})

let latestLocation = ref({})

let devisd = ''
function shouxqpop(row) {
  devisd = row.deviceId
  detailspop.value = true   
  getreadata(devisd).then(rps => {    //'137PBP1M11001AFCF0000002'
    ssdata.value = rps.data
    chargingDetails.value = rps.data.chargeDetail?rps.data.chargeDetail:{}
    dtdywd.value = rps.data.extremeValues?rps.data.extremeValues:{}
    runtimeData.value = rps.data.runtimeData?rps.data.runtimeData:{}
    BmsSopData.value = rps.data.BmsSopData?rps.data.BmsSopData:{}
    subsystemTem.value = rps.data.subsystemTemperature?rps.data.subsystemTemperature:{}
    subsystemVol.value = rps.data.subsystemVoltage?rps.data.subsystemVoltage:{}
    systemStatus.value = rps.data.systemStatus?rps.data.systemStatus:{}
    vehicleData.value = rps.data.vehicleData?rps.data.vehicleData:{}

    volChann.value = rps.data.volChann?rps.data.volChann:{}

    latestLocation.value = rps.data.latestLocation?rps.data.latestLocation:{}

    let dydate = []
    let dyvalue = []

    if(rps.data.voltageTrend){
      dydate = rps.data.voltageTrend[0].points.map(n => {
        return n.time
      })

      dyvalue = rps.data.voltageTrend[0].points.map(n => {
        return n.value
      })
    }
     
    let wddate = []
    let wdvalue = []

    if(rps.data.temperatureTrend){
      wddate = rps.data.temperatureTrend[0].points.map(n => {
        return n.time
      })

      wdvalue = rps.data.temperatureTrend[0].points.map(n => {
        return n.value
      })
    }
    

     nextTick(()=> {
      setdcwdchart(refChart.value,dydate,dyvalue,'单体电压','#2363a5','V')
      setdcwdchart(refChart1.value,wddate,wdvalue,'单体温度','#2363a5','℃')
    
    })
  })
 
}

//故障信息
let guzdata = ref([
  {
    name:'自检故障',
    date:'2026-01-15 10:30:00'
  },
  {
    name:'粘连故障',
    date:'2026-01-17 10:30:00'
  }
])


const refChart = ref()
const refChart1 = ref()

const yxChart = ref()

const dcyxChart = ref()
const dcnlztChart = ref()


let myChart



function setdcwdchart(e,xdata,ydata,tit,tcol,dw) {

  if (e) {
        myChart = echarts.init(e)
        let option

        option = {
            title: {
                text: tit,
                left: 'center',
                textStyle: {
                    color: tcol,//'#2363a5',
                    fontSize: 16
                }
            },
            
             grid: {
                left: '3%',
                top:'10%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisPointer: {
                  type: "shadow",
                },
                data:xdata
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: `{value} ${dw}`,
                }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            series: [
                {
                  
                  data:ydata,
                  //symbol: 'none',
                  type: 'line',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  }
                }
            ]
        };

        option && myChart.setOption(option);
    }
}

//月充放时长
function cfdatechart(e,xdata,ydata,ydata1,tit,tcol,dw) {

  if(e){
        myChart = echarts.init(e)
        let option

        option = {
            title: {
                text: tit,
                left: 'center',
                textStyle: {
                    color: tcol,//'#2363a5',
                    fontSize: 16
                }
            },
            legend:{
              data:['充电','放电'],
              right:'10%'
            },
             grid: {
                left: '3%',
                top:'10%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisPointer: {
                  type: "shadow",
                },
                data:xdata
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: `{value} ${dw}`,
                }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            series: [
                {
                  name:'充电',
                  data:ydata,
                  //symbol: 'none',
                  type: 'bar',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  },
                  barWidth:'20px',
                  itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                      normal: {
                          //柱形图圆角，初始化效果
                          // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                          // 第三个值表示底部左下角，第四个值表示底部右下角
                          barBorderRadius:[20,20,0,0]
                      }
                  }
                },
                {
                  name:'放电',
                  data:ydata1,
                  //symbol: 'none',
                  type: 'bar',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  },
                  barWidth:'20px',
                  itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                      normal: {
                          //柱形图圆角，初始化效果
                          // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                          // 第三个值表示底部左下角，第四个值表示底部右下角
                          barBorderRadius:[20,20,0,0]
                      }
                  }
                }
            ]
        };

        option && myChart.setOption(option);
    }
}

//电池运行状态
function dcyxztchart(e,xdata,ydata,tit,tcol,dw) {

  if(e){
        myChart = echarts.init(e)
        let option

        option = {
            title: {
                text: tit,
                left: 'center',
                textStyle: {
                    color: tcol,//'#2363a5',
                    fontSize: 16
                }
            },
            legend:{
              data:['充电','放电'],
              right:'10%'
            },
             grid: {
                left: '3%',
                top:'10%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisPointer: {
                  type: "shadow",
                },
                data:xdata
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: `{value} ${dw}`,
                }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            series: [
                {
                  name:'充电',
                  data:ydata,
                  //symbol: 'none',
                  type: 'bar',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  },
                  barWidth:'20px',
                  itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                      normal: {
                          //柱形图圆角，初始化效果
                          // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                          // 第三个值表示底部左下角，第四个值表示底部右下角
                          barBorderRadius:[20,20,0,0]
                      }
                  }
                },
                {
                  name:'放电',
                  data:ydata,
                  //symbol: 'none',
                  type: 'bar',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  },
                  barWidth:'20px',
                  itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                      normal: {
                          //柱形图圆角，初始化效果
                          // 第一个值表示顶部的左上角，第二个值表示顶部右上角
                          // 第三个值表示底部左下角，第四个值表示底部右下角
                          barBorderRadius:[20,20,0,0]
                      }
                  }
                }
            ]
        };

        option && myChart.setOption(option);
    }
}
//电池能量状态
function dcnlztchart(e,xdata,ydata,tit,tcol,dw) {

  if(e){
        myChart = echarts.init(e)
        let option

        option = {
            title: {
                text: tit,
                left: 'center',
                textStyle: {
                    color: tcol,//'#2363a5',
                    fontSize: 16
                }
            },
            legend:{
              data:['充电','放电'],
              right:'10%'
            },
             grid: {
                left: '3%',
                top:'10%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisPointer: {
                  type: "shadow",
                },
                data:xdata
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: `{value} KWh`,
                }
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                crossStyle: {
                  color: "#999",
                },
              },
            },
            series: [
                {
                  name:'充电',
                  data:ydata,
                  //symbol: 'none',
                  type: 'line',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  }
                },
                {
                  name:'放电',
                  data:ydata,
                  //symbol: 'none',
                  type: 'line',
                  //smooth: true,
                  seriesLayoutBy: 'row',
                  emphasis: { focus: 'series' },
                  endLabel: {
                    show: true,
                    formatter: '{a}',
                    distance: 2000
                  }
                }
            ]
        };

        option && myChart.setOption(option);
    }
}

//位置信息
    //function positionmap() {
    // let map = new qq.maps.Map(document.getElementById('container'),{
    //     center: new qq.maps.LatLng(39.916527,116.397128),
    //     zoom: 13
    // })

    // //设置标记
    // let marker = new qq.maps.Marker({
    //     position:new qq.maps.LatLng(39.916527,116.397128), 
    //     map:map
    // });
    // //marker.setPosition(event.latLng)
    // //添加监听事件  获取鼠标点击事件
    // qq.maps.event.addListener(map, 'click', function(event) {
    //     state.value = ''
    //     lat.value = event.latLng.lat.toFixed(6)
    //     lng.value = event.latLng.lng.toFixed(6)    
    //     // if(!marker) {
    //     //     marker = new qq.maps.Marker({
    //     //         position:event.latLng, 
    //     //         map:map
    //     //     });
    //     //     return
    //     // }
    //     marker.setPosition(event.latLng)
    // })
    //}

    function addmarker() {

        //初始化地图
        let map = new TMap.Map('container', {
            center: new TMap.LatLng(latestLocation.value.latitude, latestLocation.value.longitude)//设置中心点坐标
        })

        //初始化marker
        let marker = new TMap.MultiMarker({
            id: 'marker-layer',
            map: map,
            styles: {
                marker: new TMap.MarkerStyle({
                  width: 25,
                  height: 35,
                  anchor: { x: 16, y: 32 },
                  //src:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
                })
            },
            geometries: [
              {
                id: 1,
                styleId: 'marker',
                position: new TMap.LatLng(latestLocation.value.latitude, latestLocation.value.longitude),
                properties: {
                  title: 'marker1'
                },
                src:'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
              }, 
              // {
              //   id: 2,
              //   styleId: 'marker',
              //   position: new TMap.LatLng(39.994104, 116.287503),
              //   properties: {
              //     title: 'marker2'
              //   }
              // }, 
              // {
              //   id: 3,
              //   styleId:'marker',
              //   position: new TMap.LatLng(39.984104, 116.307503),
              //   properties: {
              //     title: 'marker3'
              //   }
              // }
            ]
        })

        // marker.on('click', (v) => {
        //   dcdrawer.value = true
        //   nextTick(() => {
        //     positionmap()
        //   })
          
        //   console.log(v)
        // })

}

//充放明细
let cflist = ref([])
  function tabclick(n) {
    if(n.index == 1){
      nextTick(() => {
        addmarker()
      })
      
    }else if(n.index == 2){
       //月充放时长
       gethistory(devisd).then(rps => {
          let date = rps.data.months.map(n => {
            return n.month
          })

          let chargeHours = rps.data.months.map(n => {
            return n.chargeHours
          })
          
          let dischargeHours = rps.data.months.map(n => {
            return n.dischargeHours
          })

          cflist.value = rps.data.records?rps.data.records:[]

          nextTick(() => {
            cfdatechart(yxChart.value,date,chargeHours,dischargeHours,'月充放时长','#2363a5','h')
          })
       })
       
     }else if(n.index == 3){
      //获取上传固件记录
      getgjhis(1).then(rps => {

      })
     }else if(n.index == 5){
      //月充放时长
       nextTick(() => {
         dcyxztchart(dcyxChart.value,['2025-02','2025-03','2025-04','2025-05','2025-06','2025-07','2025-08','2025-09','2025-10','2025-11','2025-12','2026-01'],[60,80,76,90,89,79,100,95,60,80,76,90,],'电池运行状态','#2363a5','h')
         dcnlztchart(dcnlztChart.value,['2025-02','2025-03','2025-04','2025-05','2025-06','2025-07','2025-08','2025-09','2025-10','2025-11','2025-12','2026-01'],[60,80,76,90,89,79,100,95,60,80,76,90,],'电池能量状态','#2363a5','h')
          
        })
     }
  }

  //充放电



  let cfddata = ref([
    {
      name:'充电',
      ksdate:'2026-01-10 15:30:00',
      enddate:'2026-01-10 23:30:00',
      kssoc:'30%',
      jssoc:'100%',
      bctime:'5'
    },
    {
      name:'充电',
      ksdate:'2026-01-10 15:30:00',
      enddate:'2026-01-10 23:30:00',
      kssoc:'30%',
      jssoc:'100%',
      bctime:'5'
    },
    {
      name:'充电',
      ksdate:'2026-01-10 15:30:00',
      enddate:'2026-01-10 23:30:00',
      kssoc:'30%',
      jssoc:'100%',
      bctime:'5'
    }
  ])

  //历史数据
  let hisdata = ref([])
</script>
<style scoped>
  .contont{
        width: 30%;
        border-radius: 15px;
        border: 3px double #337ecc;
        /* background: #fff; */
        box-shadow: 0 0 20px -5px rgba(84, 151, 232, 0.5);
    }
    .tit{
        display: flex;
        width: 100%;
        height: 50px;
        align-items: center;
        justify-content: center;
        margin:  0 auto;
        /* line-height: 50px; */
        text-align: center;
        font-size: 20px;
        color: #3ba7df;
        border-radius:15px 15px 0 0;
        background: #fff;
        border-bottom: 2px dashed #3ba7df;
    }
</style>