<template>
  <el-container v-loading="loading" class="content-height-fit">
    <el-container class="resize-fit-container">

      <div class="app-container">
        <!-- <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="testCreate"
        >
          测试创建
        </el-button> -->
        <el-row :xs="24" class="sum-row" style="padding-bottom: 15px;">
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              :class="deviceInfo.isOnLine?'info-box bg-green':'info-box bg-red' "
              style="margin-bottom: 0px"
            >
              <!-- <i :class="online?'fa fa-sun-o':'fa fa-moon-o'" /> -->
              <span class="info-box-icon"><svg-icon :icon-class="deviceInfo.isOnLine ?'在线':'离线' " /></span>
              <div class="info-box-content">
                <span class="info-box-text">设备状态</span>
                <span
                  class="info-box-number"
                >{{ deviceInfo.isOnLine?'在线':'离线' }}</span>
                <!-- <div class="progress">
                  <div class="progress-bar" style="width: 100%" />
                </div>
                <span class="progress-description">
                  {{ deviceInfo.deviceTypeName }}
                </span> -->
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              class="info-box bg-deep-blue"
              style="margin-bottom: 0px"
            >
              <span class="info-box-icon"><i class="fa fa-hourglass" /></span>
              <div class="info-box-content">
                <span class="info-box-text">运行时长</span>
                <span
                  class="info-box-number"
                >{{ vehicleInfo.vehicleRecord.workTime }}小时</span>
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col sum-row-cols">
            <div
              class="info-box bg-aqua"
              style="margin-bottom: 0px"
            >
              <span class="info-box-icon"><i class="fa fa-pie-chart" /></span>
              <div class="info-box-content">
                <span class="info-box-text">累计过孔数目</span>
                <span
                  class="info-box-number"
                >{{ deviceInfo.viaCount }}个</span>
              </div>
            </div>
          </el-col>
          <el-col :sm="6" :md="6" class="sum-row-col">
            <div
              class="info-box bg-deep-yello"
              style="margin-bottom: 0px"
            >
              <span class="info-box-icon"><i class="fa fa-exclamation-triangle" /></span>
              <div class="info-box-content">
                <span class="info-box-text">问题情况</span>
                <span class="info-box-number">
                  {{ singleDeviceWarnings.waringCount }}次</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
            <box icon="el-icon-help" title="设备信息">
              <div style="height:235px ;overflow-y: auto">
                <table class="table">
                  <tr>
                    <td>标段名称</td><td>{{ listQuery.sectionName }}</td>
                  </tr>
                  <tr>
                    <td>设备编号</td><td>{{ deviceInfo.deviceNo }}</td>
                  </tr>
                  <tr>
                    <td>设备类型</td><td>{{ deviceInfo.categoryName }}</td>
                  </tr>
                  <tr>
                    <td> 设备规格</td><td>{{ deviceInfo.spec }}</td>
                  </tr>
                  <tr>
                    <td>负 责 人</td><td>{{ deviceInfo.driverName }}</td>
                  </tr>
                  <tr>
                    <td>最新数据时间</td><td>{{ deviceInfo.lastModificationTime | datetime }}</td>
                  </tr>
                </table>
              </div>

            </box>
          </el-col>
          <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
            <box icon="el-icon-help" title="工况统计">
              <div style="height:234px ;overflow-y: auto">
                <table class="table">
                  <tr>
                    <td>风力</td><td>{{ vehicleInfo.vehicleRecord.WindPower }} 米/时</td>
                  </tr>
                  <tr>
                    <td>机臂前后高差</td><td>0 米</td>
                  </tr>
                  <tr>
                    <td>本次循环时间</td><td>0</td>
                  </tr>
                  <tr>
                    <td>过孔数目</td><td>{{ deviceInfo.viaCount }}</td>
                  </tr>
                  <tr>
                    <td>过孔状态</td><td> {{ vehicleInfo.vehicleRecord.IsVia ? "正在过孔" : "未过孔" }}</td>
                  </tr>
                  <tr>
                    <td>风    速</td><td>{{ vehicleInfo.vehicleRecord.WindSpeed }} (m/s)</td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <box icon="el-icon-help" title="问题信息">
              <el-table
                :data="singleDeviceWarnings.items"
                height="235px"
                border
                style="width: 100%"
              >
                <el-table-column prop="date" label="报警时间" align="center">
                  <template slot-scope="{ row }">
                    {{ row.lastWarningTime | datetime }}
                  </template>
                </el-table-column>
                <el-table-column prop="earlyWarningConfigurationBillName" label="问题原因" align="center" />
                <el-table-column prop="warningStatusName" label="状态" align="center" />
                <el-table-column prop="maxWarningLevelName" label="问题等级" align="center" />
              </el-table>
            </box>
          </el-col>
        </el-row>
        <!-- <el-row :xs="24">
          <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
            <box icon="el-icon-help" title="前左视频">
              <iframe height="220" width="100%" src="https://player.youku.com/embed/XNTg3NDI2NjI0" frameborder="0" />
            </box>
          </el-col>
          <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
            <box icon="el-icon-help" title="前右视频">
              <iframe height="220" width="100%" src="https://player.youku.com/embed/XNTg3NDI2NjI0" frameborder="0" />
            </box>
          </el-col>
          <el-col :xs="24" :sm="6" :md="6" style="padding-right: 15px">
            <box icon="el-icon-help" title="后左视频">
              <iframe height="220" width="100%" src="https://player.youku.com/embed/XNTg3NDI2NjI0" frameborder="0" />
            </box>
          </el-col>
          <el-col :xs="24" :sm="6" :md="6">
            <box icon="el-icon-help" title="后右视频">
              <iframe height="220" width="100%" src="https://player.youku.com/embed/XNTg3NDI2NjI0" frameborder="0" />
            </box>
          </el-col>
        </el-row> -->
        <el-row :xs="24">
          <el-col :xs="24" :sm="8" :md="8" style="padding-right: 15px">
            <box icon="el-icon-help" title="整车信息">
              <div class="box-div-left" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">测量值</td>
                  </tr>
                  <tr>
                    <td>纵移</td><td>{{ vehicleInfo.vehicleRecord.vehicleVerticalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>横移</td><td>{{ vehicleInfo.vehicleRecord.vehicleHorizontalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>左侧水平度</td><td>{{ vehicleInfo.vehicleRecord.leftlevelness }} °</td>
                  </tr>
                  <tr>
                    <td>右侧水平度</td><td>{{ vehicleInfo.vehicleRecord.rightLevelness }} °</td>
                  </tr>
                  <tr>
                    <td>纵向支腿垂直度</td><td>{{ vehicleInfo.vehicleRecord.verticalLegVertical }} °</td>
                  </tr>
                  <tr>
                    <td>横向支腿垂直度</td><td>{{ vehicleInfo.vehicleRecord.horizontalLegVertical }} °</td>
                  </tr>
                  <tr>
                    <td>两天车间距</td><td>{{ vehicleInfo.vehicleRecord.crownDistance }} 米</td>
                  </tr>
                  <tr>
                    <td>横移速度</td><td>{{ vehicleInfo.vehicleRecord.vehicleHorizontalSpeed }} 米/分</td>
                  </tr>
                  <tr>
                    <td>纵移速度</td><td>{{ vehicleInfo.vehicleRecord.vehicleVerticalSpeed }} 米/分</td>
                  </tr>
                </table>
              </div>
              <div class="box-div-right" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">开关量</td>
                  </tr>
                  <tr>
                    <td>整机前移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.vehicleRecord.bogieForward}" />
                    </td>
                  </tr>
                  <tr>
                    <td>整机后移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.vehicleRecord.bogieBack}" />
                    </td>
                  </tr>
                  <tr>
                    <td>整机左移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.vehicleRecord.bogieLeftMove}" />
                    </td>
                  </tr>
                  <tr>
                    <td>整机后移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.vehicleRecord.bogieRightMove}" />
                    </td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8" style="padding-right: 15px">
            <box icon="el-icon-help" title="前天车信息">
              <div class="box-div-left" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">测量值</td>
                  </tr>
                  <tr>
                    <td>主钩高度</td><td>{{ vehicleInfo.frontCrownBlock.frontHookHight }} 米</td>
                  </tr>
                  <tr>
                    <td>主钩重量</td><td>{{ vehicleInfo.frontCrownBlock.frontHookWeight }} 吨</td>
                  </tr>
                  <tr>
                    <td>纵移</td><td>{{ vehicleInfo.frontCrownBlock.frontVerticalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>横移</td><td>{{ vehicleInfo.frontCrownBlock.frontHorizontalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>纵移速度</td><td>{{ vehicleInfo.frontCrownBlock.frontVerticalSpeed }} 米/分</td>
                  </tr>
                  <tr>
                    <td>横移速度</td><td>{{ vehicleInfo.frontCrownBlock.frontHorizontalSpeed }} 米/分</td>
                  </tr>
                  <tr>
                    <td>主钩速度</td><td>{{ vehicleInfo.frontCrownBlock.frontHookSpeed }} 米/分</td>
                  </tr>
                </table>
              </div>
              <div class="box-div-right" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">开关量</td>
                  </tr>
                  <tr>
                    <td>吊钩上升</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.frontHookUp}" />
                    </td>
                  </tr>
                  <tr>
                    <td>吊钩下降</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.frontHookDown}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车前行</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.bogieForward}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车后退</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.bogieBack}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车左移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.bogieLeftMove}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车右移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.frontCrownBlock.bogieRightMove}" />
                    </td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
          <el-col :xs="24" :sm="8" :md="8">
            <box icon="el-icon-help" title="后天车信息">
              <div class="box-div-left" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">测量值</td>
                  </tr>
                  <tr>
                    <td>主钩高度</td><td>{{ vehicleInfo.backCrownBlock.backHookHight }} 米</td>
                  </tr>
                  <tr>
                    <td>主钩重量</td><td>{{ vehicleInfo.backCrownBlock.backHookWeight }} 吨</td>
                  </tr>
                  <tr>
                    <td>纵移</td><td>{{ vehicleInfo.backCrownBlock.backVerticalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>横移</td><td>{{ vehicleInfo.backCrownBlock.backHorizontalMove }} 米</td>
                  </tr>
                  <tr>
                    <td>纵移速度</td><td>{{ vehicleInfo.backCrownBlock.backVerticalSpeed }} 米/分</td>
                  </tr>
                  <tr>
                    <td>横移速度</td><td>{{ vehicleInfo.backCrownBlock.backHorizontalSpeed }} 米/分</td>
                  </tr>
                  <tr>
                    <td>主钩速度</td><td>{{ vehicleInfo.backCrownBlock.backHookSpeed }} 米/分</td>
                  </tr>
                </table>
              </div>
              <div class="box-div-right" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">开关量</td>
                  </tr>
                  <tr>
                    <td>吊钩上升</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.frontHookUp}" />
                    </td>
                  </tr>
                  <tr>
                    <td>吊钩下降</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.frontHookDown}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车前行</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.bogieForward}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车后退</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.bogieBack}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车左移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.bogieLeftMove}" />
                    </td>
                  </tr>
                  <tr>
                    <td>小车右移</td>
                    <td>
                      <i class="fa fa-lightbulb-o" :class="{'lightColor':vehicleInfo.backCrownBlock.bogieRightMove}" />
                    </td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
        </el-row>
      </div></el-container>
  </el-container>
