玩手机打点

heyujie

2021-11-08 bec902883b62ddc9a8834ae9ecddcdb7efa7010b

玩手机打点

 public/images/shuohuang/×é 779.png

 public/images/shuohuang/×é 780.png

 public/images/shuohuang/×é 781.png

 public/images/shuohuang/×é 782.png

 src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue

@@ -4,92 +4,108 @@
      <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="title"
              :style="tab.Status == 1 ? { color: '#8A98B8' } : {}"
              >{{ tab.Name }}</span
            >
            <span
              class="capsule"
              :class="{'online':tab.Status==0,'offline':tab.Status==1}"
            >{{tab.Status==0?"在线":"离线"}}</span>
              :class="{ online: tab.Status == 0, offline: tab.Status == 1 }"
              >{{ tab.Status == 0 ? "在线" : "离线" }}</span
            >
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane name="dev2">
          <div slot="label" class="label-slot">
            <span>转储设备2</span>
            <span class="capsule offline">离线</span>
          </div>
        </el-tab-pane>-->
      </el-tabs>
      <div class="btn-add-dev" @click="showAddDevice">
        <i class="el-icon-circle-plus"></i>
      <!-- <div class="btn-add-dev" @click="showAddDevice">
        <span class="icon iconfont">&#xe602; </span>
        <span>添加设备</span>
      </div>
      </div> -->
    </div>
    <div class="general-view">
      <div class="indicator">
        <el-button>设备重启</el-button>
      </div>
      <div
        class="indicator"
        :class="{'lastOne':index==generalIndicators.length-1}"
        v-for="(indicator,index) in generalIndicators"
        :key="indicator.id"
      >
        <div class="title">
          <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.slots.length}}</div>
      </div>
    </div>
    <div class="table-area">
      <div class="filter-bar flex-box">
        <!-- <div>
          <label>设备地址:</label>
          <div>
            <el-input v-model="deviceAddr" size="small"></el-input>
          </div>
        </div>-->
        <div>
          <label>设备状态:</label>
          <div>
            <el-select v-model="deviceState" size="small">
              <el-option value="" label="全部"></el-option>
              <el-option value="1" label="读写中"></el-option>
              <el-option value="0" label="空闲中"></el-option>
              <el-option value="2" label="插槽故障"></el-option>
            </el-select>
    <div class="t-d-content">
      <div class="general-view">
        <div class="indicator">
          <div class="icon-wrap">
            <div class="icon-div"><span class="iconfont">&#xe660;</span></div>

            <span class="text">设备重启</span>
          </div>
        </div>
        <div class="btns">
          <el-button @click="findDeviceIfo" type="primary" size="small">查询</el-button>
        <div
          class="indicator"
          :class="{ lastOne: index == generalIndicators.length - 1 }"
          v-for="(indicator, index) in generalIndicators"
          :key="indicator.id"
        >
          <div class="img-desc">
            <img class="icon" :src="indicator.path" />
          </div>
          <div class="title">
            <div class="indicator-val" :style="{ color: indicator.color }">
              <span
                style="font-size: 24px"
                :style="{ color: indicator.color }"
                >{{ indicator.slots.length }}</span
              >
              ä¸ª
            </div>
            <span class="word">{{ indicator.title }}</span>
          </div>
        </div>
      </div>
      <el-table class="thbg" :data="tableData" fit>
        <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 class="table-area">
        <div class="filter-bar flex-box">
          <div>
            <label>设备状态:</label>
            <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>
              <el-select v-model="deviceState" size="small">
                <el-option value="" label="全部"></el-option>
                <el-option value="1" label="读写中"></el-option>
                <el-option value="0" label="空闲中"></el-option>
                <el-option value="2" label="插槽故障"></el-option>
              </el-select>
            </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>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="operation">
              <span @click="checkSlot(scope.row)">查看插槽</span>
            </div>
          </template>
        </el-table-column>-->
      </el-table>
          </div>
          <div class="btns">
            <el-button @click="findDeviceIfo" type="primary" size="small"
              >查询</el-button
            >
          </div>
        </div>
        <el-table
          class="thbg"
          :data="tableData"
          fit
          stripe
          :header-cell-style="{
            background: '#2D52D7',
            color: '#fff',
            height: '50px',
          }"
        >
          <el-table-column
            type="index"
            width="240"
            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 style="color: #6297f2" v-if="scope.row.Status == 0"
                  >空闲中</span
                >
                <span style="color: #fea425" v-if="scope.row.Status == 1"
                  >读写中</span
                >
                <span style="color: #ed663e" v-if="scope.row.Status == 2"
                  >插槽故障</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      :visible="visibleOfialogAddDev"
