ncs_ui/src/views/ncs-device/components/deviceManager.vue

<template>
  <div>
    <ag-grid-layout
      toolbar
      :table-height="tableHeight"
      theme="ag-theme-alpine"
      :column-defs="columnDefs"
      :row-data="rowData"
      :locale-text="localeText"
      :grid-options="gridOptions"
      :debounce-vertical-scrollbar="true"
      :default-col-def="defaultColDef"
      :animate-rows="true"
      :row-selection="rowSelection"
      :framework-components="frameworkComponents"
      @filterChanged="filterModifed"
      @sortChanged="gridSortChange"
    >
      <div slot="toolbar" class="inner-toolbar">
        <div class="toolbar-search">
          <en-table-search placeholder="请输入搜索关键字" @search="handlerSearch" />
        </div>
        <div class="toolbar-btns">
          <el-button v-if="part_view" type="primary" size="mini" @click="handleAdd">新增设备</el-button>
        </div>
      </div>
      <el-pagination
        v-if="pageData"
        slot="pagination"
        :current-page="pageData.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageData.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.data_total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
      />
    </ag-grid-layout>

    <!-- 设备编辑弹窗 -->
    <el-dialog :title="deviceEditTitle" :visible.sync="deviceDialogVisible" width="60%">
      <el-form ref="deviceEditForm" :rules="deviceRules" label-width="120px" :model="deviceModel">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备类型" prop="device_type">
              <el-select v-model="deviceModel.device_type" placeholder="请选择设备类型" :disabled="deviceTypeDisabled" clearable @change="deviceTypeChange">
                <el-option v-for="(item,index) in deviceTypeTransfer" :key="index" :label="item.key" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备别名" prop="name">
              <el-input v-model="deviceModel.name" clearable :maxlength="20" placeholder="请输入设备别名" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出厂编号" prop="code">
              <el-input v-model="deviceModel.code" clearable placeholder="请输入出厂编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="model">
              <el-input v-model="deviceModel.model" clearable placeholder="请输入设备型号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有线物理地址" prop="eth_mac">
              <el-input v-model="deviceModel.eth_mac" clearable placeholder="请输入物理MAC地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有线IP地址" prop="eth_ip">
              <el-input v-model="deviceModel.eth_ip" clearable placeholder="请输入IP地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="WIFI物理地址" prop="wifi_mac">
              <el-input v-model="deviceModel.wifi_mac" clearable placeholder="请输入WIFI MAC地址" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="WIFIIP地址" prop="wifi_ip">
              <el-input v-model="deviceModel.wifi_ip" clearable placeholder="请输入WIFI IP地址" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="软件版本" prop="soft_ver">
              <el-input v-model="deviceModel.soft_ver" clearable placeholder="请输入软件版本号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件版本" prop="hard_ver">
              <el-input v-model="deviceModel.hard_ver" clearable placeholder="请输入硬件版本号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="WIFI热点">
              <el-input v-model="deviceModel.wifi_hostname" :readonly="true" clearable placeholder="请输入WIFI热点名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="WIFI密码">
              <el-input v-model="deviceModel.wifi_password" :readonly="true" clearable placeholder="请输入WIFI热点密码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备位置" prop="frame_id">
              <el-select v-model="deviceModel.frame_id" filterable clearable :disabled="frameSelectabled" placeholder="请选择安装位置">
                <el-option v-for="(item,index) in typeFrames" :key="index" :label="item.full_name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="后备设备ID">
              <el-input v-model="deviceModel.backup_id" clearable placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="设备优先级">
              <el-input-number v-model="deviceModel.priority" controls-position="right" :min="1" :max="99" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-checkbox v-model="deviceModel.status" :true-label="1" :false-label="0">启用设备</el-checkbox>
              <!--              <el-radio v-model="formmodel.status" :label="1">启用</el-radio>-->
              <!--              <el-radio v-model="formmodel.status" :label="0">不启用</el-radio>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="hasRoleId">
          <el-col :span="12">
            <el-form-item label="适用角色" prop="role_id">
              <el-select v-model="deviceModel.role_id" placeholder="适用角色" clearable>
                <el-option v-for="item in rolesOptions" :key="item.role_id" :label="item.role_name" :value="item.role_id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="hasAudioId">
          <el-col :span="12">
            <el-form-item label="上属总线转换盒" prop="trans_audio_id">
              <el-select v-model="deviceModel.trans_audio_id" placeholder="上属总线转换盒" clearable>
                <el-option v-for="item in audioOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上属485转换盒" prop="trans_rs485_id">
              <el-select v-model="deviceModel.trans_rs485_id" placeholder="上属485转换盒" clearable>
                <el-option v-for="item in rs485Options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="hasAudioId">
          <el-col :span="12">
            <el-form-item label="485地址" prop="sip_id">
              <el-input v-model="deviceModel.sip_id" clearable placeholder="请输入485地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlerFormSubmit('deviceEditForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 设备编辑弹窗 -->
  </div>