</template>

<script>

import * as interfaceApi from '@/api/work-info.js'

import Box from '@/components/Box/Box'
import waves from '@/directive/waves' // waves directive
const signalR = require('@microsoft/signalr')

export default {
  name: 'GrideWorkInfoMng',
  directives: { waves },
  // eslint-disable-next-line vue/no-unused-components
  components: {
    Box//, InnerSidebar, ProjectSectionDeviceTree
  },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      loading: true,
      deviceId: undefined,
      deviceInfo: {
        isOnline: false,
        allTime: 0,
        viaCount: 0,
        deviceNo: '',
        categoryName: '',
        spec: '',
        lastModificationTime: ''
      },
      vehicleInfo: {
        vehicleRecord: {
          vehicleVerticalMove: 0,
          vehicleHorizontalMove: 0,
          leftlevelness: 0,
          rightLevelness: 0,
          verticalLegVertical: 0,
          horizontalLegVertical: 0,
          crownDistance: 0,
          vehicleVerticalSpeed: 0,
          vehicleHorizontalSpeed: 0
        },
        frontCrownBlock: {
          frontHookHight: 0,
          frontHookWeight: 0,
          frontHookSpeed: 0,
          frontVerticalMove: 0,
          frontHorizontalMove: 0,
          frontVerticalSpeed: 0,
          frontHorizontalSpeed: 0,
          frontHookUp: false,
          frontHookDown: false,
          bogieForward: false,
          bogieBack: false,
          bogieLeftMove: false,
          bogieRightMove: false
        },
        backCrownBlock: {
          backHookHight: 0,
          backHookWeight: 0,
          backHookSpeed: 0,
          backVerticalMove: 0,
          backHorizontalMove: 0,
          backVerticalSpeed: 0,
          backHorizontalSpeed: 0,
          backHookUp: false,
          backHookDown: false,
          bogieForward: false,
          bogieBack: false,
          bogieLeftMove: false,
          bogieRightMove: false
        }
      },
      online: true, // 是否在线
      connection: undefined,
      tableData: [{
        date: '2016-05-10',
        reason: '过载',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-09',
        reason: '过载',
        state: '已处理',
        level: '严重'
      }, {
        date: '2016-05-08',
        reason: '过载',
        state: '未处理',
        level: '中等'
      }, {
        date: '2016-05-03',
        reason: '过载',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-07',
        reason: '过载',
        state: '已处理',
        level: '一般'
      }, {
        date: '2016-05-06',
        reason: '过载',
        state: '未处理',
        level: '一般'
      }, {
        date: '2016-05-05',
        reason: '过载',
        state: '未处理',
        level: '一般'
      }],
      videoData: {
        frontLeftUrl: '',
        aroundUrl: '',
        rearLeftUrl: '',
        rearRightUrl: ''
      },
      singleDeviceWarnings: {
        waringCount: 0,
        processedCount: 0,
        items: []
      }
    }
  },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery = val
          this.deviceId = val.deviceId
          if (val.deviceId) {
            this.GetDeviceInfo()
            this.GetVehicleInfo()
            this.GetSingleDeviceWarnings()
          }
        }
      }
    }
  },
  mounted() {
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl(process.env.VUE_APP_API + '/erecting-hub', { })
      .withAutomaticReconnect()
      .configureLogging(signalR.LogLevel.Error)
      .build()
    this.connection.on('ReceiveVehicleRecord', function(data) {
      console.log('asdasd', data)
    })
    this.connection.start().then(function() {
      console.log('开启')
    }).catch(function(err) {
      return console.error(err.toString())
    })
  },
  methods: {
    // 查询
    handleFilter() {
    },
    GetDeviceInfo() {
      interfaceApi
        .GetDeviceInfo(this.deviceId)
        .then(res => {
          this.deviceInfo = res
        })
    },
    GetVehicleInfo() {
      interfaceApi
        .GetVehicleInfo(this.deviceId)
        .then(res => {
          this.vehicleInfo = res
        })
    },
    GetSingleDeviceWarnings() {
      var params = {
        deviceId: this.deviceId,
        skipCount: 0,
        maxResultCount: 10
      }
      interfaceApi
        .GetSingleDeviceWarnings(params)
        .then(res => {
          this.singleDeviceWarnings = res
        })
        .finally(() => {
          this.loading = false
        })
    },
    testCreate() {
      const postData = {
        id: 'ea64aba4-3514-9d82-0d8c-3a03141b7962',
        creationTime: '2022-04-13T07:41:09.519Z',
        creatorId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
        lastModificationTime: '2022-04-13T07:41:09.519Z',
        lastModifierId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
        deviceManageId: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
        vehicleVerticalMove: 5,
        vehicleHorizontalMove: 6,
        leftlevelness: 7,
        rightLevelness: 8,
        crownDistance: 9,
        vehicleVerticalSpeed: 1,
        vehicleHorizontalSpeed: 2,
        verticalLegVertical: 3,
        horizontalLegVertical: 4,
        windSpeed: 5,
        windPower: 6,
        workTime: 7,
        uploadTime: '2022-04-13T07:41:09.519Z',
        viaDistance: 0,
        dispersion: 0,
        isVia: true,
        isForwardLead: true,
        isBackwardLead: true,
        isLeftLead: true,
        isRightLead: true
      }
      interfaceApi
        .testCreate(postData)
        .then(() => {
        })
        .finally(() => {
        })
    }
  }
}
</script>
<style scoped>
.table {
    border-top: 0px solid #dcdfe6;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 1em;
}
.el-table {
    line-height: 1em;
}
.el-table >>> .el-table__cell {
    padding: 8px 0;
}
.y-tbody{
    max-height: 200px;
    overflow-y: scroll;
}
.table td,table th {
     border-top: none;
    border: 1px solid #dcdfe6;
    background-color:aliceblue;
    max-width: 250px;
}
/* .el-table >>> thead{
    color: #fff;
}
.el-table >>> thead th {
      background-color: red  !important;
} */
/* table tr:nth-child(odd){
background: #ccc;
} */
table tr:nth-child(even){
background: #efefef;

}
.el-table >>> tr:nth-child(even){
background: #efefef;

}
.card >>> .card-body {
    padding: 0.2rem !important;
}

