<template>
  <el-container v-loading="loading" class="content-height-fit">
    <el-container class="resize-fit-container">
      <div class="app-container">
        <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"
            >
              <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"
                >100小时</span>
                <!-- <div class="progress">
                  <div class="progress-bar" style="width: 10%" />
                </div>
                <span class="progress-description">
                  累计工作1000小时
                </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"
                >300吨</span>
                <!-- <div class="progress">
                  <div class="progress-bar" style="width: 10%" />
                </div>
                <span class="progress-description">
                  累计重量30000吨
                </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 class="progress">
                  <div class="progress-bar" :style="{width: singleDeviceWarnings.waringCount === 0 ? 0 : (singleDeviceWarnings.processedCount * 100 / singleDeviceWarnings.waringCount)+'%'}" />
                </div>
                <span class="progress-description">
                  {{ singleDeviceWarnings.processedCount }}个报警已处置完成
                </span> -->
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="18" :md="18" style="padding-right: 15px">
            <box icon="el-icon-help" title="设备信息">
              <table class="table">
                <tr>
                  <td>标段名称</td><td>{{ listQuery.sectionName }}</td>
                  <td>设备编号</td><td>{{ deviceInfo.deviceNo }}</td>
                  <td>设备类型</td><td>{{ deviceInfo.categoryName }}</td>
                </tr>
                <tr>
                  <td>设备规格</td><td>{{ deviceInfo.spec }}</td>
                  <td>负 责 人</td><td>{{ deviceInfo.driverName }}</td>
                  <td>最新数据时间</td><td>{{ deviceInfo.lastModificationTime | datetime }}</td>
                </tr>
              </table>
            </box>
          </el-col>
          <el-col :xs="24" :sm="6" :md="6">
            <box icon="el-icon-help" title="限位状态">
              <table class="table">
                <tr>
                  <td>台车前进限位</td><td>600</td>
                </tr>
                <tr>
                  <td>台车后退限位</td><td>900</td>
                </tr>
              </table>
            </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 style="float:left;height:290px;width:100%">
                <table class="table">
                  <tr>
                    <td>走行</td><td>{{ beamTransportCarInfo.runSpeed }} 米/时</td>
                  </tr>
                  <tr>
                    <td>均衡</td><td>0</td>
                  </tr>
                  <tr>
                    <td>支腿</td><td>0</td>
                  </tr>
                  <tr>
                    <td>托梁</td><td>0</td>
                  </tr>
                  <tr>
                    <td>同步托梁</td><td>未</td>
                  </tr>
                  <tr>
                    <td>前进/伸(方向)</td><td>东南</td>
                  </tr>
                  <tr>
                    <td>后退/伸(方向) </td><td>西北</td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
          <el-col :xs="24" :sm="16" :md="16">
            <box icon="el-icon-help" title="运梁车数据">
              <div class="box-div">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">其他</td>
                  </tr>
                  <tr>
                    <td>走行速度</td>
                    <td>{{ beamTransportCarInfo.runSpeed }} km/h</td>
                  </tr>
                  <tr>
                    <td>经度</td>
                    <td>{{ beamTransportCarInfo.lng }} 度</td>
                  </tr>
                  <tr>
                    <td>纬度</td>
                    <td>{{ beamTransportCarInfo.lat }} 度</td>
                  </tr>
                  <tr>
                    <td>液压油温</td>
                    <td>{{ beamTransportCarInfo.hydaulicOilTemp }} ℃</td>
                  </tr>
                  <tr>
                    <td>整机水平度</td>
                    <td>{{ beamTransportCarInfo.carLevelness }}  °</td>
                  </tr>
                </table>
              </div>
              <div class="box-div" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">发动机</td>
                  </tr>
                  <tr>
                    <td>一号发动机转速</td><td>{{ beamTransportCarInfo.firstEngineRev }}  r/min</td>
                  </tr>
                  <tr>
                    <td>一号发动机机油压力</td><td>{{ beamTransportCarInfo.firstOilPress }}  bar</td>
                  </tr>
                  <tr>
                    <td>一号发动机水温</td><td>{{ beamTransportCarInfo.firstWaterTemp }}  ℃</td>
                  </tr>
                  <tr>
                    <td>一号发动机电压</td><td>{{ beamTransportCarInfo.firstVoltage }} 1 V</td>
                  </tr>
                  <tr>
                    <td>一号发动机工作时间</td><td>{{ beamTransportCarInfo.firstWorkTime }}  h</td>
                  </tr>
                  <tr>
                    <td>二号发动机转速</td><td>{{ beamTransportCarInfo.secondEngineRev }}  r/min</td>
                  </tr>
                  <tr>
                    <td>二号发动机机油压力</td><td>{{ beamTransportCarInfo.secondOilPress }}  bar</td>
                  </tr>
                  <tr>
                    <td>二号发动机水温</td><td>{{ beamTransportCarInfo.secondWaterTemp }}  ℃</td>
                  </tr>
                  <tr>
                    <td>二号发动机电压</td><td>{{ beamTransportCarInfo.secondValtage }}  V</td>
                  </tr>
                  <tr>
                    <td>二号发动机工作时间</td><td>{{ beamTransportCarInfo.secondWorkTime }}  h</td>
                  </tr>
                </table>
              </div>
              <div class="box-div">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">压力数据</td>
                  </tr>
                  <tr>
                    <td>前左均衡压力</td><td>{{ beamTransportCarInfo.flBalancePress }}  bar</td>
                  </tr>
                  <tr>
                    <td>前右均衡压力</td><td>{{ beamTransportCarInfo.frBalancePress }}  bar</td>
                  </tr>
                  <tr>
                    <td>后均衡压力</td><td>{{ beamTransportCarInfo.bBalancePress }}  bar</td>
                  </tr>
                  <tr>
                    <td>走行前进压力</td><td>{{ beamTransportCarInfo.runFPress }}  bar</td>
                  </tr>
                  <tr>
                    <td>走行后退压力</td><td>{{ beamTransportCarInfo.runBPress }}  bar</td>
                  </tr>
                  <tr>
                    <td>转向压力</td><td>{{ beamTransportCarInfo.toPress }}  bar</td>
                  </tr>
                  <tr>
                    <td>制动压力</td><td>{{ beamTransportCarInfo.brekePress }}  bar</td>
                  </tr>
                </table>
              </div>
              <div class="box-div">
                <table class="table">
                  <tr>
                    <td colspan="2" style="text-align: center;">距离高度</td>
                  </tr>
                  <tr>
                    <td>前端安全距离</td><td>{{ beamTransportCarInfo.fSafeDistance }}  mm</td>
                  </tr>
                  <tr>
                    <td>左侧安全距离</td><td>{{ beamTransportCarInfo.lSafeDistance }}  mm</td>
                  </tr>
                  <tr>
                    <td>右侧安全距离</td><td>{{ beamTransportCarInfo.rSafeDistance }}  mm</td>
                  </tr>
                  <tr>
                    <td>前左均衡高度</td><td>{{ beamTransportCarInfo.flBalanceHeight }}  mm</td>
                  </tr>
                  <tr>
                    <td>前右均衡高度</td><td>{{ beamTransportCarInfo.frBalanceHeight }}  mm</td>
                  </tr>
                  <tr>
                    <td>后左均衡高度</td><td>{{ beamTransportCarInfo.blBalanceHeight }}  mm</td>
                  </tr>
                  <tr>
                    <td>后右均衡高度</td><td>{{ beamTransportCarInfo.brBalanceHeight }}  mm</td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
        </el-row>
        <el-row :xs="24">
          <el-col :xs="24" :sm="12" :md="12" style="padding-right: 15px">
            <box icon="el-icon-help" title="状态信息">
              <div class="box-div-alert" style="overflow-y: auto">
                <table class="table">
                  <tr>
                    <td>控制总线掉线</td><td><div class="div-circular div-normal" /></td>
                    <td>轮胎差状态</td><td><div class="div-circular div-normal" /></td>
                  </tr>
                  <tr>
                    <td>静制动低压状态</td><td><div class="div-circular div-abnormal" /></td>
                    <td>气制动低压状态</td><td><div class="div-circular div-normal" /></td>
                  </tr>
                  <tr>
                    <td>转向低压状态</td><td><div class="div-circular div-normal" /></td>
                    <td>手柄零位状态</td><td><div class="div-circular div-normal" /></td>
                  </tr>
                  <tr>
                    <td>1号发动机水温过高</td><td><div class="div-circular div-abnormal" /></td>
                    <td>1号发动机机油压低</td><td><div class="div-circular div-abnormal" /></td>
                  </tr>
                  <tr>
                    <td>2号发动机水温过高</td><td><div class="div-circular div-abnormal" /></td>
                    <td>2号发动机机油压低</td><td><div class="div-circular div-abnormal" /></td>
                  </tr>
                  <tr>
                    <td>前端防撞状态</td><td><div class="div-circular div-abnormal" /></td>
                    <td>左侧防撞机状态</td><td><div class="div-circular div-abnormal" /></td>
                  </tr>
                  <tr>
                    <td>右侧防撞机状态</td><td><div class="div-circular div-abnormal" /></td>
                    <td>液压油堵塞状态</td><td><div class="div-circular div-abnormal" /></td>
                  </tr>
                  <tr>
                    <td>变频器状态</td><td colspan="3"> <div class="div-circular div-abnormal" /></td>
                  </tr>
                </table>
              </div>
            </box>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <box icon="el-icon-help" title="GPS定位">
              <baidu-map
                style="width:100%;height:254px"
                class="map"
                :ak="baiduKey"
                :zoom="14"
                center="杭州"
              />
            </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
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