@@ -107,28 +123,54 @@
          <el-input v-model="IP"></el-input>
        </div>
        <div slot="footer" class="btns">
          <el-button type="primary" size="small" @click="toAddDevice">确定</el-button>
          <el-button size="small" @click="visibleOfialogAddDev=false">取消</el-button>
          <el-button type="primary" size="small" @click="toAddDevice"
            >确定</el-button
          >
          <el-button size="small" @click="visibleOfialogAddDev = false"
            >取消</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addDevice, getDeviceList, getDeviceInfo } from '@/api/shuohuang';
import { addDevice, getDeviceList, getDeviceInfo } from "@/api/shuohuang";
export default {
  data() {
    return {
      actTab: 'dev1',
      actTab: "dev1",
      devices: [],
      generalIndicators: [{ id: 'dx', title: '读写中', slots: [] }, { id: 'kx', title: '空闲中', slots: [] }, { id: 'ccgz', title: '插槽故障', slots: [] }],
      deviceAddr: '',
      deviceState: '',
      generalIndicators: [
        {
          id: "dx",
          title: "读写中",
          slots: [],
          color: "#FEA425",
          path: "/images/shuohuang/组 780.png",
        },
        {
          id: "kx",
          title: "空闲中",
          slots: [],
          color: "#6297F2",
          path: "/images/shuohuang/组 781.png",
        },
        {
          id: "ccgz",
          title: "插槽故障",
          slots: [],
          color: "#ED663E",
          path: "/images/shuohuang/组 782.png",
        },
      ],
      deviceAddr: "",
      deviceState: "",
      tableData: [],
      visibleOfialogAddDev: false,
      Name: '',
      IP: '',
    }
      Name: "",
      IP: "",
    };
  },
  mounted() {
    this.findDeviceList();
@@ -136,74 +178,84 @@
  methods: {
    findDeviceList() {
      let _this = this;
      getDeviceList().then(res => {
      getDeviceList().then((res) => {
        _this.devices = res.data;
        _this.actTab = _this.devices[0].ID;
        _this.findDeviceIfo()
      })
        _this.findDeviceIfo();
      });
    },
    findDeviceIfo() {
      let _this = this;
      getDeviceInfo({ 
      getDeviceInfo({
        DeviceID: this.actTab,
        Status:this.deviceState
        }).then(res => {
        Status: this.deviceState,
      }).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');
        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 => {
        res.data.forEach((slot) => {
          if (slot.Status == 0) {
            kx.slots.push(slot)
            kx.slots.push(slot);
          }
          if (slot.Status == 1) {
            dx.slots.push(slot)
            dx.slots.push(slot);
          }
          if (slot.Status == 2) {
            ccgz.slots.push(slot)
            ccgz.slots.push(slot);
          }
        })
        });
        //_this.generalIndicators
      })
      });
    },
    toAddDevice() {
      let _this = this;
      let params = {
        Name: this.Name,
        IP: this.IP
      }
      addDevice(params).then(res => {
        IP: this.IP,
      };
      addDevice(params).then((res) => {
        if (res.success) {
          this.$notify({
            type: 'success',
            message: res.msg
          })
            type: "success",
            message: res.msg,
          });
          _this.visibleOfialogAddDev = true;
        }
      })
      });
    },
    showAddDevice() {
      this.visibleOfialogAddDev = true;

    },
    checkTab(tab, event) {
      this.findDeviceIfo();
    },
    checkSlot(row) {

    }
  }
}
    checkSlot(row) {},
  },
};
</script>

