no-query-detail.vue

<template lang="pug">
.animation
  .info-title
    //- | {{ dataForm.name }}
    | 空调
    el-button(
      icon="el-icon-close",
      style="float: right",
      type="text",
      @click="closeQueryDetailVisible"
    )
  .info-form(style="text-align: center; border-bottom: 1px solid #c0c0c0")
    img(src="../../../assets/images/kt.jpg")
  .info-form(style="border-bottom: 1px solid #c0c0c0")
    .quDetailM
      p.leftP 设备名称&nbsp;:&nbsp;&nbsp; 室内机
    .quDetailM
      p.leftP 设备编号&nbsp;:&nbsp;&nbsp; CDSLAKS-009
    .quDetailM
      p.leftP 设备品牌：&nbsp;:&nbsp;&nbsp;格力
    .quDetailM
      p.leftP 设备型号：&nbsp;:&nbsp;&nbsp;晶弘33-1
    .quDetailM
      p.leftP 安装日期：&nbsp;:&nbsp;&nbsp;2020-01-04
      p.leftP 维保日期：&nbsp;:&nbsp;&nbsp;2020-01-15
  .info-form
    el-row
      el-col(:span="8")
        .switch-warp
          div(:class="[state == 1 ? 'on' : '']", @click="handleSwitch(1)") 打开
          div(:class="[state == 2 ? 'on' : '']", @click="handleSwitch(2)") 关闭
      el-col.text-size(:span="16", flex, justify-content="start")
        div(style="width: 60px") 频率设置：
        el-input(size="mini", style="width: 60px", v-model="speed")
        span &nbsp;转
        el-button(type="primary", size="mini", style="margin-left: 10px") 设定
    el-row
      el-col.text-size(:span="8") 当前已
        span(v-if="state == 1") 打开
        span(v-else) 关闭
      el-col.text-size(:span="10") 当前频率：
        span(style="color: blue") 2289
        span &nbsp;转/分
  .info-state
    span(style="font-weight: bold") 空调运行状态
    div
      span.type 电压：
      span.value 220 V
    div
      span.type 电流：
      span.value 4 A
    div
      span.type 功率因数：
      span.value 0.8 kw
    div
      span.type 功率：
      span.value 0.8 kw
    div
      span.type 电能：
      span.value 12 kw.h
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', ['info'])
  },
  data() {
    return {
      speed: '',
      state: 1,
      video1: 0,
      stationId: localStorage.getItem('stationId'),
      imgUrl: '',

      clickFlag: false,
      cameraCur: {},
      restaurants: [],
      dataForm: {
        id: 0,
        name: '',
        type: 1,
        lineId: '',
        lineName: '',
        stationId: '',
        stationName: '',
        tierId: '',
        subSystem: '',
        code: '',
        subCode: '',
        addressCode: '',
        port: '',
        username: '',
        password: '',
        remark: '',
        status: 1
      }
    }
  },
  created() {},
  methods: {
    init(data, stationId) {
      this.clickFlag = false
      this.dataForm = data
      // this.stationId = stationId
      this.dataForm.operatorName = this.info.name
    },

    closeQueryDetailVisible() {
      this.$emit('closeQ')
    },
    handleSwitch(state) {
      this.state = state
    }
  }
}
</script>
<style lang="scss" scoped>
.switch-warp {
  width: 80px;
  height: 26px;
  font-size: 12px;
  line-height: 25px;
  overflow: hidden;
  border-radius: 13px;
  background: #d3d3d3;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  div {
    width: 39px;
    height: 24px;
    line-height: 24px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  div.on {
    background: #4cb527;
    color: #fff;
    border-radius: 13px;
    border: 1px solid rgba(23, 41, 71, 0.02);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
      0px 2px 0px 0px rgba(255, 255, 255, 0.15);
  }
}
.text-size {
  font-size: 12px;
  line-height: 28px;
}
.info-state {
  padding: 0 10px 10px;
  .type {
    font-size: 14px;
    margin: 5px 0 0 10px;
    display: inline-block;
    width: 85px;
  }
  .value {
    color: #47b320;
  }
}
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
.info-title {
  line-height: 40px;
  height: 40px;
  padding: 0 20px;
  background-color: #e1edf4;
  border-bottom: 1px solid #cccccc;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
}
.info-video {
  padding: 10px;
  height: 160px;
}
.info-form {
  padding: 10px;
}
.info-block {
  border: 1px solid #cccccc;
}
.el-select {
  width: 100%;
}
.video {
  width: 100%;
  height: 180px;
}
.animation {
  animation: myfirst 1s;
  position: absolute;
  top: 50px;
  right: 0;
  width: 330px;
  background-color: #f4f4f4;
  z-index: 11;
  border: 1px solid rgba(195, 195, 195, 1);
  box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
@keyframes myfirst {
  from {
    right: -500px;
  }
  to {
    right: 0;
  }
}
.quDetailM {
  width: 100%;
}
.leftP {
  height: 30px;
  line-height: 30px;
  margin: 0;
  width: 100%;
  font-size: 14px;
  span {
    color: #46b6f9;
  }
}
.operate {
  padding: 5px 0;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  border-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5),
      rgba(213, 213, 213, 0.5),
      rgba(255, 255, 255, 0.5),
      rgba(218, 218, 218, 0.5),
      rgba(255, 255, 255, 0.5)
    )
    2 2;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  .btns {
    width: 194px;
    height: 194px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    div {
      cursor: pointer;
      padding: 10px;
    }
    .s {
      position: absolute;
      top: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .x {
      position: absolute;
      bottom: 10px;
      left: 75px;
      width: 24px;
      height: 24px;
    }
    .z {
      position: absolute;
      top: 75px;
      left: 10px;
      width: 24px;
      height: 24px;
    }
    .y {
      position: absolute;
      top: 75px;
      right: 10px;
      width: 24px;
      height: 24px;
    }
    .zs {
      position: absolute;
      top: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .zx {
      position: absolute;
      bottom: 32px;
      left: 32px;
      width: 24px;
      height: 24px;
    }
    .ys {
      position: absolute;
      top: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .yx {
      position: absolute;
      bottom: 32px;
      right: 32px;
      width: 24px;
      height: 24px;
    }
    .fx {
      position: absolute;
      padding: 0;
      cursor: default;
      top: 50%;
      left: 50%;
      width: 65px;
      height: 65px;
      background: #ececec;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      color: #969696;
      transform: translate(-50%, -50%);
    }
  }
  .ytBox {
    width: 90px;
    font-size: 16px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .mllx {
      display: flex;
      justify-content: space-between;
      width: 90%;
      span {
        line-height: 40px;
        text-align: center;
        width: 35%;
      }
    }
    .bbBtn {
      height: 40px;
      display: flex;
      margin-left: 10px;
      justify-content: flex-start;
      div {
        width: 40px;
        height: 40px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

.el-icon-wq-r1 {
  background: url(~@/assets/images/r1.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r1:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r2 {
  background: url(~@/assets/images/r2.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r2:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r3 {
  background: url(~@/assets/images/r3.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r3:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r5 {
  background: url(~@/assets/images/r5.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r5:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r6 {
  background: url(~@/assets/images/r6.png) center no-repeat;
  background-size: 65%;
}
.el-icon-wq-r6:before {
  content: "";
  font-size: 16px;
}

.el-icon-wq-r1b {
  background: url(~@/assets/images/r1b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r1b:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r2b {
  background: url(~@/assets/images/r2b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r2b:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r3b {
  background: url(~@/assets/images/r3b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r3b:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r5b {
  background: url(~@/assets/images/r5b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r5b:before {
  content: "";
  font-size: 16px;
}
.el-icon-wq-r6b {
  background: url(~@/assets/images/r6b.png) center no-repeat;
  height: 35px;
  width: 35px;
  background-size: 65%;
}
.el-icon-wq-r6b:before {
  content: "";
  font-size: 16px;
}
</style>
<style lang="scss">
.instuctions_content {
  table {
    th {
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
}
</style>