新版目录树样式调试及状态更新调试；朔黄批量导入列表调试；视频检索页面添加处理参数，添加标注接口添加参数；分页器展示优化，默认检索时间调整；转储设备接口调试

hanbaoshan

2021-02-22 93a26507f76156fa65aead1515c430688c089e1d

 src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue

@@ -1,19 +1,22 @@
<template>
  <div class="transfer-device-manage">
    <div class="header-with-tab">
      <el-tabs v-model="actTab" @tab-click="checkTab" >
        <el-tab-pane name="dev1" v-for="tab in devices" :key="tab">
      <el-tabs v-model="actTab" @tab-click="checkTab">
        <el-tab-pane :name="tab.ID" v-for="tab in devices" :key="tab.ID">
          <div slot="label" class="label-slot">
            <span>{{tab.Name}}</span>
            <span class="capsule" :class="{'online':tab.Status==0,'offline':tab.Status==1}">{{tab.Status==0?"在线":"离线"}}</span>
            <span
              class="capsule"
              :class="{'online':tab.Status==0,'offline':tab.Status==1}"
            >{{tab.Status==0?"在线":"离线"}}</span>
          </div>
        </el-tab-pane>
        <el-tab-pane name="dev2">
        <!-- <el-tab-pane name="dev2">
          <div slot="label" class="label-slot">
            <span>转储设备2</span>
            <span class="capsule offline">离线</span>
          </div>
        </el-tab-pane>
        </el-tab-pane>-->
      </el-tabs>
      <div class="btn-add-dev" @click="showAddDevice">
        <i class="el-icon-circle-plus"></i>
@@ -31,10 +34,10 @@
        :key="indicator.id"
      >
        <div class="title">
          <span class="dot"></span>
          <span class="dot" :class="{'kx':indicator.id=='kx','dx':indicator.id=='dx','ccgz':indicator.id=='ccgz'}"></span>
          <span class="word">{{indicator.title}}</span>
        </div>
        <div class="indicator-val">{{indicator.val}}</div>
        <div class="indicator-val">{{indicator.slots.length}}</div>
      </div>
    </div>
    <div class="table-area">
@@ -44,7 +47,7 @@
          <div>
            <el-input v-model="deviceAddr" size="small"></el-input>
          </div>
        </div> -->
        </div>-->
        <div>
          <label>设备状态:</label>
          <div>
@@ -58,8 +61,18 @@
        </div>
      </div>
      <el-table class="thbg" :data="tableData" fit>
        <el-table-column prop="name" label="转储设备名称"></el-table-column>
        <el-table-column prop="state" label="设备状态"></el-table-column>
        <el-table-column type="index" width="100" label="序号"></el-table-column>
        <el-table-column prop="Name" label="插槽名称"></el-table-column>
        <el-table-column prop="Status" label="状态">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.Status==0">空闲中</span>
              <span v-if="scope.row.Status==1">读写中</span>
              <span v-if="scope.row.Status==2">插槽故障</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="state" label="设备状态"></el-table-column>
        <el-table-column prop="pic" label="现场图片"></el-table-column>
        <el-table-column prop="addr" label="设备地址"></el-table-column>
        <el-table-column prop="tel" label="报修电话"></el-table-column>
@@ -69,12 +82,16 @@
              <span @click="checkSlot(scope.row)">查看插槽</span>
            </div>
          </template>
        </el-table-column>
        </el-table-column>-->
      </el-table>
    </div>
    <el-dialog :visible="visibleOfialogAddDev">
    <el-dialog
      :visible="visibleOfialogAddDev"
      title="添加设备"
      class="dialog-addDev"
      @close="visibleOfialogAddDev = false"
    >
      <div>
        <p slot="title">添加设备</p>
        <div class="flex-box">
          <label>设备名称：</label>
          <el-input v-model="Name"></el-input>
@@ -92,53 +109,81 @@
  </div>