<style lang="scss">
.transfer-device-manage {
  padding: 20px;
  // padding: 20px;
  // .el-tabs__nav-scroll {
  //   overflow-x: scroll;
  // }
  .el-tabs__nav-wrap.is-scrollable {
    padding-right: 90px;
  }

  .el-tabs__item {
    height: 45px;
    line-height: 45px;
@@ -213,48 +265,104 @@
  }
  .header-with-tab {
    position: relative;
    background: #ffffff;
    box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
    border-radius: 10px;
    padding: 0 35px;
    padding-top: 15px;
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__item.is-active .label-slot .title {
      color: #2d52d7;
    }
    .label-slot {
      display: flex;
      align-items: center;
      padding: 0 20px;
      font-weight: bold;
      position: relative;
      .title {
        font-size: 14px;
      }
      .capsule {
        width: 42px;
        height: 20px;
        width: 36px;
        height: 18px;
        margin-left: 10px;
        line-height: 20px;
        line-height: 18px;
        position: absolute;
        text-align: center;
        top: 0px;
        text-align: center;
        border-radius: 20px;
        font-size: 12px;
        font-weight: normal;
        color: #fff;
        right: -20px;
        &.online {
          background: #00a854;
          background: #2ace7c;
        }
        &.offline {
          background: #f04134;
          background: #8a98b8;
        }
      }
    }
    .btn-add-dev {
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 10px;
      color: #1890ff;
      font-size: 14px;
      i {
        padding-right: 4px;
        font-size: 16px;
      }
    // .btn-add-dev {
    //   cursor: pointer;
    //   position: absolute;
    //   right: 25px;
    //   top: 20px;
    //   /* color: #1890ff; */
    //   font-size: 16px;
    // }
  }
  .t-d-content {
    background: #fff;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgb(160 174 230 / 56%);
    padding: 30px 45px;
    button span {
      color: #fff;
    }
  }
  .general-view {
    display: flex;
    padding: 30px;
    .indicator {
      flex: 1;
      position: relative;
      background: #f4f6f9;
      width: 263px;
      height: 101px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 50px;

      .img-desc {
        margin-right: 8px;

        img {
          width: 53px;
        }
      }
      .icon-wrap {
        display: flex;
        flex-direction: column;
        .icon-div {
          background: #26d4b4;
          width: 42px;
          height: 42px;
          line-height: 42px;

          border-radius: 21px;
          box-shadow: 0 0 0 8px #caf0eb;
          margin-bottom: 10px;
          span {
            font-size: 32px;
            color: #fff;
          }
        }
      }
      &:not(.lastOne):after {
        content: "";
        width: 1px;
@@ -267,28 +375,43 @@
      }
      .title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #999;
        margin-bottom: 10px;
        .dot {
          width: 10px;
          height: 10px;
          margin-right: 5px;
          border-radius: 50%;
          background: #01a854;
          &.kx {
            background: #0f77d1;
          }
          &.ccgz {
            background: #f04235;
          }
        flex-direction: column;
        .indicator-val {
          font-size: 16px;
          font-weight: bold;
        }
      }
      .indicator-val {
        font-size: 24px;
      }
    }
  }
  .table-area {
    margin-top: 25px;
    button {
      background: #2d52d7 !important;
      border-color: #2d52d7 !important;
    }
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
      background: #f4f6f9;
    }
    th.el-table__cell > .cell {
      color: #fff;
    }
    .thbg {
      margin-top: 15px;
      border: none;
    }
    .el-table__row > td {
      border: none;
    }
    .el-table th.is-leaf {
      border: none;
    }
    .el-table::before {
      height: 0px;
    }
  }
  .filter-bar.flex-box {

 src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue

@@ -215,7 +215,7 @@
  padding: 33px;
  background-color: #fff;
    height: 100%;

border-radius: 10px;
box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
  .table-area .el-table {
    border: none;

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -549,8 +549,9 @@
      this.showPlayBtn = false;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.id}`][0].play();
        this.maxDuration =
          this.$refs[`player_${this.curVideo.id}`][0].getDuration();
        this.maxDuration = this.$refs[
          `player_${this.curVideo.id}`
        ][0].getDuration();
      } else {
        this.videoArrs.forEach((v) => {
          this.$refs[`player_${v.id}`][0].play();
@@ -579,8 +580,9 @@
        this.$refs[`player_${this.curVideo.id}`][0].seek(val);
        // this.$refs[`player_${this.curVideo.ID}`][0].play();
        setTimeout(() => {
          let curT =
            that.$refs[`player_${that.curVideo.ID}`][0].getCurrentTime();
          let curT = that.$refs[
            `player_${that.curVideo.ID}`
          ][0].getCurrentTime();
        }, 600);
      } else {
        this.videoArrs.forEach((v, i) => {
@@ -720,6 +722,13 @@
      if (text.indexOf("过分相") > -1) {
        return "blue";
      }
      if (
        text.indexOf("玩手机") > -1 ||
        text.indexOf("趴伏") > -1 ||
        text.indexOf("仰卧") > -1
      ) {
        return "red";
      }
      return "";
    },
    refreshCurVideoLabel(video) {