zhgdyun/src/views/projectFront/towerCrane/workCycleTable.vue

<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"
          clearable
          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>
      <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="700"
        style="width: 100%"
      >
        <!-- 设备司机信息 -->
        <el-table-column
          :label="$t('message.towerCrane.equipmentDriverInfo')"
          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>
          </template>
        </el-table-column>
        <!-- 工作循环数据 -->
        <el-table-column :label="$t('message.towerCrane.dutyCycleData')">
          <template slot-scope="scope">
            <div class="table-list f-2">
              <div class="table-item">
                <!-- 工作循环开始时间 -->
                {{ $t('message.towerCrane.dutyCycleStartTime') }}：{{
                  scope.row.startTime
                }}
              </div>
              <div class="table-item">
                <!-- 工作循环结束时间 -->
                {{ $t('message.towerCrane.dutyCycleEndTime') }}：{{
                  scope.row.endTime
                }}
              </div>
              <div class="table-item">
                <!-- 工作循环持续时长 -->
                {{ $t('message.towerCrane.dutyCycleDuration') }}：{{
                  scope.row.workTime
                }}s
              </div>
              <div class="table-item">
                <!-- 工作循环最大载重 -->
                {{ $t('message.towerCrane.maxDutyCycleLoad') }}：{{
                  scope.row.loading
                }}kg
              </div>
              <div class="table-item">
                <!-- 工作循环最大角度 -->
                {{ $t('message.towerCrane.maxAngleDutyCycle') }}：{{
                  scope.row.maxAngle
                }}°
              </div>
              <div class="table-item">
                <!-- 工作循环最小角度 -->
                {{ $t('message.towerCrane.minAngleDutyCycle') }}：{{
                  scope.row.minAngle
                }}°
              </div>
              <div class="table-item">
                <!-- 工作循环最大高度 -->
                {{ $t('message.towerCrane.maxHeightDutyCycle') }}：{{
                  scope.row.maxHeight
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环最小高度 -->
                {{ $t('message.towerCrane.minHeightDutyCycle') }}：{{
                  scope.row.minHeight
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环最大幅度 -->
                {{ $t('message.towerCrane.maxAmpDutyCycle') }}：{{
                  scope.row.maxRange
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环最小幅度 -->
                {{ $t('message.towerCrane.minAmpDutyCycle') }}：{{
                  scope.row.minRange
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环开始高度 -->
                {{ $t('message.towerCrane.cycleStartHeight') }}：{{
                  scope.row.slingStartHeight
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环结束高度 -->
                {{ $t('message.towerCrane.cycleEndHeight') }}：{{
                  scope.row.slingEndHeight
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环开始幅度 -->
                {{ $t('message.towerCrane.startRange') }}：{{
                  scope.row.slingStartRange
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环结束幅度 -->
                {{ $t('message.towerCrane.endRange') }}：{{
                  scope.row.slingEndRange
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环开始角度 -->
                {{ $t('message.towerCrane.startAngle') }}：{{
                  scope.row.slingStartRotation
                }}°
              </div>
              <div class="table-item">
                <!-- 工作循环结束角度 -->
                {{ $t('message.towerCrane.endAngle') }}：{{
                  scope.row.slingEndRotation
                }}°
              </div>
              <div class="table-item">
                <!-- 工作循环最大载重比 -->
                {{ $t('message.towerCrane.maxLoadRatio') }}：{{
                  scope.row.peakLoad
                }}
              </div>
              <div class="table-item">
                <!-- 工作循环最大风速 -->
                {{ $t('message.towerCrane.maxWindSpeed') }}：{{
                  scope.row.maxWindSpeed
                }}m/s
              </div>
              <div class="table-item">
                <!-- 工作循环中最大力矩 -->
                {{ $t('message.towerCrane.maxMoment') }}：{{
                  scope.row.workMaxForce
                }}kg·m
              </div>
              <div class="table-item">
                <!-- 工作循环最大力矩百分比 -->
                {{ $t('message.towerCrane.maxMomentPercentage') }}：{{
                  scope.row.workMaxTorque
                }}%
              </div>
              <div class="table-item">
                <!-- 工作循环最大力矩时的幅度 -->
                {{ $t('message.towerCrane.maxRange') }}：{{
                  scope.row.workMaxTorqueRange
                }}m
              </div>
              <div class="table-item">
                <!-- 工作循环倍率 -->
                {{ $t('message.towerCrane.dutyCycleRatio') }}：{{
                  scope.row.workMultiple
                }}
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- 工作循环报警信息 -->
        <el-table-column
          :label="$t('message.towerCrane.DutyCycleAlarmInfo')"
          width="350"
        >
          <template slot-scope="scope">
            <div class="table-list">
              <div class="table-item">
                <!-- 防碰撞报警 -->
                <!-- '报警':'正常' -->
                {{ $t('message.towerCrane.antiCollisionAlarm') }}：
                <span
                  :style="{
                    color: scope.row.workEnvironmentAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workEnvironmentAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 高度上限位报警 -->
                {{ $t('message.towerCrane.text2') }}：
                <span
                  :style="{ color: scope.row.workHeightAlarm ? '#F56C6C' : '' }"
                  >{{
                    scope.row.workHeightAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 高度下限位报警 -->
                <!-- '报警':'正常' -->
                {{ $t('message.towerCrane.text3') }}：
                <span
                  :style="{
                    color: scope.row.workHeightLowerAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workHeightLowerAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 幅度外限位报警 -->
                {{ $t('message.towerCrane.text4') }}：
                <span
                  :style="{
                    color: scope.row.workMaxRangeAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workMaxRangeAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 幅度内限位报警 -->
                <!-- '报警':'正常' -->
                {{ $t('message.towerCrane.text5') }}：
                <span
                  :style="{
                    color: scope.row.workMinRangeAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workMinRangeAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 力矩报警 -->
                <!-- '预警'  '报警':'正常' -->
                {{ $t('message.towerCrane.text6') }}：
                <span
                  :style="{ color: scope.row.workMomentAlarm ? '#F56C6C' : '' }"
                  >{{
                    scope.row.workMomentPreAlarm
                      ? $t('message.towerCrane.earlyWarning')
                      : scope.row.workMomentAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 多机防撞报警 -->
                {{ $t('message.towerCrane.text7') }}：
                <span
                  :style="{ color: scope.row.workMultiAlarm ? '#F56C6C' : '' }"
                  >{{
                    scope.row.workMultiAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 逆时针回转限位报警 -->
                {{ $t('message.towerCrane.text8') }}：
                <span
                  :style="{
                    color: scope.row.workNegAngleAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workNegAngleAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 倾角报警 -->
                {{ $t('message.towerCrane.text9') }}：
                <span
                  :style="{
                    color: scope.row.workObliguityAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workObliguityAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 顺时针回转限位报警 -->
                {{ $t('message.towerCrane.text10') }}：
                <span
                  :style="{
                    color: scope.row.workPosAngleAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workPosAngleAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 风速报警 -->
                {{ $t('message.towerCrane.text12') }}：
                <span
                  :style="{
                    color: scope.row.workWindSpeedAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workWindSpeedAlarm == 0
                      ? '正常'
                      : scope.row.workWindSpeedAlarm == 1
                      ? '报警'
                      : '预警'
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 工作循环中是否出现环境防碰撞报警 -->
                {{ $t('message.towerCrane.whether1') }}：
                <span
                  :style="{
                    color: scope.row.workEnvironmentAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workEnvironmentAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</span
                >
              </div>
              <div class="table-item">
                <!-- 工作循环中是否出现力矩预警 -->
                <!-- '报警':'正常' -->
                {{ $t('message.towerCrane.whether2') }}：
                <span
                  :style="{
                    color: scope.row.workMomentPreAlarm ? '#F56C6C' : '',
                  }"
                  >{{
                    scope.row.workMomentPreAlarm
                      ? $t('message.towerCrane.callThePolice')
                      : $t('message.towerCrane.normal')
                  }}</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 {
  getTowerListApi,
  selectTowerWorkCycleApi,
  exporExcelTowerWorkCycleApi
} from '@/assets/js/api/towerCrane'
export default {
  props: ['sn'],
  data() {
    return {
      devSn: '',
      projectSn: '',
      devList: [],
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      valueTime: ''
    }
  },
  created() {
    this.projectSn = this.sn ? this.sn : this.$store.state.projectSn
    this.queryDev()
    // this.selectNowDate()
    this.queryTowerWorkCycle()
  },
  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, 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
        }
      })
    },
    quertData() {
      this.pageNo = 1
      this.pageSize = 10
      console.log(this.devSn)
      this.queryTowerWorkCycle()
    },
    refresh() {
      this.pageNo = 1
      this.pageSize = 10
      this.total = 0
      this.devSn = ''
      this.valueTime = ''
      this.queryTowerWorkCycle()
    },
    queryTowerWorkCycle() {
      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)
      selectTowerWorkCycleApi(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.queryTowerWorkCycle()
    },
    handleCurrentChange(value) {
      this.pageNo = value
      this.queryTowerWorkCycle()
    },
    exportExcel() {
      if (this.valueTime) {
        window.location.href =
          this.$http.defaults.baseURL +
            'xmgl/download/exporExcelTowerWorkCycle?projectSn=' +
            this.projectSn +
            '&devSn=' +
            this.devSn
            ? this.devSn
            : '' +
            '&startTime=' +
            this.valueTime[0] +
            '&endTime=' +
            this.valueTime[1]
      } else {
        window.location.href =
          this.$http.defaults.baseURL +
          'xmgl/download/exporExcelTowerWorkCycle?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>