// import BmScale from 'vue-baidu-map/components/controls/Scale'
// import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
export default {
  name: 'BeamCarrierWorkInfoMng',
  directives: { waves },
  // eslint-disable-next-line vue/no-unused-components
  components: {
    BaiduMap,
    // BmScale,
    // BmNavigation,
    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: ''
      },
      beamTransportCarInfo: {},
      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: ''
      },
      listQuery: {},
      singleDeviceWarnings: {
        waringCount: 0,
        processedCount: 0,
        items: []
      }
    }
  },
  computed: {
    baiduKey() {
      return process.env.VUE_APP_BD_MAP_KEY
    }
  },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery = val
          this.deviceId = val.deviceId
          if (val.deviceId) {
            this.GetDeviceInfo()
            this.GetBeamTransportCarInfo()
            this.GetSingleDeviceWarnings()
          }
        }
      }
    }
  },
  methods: {
    // 查询
    handleFilter() {
    },
    GetDeviceInfo() {
      interfaceApi
        .GetDeviceInfo(this.deviceId)
        .then(res => {
          this.deviceInfo = res
        })
    },
    GetBeamTransportCarInfo() {
      interfaceApi
        .GetBeamTransportCarInfo(this.deviceId)
        .then(res => {
          this.beamTransportCarInfo = res
        })
    },
    GetSingleDeviceWarnings() {
      var params = {
        deviceId: this.deviceId,
        skipCount: 0,
        maxResultCount: 10
      }
      interfaceApi
        .GetSingleDeviceWarnings(params)
        .then(res => {
          this.singleDeviceWarnings = res
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped>
.table {
    border-top: 1px solid #dcdfe6;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 0.8em;
}
.el-table {
    line-height: 0.8em;
}
.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;
}
.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;
}
.bg-deep-yello{
  background: #e3b633 !important;
    color: #fff !important;
}
.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;
} */
.box-div
{
    width: 25%;float: left;
    height:290px;
    padding-right: 8px;
}
.box-div-alert
{
    width: 100%;
    float: left;
    height:254px;
}
.div-circular {
  width:16px;
  height:16px;
  border-radius:50%;
  }
.div-normal
{
  background-color:#25b38e;
}
.div-abnormal
{
  background-color:#686868;
}
/* .bg-red {
    background: #bab000 !important;
} */
.map >>>.BMap_cpyCtrl{
  display: none !important;
}
.map >>> .anchorBL{
       display:none !important;
   }
</style>
