EMP.GirderErection.Slim.Web/src/views/grider-erections/gride-work-info/tky-index.vue

<template>
  <div>
    <el-container class="content-height-fit">
      <el-container class="resize-fit-container">
        <div class="app-container">
          <el-row :gutter="16">
            <el-col :sm="18" :md="18">
              <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-tag type="success" style="margin-left: 6px;" size="mini">在线</el-tag>
              <el-select v-model="query.beamCode" size="mini" style="float:right;margin-right: 6px;" placeholder="请选择梁片编码">
                <el-option
                  v-for="item in beams"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :sm="6" :md="6">
              <span style="color: white;font-size: 18px;">视频监控</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :lg="18" :sm="18" :xs="18" :xl="18" :md="18" style="padding-right: 8px">
              <div class="boxall">
                <el-row>
                  <el-col :lg="4" :sm="4" :xs="4" :xl="4" :md="4">
                    <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: yellow;">{{ 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: yellow;">{{ 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: yellow;">{{ data.cycleCount }}</span>次</div>
                      <div class="left-foot">累计循环{{ data.allCycleCount }}次</div>
                    </div>
                  </el-col>
                  <el-col :lg="20" :sm="20" :xs="20" :xl="20" :md="20">
                    <div class="titleup">
                      <span>最近更新时间：</span><span style="color:yellow;font-weight: bold;">{{ noGuide.uploadTime | 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 :sm="12" :md="12">
                    <img src="../../../assets/jqj1.png" width="100%" height="210">
                  </el-col>
                  <el-col :sm="12" :md="12" style="padding-bottom: 8px;">
                    <img src="../../../assets/jqj2.jpg" width="100%" height="210">
                  </el-col>
                  <el-col :sm="12" :md="12">
                    <img src="../../../assets/jqj3.jpg" width="100%" height="210">
                  </el-col>
                  <el-col :sm="12" :md="12">
                    <img src="../../../assets/jqj4.jpg" width="100%" height="210">
                  </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>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Box from '@/components/Box/Box'
import waves from '@/directive/waves' // waves directive
import THAInfo from '@/views/grider-erections/gride-work-info/components/THAInfo'
import New2d from '@/views/grider-erections/gride-work-info/components//new-2d.vue'
import BeamSupport from '@/views/grider-erections/gride-work-info/components/beam-support.vue'
import TacklingSys from '@/views/grider-erections/gride-work-info/components/tackling-sys.vue'
import LimitState from '@/views/grider-erections/gride-work-info/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 _ from 'lodash'

export default {
  directives: { waves },
  components: {
    Box, //, InnerSidebar, ProjectSectionDeviceTree
    New2d,
    THAInfo,
    BeamSupport,
    TacklingSys,
    LimitState,
    Kiosk2dModel
  },
  data() {
    return {
      griderErections: [
        {
          value: 'EA64ABA4-3514-9D82-0D8C-3A03141B7962',
          label: '架桥机-HSH-LC01-SXJ900',
          type: 1

        },
        {
          value: 'E0F30D4B-55B5-0C56-4841-3A0314301ED1',
          label: '架桥机-HSH-LC02-YTJ',
          type: 2
        }
      ],
      beams: [
        {
          value: '2022060101',
          label: '2022060101'
        }
      ],
      query: {
        deviceManageId: 'EA64ABA4-3514-9D82-0D8C-3A03141B7962',
        beamCode: '2022060101'
      },
      listLoading: false,
      proDucitonVisible: false,
      modelVisible: true,
      data: {},
      noGuide: {},
      warnings: [],
      playback: { anim: null, isAnimRunning: false }
    }
  },
  created() {
  },
  async mounted() {
    this.loading = true
    // try {
    //   await this.$store.dispatch('user/clientCredentials')
    //   this.loading = false
    // } catch (ex) {
    //   console.log(ex)
    // }
    griderErectionApi.getList(this.query).then(res => {
      this.data = res
      if (res.splitTypeNoGuideBeams.length > 0) {
        this.noGuide = res.splitTypeNoGuideBeams[res.splitTypeNoGuideBeams.length - 1]
        this.returndata(res.splitTypeNoGuideBeams[res.splitTypeNoGuideBeams.length - 1])
      }
    })
  },
  methods: {
    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.$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
      }
    }
  }
}
</script>
<style  lang="scss" scoped>
::v-deep .resize-fit-container {
    width: 100%;
    padding: 8px;
    overflow-y: auto;
    background: #181833;
}

// .el-table {
//     line-height: 1em;
// }
.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: 3px 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>