yxk-storeroom-system/src/views/storeManage/deviceManage/module/deviceDetail.vue

<template>
  <div>
    <!--工具栏-->
    <div class="head-container" style="padding:0 0 20px 0">
      <crudOperation :permission="permission">
        <template v-slot:left>
          <el-button v-permission="permission.add" size="mini" type="primary" icon="el-icon-plus" :disabled="!activeAddBtn" @click="selectDeviceType">新增</el-button>
        </template>
        <template v-slot:right>
          <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections && crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
          <el-select v-model="deviceType" class="filter-item" style="margin-left:10px" placeholder="全部" @change="crud.toQuery">
            <el-option :key="0" label="全部" value="" />
            <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </template>
        <template v-slot:rightButtonGroup>
          <div class="archives-handler-btn">
            <el-button class="binding-mac-btn iconfont icon-bangdingshebei-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && crud.selections[0].deviceTypeId.name !== '桌面式RFID读写器')" @click="bindingMac()">绑定设备</el-button>
            <el-button class="binding-param-btn iconfont icon-bangdingcanshu-fanbai" type="primary" :disabled="crud.selections.length !== 1 || (crud.selections[0].deviceTypeId && (crud.selections[0].deviceTypeId.name !== '漏水传感器' && crud.selections[0].deviceTypeId.name !== '温湿度感应器' && crud.selections[0].deviceTypeId.name !== '空气质量检测设备'))" @click="bindingParam(crud.selections[0].id)">绑定参数</el-button>
          </div>
        </template>
      </crudOperation>
    </div>
    <!--表单组件-->
    <el-dialog ref="dialog" append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="addTypeStr" @open="open">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="设备厂商" prop="supplier">
            <el-select v-model="form.supplier" style="width: 370px;" :disabled="crud.status.edit === 1">
              <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="isInsidedevices || isOutsidedevices" label="设备ID" prop="deviceId">
            <el-input v-model="form.deviceId" style="width: 370px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <el-form-item label="设备名称" prop="deviceName">
            <el-input v-model="form.deviceName" style="width: 370px;" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="接口IP" prop="deviceIp">
            <el-input v-model="form.deviceIp" style="width: 370px;" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头' || isInsidedevices" label="端口" prop="devicePort">
            <el-input v-model="form.devicePort" style="width: 370px;" />
          </el-form-item>
          <!-- 密集架 || 回转柜 -->
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="库房代码" prop="storeroomCode">
            <el-input v-model="form.storeroomCode" style="width: 370px;" />
          </el-form-item>
          <!-- 密集架 -->
          <el-form-item v-if="selectedDeviceType === '密集架'" label="区号" prop="areaNo">
            <el-input v-model="form.areaNo" style="width: 370px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架'" label="起始列号" prop="firstColumnNo">
            <el-input v-model.number="form.firstColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架'" label="总列数" prop="sumColumnNo">
            <el-input v-model.number="form.sumColumnNo" style="width: 150px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架'" label="节数" prop="partNo">
            <el-input v-model.number="form.partNo" style="width: 150px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <!-- 回转柜 || 摄像头 -->
          <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="账号" prop="deviceAccount">
            <el-input v-model="form.deviceAccount" style="width: 370px;" />
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '回转柜' || selectedDeviceType === '摄像头'" label="密码" prop="devicePassword">
            <el-input v-model="form.devicePassword" style="width: 370px;" />
          </el-form-item>
          <!-- 回转柜 -->
          <el-form-item v-if="selectedDeviceType === '回转柜'" label="柜号" prop="cupboardNo">
            <el-input v-model="form.cupboardNo" style="width: 370px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <!-- 摄像头 -->
          <el-form-item v-if="selectedDeviceType === '摄像头'" label="频道" prop="videoRoute">
            <el-input v-model="form.videoRoute" style="width: 370px;" />
          </el-form-item>
          <!-- 密集架 || 回转柜 -->
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="层数" prop="rowNo">
            <el-input v-model.number="form.rowNo" style="width: 150px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <!-- 回转柜 -->
          <el-form-item v-if="selectedDeviceType === '回转柜'" label="每层列数" prop="columnRowNo">
            <el-input v-model.number="form.columnRowNo" style="width: 150px;" :disabled="crud.status.edit === 1" />
          </el-form-item>
          <!-- 密集架 || 回转柜 -->
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="联动操作" prop="isLinkage">
            <el-checkbox v-model="form.isLinkage.lend" @change="checked=>isLinkageChange(checked,'lend')">借出</el-checkbox>
            <el-checkbox v-model="form.isLinkage.borrow" @change="checked=>isLinkageChange(checked,'borrow')">归还</el-checkbox>
            <el-checkbox v-model="form.isLinkage.inBound" @change="checked=>isLinkageChange(checked,'inBound')">入库</el-checkbox>
            <el-checkbox v-model="form.isLinkage.outBound" @change="checked=>isLinkageChange(checked,'outBound')">出库</el-checkbox>
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="回调确认" prop="isCallback">
            <el-checkbox v-model="form.isCallback.lend" @change="checked=>isCallbackChange(checked,'lend')">借出</el-checkbox>
            <el-checkbox v-model="form.isCallback.borrow" @change="checked=>isCallbackChange(checked,'lend')">归还</el-checkbox>
            <el-checkbox v-model="form.isCallback.inBound" @change="checked=>isCallbackChange(checked,'lend')">入库</el-checkbox>
            <el-checkbox v-model="form.isCallback.outBound" @change="checked=>isCallbackChange(checked,'lend')">出库</el-checkbox>
          </el-form-item>
          <el-form-item v-if="selectedDeviceType === '密集架' || selectedDeviceType === '回转柜'" label="下发通知" prop="isNotice" style="display: block;">
            <el-checkbox v-model="form.isNotice">通知</el-checkbox>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">保存</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="删除设备" :visible.sync="deleteVisible" :before-close="handleClose">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div class="dialog-delt">
          <p><span>确定删除当前设备吗？</span></p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="selectDeviceTypeVisible" title="新增设备">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form size="small" label-width="80px">
          <el-form-item label="设备类型">
            <el-select v-model="selectedDeviceType" style="width: 370px;">
              <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nextStep()">
            下一步
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <el-form size="small" label-width="140px">
          <el-form-item label="当前电脑Mac地址">
            <el-input v-model="currentMac" style="width: 370px;" :disabled="true" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="doBindingMac()">
            确定绑定
          </el-button>
        </div>
      </div>
    </el-dialog>
    <bindParams ref="bindingParamsDlg" @refresh="crud.refresh" />
    <div class="container-right" style="min-height: calc(100vh - 242px);">
      <span class="right-top-line" />
      <span class="left-bottom-line" />
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" height="calc(100vh - 295px)" @selection-change="selectionChangeHandler" @row-click="clickRowHandler">
        <el-table-column align="center" type="selection" width="50" />
        <el-table-column align="center" type="index" label="序号" width="55" />
        <el-table-column align="center" prop="storeroomId.name" label="所属区域" width="100" show-overflow-tooltip />
        <el-table-column align="center" label="设备状态" width="100">
          <template slot-scope="scope">
            <span :class="{ 'spk-a': scope.row.deviceState === 1, 'off-line': scope.row.deviceState !== 1 }" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="deviceTypeId.name" label="设备类型" show-overflow-tooltip />
        <el-table-column align="center" prop="supplierId.name" label="设备厂商" width="100" show-overflow-tooltip />
        <el-table-column align="center" prop="deviceName" label="设备名称" show-overflow-tooltip />
        <el-table-column align="center" label="设备ID" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.deviceId"> {{ scope.row.deviceId }} </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="接口IP" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.deviceIp"> {{ scope.row.deviceIp }} </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="端口" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.devicePort"> {{ scope.row.devicePort }} </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="绑定设备" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.macAddress !== null"> 已绑定 </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="绑定参数" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceSpecParamId && scope.row.deviceSpecParamId.paramId !== null"> 已绑定 </span>
            <span v-else>——</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudDevice from '@/api/storeManage/deviceManage/device'