</template>

<script>
import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
import { unix2Date } from '@/utils/Foundation'
import ButtonCellRender from '@/components/AgGridCellRender/ButtonCellRender'
import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
import * as API_Device from '@/api/ncs_device'
import * as API_Frame from '@/api/ncs_hospitalFrame'
import * as clerk_API from '@/api/ncs_clerk'
import { DeviceUrl } from '@/utils/domain'
import { FRAME_TYPE } from '@/utils/enum/FrameTypeEnum'
import { DEVICE_TYPE } from '@/utils/enum/DeviceTypeEnum'
export default {
  name: 'DeviceManager',
  components: { ButtonCellRender, ListFilter, RadioFilter },
  props: {
    frame: {
      type: Object,
      default: () => {}
    },
    part_view: { // 是否为科室视图
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      /** ag-grid参数 **/
      pageData: {}, // 翻页数据
      errorId: null,
      shopVisible: false,
      columnDefs: null,
      rowData: null,
      defaultColDef: null,
      gridOptions: null,
      gridApi: null,
      columnApi: null,
      localeText: AG_GRID_LOCALE_CN,
      filterState: null,
      rowSelection: null,
      frameworkComponents: null,
      /** 列表参数 */
      params: {
        page_size: 20,
        page_no: 1,
        fixedCondition: this.part_view ? ('part_id=' + this.$store.getters.partId) : '1=1'
      },
      /** device 弹窗 **/
      deviceDialogVisible: false,
      deviceEditTitle: '添加设备',
      deviceModel: {},
      deviceTypeDisabled: false,
      deviceRules: {
        name: [
          this.MixinRequired('请输入设备别名！')
        ],
        device_type: [
          { required: true, message: '请选择设备类型', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入设备编码', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入设备型号', trigger: 'blur' }
        ],
        eth_mac: [
          { required: true, message: '请输入设备MAC地址', trigger: 'blur' },
          // { pattern: /^([0-9A-Fa-f]{2}:?){6}/gi, message: '请输入正确的MAC地址', trigger: 'blur' }
          { pattern: null, message: '请输入正确的MAC地址', trigger: 'blur' }
        ],
        frame_id: [
          { required: Object.keys(this.frame).length === 0, message: '请选安装位置！', trigger: 'blur' } // 没有传入frame 属性，必须选择安装位置
        ],
        role_id: [
          { required: true, message: '请选择适用人', trigger: 'blur' }
        ],
        trans_audio_id: [
          { required: true, message: '请选择总线转换盒', trigger: 'blur' }
        ],
        // trans_rs485_id: [
        //   { required: true, message: '请选择485转换盒', trigger: 'blur' }
        // ],
        // sip_id: [
        //   { required: true, message: '请输入485地址', trigger: 'blur' }
        // ]
      },
      partFrames: [],
      typeFrames: [],
      /** 设备类型转换数组 **/
      deviceTypeTransfer: [
        { key: '护士主机', value: 1 },
        { key: '医生主机', value: 2 },
        { key: '门口机', value: 3 },
        { key: '床位分机', value: 4 },
        { key: 'LCD走廊屏', value: 5 },
        { key: 'LED点阵屏', value: 6 },
        { key: '移动设备', value: 7 },
        // { key: '护工腕表', value: 8 },
        { key: '病人腕表', value: 9 },
        { key: '手机App', value: 10 },
        { key: '总线转换盒', value: 11 },
        { key: '模拟分机', value: 12 },
        { key: '模拟紧急按钮', value: 13 },
        { key: '模拟门灯', value: 14 },
        { key: '遥控器', value: 15 },
        { key: '信标', value: 16 },
        { key: '看板', value: 17 },
        { key: '门禁设备', value: 18 },
        { key: '探视机', value: 19 },
        { key: '485转换盒', value: 20 },
        { key: '紧急按钮', value: 21 }
      ],
      deviceStatusTransfer: [
        { key: '启用', value: 1, color: 'green' },
        { key: '未启用', value: 0, color: 'red' }
      ],
      rolesOptions: [],
      hasRoleId: false,
      audioOptions: [],
      rs485Options: [],
      hasAudioId: false,
      websock: null,
      onlineDevice: []
    }
  },
  computed: {
    tableHeight() {
      return Object.keys(this.frame).length === 0 ? this.mainAreaHeight - 130 : this.mainAreaHeight - 174
    },
    frameSelectabled() { return Object.keys(this.frame).length > 0 }
  },
  watch: {
    frame(val, oldvalue) {
      console.log('watch', val)
      this.params.fixedCondition = Object.keys(this.frame).length === 0 ? 'part_id=' + this.$store.getters.partId : 'part_id=' + this.$store.getters.partId + ' and frame_id =' + this.frame.id
      this.getList()
    }
  },
  beforeMount() {
    this.gridOptions = {
    }
    this.columnDefs = [
      {
        headerName: '#',
        headerCheckboxSelection: true,
        headerCheckboxSelectionFilteredOnly: true,
        checkboxSelection: true,
        sortable: false, filter: false,
        width: 80,
        resizable: false,
        valueGetter: this.hashValueGetter
      },
      { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 100 },
      { headerName: '设备类型', field: 'device_type', sortable: true,
        filterFramework: 'ListFilter', width: 160,
        filterParams: {
          listData: this.deviceTypeTransfer
        },
        valueGetter: this.deviceTypeGetter
      },
      // lockPosition 锁定位置，会在第一列
      // lockPinned = true 不能拖动然后固定
      // resizeable 单元个大小是否可以调整
      { headerName: '设备别名', field: 'name', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '设备状态', field: 'status', sortable: true,
        filterFramework: 'RadioFilter',
        filterParams: {
          listData: this.deviceStatusTransfer
        },
        cellRenderer: this.deviceStatusFormatter
      },
      { headerName: '连接状态', field: 'online_state', sortable: false, filter: 'agTextColumnFilter',

        filterParams: {
          textCustomComparator: (filter, value, filterText) => {
            if (filterText) {
              const filterTextLowerCase = filterText.toLowerCase()
              const valueLowerCase = value.toString().toLowerCase()
              switch (filter) {
                case 'contains':
                  return valueLowerCase.indexOf(filterTextLowerCase) >= 0
                case 'notContains':
                  return valueLowerCase.indexOf(filterTextLowerCase) === -1
                case 'equals':
                  return valueLowerCase === filterTextLowerCase
                case 'notEqual':
                  return valueLowerCase !== filterTextLowerCase
                case 'startsWith':
                  return valueLowerCase.indexOf(filterTextLowerCase) === 0
                case 'endsWith':
                  var index = valueLowerCase.lastIndexOf(filterTextLowerCase)
                  return index >= 0 && index === (valueLowerCase.length - filterTextLowerCase.length)
                default:
                  // should never happen
                  console.warn('invalid filter type ' + filter)
                  return false
              }
            }
          }
        },
        cellRenderer: this.onlineStateFormatter
      },
      { headerName: '部署位置', field: 'full_name', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '以太网MAC地址', field: 'eth_mac', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '以太网IP地址', field: 'eth_ip', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '通讯端口', field: 'eth_ip_port', sortable: true, filter: 'agNumberColumnFilter' },
      { headerName: '设备型号', field: 'model', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '出厂编号', field: 'code', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '软件版本', field: 'soft_ver', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '硬件版本', field: 'hard_ver', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '无线MAC地址', field: 'wifi_mac', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '无线IP地址', field: 'wifi_ip', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: 'SIP账号', field: 'sip_id', sortable: true, filter: 'agTextColumnFilter' },
      { headerName: '更新时间', field: 'update_time', sortable: true, filter: 'agDateColumnFilter', valueFormatter: this.unixDateFormatter, filterParams: {
        comparator: (filterLocalDateAtMidnight, cellValue) => { // 所有数据都由服务器端过滤，此处只需返回0 即可
          const celldate = unixToDate(cellValue, 'yyyy-MM-dd 00:00:00')
          return (new Date(celldate).getTime() / 1000) - (filterLocalDateAtMidnight.getTime() / 1000)
        }
      }},
      { headerName: '编辑', field: 'id',
        cellRendererFramework: 'ButtonCellRender',
        cellRendererParams: {
          onClick: this.handleEdit,
          label: '编辑',
          buttonType: 'primary',
          buttonSize: 'mini'
        },
        filter: false,
        pinned: 'right',
        lockPinned: true,
        width: 90,
        resizable: false,
        sortable: false },
      { headerName: '删除', field: 'id',
        cellRendererFramework: 'ButtonCellRender',
        cellRendererParams: param => {
          return {
            onClick: this.deleteSingle,
            label: '删除',
            buttonType: 'danger',
            buttonSize: 'mini',
            disabled: param.data['member_name'] === 'superadmin'
          }
        },
        pinned: 'right',
        lockPinned: true,
        width: 90,
        resizable: false,
        filter: false,
        sortable: false }
    ]
    this.defaultColDef = {
      // filter: 'agTextColumnFilter',
      sortable: true,
      resizable: true,
      enableValue: true,
      filter: true,
      // comparator: this.dateCustomComparator,
      filterParams: {
        debounceMs: 500,
        newRowsAction: 'keep',
        textCustomComparator: this.textCustomComparator
      }
    }
    this.rowSelection = 'multiple'
  },
  mounted() {
    window.onresize = this.windowResize
    this.gridApi = this.gridOptions.api
    this.gridColumnApi = this.gridOptions.columnApi
    this.gridColumnApi.applyColumnState({
      state: [
        {
          colId: 'id',
          sort: 'desc'
        }
      ]
    })
    /** 加载科室空间节点  **/
    if (this.part_view) {
      // this.getPartFrames(this.$store.getters.partId)
      this.getTypeFrame(this.$store.getters.partId)
    }
    this.initWebSocket()
  },
  methods: {
    windowResize() {
      this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
    },
    /** 加载列表数据 */
    getList() {
      const param = this.MixinClone(this.params)
      this.gridApi.showLoadingOverlay()
      API_Device.getList(param).then(response => {
        const deviceData = [...response.data]
        deviceData.forEach(item => {
          if (this.onlineDevice.length > 0) {
            if (item.eth_mac) {
              const mac = this.onlineDevice.filter(p => p.toLowerCase() === item.eth_mac.toLowerCase())[0]
              // console.log('在线设备1', mac)
              if (mac !== undefined && mac !== null) {
                item['online_state'] = '在线'
              } else {
                item['online_state'] = '离线'
              }
            }
          } else {
            item['online_state'] = '离线'
          }
        })
        this.rowData = deviceData
        this.pageData = {
          page_no: response.page_no,
          page_size: response.page_size,
          data_total: response.data_total
        }
        this.$nextTick(() => {
          const node = this.gridApi.getDisplayedRowAtIndex(0)
          if (node !== null && node !== undefined) {
            node.setSelected(true)
          }
        })
      }).catch(err => {
        this.$message.error(err.message)
      })
      this.typeFrames = this.partFrames
    },
    getTypeFrame(partId) {
      API_Frame.getFramesPartId(partId).then(res => {
        this.partFrames = [...res]
      })
    },
    /** 将partFrames做分割 */
    getFramesByType(device_type) {
      if (this.partFrames != null) {
        this.typeFrames = this.partFrames.filter(item => item.type === device_type)
      }
    },

    /**
         * 过滤状态发生变化，发送到服务器检索数据
         */
    filterModifed(param) {
      var model = param.api.getFilterModel()
      // 连接状态不经过服务器过滤
      delete model.online_state
      this.params.filter = JSON.stringify(model)
      this.getList()
    },
    gridSortChange(param) {
      const columnState = param.columnApi.getColumnState()
      // 排序状态
      const sortState = columnState.filter(function(s) {
        return s.sort != null
      }).map(function(s) {
        return {
          colId: s.colId,
          sort: s.sort,
          sortIndex: s.sortIndex
        }
      }).sort(function(a, b) {
        return a.sortIndex - b.sortIndex
      })
      if (sortState.length > 0) {
        if (sortState.length === 1) {
          this.params.sort = sortState[0].colId
          this.params.dir = sortState[0].sort
        } else {
          let sortstring = ''
          sortState.forEach(function(item) {
            sortstring += item.colId + ' ' + item.sort + ','
          })
          this.params.sort = sortstring.substring(0, sortstring.length - 1)
          this.params.dir = ' '
        }
      } else {
        delete this.params.sort
        delete this.params.dir
      }

      this.getList()
    },
    /** 处理搜索 */
    handlerSearch(keywords) {
      this.params.query = keywords
      this.getList()
    },
    /** 获取设备类型文字显示,从deviceTypeTransfer 中找出value值对应的key显示出来 */
    deviceTypeGetter(params) {
      const gridVal = params.data.device_type
      return this.deviceTypeTransfer.filter(p => p.value === gridVal).map(p => p.key)
    },
    /** 格式化时间函数 */
    unixDateFormatter(param) {
      if (!param.value) return ''
      return unix2Date(param.value * 1000)
    },
    /** 设备状态格式化 **/
    deviceStatusFormatter(params) {
      if (params.value === null || params.value === undefined) return ''
      const item = this.deviceStatusTransfer.filter(p => p.value === params.value)[0]
      if (item) {
        return '<span style="color:' + item.color + ';">' + item.key + '</span>'
      } else {
        return ''
      }
    },
    /** 设备连接状态格式化 **/
    onlineStateFormatter(params) {
      if (params.value === '在线') {
        return '<span style="color:green;">在线</span>'
      } else {
        return '<span style="color:gray;">离线</span>'
      }
    },
    /** 删除设备 **/
    deleteSingle(row) {
      this.handlerDelete(row.id)
    },
    /** 删除设备 **/
    handlerDelete(id) {
      this.$confirm('删除操作后数据不可复原，您确定要删除此数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API_Device.remove(id).then(
          response => {
            this.getList()
          }
        ).catch(response => {
          this.$message({
            type: 'info',
            message: response.message
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /** 设备类型选中变化  **/
    deviceTypeChange(val) {
      this.deviceTypeChangeToFrameTypeChange(val)
      if (val === DEVICE_TYPE.SIMULATE_BED_DEVICE ||
          val === DEVICE_TYPE.SIMULATE_EMERGENCY_BUTTON ||
          val === DEVICE_TYPE.SIMULATE_DOOR_LIGHT ||
          val === DEVICE_TYPE.EMERGENCY_BUTTON) { // 模拟设备不需要mac地址
        this.deviceRules.eth_mac[0].required = false
        this.deviceRules.eth_mac[1].pattern = null
      } else if (val === DEVICE_TYPE.REMOTE_CONTROL) {
        this.deviceRules.eth_mac[1].pattern = null
        this.deviceRules.eth_mac[0].required = true
      } else if (val === DEVICE_TYPE.DIGIT_BED_DEVICE) {
        this.deviceRules.eth_mac[1].pattern = null
        this.deviceRules.eth_mac[0].required = true
      } else {
        // this.deviceRules.eth_mac[1].pattern = /^([0-9A-Fa-f]{2}:?){6}/gi
        this.deviceRules.eth_mac[1].pattern = null
        this.deviceRules.eth_mac[0].required = true
      }
      this.hasRoleId = val === DEVICE_TYPE.NURSE_WATCH
      this.hasAudioId = val === DEVICE_TYPE.SIMULATE_BED_DEVICE ||
                        val === DEVICE_TYPE.SIMULATE_EMERGENCY_BUTTON ||
                        val === DEVICE_TYPE.SIMULATE_DOOR_LIGHT
    },
    /** 设备类型选中对应的空间结构  **/
    deviceTypeChangeToFrameTypeChange(val) {
      if (val === DEVICE_TYPE.NURSE_HOST ||
          val === DEVICE_TYPE.DOCTOR_HOST ||
          val === DEVICE_TYPE.LED_SCREEN ||
          val === DEVICE_TYPE.LCD_SCREEN ||
          val === DEVICE_TYPE.NURSE_WATCH ||
          val === DEVICE_TYPE.WORKER_WATCH ||
          val === DEVICE_TYPE.TRANSFER_DEVICE ||
          val === DEVICE_TYPE.INFORMATION_BOARD ||
          val === DEVICE_TYPE.RS485_TRANSFER) {
        this.getFramesByType(FRAME_TYPE.PART)
      } else if (val === DEVICE_TYPE.DOOR_DEVICE ||
                 val === DEVICE_TYPE.SIMULATE_EMERGENCY_BUTTON ||
                 val === DEVICE_TYPE.SIMULATE_DOOR_LIGHT ||
                 val === DEVICE_TYPE.BEACON) {
        this.getFramesByType(FRAME_TYPE.ROOM)
      } else if (val === DEVICE_TYPE.DIGIT_BED_DEVICE ||
                 val === DEVICE_TYPE.SIMULATE_BED_DEVICE ||
                 val === DEVICE_TYPE.REMOTE_CONTROL ||
                 val === DEVICE_TYPE.CELL_PHONE) {
        this.getFramesByType(FRAME_TYPE.BED)
      } else {
        this.typeFrames = this.partFrames
      }
    },
    /** 添加设备事件 **/
    handleAdd() {
      this.deviceModel = {
        soft_ver: 'SV1.0',
        hard_ver: 'HV1.0',
        code: 'C' + parseInt(Math.random() * 100000),
        model: 'M' + parseInt(Math.random() * 100000),
        part_id: this.$store.getters.partId
      }
      if (Object.keys(this.frame).length > 0) {
        this.$set(this.deviceModel, 'frame_id', this.frame.id)
      }
      delete this.deviceModel.id
      this.hasRoleId = false
      this.getRoles({ page_size: 200, page_no: 1, fixedCondition: ' shop_id = -1', sort: ' role_id', dir: 'desc' })
      this.hasAudioId = false
      this.getDevices(this.$store.getters.partId)
      this.deviceEditTitle = '添加设备'
      this.deviceDialogVisible = true
      this.deviceTypeDisabled = false // 新增设备可以选择设备类型
      this.typeFrames = this.partFrames
    },
    /** 修改设备  **/
    handleEdit(params) {
      this.getRoles({ page_size: 200, page_no: 1, fixedCondition: ' shop_id = -1', sort: ' role_id', dir: 'desc' })
      this.getDevices(params.part_id)
      this.deviceTypeChangeToFrameTypeChange(params.device_type)
      this.hasRoleId = params.device_type === DEVICE_TYPE.NURSE_WATCH
      this.hasAudioId = params.device_type === DEVICE_TYPE.SIMULATE_BED_DEVICE ||
                        params.device_type === DEVICE_TYPE.SIMULATE_EMERGENCY_BUTTON ||
                        params.device_type === DEVICE_TYPE.SIMULATE_DOOR_LIGHT
      this.deviceModel = {
        ...params
      }
      this.deviceEditTitle = '修改设备'
      this.deviceDialogVisible = true
      this.deviceTypeDisabled = true // 修改设备时，不能改变设备类型
    },
    /** 新增 提交表单 */
    handlerFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          /** 新增 */
          if (!this.deviceModel.id) {
            API_Device.add(this.deviceModel).then(() => {
              this.$message.success('保存成功！')
              this.deviceDialogVisible = false
              this.getList()
            }).catch(err => {
              this.$message.error(err.message)
            })
          } else {
            /** 修改 */
            API_Device.update(this.deviceModel.id, this.deviceModel).then(() => {
              this.$message.success('修改成功！')
              this.deviceDialogVisible = false
              this.getList()
            }).catch(error => {
              this.$message.error(error.message)
            })
          }
        }
      })
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size
      this.getList()
    },

    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page
      this.getList()
    },
    getRoles(param) {
      // 获取角色
      clerk_API.getRoles(param).then(response => {
        this.rolesOptions = response.data
      })
    },
    getDevices(partId) {
      // 获取设备列表
      API_Device.getDeviceByType(partId, DEVICE_TYPE.TRANSFER_DEVICE).then(response => {
        this.audioOptions = response
      })
      API_Device.getDeviceByType(partId, DEVICE_TYPE.RS485_TRANSFER).then(response => {
        this.rs485Options = response
      })
    },

    initWebSocket: function() {
      var stockbase = DeviceUrl.replace('http', 'ws')
      this.websock = new WebSocket(stockbase + '/deviceonline/' + this.$store.getters.uuid)
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onmessage = this.websocketonmessage
      this.websock.onclose = this.websocketclose
    },
    websocketonopen: function() {
      console.log('WebSocket连接成功')
    },
    websocketonerror: function(e) {
      console.log('WebSocket连接发生错误')
    },
    websocketonmessage: function(e) {
      this.onlineDevice = JSON.parse(e.data)
      if (this.rowData !== null) {
        for (let i = 0; i < this.rowData.length; i++) {
          if (this.rowData[i].eth_mac) {
            const mac = this.onlineDevice.filter(p => p.toLowerCase() === this.rowData[i].eth_mac.toLowerCase())[0]
            this.rowData[i]['online_state'] = (mac !== undefined && mac !== null) ? '在线' : '离线'
          }
        }
        const rowData = [...this.rowData]
        this.$set(this, 'rowData', rowData)
      }
    },
    websocketclose: function(e) {
      console.log('connection closed (' + e.code + ')')
    }

  }
}
</script>

<style scoped>

</style>