EMP.GirderErection.Slim.Web/src/views/bridge/device-manage/tky-manage.vue

<template>
  <div>
    <div class="app-container">
      <el-row :gutter="16">
        <el-col :sm="24" :md="24">
          <!-- <el-select v-model="query.deviceManageId" size="mini" placeholder="请选择设备" @change="deviceChange">
                <el-option
                  v-for="item in griderErections"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
          <el-input v-model="query.deviceCode" disabled style="width:30%">
            <template slot="prepend">设备编号</template>
          </el-input>
          <!-- <el-tag type="success" style="margin-left: 6px;" size="mini">在线</el-tag> -->
          <!-- <el-input v-model="query.beamCode" disabled style="float:right;margin-right: 6px;width:30%">
            <template slot="prepend">梁片编号</template>
          </el-input> -->
          <el-select v-model="query.beamCode" style="float:right;margin-right: 6px;height:45px;width:30%" placeholder="请选择梁片编码" @change="change">
            <el-option
              v-for="item in beams"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            />
          </el-select></el-col>
        <!-- <el-col :sm="6" :md="6">
          <span style="font-size: 18px;">视频监控</span>
          <a style="font-size: 18px;float:right" @click="clickAllVideos">更多视频</a>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :lg="24" :sm="24" :xs="24" :xl="24" :md="24" style="padding-right: 8px">
          <div class="boxall">
            <el-row>
              <el-col :lg="6" :sm="6" :xs="6" :xl="6" :md="6">
                <div class="boxCenter" style="cursor:pointer " @click="warningClick">
                  <div class="box-warning"><i class="el-icon-warning" /><span style="margin-left:5px">报警信息</span></div>
                  <div class="left-div"><span style="font-size: 25px;color: #0086ff;">{{ data.warningCount }}</span>次</div>
                  <div class="left-foot">已解除报警{{ data.doneWarningCount }}次</div>
                </div>
                <div class="boxCenter">
                  <div class="box-warning"><i class="el-icon-timer" /><span style="margin-left:5px">工作时长</span></div>
                  <div class="left-div"><span style="font-size: 25px;color: #0086ff;">{{ data.timeCount }}</span>小时</div>
                  <div class="left-foot">累计工作{{ data.allTimeCount }}小时</div>
                </div>
                <div class="boxCenter">
                  <div class="box-warning"><i class="el-icon-refresh" /><span style="margin-left:5px">循环次数</span></div>
                  <div class="left-div"><span style="font-size: 25px;color: #0086ff;">{{ data.allCycleCount }}</span>次</div>
                  <div class="left-foot">累计循环{{ data.allCycleCount }}次</div>
                </div>
              </el-col>
              <el-col :lg="18" :sm="18" :xs="18" :xl="18" :md="18">
                <div class="titleup">
                  <span>最近更新时间：</span><span style="color: #0086ff;font-weight: bold;">{{ noGuide.monitorTime | datetimeseconds }}</span>
                  <div style="float:right">
                    <el-button v-if="!playback.isAnimRunning && !playback.anim" type="primary" size="mini" @click="hitoryClick">开始回放</el-button>
                    <el-button v-if="playback.anim" type="primary" size="mini" @click="stopPlayback">停止回放</el-button>
                    <el-button v-if="!playback.isAnimRunning && playback.anim" type="primary" size="mini" @click="goon">继续</el-button>
                    <el-button v-if="playback.isAnimRunning && playback.anim" type="danger" size="mini" @click="pause">暂停</el-button>
                    <el-button v-if="playback.anim" type="primary" size="mini" @click="speedUp">加速</el-button>
                    <el-button v-if="playback.anim" type="primary" size="mini" @click="speedDown">减速</el-button>
                    <el-button type="primary" size="mini" @click="zoomIn">放大</el-button>
                    <el-button type="primary" size="mini" @click="zoomOut">缩小</el-button>
                  </div>
                </div>
                <div ref="canvasdiv" style="background: #0AA4BC">
                  <New2d v-if="modelVisible" ref="towD" @playbacking="playbacking" @returndata="returndata" />
                  <Kiosk2dModel v-if="!modelVisible" />
                </div>
              </el-col>
            </el-row>
            <div class="boxfoot" />
          </div>
        </el-col>
        <!-- <el-col :xs="6" :sm="6" :md="6">
          <div class="boxall">
            <el-row :gutter="8" style="margin-top:6px">
              <el-col v-for="(item,index) in videos" :key="item.name" :sm="12" :md="12">
                <video
                  :id="'video' + index"
                  controls
                  autoplay
                  muted
                  style="height:210px;width:100%;background:#000"
                />
              </el-col>
            </el-row>
            <div class="boxfoot" />
          </div>
        </el-col> -->
      </el-row>
      <el-row>
        <el-col :lg="24" :sm="24" :xs="24" :xl="24" :md="24">
          <div class="boxall">
            <el-row :gutter="16">
              <el-col :lg="16" :sm="16" :xs="16" :xl="16" :md="16">
                <el-row>
                  <el-col :lg="24" :sm="24" :xs="24" :xl="24" :md="24">
                    <box icon="el-icon-help" title="限位状态" class="boxColor">
                      <div>
                        <LimitState ref="limitState" />
                      </div>
                    </box>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :lg="12" :sm="12" :xs="12" :xl="12" :md="12">
                    <box icon="el-icon-help" title="基本信息" class="boxInfo">
                      <div>
                        <THAInfo ref="thaInfo" />
                      </div>
                    </box>
                  </el-col>
                  <el-col :lg="12" :sm="12" :xs="12" :xl="12" :md="12">
                    <box icon="el-icon-help" title="主梁和支座" class="boxInfo">
                      <div>
                        <BeamSupport ref="beamSupport" />
                      </div>
                    </box>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :lg="8" :sm="8" :xs="8" :xl="8" :md="8">
                <box icon="el-icon-help" title="起吊系统" class="boxColor">
                  <div>
                    <TacklingSys ref="tacklingSys" />
                  </div>
                </box>
              </el-col>
            </el-row>
            <div class="boxfoot" />
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="预警详情" :close-on-click-modal="false" :visible.sync="proDucitonVisible" class="roll-dialog" top="20vh" width="50%">
      <el-table v-loading="listLoading" row-key="id" :data="warnings" border stripe fit highlight-current-row height="400px">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column label="报警时间" prop="warningDate" align="center">
          <template slot-scope="{row}">
            {{ row.warningDate |datetimeseconds }}
          </template>
        </el-table-column>
        <el-table-column label="报警记录" prop="warningRecord" align="center" />
        <el-table-column label="解除报警时间" align="center">
          <template slot-scope="{row}">
            {{ row.relieveDate |datetimeseconds }}
          </template>
        </el-table-column>
        <el-table-column label="是否解除" align="center">
          <template slot-scope="{row}">
            <el-tag size="mini" :type="row.isAlarm?'success':'danger'">{{ row.isAlarm?"已解除":"未解除" }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="proDucitonVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Box from '@/components/Box/Box'
import waves from '@/directive/waves' // waves directive
import THAInfo from '@/views/bridge/device-manage/components//THAInfo'
import New2d from '@/views/grider-erections/gride-work-info/components//new-2d.vue'
import BeamSupport from '@/views/bridge/device-manage/components/beam-support.vue'
import TacklingSys from '@/views/bridge/device-manage/components/tackling-sys.vue'
import LimitState from '@/views/bridge/device-manage/components//limit-state.vue'
import Kiosk2dModel from '@/views/grider-erections/gride-work-info/components/kiosk-2d-model.vue'
import * as griderErectionApi from '@/api/grider-erection'
// import JSWebrtc from '@/utils/webRtc'
import _ from 'lodash'

export default {
  directives: { waves },
  components: {
    Box, //, InnerSidebar, ProjectSectionDeviceTree
    New2d,
    THAInfo,
    BeamSupport,
    TacklingSys,
    LimitState,
    Kiosk2dModel
  },
  data() {
    return {
      query: {
        deviceCode: '',
        beamCode: ''
      },
      beams: [],
      listLoading: false,
      proDucitonVisible: false,
      modelVisible: true,
      data: {},
      noGuide: {},
      videos: [
        {
          name: '沪苏湖2标1#摄像头',
          webRtc: 'webrtc://120.78.220.33:1985/live/0002@HSH_Crane_V1'
        },
        {
          name: '沪苏湖2标2#摄像头',
          webRtc: 'webrtc://120.78.220.33:1985/live/0002@CJH_Crane_V2'
        },
        {
          name: '沪苏湖2标3#摄像头',
          webRtc: 'webrtc://120.78.220.33:1985/live/0002@CJH_Crane_V3'
        },
        {
          name: '沪苏湖2标4#摄像头',
          webRtc: 'webrtc://120.78.220.33:1985/live/0003@HSH_Crane_V5'
        }
      ],
      warnings: [],
      playback: { anim: null, isAnimRunning: false }
    }
  },
  created() {
  },
  async mounted() {
    this.loading = true

    // try {
    //   await this.$store.dispatch('user/login', { username: 'test-grider', password: crypto.decryptAES('B0B10217A69BFEE4F3043E5769106053') })
    //   this.loading = false
    // } catch (ex) {
    //   console.log(ex)
    // }
    // try {
    //   await this.$store.dispatch('user/login', { username: 'yjlview419', password: cryptosss.decryptAES('B00BB09C02A845CE99A9EE6DAF052DC7') })
    //   this.loading = false
    // } catch (ex) {
    //   console.log(ex)
    // }
    // this.$nextTick(() => {
    //   _.forEach(this.videos, (i, index) => {
    //     var id = 'video' + index
    //     var video = document.getElementById(id)
    //     new JSWebrtc.Player(i.webRtc, {
    //       video: video,
    //       autoplay: true,
    //       onPlay: obj => {}
    //     })
    //   })
    // })
  },
  methods: {
    show(data) {
      this.query.deviceCode = data.deviceCode
      this.beams = data.beams
      if (this.beams.length > 0 && !this.query.beamCode) {
        this.query.beamCode = this.beams[0].value
      }
      this.data = data.data
      if (this.data.splitTypeNoGuideBeams.length > 0) {
        this.noGuide = this.data.splitTypeNoGuideBeams[0]
        this.returndata(this.data.splitTypeNoGuideBeams[0])
      }
    },
    hitoryClick() {
      this.$refs.towD.playBack(this.data.splitTypeNoGuideBeams)
    },
    playbacking(data) {
      this.playback = data
    },
    stopPlayback() {
      this.$refs.towD.stopPlayback()
    },
    pause() {
      this.$refs.towD.suspend()
    },
    goon() {
      this.$refs.towD.goon()
    },
    zoomIn() {
      this.$refs.towD.zoomIn()
    },
    zoomOut() {
      this.$refs.towD.zoomOut()
    },
    speedUp() {
      this.$refs.towD.speedUp()
    },
    speedDown() {
      this.$refs.towD.speedDown()
    },
    returndata(data) {
      this.noGuide = data
      this.$refs.limitState.show(data)
      this.$refs.thaInfo.show(data)
      this.$refs.beamSupport.show(data)
      this.$refs.tacklingSys.show(data)
    },
    warningClick() {
      this.proDucitonVisible = true
      this.listLoading = true
      griderErectionApi.getWarnings(this.query)
        .then(res => {
          this.warnings = res
          this.listLoading = false
        })
    },
    deviceChange(id) {
      var grider = _.find(this.griderErections, ['value', id])
      if (grider.type === 1) {
        this.modelVisible = true
      } else {
        this.modelVisible = false
      }
    },
    change() {
      this.$emit('node-click', this.query.beamCode)
    },
    clickAllVideos() {
      // var href = 'http://14.18.41.63:5000/portal/camera/dashboard'
      // window.open(href, '_blank')
    }
  }
}
</script>
<style  lang="scss" scoped>

.content-height-fit {
 height: calc(100vh - 0px) !important;
}
// ::v-deep .el-table__body-wrapper {
//   &::-webkit-scrollbar { // 整个滚动条
//     width: 0; // 纵向滚动条的宽度
//     background: rgba(213,215,220,0.3);
//     border: none;
//   }
//   &::-webkit-scrollbar-track { // 滚动条轨道
//     border: none;
//   }
// }
::v-deep .el-table th.gutter{
  display: none;
  width:0
}
::v-deep .el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

::v-deep .el-table__body{
  width: 100% !important;
}
.boxall {
  margin-top: 8px;
    border: 2px solid #1b5677;
    padding: 0rem .3rem .3rem;
    position: relative;
    //margin-bottom: 1rem;
    height: 445px;
}
.boxCenter{
    border: 2px solid #0A3054;
    padding: 0rem .3rem .3rem;
    position: relative;
    width: 80%;
    margin: auto;
    //margin-bottom: 1rem;
    height: 120px;
    margin-top: 20px;
}
.box-warning{
  //color: #fff;
  margin-top: 10px;
  margin-left: 5px;
}
.left-div{
  //border-bottom: 1px solid;
    margin: 5px 25px;
    //color: #fff;
}
.left-foot{
  //border-bottom: 1px solid;
    margin-top: 0px;
    margin-left: 25px;
    //color: #fff;
}

.boxall:before,
.boxall:after {
    position: absolute;
    width: 1rem;
    height: 1rem;
    content: "";
    //border-top: 3px solid #02a6b5;
    top: 0;
}

.boxall:before,
.boxfoot:before {
    //border-left: 3px solid #02a6b5;
    left: 0;
}

.boxall:after,
.boxfoot:after {
    //border-right: 3px solid #02a6b5;
    right: 0;
}

.boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.boxfoot:before,
.boxfoot:after {
    position: absolute;
    width: 1rem;
    height: 1rem;
    content: "";
    //border-bottom: 3px solid #02a6b5;
    bottom: 0;
}
.titleup{
      padding: 6px 0px;
    //color: white;
}
.boxColor{
      //background: #162B56;
      margin-bottom:0px;
    margin-top: 20px;
}
.boxInfo {
    //background: #162B56;
    margin-bottom: 0px;
    margin-top: 35px;
}
::v-deep .card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,.125);
    padding: 0.25rem 1.25rem;
    position: relative;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
::v-deep .card-title {
    float: left;
    font-size: 1.1rem;
    font-weight: bold;
    //color: white;
    margin: 0;
}
::v-deep .card-body {
    -ms-flex: 1 1 auto;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0.25rem;
}
</style>