.sum-row {
  margin-top: 0px;
}
.sum-row-cols {
  padding-right: 15px;
}
.sum-row-col .info-box {
  height: 100px;
  margin: 0px;
  padding: 0px;
}
.sum-row-col .bg-aqua {
  background-color: #00c0ef !important;
  color: #fff !important;
}
.bg-deep-yello{
  background: #e3b633 !important;
    color: #fff !important;
}
.progress-description,
.info-box-text {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-deep-blue {
  background-color: #3e72c5 !important;
  color: #fff;
}
.info-box .progress {
  background-color: rgba(0, 0, 0, 0.125);
  height: 2px;
  margin: 5px 0;
}
.info-box .progress {
  background: rgba(0, 0, 0, 0.2);
  margin: 5px -10px 5px -10px;
  height: 2px;
}
.info-box-icon {
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  display: block;
  float: left;
  height: 100px;
  width: 80px;
  text-align: center;
  font-size: 45px;
  line-height: 100px;
  /* background: rgba(0, 0, 0, 0.2); */
}
.box-div-left
{
    width: 65%;float: left;
    height:315px;
    padding-right: 8px;
}
.box-div-right
{
    width: 35%;
    float: left;
    height:315px;
}

.lightColor{
  color:limegreen;
}
/* .content-height-fit {
 height: calc(100vh - 160px) !important;
} */
/* .bg-red {
    background: #bab000 !important;
} */
</style>
