intelligent-medicine-cabinet/mini-pro-web/src/views/device/detail.vue

<template>
  <div class="deviceDetail pb10">
    <div class="c-border-tb c-f14 c-999 mt10 plr15 ptb10 bgc-fff">
      <div class=" kitbox">
        <div class="box-flex-1 fs-16 c-333 ellipsis_1">
          {{ info.equName }}
        </div>
        <div class="pt2 ml10">
          <van-tag type="success" v-if="info.networkStatus == 1">在线</van-tag>
          <van-tag type="danger" v-else>离线</van-tag>

          <van-tag type="success" v-if="info.saleStatus == 1" class="ml5">在售</van-tag>
          <van-tag type="danger" v-else class="ml5">停售</van-tag>
        </div>
      </div>

      <div class="mt10">
        <span>设备所属：</span>
        <span>{{ info.community }}</span>
      </div>
      <div>
        <span>设备编号：</span>
        <span>{{ info.equNum }}</span>
      </div>
      <div>
        <span>设备地址：</span>
        <span>{{ info.deliveryAddress }}</span>
      </div>
    </div>

    <div class="mt10 bgc-fff c-border-tb">
      <div class="panel-title">药品管理</div>
      <div class="grid-4 c-f14 c-333 ptb15">
        <!-- @click='gotoUrl("/device/temperature/index", {id: id})' -->
        <div class="c-t-center" @click="gotoUrl('/device/stock', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/yaopingaikuang.png')" />
          </div>
          <div>药品概况</div>
        </div>
        <div v-if="hasAuth('stockUp') || createOutAuth" class="c-t-center" @click="toApplyDrug()">
          <div>
            <van-image class="ability" :src="require('@/assets/images/beihuo.png')" />
          </div>
          <div>药品申领</div>
        </div>
        <div v-if="hasAuth('replenish')" class="c-t-center" @click="gotoUrl('/replenishment/start/deviceDetail', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/buhuo.png')" />
          </div>
          <div>药品入库</div>
        </div>
      </div>
    </div>

    <div v-if="cargoSettingAuth || temperatureCtrlAuth || cargoStateAuth || putDeviceAuth" class="mt10 bgc-fff c-border-tb">
      <div class="panel-title">设备设置</div>
      <div class="grid-4 c-f14 c-333 ptb15">
        <div v-if="cargoSettingAuth" class="c-t-center" @click="gotoUrl('/device/cargoLane/setting', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/huodaoshezhi.png')" />
          </div>
          <div>货道设置</div>
        </div>
        <div v-if="temperatureCtrlAuth" class="c-t-center" @click="gotoUrl('/device/temperature/index', { id: $route.query.id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/wendukongzhi.png')" />
          </div>
          <div>温湿度控制</div>
        </div>
        <div v-if="cargoStateAuth" class="c-t-center" @click="gotoUrl('/device/cargoLane/index', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/huodaozhuangtai.png')" />
          </div>
          <div>货道状态</div>
        </div>
        <div v-if="putDeviceAuth" class="c-t-center" @click="gotoUrl('/device/sell', { id: info.id, status: info.saleStatus })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/zaishoutingshou.png')" />
          </div>
          <div>维护/上架</div>
        </div>
        <div class="c-t-center" @click="gotoUrl('/device/reboot', { equNum: info.equNum, equName: info.equName, id: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/shebeichongqi.png')" />
          </div>
          <div>设备调试</div>
        </div>

        <!-- <div class='c-t-center' @click='gotoUrl("/device/temperature/index", {id: $route.query.id})'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/shidukongzhi.png")'/>
                    </div>
                    <div>湿度控制</div>
                </div> -->
        <!-- <div class='c-t-center' @click='gotoUrl("/device/status", {id: info.id})'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/shebeizhuangtai.png")'/>
                    </div>
                    <div>设备状态</div>
                </div> -->
        <!-- <div class='c-t-center' @click='gotoUrl("/device/reboot")'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/shebeichongqi.png")'/>
                    </div>
                    <div>设备重启</div>
                </div> -->
        <!-- <div class='c-t-center' @click='gotoUrl("/device/infoLog/index")'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/xinxirizhi.png")'/>
                    </div>
                    <div>信息日志</div>
                </div> -->
      </div>
    </div>

    <div class="mt10 bgc-fff c-border-tb">
      <div class="panel-title">操作日志</div>
      <div class="grid-4 c-f14 c-333 ptb15">
        <div class="c-t-center" @click="gotoUrl('/device/infoLog/index', { deviceId: id, equNum: info.equNum })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/xinxirizhi.png')" />
          </div>
          <div>信息日志</div>
        </div>
        <div class="c-t-center" @click="gotoUrl('/replenishment/picking/list', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/beihuojilu.png')" />
          </div>
          <div>申领记录</div>
        </div>
        <div class="c-t-center" @click="gotoUrl('/replenishment/record/list', { deviceId: id })">
          <div>
            <van-image class="ability" :src="require('@/assets/images/buhuojilu.png')" />
          </div>
          <div>入库记录</div>
        </div>
        <!-- <div class='c-t-center' @click='gotoUrl("/device/status", {id: info.id})'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/shebeizhuangtai.png")'/>
                    </div>
                    <div>设备状态</div>
                </div> -->
        <!-- <div class='c-t-center' @click='gotoUrl("/device/reboot")'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/shebeichongqi.png")'/>
                    </div>
                    <div>设备重启</div>
                </div> -->
        <!-- <div class='c-t-center' @click='gotoUrl("/device/infoLog/index")'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/xinxirizhi.png")'/>
                    </div>
                    <div>信息日志</div>
                </div>
                <div class='c-t-center' @click='gotoUrl("/device/sell", {id: info.id, status: info.saleStatus})'>
                    <div>
                        <van-image class='ability' :src='require("@/assets/images/zaishoutingshou.png")'/>
                    </div>
                    <div>在售停售</div>
                </div> -->
      </div>
    </div>
    <div style="height: 100px;width: 100%;"></div>
    <div style="padding:  0 20px 20px;" v-if="info.equType == '04'">
      <van-button block class="c-border-r-5" type="info" @click="openLock()">远程开锁</van-button>
    </div>
  </div>