</template>
<script>
import {addDevice,getDeviceList} from '@/api/shuohuang';
import { addDevice, getDeviceList, getDeviceInfoById } from '@/api/shuohuang';
export default {
  data () {
    return {
      actTab: 'dev1',
      devices: [],
      generalIndicators: [{ id: 'gz', title: '有故障设备', val: 156 }, { id: 'zc', title: '正常设备', val: 5000 }, { id: 'dx', title: '读写中', val: 56 }, { id: 'kx', title: '空闲中', val: 2000 }, { id: 'ccgz', title: '插槽故障', val: 1000 }],
      generalIndicators: [{ id: 'dx', title: '读写中', slots: [] }, { id: 'kx', title: '空闲中', slots: [] }, { id: 'ccgz', title: '插槽故障', slots: [] }],
      deviceAddr: '',
      deviceState: '',
      tableData: [],
      visibleOfialogAddDev: false,
      Name:'',
      IP:'',
      Name: '',
      IP: '',
    }
  },
  mounted(){
  mounted () {
    this.findDeviceList();
  },
  methods: {
    findDeviceList (){
      getDeviceList().then(res=>{
        debugger
        //_this.devices = 
    findDeviceList () {
      let _this = this;
      getDeviceList().then(res => {
        _this.devices = res.data;
        _this.actTab = _this.devices[0].ID;
        _this.findDeviceIfo()
      })
    },
    toAddDevice(){
    findDeviceIfo () {
      let _this = this;
      getDeviceInfoById({ DeviceID: this.actTab }).then(res => {
        debugger
        _this.tableData = res.data;
        //统计当前插槽状态
        let dx = _this.generalIndicators.find(indicator => indicator.id == 'dx');
        let kx = _this.generalIndicators.find(indicator => indicator.id == 'kx');
        let ccgz = _this.generalIndicators.find(indicator => indicator.id == 'ccgz');
        dx.slots = [];
        kx.slots = [];
        ccgz.slots = [];
        res.data.forEach(slot => {
          if (slot.Status == 0) {
            kx.slots.push(slot)
          }
          if (slot.Status == 1) {
            dx.slots.push(slot)
          }
          if (slot.Status == 2) {
            ccgz.slots.push(slot)
          }
        })
        //_this.generalIndicators
      })
    },
    toAddDevice () {
      let _this = this;
      let params = {
        Name: this.Name,
        IP: this.IP
      }
      addDevice(params).then(res=>{
        if(res.success){
      addDevice(params).then(res => {
        if (res.success) {
          this.$notify({
            type:'success',
            type: 'success',
            message: res.msg
          })
          _this.visibleOfialogAddDev = true;
        }
      })
    },
    showAddDevice(){
    showAddDevice () {
      this.visibleOfialogAddDev = true;

    },
    checkTab (tab, event) {

      this.findDeviceIfo();
    },
    checkSlot (row) {

@@ -150,7 +195,7 @@
<style lang="scss">
.transfer-device-manage {
  padding: 20px;
  .el-tabs__item{
  .el-tabs__item {
    height: 45px;
    line-height: 45px;
  }
@@ -167,17 +212,17 @@
      .capsule {
        width: 42px;
        height: 20px;
        margin-left: 10px; 
        margin-left: 10px;
        line-height: 20px;
        text-align: center;
        border-radius: 20px;
        font-size: 12px;
        font-weight: normal;
        color: #fff;
        &.online{
        &.online {
          background: #00a854;
        }
        &.offline{
        &.offline {
          background: #f04134;
        }
      }
@@ -223,7 +268,13 @@
          height: 10px;
          margin-right: 5px;
          border-radius: 50%;
          background: rgb(94, 14, 243);
          background: #01a854;
          &.kx {
            background: #0f77d1;
          }
          &.ccgz {
            background: #f04235;
          }
        }
      }
      .indicator-val {
@@ -241,5 +292,24 @@
      }
    }
  }
  .dialog-addDev {
    .el-dialog {
      width: 600px;
    }
    .flex-box {
      align-items: center;
      margin-bottom: 10px;
      label {
        width: 90px;
        text-align: left;
      }
      .el-input {
        width: 500px;
      }
    }
    .btns {
      padding: 10px 0;
    }
  }
}
</style>