<template>
    <div class="content">
        <div class="search-box">
                <div class="search-item">
                    <!-- 设备名称 -->
                    <span>{{$t('message.towerCrane.equipmentName')}}：</span>
                    <el-select style="margin-right: 20px" v-model="devSn" size="medium" :placeholder="$t('message.towerCrane.pleaseSelect')">
                        <el-option
                        v-for="item in devList"
                        :key="item.id"
                        :label="item.devName"
                        :value="item.devSn">
                        </el-option>
                    </el-select>
                    <el-date-picker
                            class="serarch_picker"
                            size="medium"
                            v-model="valueTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            range-separator="-"
                            :start-placeholder="$t('message.towerCrane.startDate')"
                            :end-placeholder="$t('message.towerCrane.endDate')">
                    </el-date-picker>
                </div>
                <!-- <div class="search-item">
                    <el-date-picker
                        size="medium"
                        v-model="timeList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div> -->
                <!-- 查询 -->
                <el-button size="medium" @click="quertData">{{$t('message.towerCrane.query')}}</el-button>
                <!-- 刷新 -->
                <el-button size="medium" @click="refresh">{{$t('message.towerCrane.refresh')}}</el-button>
                <!-- 导出 -->
                <el-button size="medium" @click="exportExcel">{{$t('message.towerCrane.export')}}</el-button>
            </div>
            <div class="table-box">
                <el-table
                    :data="tableData"
                    class="tables"
                    height="560"
                    style="width: 100%">
                    <!-- 设备信息 -->
                    <el-table-column
                        :label="$t('message.towerCrane.equipmentInformation')"
                        width="400"
                    >
                        <template slot-scope="scope">
                           <div class="table-list">
                               <div class="table-item">
                                   <!-- 设备名称 -->
                                   {{$t('message.towerCrane.equipmentName')}}：{{ scope.row.devName }}
                               </div>
                               <div class="table-item">
                                   <!-- 设备编号 -->
                                   {{$t('message.towerCrane.equipmentNumber')}}：{{ scope.row.devSn }}
                               </div>
                               <div class="table-item">
                                   <!-- 司机姓名 -->
                                   {{$t('message.towerCrane.driverName')}}：{{ scope.row.driverName }}
                               </div>
                               <div class="table-item">
                                   <!-- 司机身份证号 -->
                                   {{$t('message.towerCrane.driverIdNumber')}}：{{ scope.row.driverIdCard }}
                               </div>
                               <div class="table-item">
                                   <!-- 角度 -->
                                   {{$t('message.towerCrane.angle')}}：{{ scope.row.angle }}°
                               </div>
                               <div class="table-item">
                                   <!-- 高度 -->
                                   {{$t('message.towerCrane.height')}}：{{ scope.row.height }}m
                               </div>
                               <div class="table-item">
                                   <!-- 载重比 -->
                                   {{$t('message.towerCrane.loadRatio')}}：{{ scope.row.loadRatio }}%
                               </div>
                               <div class="table-item">
                                   <!-- 载重 -->
                                   {{$t('message.towerCrane.load')}}：{{ scope.row.loading }}kg
                               </div>
                               <div class="table-item">
                                   <!-- 倾角 -->
                                   {{$t('message.towerCrane.dipAngle')}}：{{ scope.row.obliguity }}°
                               </div>
                               <div class="table-item">
                                   <!-- 倾角X -->
                                   	{{$t('message.towerCrane.dipAngle')}}X：{{ scope.row.obliguityX }}°
                               </div>
                               <div class="table-item">
                                   <!-- 倾角Y -->
                                   	{{$t('message.towerCrane.dipAngle')}}Y：{{ scope.row.obliguityY }}°
                               </div>
                               <div class="table-item">
                                   <!-- 幅度 -->
                                   	{{$t('message.towerCrane.range')}}：{{ scope.row.ranger }}m
                               </div>
                               <div class="table-item">
                                   <!-- 倍率 -->
                                   	{{$t('message.towerCrane.magnificationTwo')}}：{{ scope.row.rate }}
                               </div>
                               <div class="table-item">
                                   <!-- 数据接收时间 -->
                                   	{{$t('message.towerCrane.dataReceivingTime')}}：{{ scope.row.reciveTime }}
                               </div>
                               <div class="table-item">
                                   <!-- 力矩 -->
                                   	{{$t('message.towerCrane.moment')}}：{{ scope.row.torque }}kg.m
                               </div>
                               <div class="table-item">
                                   <!-- 力矩比 -->
                                   	{{$t('message.towerCrane.torqueRatio')}}：{{ scope.row.torqueRatio }}%
                               </div>
                               <div class="table-item">
                                   <!-- 风速 -->
                                   	{{$t('message.towerCrane.windSpeed')}}：{{ scope.row.windspeed }}m/s
                               </div>
                                <div class="table-item">
                                    <!-- 回转状态 -->
                                    <!-- 向右回转  向左回转   停止回转 -->
                                   	{{$t('message.towerCrane.rotaryState')}}：{{ scope.row.angleDirection == 1 ? $t('message.towerCrane.swingRight'): scope.row.angleDirection == 2 ? $t('message.towerCrane.swingLeft'):$t('message.towerCrane.stopTurning') }}
                               </div>
                               <div class="table-item">
                                   <!-- 起升状态 -->
                                   <!-- 向下落勾  向上起勾   停止升降 -->
                                   	{{$t('message.towerCrane.liftingState')}}：{{ scope.row.heightDirection == 1 ? $t('message.towerCrane.liftingState1'): scope.row.heightDirection == 2 ? $t('message.towerCrane.liftingState2'):$t('message.towerCrane.liftingState3') }}
                               </div>
                               <div class="table-item">
                                   <!-- 变幅状态 -->
                                   <!-- 向外变幅  向内变幅   停止变幅 -->
                                   	{{$t('message.towerCrane.luffingState')}}：{{ scope.row.rangeDirection == 1 ? $t('message.towerCrane.luffingState1'): scope.row.rangeDirection == 2 ? $t('message.towerCrane.luffingState2'):$t('message.towerCrane.luffingState3') }}
                               </div>
                           </div>
                        </template>
                    </el-table-column>

                    <!-- 报警信息 -->
                    <el-table-column
                        :label="$t('message.towerCrane.alarmInformation')"
                        >
                        <template slot-scope="scope">
                            <div class="table-list f-2">
                                <div class="table-item">
                                    <!-- 禁入区报警 -->
                                    <!-- '报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo1')}}：
                                    <span :style="{'color': scope.row.forbidEntryAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidEntryAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 禁入区左转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo2')}}：
                                    <span :style="{'color': scope.row.forbidEntryNegAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidEntryNegAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 禁入区右转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo3')}}：
                                    <span :style="{'color': scope.row.forbidEntryPosAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidEntryPosAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- A类禁吊区域报警 -->
                                    <!-- '区域报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo4')}}：
                                    <span :style="{'color': scope.row.forbidSuspend2Alarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend2Alarm ? scope.row.forbidSuspend2Alarm+ $t('message.towerCrane.areaAlarm') :$t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- A类禁吊区左转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo5')}}：
                                    <span :style="{'color': scope.row.forbidSuspend2NegAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend2NegAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- A类禁吊区右转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo6')}}：
                                    <span :style="{'color': scope.row.forbidSuspend2PosAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend2PosAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- A类禁吊区向外变幅报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo7')}}：
                                    <span :style="{'color': scope.row.forbidSuspend2OutAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend2OutAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- B类禁吊区域报警 -->
                                    <!-- '区域报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo8')}}：
                                    <span :style="{'color': scope.row.forbidSuspend4Alarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend4Alarm ? scope.row.forbidSuspend4Alarm+ $t('message.towerCrane.areaAlarm') :$t('message.towerCrane.normal')}}</span>
                                </div>
                                <div class="table-item">
                                    <!-- B类禁吊区左转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo9')}}：
                                    <span :style="{'color': scope.row.forbidSuspend4NegAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend4NegAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- B类禁吊区右转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo10')}}：
                                    <span :style="{'color': scope.row.forbidSuspend4PosAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend4PosAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal')}}</span>
                                </div>
                                <div class="table-item">
                                    <!-- B类禁吊区向外变幅报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo11')}}：
                                    <span :style="{'color': scope.row.forbidSuspend4OutAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend4OutAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- B类禁吊区向内变幅报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.callPoliceInfo12')}}：
                                    <span :style="{'color': scope.row.forbidSuspend4BackAlarm == 1 ? '#F56C6C':''}">{{ scope.row.forbidSuspend4BackAlarm ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 高度上限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text2')}}：
                                    <span :style="{'color': scope.row.heightAlarm == 1 ? '#F56C6C':''}">{{ scope.row.heightAlarm == 1 ? $t('message.towerCrane.callThePolice') : scope.row.heightAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 高度下限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text3')}}：
                                    <span :style="{'color': scope.row.heightLowerAlarm == 1 ? '#F56C6C':''}">{{ scope.row.heightLowerAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.heightLowerAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 幅度外限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text4')}}：
                                    <span :style="{'color': scope.row.maxRangeAlarm == 1 ? '#F56C6C':''}">{{ scope.row.maxRangeAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.maxRangeAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 幅度内限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text5')}}：
                                    <span :style="{'color': scope.row.minRangeAlarm == 1 ? '#F56C6C':''}">{{ scope.row.minRangeAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.minRangeAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 力矩报警 -->
                                    <!-- 报警  预警  正常 -->
                                    <span :style="{'color': scope.row.momentAlarm == 1 ? '#F56C6C':''}">{{$t('message.towerCrane.text6')}}：{{ scope.row.momentAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.momentAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 多机防撞报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.text7')}}：
                                    <span :style="{'color': scope.row.multiAlarmAll == 1 ? '#F56C6C':''}">{{ scope.row.multiAlarmAll == 1 ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 多机防撞向内变幅报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.allPoliceInfo13')}}：
                                    <span :style="{'color': scope.row.multiBackAlarm == 1 ? '#F56C6C':''}">{{ scope.row.multiBackAlarm == 1 ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 多机防撞左转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.allPoliceInfo14')}}：
                                   <span :style="{'color': scope.row.multiNegAlarm == 1 ? '#F56C6C':''}">{{ scope.row.multiNegAlarm == 1 ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 多机防撞向外变幅报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.allPoliceInfo15')}}：
                                    <span :style="{'color': scope.row.multiOutAlarm == 1 ? '#F56C6C':''}">{{ scope.row.multiOutAlarm == 1 ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 多机防撞右转报警 -->
                                    <!-- 报警':'正常' -->
                                    {{$t('message.towerCrane.allPoliceInfo16')}}：
                                   <span :style="{'color': scope.row.multiPosAlarm == 1 ? '#F56C6C':''}">{{ scope.row.multiPosAlarm == 1 ? $t('message.towerCrane.callThePolice') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 逆时针回转限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text8')}}：
                                    <span :style="{'color': scope.row.negAngleAlarm == 1 ? '#F56C6C':''}">{{ scope.row.negAngleAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.negAngleAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 倾角报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text9')}}：
                                    <span :style="{'color': scope.row.obliguityAlarm == 1 ? '#F56C6C':''}">{{ scope.row.obliguityAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.obliguityAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 倾角X报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.allPoliceInfo17')}}：
                                    <span :style="{'color': scope.row.obliguityXAlarm == 1 ? '#F56C6C':''}">{{ scope.row.obliguityXAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.obliguityXAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 倾角Y报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.allPoliceInfo18')}}：
                                    <span :style="{'color': scope.row.obliguityYAlarm == 1 ? '#F56C6C':''}">{{ scope.row.obliguityYAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.obliguityYAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 顺时针回转限位报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text10')}}：
                                    <span :style="{'color': scope.row.posAngleAlarm == 1 ? '#F56C6C':''}">{{ scope.row.posAngleAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.posAngleAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                                <div class="table-item">
                                    <!-- 风速报警 -->
                                    <!-- 报警  预警  正常 -->
                                    {{$t('message.towerCrane.text12')}}：
                                    <span :style="{'color': scope.row.windSpeedAlarm == 1 ? '#F56C6C':''}">{{ scope.row.windSpeedAlarm == 1 ? $t('message.towerCrane.callThePolice'): scope.row.windSpeedAlarm == 2 ? $t('message.towerCrane.earlyWarning') : $t('message.towerCrane.normal') }}</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- 故障信息 -->
                    <el-table-column
                        label="故障信息"
                        width="300"
                        >
                        <template slot-scope="scope">
                           <div class="table-list">
                               <div class="table-item">
                                   <!-- 角度传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                   {{$t('message.towerCrane.faultInfo1')}}：
                                   <span :style="{'color': scope.row.angleError ? '#F56C6C':''}">{{ scope.row.angleError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- GPS故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo6')}}：
                                    <span :style="{'color': scope.row.gpsError ? '#F56C6C':''}">{{ scope.row.gpsError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 高度传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo7')}}：
                                    <span :style="{'color': scope.row.heightError ? '#F56C6C':''}">{{ scope.row.heightError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 身份识别模块故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo8')}}：
                                    <span :style="{'color': scope.row.idError ? '#F56C6C':''}">{{ scope.row.idError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 有无任何外设故障 -->
                                   <!-- "无任何外设故障" : "有外设故障" -->
                                    {{$t('message.towerCrane.faultInfo9')}}：
                                    {{ scope.row.noError ? $t('message.towerCrane.faultInfo4'):$t('message.towerCrane.faultInfo5') }}
                               </div>
                               <div class="table-item">
                                   <!-- 倾角传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo10')}}：
                                    <span :style="{'color': scope.row.obliguityError ? '#F56C6C':''}">{{ scope.row.obliguityError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 幅度传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo11')}}：
                                    <span :style="{'color': scope.row.rangeError ? '#F56C6C':''}">{{ scope.row.rangeError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 载重传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo12')}}：
                                    <span :style="{'color': scope.row.weightError ? '#F56C6C':''}">{{ scope.row.weightError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                               <div class="table-item">
                                   <!-- 风速传感器故障 -->
                                   <!-- "有故障":"无故障" -->
                                    {{$t('message.towerCrane.faultInfo13')}}：
                                   <span :style="{'color': scope.row.windSpeedError ? '#F56C6C':''}"> {{ scope.row.windSpeedError ? $t('message.towerCrane.faultInfo2'):$t('message.towerCrane.faultInfo3') }}</span>
                               </div>
                           </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pagerBox"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="$store.state.PAGESIZRS"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                     :total="Number(total)"

                    background
                ></el-pagination>
            </div>
    </div>
</template>

<script>
import moment from "moment";
import {
  getTowerListApi,
  getTowerCurrentDataListApi
} from "@/assets/js/api/towerCrane";
export default {
    props:['sn'],
    data(){
        return{
            devSn: "",
            projectSn: "",
            devList:[],
            tableData:[],
            pageNo: 1,
            pageSize: 10,
            total: 0,
            timeList: "",
            startTime: "",
            endTime: "",
            valueTime:''
        }
    },
    created(){
        this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
        this.startTime = this.endTime = moment(new Date()).format('YYYY-MM-DD')
        console.log(this.startTime, this.endTime)
        this.selectNowDate()
        this.queryDev()
        this.queryTowerCurrentDataList()
    },
    computed:{
        transformTimestamp(){
            return function(timestamp){
                if(timestamp){
                    let a = new Date(timestamp).getTime();
                    const date = new Date(a);
                    const Y = date.getFullYear() + '-';
                    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                    const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                    const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                    const s = date.getSeconds() ; // 秒
                    const dateString = Y + M + D + h + m + s;
                    return dateString;
                }
            }
        },
        transformTimestamp2(){
            return function(timestamp){
                if(timestamp){
                    let a = new Date(timestamp).getTime();
                    const date = new Date(a);
                    const Y = date.getFullYear() + '-';
                    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                    const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate());
                    const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                    const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                    const s = date.getSeconds() ; // 秒
                    const dateString = Y + M + D;
                    return dateString;
                }
            }
        },
    },
    methods:{
        // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
        selectNowDate(){
			var date = new Date(),
			year = date.getFullYear(),
			month = date.getMonth() + 1,
			day = date.getDate(),
            hours = date.getHours(), //获取当前小时数(0-23)
            minutes = date.getMinutes(),//获取当前分钟数(0-59)
            seconds = date.getSeconds()
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			day >= 0 && day <= 9 ? (day = "0" + day) : "";
            hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
            minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
            seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
			var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
            // var timer = year + '-' + month + '-' + day
            this.valueTime = [timer.split(' ')[0]+' 00:00:00',timer]
			console.log(timer)
			// return timer;
		},
        queryDev(){
            getTowerListApi({projectSn: this.projectSn}).then(res=>{
                // console.log(res)
                if(res.code == 200 && res.result){
                    this.devList = res.result
                }
            })
        },
        //刷新
        refresh(){
            this.pageNo = 1
            this.pageSize = 10
            this.devSn = ''
            this.valueTime = ''
            this.queryTowerCurrentDataList()
        },
        quertData(){
            this.pageNo = 1
            this.pageSize = 10
            console.log(this.devSn)
            this.queryTowerCurrentDataList()
        },
        queryTowerCurrentDataList(){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let data = {
                devSn: this.devSn,
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                projectSn: this.projectSn,
                startTime:this.valueTime?this.valueTime[0]:"",
                endTime:this.valueTime?this.valueTime[1]:""
            }
            console.log(data);
            getTowerCurrentDataListApi(data).then(res=>{
                console.log(res)
                if(res.code == 200 && res.result){
                    this.tableData = res.result.records
                    this.total = res.result.total
                    loading.close();
                }
            })
        },
        handleSizeChange(value){
            this.pageSize=value;
            this.queryTowerCurrentDataList()
        },
        handleCurrentChange(value){
            this.pageNo=value;
            this.queryTowerCurrentDataList()
        },
        exportExcel(){
            if(this.valueTime){
                window.location.href =
                    this.$http.defaults.baseURL +
                    "xmgl/download/exporExcelTowerCurrentData?projectSn=" + this.projectSn +
                    "&devSn=" + this.devSn + "&startTime=" + this.valueTime[0] + "&endTime=" + this.valueTime[1];
            }else {
                window.location.href =
                    this.$http.defaults.baseURL +
                    "xmgl/download/exporExcelTowerCurrentData?projectSn=" + this.projectSn +
                    "&devSn=" + this.devSn;
            }
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    display: flex;
    flex-direction: column;
    height: 100%;
    .search-box{
        background: #fff;
        padding: 25px;
        margin-bottom: 14px;
        .search-item{
            display: inline-block;
            margin-right: 26px;
        }
    }
    .table-box{
        flex: 1;
        background: #fff;
        /deep/.el-table{
            td{
                vertical-align: top;
            }
            .cell{
                padding-left: 44px;
            }
        }
        .f-2{
            display: flex;
            flex-wrap: wrap;
            .table-item{
                width: 50%
            }
        }
    }
}
</style>