</template>
<script>
import medicineAbinetApi from '@/api/api-medicineAbinet'
export default {
  name: 'deviceDetail',
  data() {
    return {
      info: {},
      id: this.$route.query.id,
      menuAuth: []
    }
  },
  computed: {
    createOutAuth() {
      return this.$hasAuth('replenishmentMgnt', 'pickingList', 'createOut')
    },
    cargoSettingAuth() {
      return this.hasAuth('cargoSetting')
    },
    cargoStateAuth() {
      return this.hasAuth('cargoState')
    },
    temperatureCtrlAuth() {
      return this.hasAuth('temperatureCtrl')
    },
    putDeviceAuth() {
      return this.hasAuth('putDevice')
    },
    debugDeviceAuth() {
      return this.hasAuth('debugDevice')
    }
  },
  created() {
    this.findById()
    this.menuAuth = _.find(
      _.find(this.$store.state.app.authMenu, v => {
        return v.url == 'device'
      }).children,
      v => {
        return v.url == 'operate'
      }
    ).children
  },
  methods: {
    openLock() {
      this.$dialog
        .confirm({
          title: '确认远程开锁？',
          message: '您可以通过远程开锁，打开药柜门进行补药。'
        })
        .then(() => {
          var p = {
            equNum: this.info.equNum,
            type: 'remoteUnlocking',
            message: '远程开锁'
          }
          medicineAbinetApi
            .sendSocketMessage(p)
            .then(res => {
              this.$toast.success(res.message)
            })
            .catch(err => {
              this.$toast.fail(err.message)
            })
        })
    },
    $refreshData() {
      this.findById()
    },
    findById() {
      this.$loading('加载中..')
      let p = {
        deviceId: this.id
      }
      medicineAbinetApi
        .findDeviceById(p)
        .then(res => {
          this.$toast.clear()
          this.info = res.obj.device
        })
        .catch(err => {
          console.error(err)
        })
    },
    hasAuth(name) {
      return _.find(this.menuAuth, v => {
        return v.url == name
      })
    },
    toApplyDrug() {
      if (this.createOutAuth) {
        this.gotoUrl('/replenishment/picking/list', {
          deviceId: this.id,
          status: 2
        })
      } else {
        this.gotoUrl('/replenishment/stockUp/detail', {
          deviceId: this.id
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.deviceDetail {
  .panel-title {
    position: relative;
    padding: 10px 15px;
    font-size: 15px;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      height: 15px;
      background: #17b3ec;
      width: 3px;
      border-radius: 3px;
    }
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 20px;
  }
  .ability {
    width: 50px;
    height: 50px;
  }
}
</style>