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/imgs/kt.jpg")
    //- span {{dataForm.icon}}
    div(:class="dataForm.icon+'6'")
  .info-form(style="border-bottom: 1px solid #c0c0c0")
    .quDetailM
      p.leftP 设备名称：&nbsp;&nbsp;&nbsp; {{ dataForm.name }}
    .quDetailM
      p.leftP 设备编号：&nbsp;&nbsp;&nbsp; {{ dataForm.code }}
    .quDetailM
      p.leftP 设备品牌：&nbsp;&nbsp;&nbsp; 格力
    .quDetailM
      p.leftP 设备型号：&nbsp;&nbsp;&nbsp;{{ dataForm.equipmentModel }}
    .quDetailM
      p.leftP 安装日期：&nbsp;&nbsp;&nbsp;{{ dataForm.installDate }}
  .info-form
    el-row.text-size(v-if="openOrClose.indexOf(dataForm.type)>-1")
      el-col(:span='10') 当前已
        span(v-if="dataForm.status == 1") 运行
        span(v-else-if="dataForm.status == 2") 停止
        span(v-else-if="dataForm.status == 3") 离线
        span(v-else) 故障
      el-col(:span='10')
        .switch-warp
          div(:class="[state == 1 ? 'on' : '']", @click="handleSwitch(1)") 打开
          div(:class="[state == 2 ? 'on' : '']", @click="handleSwitch(2)") 关闭
    el-row.text-size(style="margin-top: 10px" v-if="dataForm.type=='303310efddb34a2e9bf269bdff8a7dc5'||dataForm.type=='f4c840711eae4bcb9536a890cdfda493'")
      el-col(:span="16" )
        span 频率设置：
        el-input(size="mini", style="width: 80px", v-model="speed")
        span &nbsp;转/分
        el-button(type="primary", size="mini", style="margin-left: 3px") 设定
    //- 卷帘门
    el-row
      el-col(v-if="dataForm.type=='c788ce98c1f248f590434394da485ce4'")
            el-button(type="primary", size="mini", style="margin-left: 10px") 上升
            el-button(type="primary", size="mini", style="margin-left: 10px") 下降
            el-button(type="primary", size="mini", style="margin-left: 10px") 停止

  .info-state
    span(style="font-weight: bold") 设备运行状态
    div(v-if="this.params.length && this.params[0].electric_energy")
      span.type 电量(kwh)：
      span.value {{ params[0].electric_energy }}
    div(v-if="this.params.length && this.params[0].current_frequency")
      span.type 当前频率(转/分)：
      span.value {{ params[0].current_frequency }}
    div(v-if="this.params.length && this.params[0].feng_shui_mode")
      span.type 风水模式：
      span.value {{ params[0].feng_shui_mode }}
    div(v-if="this.params.length && this.params[0].hot_water_mode")
      span.type 热水模式：
      span.value {{ params[0].hot_water_mode }}
    div(v-if="this.params.length && this.params[0].water_supply_temperature")
      span.type 供水温度(℃)：
      span.value {{ params[0].water_supply_temperature }}
    div(v-if="this.params.length && this.params[0].return_water_temperature")
      span.type 回水温度(℃)：
      span.value {{ params[0].return_water_temperature }}
    div(v-if="this.params.length && this.params[0].heating_start_temperature")
      span.type 制热启动温度(℃)：
      span.value {{ params[0].heating_start_temperature }}
    div(v-if="this.params.length && this.params[0].heating_stop_temperature")
      span.type 制热停止温度(℃)：
      span.value {{ params[0].heating_stop_temperature }}
    div(v-if="this.params.length && this.params[0].indoor_ambient_temperature")
      span.type 室内环境温度(℃)：
      span.value {{ params[0].indoor_ambient_temperature }}
    div(v-if="this.params.length && this.params[0].outlet_temperature")
      span.type 出风温度(℃)：
      span.value {{ params[0].outlet_temperature }}
    div(v-if="this.params.length && this.params[0].return_air_temperature")
      span.type 回风温度(℃)：
      span.value {{ params[0].return_air_temperature }}
    div(v-if="this.params.length && this.params[0].hot_air_start_temperature")
      span.type 热风启动温度(℃)：
      span.value {{ params[0].hot_air_start_temperature }}
    div(v-if="this.params.length && this.params[0].hot_air_stop_temperature")
      span.type 热风停止温度(℃)：
      span.value {{ params[0].hot_air_stop_temperature }}
    div(v-if="this.params.length && this.params[0].temperature")
      span.type 温度(℃)：
      span.value {{ params[0].temperature }}
    div(v-if="this.params.length && this.params[0].humidity")
      span.type 湿度(%RH)：
      span.value {{ params[0].humidity }}
    div(v-if="this.params.length && this.params[0].wind_speed")
      span.type 风速(m/s)：
      span.value {{ params[0].wind_speed }}
    div(v-if="this.params.length && this.params[0].wind_direction")
      span.type 风向：
      span.value {{ params[0].wind_direction }}
    div(v-if="this.params.length && this.params[0].Illuminance")
      span.type 光照度(Lux)：
      span.value {{ params[0].Illuminance }}
    div(v-if="this.params.length && this.params[0].carbon_dioxide")
      span.type CO2(PPM)：
      span.value {{ params[0].carbon_dioxide }}
    div(v-if="this.params.length && this.params[0].fine_particles")
      span.type PM2.5(ug/m)：
      span.value {{ params[0].fine_particles }}
    div(v-if="this.params.length && this.params[0].radiation")
      span.type 辐射(w/m)：
      span.value {{ params[0].radiation }}
    div(v-if="this.params.length && this.params[0].setting_temperature")
      span.type 设定温度(℃)：
      span.value {{ params[0].setting_temperature }}
    div(v-if="this.params.length && this.params[0].setting_mode")
      span.type 设定模式：
      span.value {{ params[0].setting_mode }}
    div(v-if="this.params.length && this.params[0].setting_wind_speed")
      span.type 设定风速(m/s)：
      span.value {{ params[0].setting_wind_speed }}
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', ['info']),
    ...mapState('d2admin/paramsList', ['list'])
  },
  data() {
    return {
      speed: '', //装束
      state: 1, //开关
      stationId: localStorage.getItem('stationId'),
      dataForm: {
        id: 0,
        name: ''
      },
      dlsnjList: [], //多联室内机
      dlswjList: [], //多联室外机
      flrbList: [], //风冷热泵机组
      jfktgList: [], //机房空调380
      jfktpList: [], //机房空调220
      pfjList: [], //排风机
      sbList: [], //水泵
      sljfgList: [], //室内机风柜
      params: [],
      openOrClose: [
        'b6af764f2a6e454490a6b1b3c9057e57', //排风机
        'b47661ca1d454f9792ba5369f3cb2bc5', //机房空调
        '49f5921a6d7f43cfa222c09f0223ae04', //电动排烟窗
        'b45827c068254695864ee3c1d42573cb', //风冷热泵机组
        '303310efddb34a2e9bf269bdff8a7dc5', //室内机风柜
        'f4c840711eae4bcb9536a890cdfda493', //水泵
        '173466a2cf9a42a6a17b2bdfbeae36d5', //多联室内机
        '8f5530fee2484e8eb107c0ca672132b2', //多联室外机
        '8f0787103561423887324f8ac3c36b89' //多联新风处理机室内机
      ]
    }
  },

  created() {
    console.log(this.list)
    this.setData()
  },
  methods: {
    init(data, stationId) {
      this.dataForm = data
      this.dataForm.operatorName = this.info.name
      console.log('---data:', data)
      console.log('当前资源点id', data.id)
      console.log('类型', data.type)
      switch (data.type) {
        case '173466a2cf9a42a6a17b2bdfbeae36d5': //多联室内机
          this.params = this.dlsnjList.filter((e) => e.resource_id == data.id)
          break
        case '8f5530fee2484e8eb107c0ca672132b2': //多联室外机
          this.params = this.dlswjList.filter((e) => e.resource_id == data.id)
          break
        case 'b45827c068254695864ee3c1d42573cb': //风冷热泵机组
          this.params = this.flrbList.filter((e) => e.resource_id == data.id)
          break
        case 'ece0b8b2db27411886254e81134988a3': //机房空调
          this.params = this.jfktgList.filter((e) => e.resource_id == data.id)
          break
        case 'b6af764f2a6e454490a6b1b3c9057e57': //排风机
          this.params = this.pfjList.filter((e) => e.resource_id == data.id)
          break
        case 'f4c840711eae4bcb9536a890cdfda493': //水泵
          this.params = this.sbList.filter((e) => e.resource_id == data.id)
          break
        case '303310efddb34a2e9bf269bdff8a7dc5': //室内机风柜
          this.params = this.sljfgList.filter((e) => e.resource_id == data.id)
          break
      }
      console.log('params运行状态', this.params)
    },
    setData() {
      this.dlsnjList = this.list.dlsnjList //多联室内机
      this.dlswjList = this.list.dlswjList //多联室外机
      this.flrbList = this.list.flrbList //风冷热泵机组
      this.jfktpList = this.list.jfktpList //机房空调
      this.pfjList = this.list.pfjList //排风机
      this.sbList = this.list.sbList //水泵
      this.sljfgList = this.list.sljfgList //室内机风柜
    },
    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: 14px;
  line-height: 28px;
}
.info-state {
  padding: 0 10px 10px;
  .type {
    font-size: 14px;
    margin: 5px 0 0 10px;
    display: inline-block;
    width: 135px;
  }
  .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: 15px;
  right: 0;
  width: 390px;
  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;
  }
}
</style>
<style lang="scss">
.instuctions_content {
  table {
    th {
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
}

.el-icon-jfktg6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/kt.jpg') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-jfktp6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/kt.jpg') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-pfj6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/pfj.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-jlm6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/jlm.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-flrbjz6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/flrbjz.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-sb6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/sb.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-dlswj6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/dlswj.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-cgq6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/cgq.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-snjfg6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/dlswj.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-swqxz6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/swqxz.png') no-repeat center;
  background-size: 100% 100%;
}
.el-icon-dlxfsnj6 {
  width: 100%;
  height: 170px;
  text-align: center;
  background: url('../../../assets/images/imgs/dlxfsnj.png') no-repeat center;
  background-size: 100% 100%;
}
</style>