import macApi from '@/api/storeManage/deviceManage/mac'
import paramApi from '@/api/storeManage/deviceManage/param'
import CRUD, { presenter, header, form } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import bindParams from './bindParams'
const defaultForm = { supplier: null, id: null, deviceId: null, deviceName: null, deviceIp: null, devicePort: null, rowNo: null, areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null, storeroomCode: null, columnRowNo: null, deviceAccount: null, devicePassword: null, cupboardNo: null, videoRoute: null, isLinkage: { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false }, isCallback: { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false }, isNotice: false }

export default {
  components: { crudOperation, pagination, bindParams },
  cruds() {
    return [
      CRUD({
        title: '设备', url: 'api/device/list',
        crudMethod: { ...crudDevice },
        optShow: {
          add: false,
          edit: true,
          del: false,
          reset: false,
          download: false,
          group: false
        },
        sort: ['sequence,asc']
      })
    ]
  },
  mixins: [
    presenter(),
    header(),
    form(defaultForm)
  ],
  props: {
    activeAddBtn: {
      type: Boolean
    }
  },
  data() {
    return {
      storeroomId: null,
      deviceType: null, // 设备列表筛选项目（设备类型）
      needRefreshTree: false,
      permission: {
        add: ['admin', 'device:add'],
        edit: ['admin', 'device:edit'],
        del: ['admin', 'device:del']
      },
      deleteVisible: false,
      selectDeviceTypeVisible: false,
      bindingMacVisible: false,
      currentMac: '',
      deviceTypeOptions: [],
      selectedDeviceType: '密集架', // 选择添加的设备种类
      supplierOptions: [] // 厂商
    }
  },
  computed: {
    addTypeStr() {
      const addType = this.deviceTypeOptions.find(deviceType => deviceType.name === this.selectedDeviceType)
      const preTitle = this.crud.status.add > CRUD.STATUS.NORMAL ? '新增' : '编辑'
      if (addType) {
        return preTitle + addType.name
      } else {
        return preTitle
      }
    },
    isInsidedevices() {
      if (this.selectedDeviceType === '空调' || this.selectedDeviceType === '桌面式RFID读写器' || this.selectedDeviceType === '盘点机' || this.selectedDeviceType === '恒湿机' || this.selectedDeviceType === '漏水传感器' || this.selectedDeviceType === '温湿度感应器' || this.selectedDeviceType === '空气质量检测设备' || this.selectedDeviceType === '漏水传感器') {
        return true
      } else {
        return false
      }
    },
    isOutsidedevices() {
      if (this.selectedDeviceType === '通道门' || this.selectedDeviceType === '手持式RFID读写器') {
        return true
      } else {
        return false
      }
    },
    rules() {
      // const checkDeviceIp = (rule, value, callback) => {
      //   const reg = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/
      //   if (reg.test(value)) {
      //     callback()
      //   } else {
      //     callback(new Error('设备IP格式错误'))
      //   }
      // }
      const checkDevicePort = (rule, value, callback) => {
        const reg = /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/
        if (reg.test(value)) {
          callback()
        } else {
          callback(new Error('端口号输入错误'))
        }
      }
      const validateRule = {
        // deviceInfo.
        supplier: [
          { required: true, message: '请选择设备产商', trigger: 'blur' }
        ],
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ]
      }
      if (this.isInsidedevices || this.isOutsidedevices) {
        this.$set(validateRule, 'deviceId', [
          { required: true, message: '请输入设备ID', trigger: 'blur' }
        ])
      }
      if (this.selectedDeviceType === '密集架' || this.selectedDeviceType === '回转柜' || this.selectedDeviceType === '摄像头' || this.isInsidedevices) {
        this.$set(validateRule, 'deviceIp', [
          { required: true, message: '请输入接口IP', trigger: 'blur' }
          // ,
          // { validator: checkDeviceIp, trigger: 'blur' }
        ])
        this.$set(validateRule, 'devicePort', [
          { required: true, message: '请输入端口号', trigger: 'blur' },
          { validator: checkDevicePort, trigger: 'blur' }
        ])
        if (this.selectedDeviceType === '密集架') {
          this.$set(validateRule, 'areaNo', [
            { required: true, message: '请输入区号', trigger: 'blur' }
          ])
          this.$set(validateRule, 'firstColumnNo', [
            { required: true, message: '请输入起始列号', trigger: 'blur' }
          ])
          this.$set(validateRule, 'sumColumnNo', [
            { required: true, message: '请输入总列数', trigger: 'blur' }
          ])
          this.$set(validateRule, 'partNo', [
            { required: true, message: '请输入节数', trigger: 'blur' }
          ])
          this.$set(validateRule, 'rowNo', [
            { required: true, message: '请输入层数', trigger: 'blur' }
          ])
        } else {
          // 回转柜 || 摄像头
          this.$set(validateRule, 'deviceAccount', [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ])
          this.$set(validateRule, 'devicePassword', [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ])
          if (this.selectedDeviceType === '回转柜') {
            this.$set(validateRule, 'cupboardNo', [
              { required: true, message: '请输入柜号', trigger: 'blur' }
            ])
            this.$set(validateRule, 'rowNo', [
              { required: true, message: '请输入层数', trigger: 'blur' }
            ])
            this.$set(validateRule, 'columnRowNo', [
              { required: true, message: '请输入每层列数', trigger: 'blur' }
            ])
          } else {
            // 摄像头
            this.$set(validateRule, 'videoRoute', [
              { required: true, message: '请输入频道', trigger: 'blur' }
            ])
          }
        }
      }
      return validateRule
    }
  },
  created() {
    crudDevice.getDeviceType().then((data) => {
      this.deviceTypeOptions.splice(0, 0, ...data)
    })
  },
  methods: {
    // 设备是密集架或回转柜时，需要先处理 联动操作，回调操作 数据是null的情况
    // async
    async [CRUD.HOOK.beforeToEdit](crud, form) {
      if (form.deviceTypeId.name === '密集架' || form.deviceTypeId.name === '回转柜') {
        if (form.deviceTypeId.name === '密集架') {
          // 获取密集架行号列号等信息
          await crudDevice.getDesecabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
            form.rowNo = data.rowNo
            form.areaNo = data.areaNo
            form.sumColumnNo = data.sumColumnNo
            form.firstColumnNo = data.firstColumnNo
            form.partNo = data.partNo
            form.storeroomCode = data.storeroomCode
          })
        } else if (form.deviceTypeId.name === '回转柜') {
          // 获取回转柜行号列号等信息
          await crudDevice.getRotarycabinetById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
            form.columnRowNo = data.columnRowNo
            form.cupboardNo = data.cupboardNo
            form.rowNo = data.rowNo
            form.storeroomCode = data.storeroomCode
          })
        }
        // 获取联动和回调结果
        await crudDevice.getDeviceById({ deviceInfoId: this.crud.selections[0].id }).then((data) => {
          if (data.length === 3) {
            form.isLinkage = data.find(element => element.stateType === 1)
            form.isCallback = data.find(element => element.stateType === 2)
          }
        })
      }
      form.supplier = form.supplierId.id
      this.selectedDeviceType = form.deviceTypeId.name
      crud.status.edit = CRUD.STATUS.PREPARED
      crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
      return false
    },
    [CRUD.HOOK.beforeSubmit]() {
      this.crud.form.storeroomId = this.storeroomId
      this.crud.form.supplierId = this.supplierOptions.find(item => item.id === this.crud.form.supplier)
      this.crud.form.deviceTypeId = this.deviceTypeOptions.find(item => item.name === this.selectedDeviceType)
    },
    // 获取数据前设置默认参数
    [CRUD.HOOK.beforeRefresh]() {
      if (this.storeroomId) {
        this.crud.query.storeroomId = this.storeroomId.id
      }
      if (this.deviceType !== '0') {
        this.crud.query.deviceTypeId = this.deviceType
      }
    },
    // 防止编辑时，isLinkage是null,isLinkage.lend报错
    [CRUD.HOOK.afterRefresh](crud) {
      crud.data.forEach(element => {
        element.isLinkage = { stateType: 1, lend: null, borrow: null, inBound: null, outBound: null }
        element.isCallback = { stateType: 2, lend: null, borrow: null, inBound: null, outBound: null }
      })
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    selectionChangeHandler(val) {
      this.crud.selections = val
    },
    toDelete(data) {
      this.deleteVisible = true
    },
    handleConfirm() {
      this.deleteVisible = false
      this.crud.delAllLoading = true
      this.crud.doDelete(this.crud.selections)
    },
    handleClose(done) {
      done()
    },
    selectDeviceType() {
      this.selectDeviceTypeVisible = true
    },
    nextStep() {
      this.selectDeviceTypeVisible = false
      this.crud.toAdd()
    },
    open() {
      this.supplierOptions.splice(0, this.supplierOptions.length)
      crudDevice.getSupplier().then((data) => {
        this.supplierOptions.splice(0, 0, ...data)
      })
    },
    bindingMac() {
      macApi.getMac().then((data) => {
        this.currentMac = data
        this.bindingMacVisible = true
      })
    },
    doBindingMac() {
      macApi.bindMac({ deviceId: this.crud.selections[0].id, macAddress: this.currentMac }).then((data) => {
        this.bindingMacVisible = false
        this.$message({
          message: '绑定成功',
          type: 'success'
        })
      })
    },
    bindingParam(id) {
      this.$refs.bindingParamsDlg.deviceInfoId = id
      paramApi.getParams({ deviceInfoId: id }).then((data) => {
        this.$refs.bindingParamsDlg.params = data
        this.$refs.bindingParamsDlg.bindParamsVisible = true
      })
    },
    isLinkageChange(value, type) {
      if (!value && this.form.isCallback[type]) {
        this.$message.error('取消对应回调选项后才能取消联动操作')
        this.form.isLinkage[type] = true
      }
    },
    isCallbackChange(value, type) {
      if (value && !this.form.isLinkage[type]) {
        this.$message.error('选中对应联动选项后才能勾选回调操作')
        this.form.isCallback[type] = false
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.archives-handler-btn {
  .el-button {
    padding: 0 13px 0 13px;
    ::v-deep span {
      margin-left: 10px;
    }
    &.binding-mac-btn {
      border-color: #fd8042;
      background-color: #fd8042;
      &.is-disabled {
        border-color: #7e4021;
        background-color: #7e4021;
      }
    }
    &.binding-param-btn {
      border-color: #1aae93;
      background-color: #1aae93;
      &.is-disabled {
        border-color: #0d5649;
        background-color: #0d5649;
      }
    }
    &.is-disabled {
      color: #666;
    }
  }
  .iconfont {
    line-height: 28px;
  }
  margin-left: auto;
}
.spk-a {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #1aae93;
  box-shadow: 0px 0px 6px 1px #1aae93;
  vertical-align: middle;
}
.off-line {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #F65163;
  box-shadow: 0px 0px 6px 1px #F65163;
  vertical-align: middle;
}
</style>