增加报警模式的枚举，增加报警设置的界面

src/api/ncs_sos_device_settings.js

@@ -36,3 +36,14 @@ export function getSosDeviceSetting(deviceId) {
     loading: false
   })
 }
+
+/** 查询报警设备列表 */
+export function getSosDeviceSettingList(params) {
+  return request({
+    url: '/ncs/sos_device_settings/get_sos_device_setting_list',
+    method: 'POST',
+    loading: true,
+    data: params,
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}

src/router/index.js

@@ -199,6 +199,19 @@ export const partRoutes = [
     ]
   },
   {
+    path: '/ncs-sos-device',
+    component: Layout,
+    redirect: '/ncs-device/sos_device',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/ncs-sos-device-setting/sos_device_setting'),
+        name: 'nurse_watch',
+        meta: { title: '报警设备', icon: 'el-icon-s-help', noCache: true }
+      }
+    ]
+  },
+  {
     path: '/ncs-channel',
     component: Layout,
     redirect: '/ncs-channel/index',

src/utils/enum/SosDeviceSettingTypeEnum.js

@@ -0,0 +1,9 @@
+import createEnum from '@/utils/enum/createEnum'
+
+export const SOS_DEVICE_SETTING_TYPE = createEnum(
+  {
+    NOT_START: [0, '不启动'],
+    EPIDEMIC_PATTERN: [1, '疫情防控模式'],
+    CARING_PATTERN: [2, '关爱老人模式']
+  }
+)

src/views/ncs-sos-device-setting/sos_device_setting.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="formwrap">
+    <ag-grid-layout
+      :table-height="tableHeight"
+      theme="ag-theme-alpine"
+      :column-defs="columnDefs"
+      :row-data="tableData"
+      :locale-text="localeText"
+      :grid-options="gridOptions"
+      :default-col-def="defaultColDef"
+      :animate-rows="true"
+      :row-selection="rowSelection"
+      row-height="50"
+      @filterChanged="filterModifed"
+      @sortChanged="gridSortChange"
+    >
+      <!--工具栏-->
+      <div slot="toolbar" class="inner-toolbar">
+        <div class="toolbar-search">
+          <en-table-search placeholder="请输入设备别名或设备标识码" @search="handlerSearch" />
+        </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="sosDeviceSettingEditTitle" :visible.sync="sosDeviceSettingFormShow" width="70%">
+      <el-form ref="sosDeviceSettingEditForm" :rules="sosDeviceSettingRules" label-width="120px" :model="sosDeviceSettingModel">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="报警设备模式" prop="type">
+              <el-select v-model="sosDeviceSettingModel.type" placeholder="报警设备模式" clearable>
+                <el-option v-for="item in sosDeviceSettingsTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="报警时间" prop="setting_time">
+              <el-input-number v-model="sosDeviceSettingModel.setting_time" controls-position="right" :min="0" :max="60" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="报警时间单位" prop="unit">
+              <el-radio-group v-model="sosDeviceSettingModel.unit" size="mini" prop="unit">
+                <el-radio label="小时">小时</el-radio>
+                <el-radio label="分钟">分钟</el-radio>
+                <el-radio label="秒">秒</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlerFormSubmit('sosDeviceSettingEditForm')">保存修改</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { unixToDate } from '@/utils/Foundation'
+import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
+import ButtonCellRender from '@/components/AgGridCellRender/ButtonCellRender'
+import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
+import * as API_SosDeviceSetting from "@/api/ncs_sos_device_settings";
+import {DEVICE_TYPE} from "@/utils/enum/DeviceTypeEnum";
+import {SOS_DEVICE_SETTING_TYPE} from "@/utils/enum/SosDeviceSettingTypeEnum";
+
+export default {
+  name: 'Index',
+  components: { ButtonCellRender, RadioFilter},
+  data: function() {
+    return {
+      /** 表格数据 */
+      tableData: [],
+      /** 表单数据 */
+      sosDeviceSettingEditTitle: '编辑',
+      sosDeviceSettingModel: {},
+      sosDeviceSettingFormShow: false, // 编辑表单显示开关
+      /** 表单校验 */
+      sosDeviceSettingRules: {
+        type: [
+          { required: true, message: '报警设备模式', trigger: 'blur' }
+        ],
+        sosDeviceSetting: [
+          { required: true, message: '报警时间', trigger: 'blur' }
+        ],
+        unit: [
+          { required: true, message: '报警时间单位', trigger: 'blur' }
+        ],
+      },
+      pageData: [],
+      loading: false,
+      multipleSelection: [],
+      /** 列表参数 */
+      params: {
+        page_size: 20,
+        page_no: 1,
+        fixedCondition: 'nsds.part_id = ' + this.$store.getters.partId,
+        sort: 'id',
+        dir: 'desc'
+      },
+      editflag: 0,
+      deviceInfo: {},
+      nurses: [],
+      columnDefs: null, // 新表格
+      defaultColDef: null,
+      gridOptions: null,
+      gridApi: null,
+      columnApi: null,
+      localeText: AG_GRID_LOCALE_CN,
+      rowSelection: null,
+      showViewer: false,
+      timer: '',
+      // sosDeviceSetting: {},
+      sosDeviceSettingsTypeOptions: [
+        {
+          value: 0,
+          label: '不开启'
+        }, {
+          value: 1,
+          label: '疫情防控模式'
+        }, {
+          value: 2,
+          label: '关爱老人模式'
+        }
+      ],
+    }
+  },
+  computed: {
+    tableHeight() {
+      return this.mainAreaHeight - 130
+    }
+  },
+  beforeMount() {
+    this.gridOptions = {
+    }
+    this.columnDefs = [
+      {
+        headerName: '#',
+        headerCheckboxSelection: true,
+        headerCheckboxSelectionFilteredOnly: true,
+        checkboxSelection: true,
+        sortable: false,
+        width: 50,
+        resizable: false,
+        valueGetter: this.hashValueGetter
+      },
+      { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 100 },
+      { headerName: '报警时间', field: 'setting_time', sortable: true,
+        filter: 'ListFilter' , width: 120,
+        valueGetter: this.settingTimeGetter
+      },
+      // { headerName: '单位', field: 'unit', sortable: true, filter: 'agTextColumnFilter' , width: 100 },
+      { headerName: '报警模式', field: 'type', sortable: true,
+        filter: 'ListFilter' , width: 150,
+        valueGetter: this.sosDeviceSettingTypeGetter
+      },
+      { headerName: '设备id', field: 'device_id', sortable: true, filter: 'agNumberColumnFilter' , width: 100 },
+      { headerName: '设备别名', field: 'device_name', sortable: true, filter: 'agTextColumnFilter' , width: 150 },
+      { headerName: '设备类型', field: 'device_type', sortable: true,
+        filterFramework: 'ListFilter', width: 120,
+        // filterParams: {
+        //   listData: DEVICE_TYPE.getDesc
+        // },
+        valueGetter: this.deviceTypeGetter
+      },
+      { headerName: '设备标识码', field: 'device_eth_mac', sortable: true, filter: 'agTextColumnFilter', width: 200  },
+      { headerName: '空间全称', field: 'frame_full_name', sortable: true, filter: 'agTextColumnFilter' , width: 150 },
+      {
+        headerName: '编辑', field: 'id',
+        cellRendererFramework: 'ButtonCellRender',
+        cellRendererParams: param => {
+          return {
+            onClick: this.handleEdit,
+            label: '编辑',
+            buttonType: 'primary',
+            buttonSize: 'mini'
+          }
+        },
+        filter: false,
+        pinned: 'right',
+        lockPinned: true,
+        width: 90,
+        resizable: false,
+        sortable: false
+      }
+    ]
+    this.defaultColDef = {
+      sortable: true,
+      resizable: true,
+      comparator: this.testComparator,
+      filterParams: {
+        debounceMs: 200,
+        newRowsAction: 'keep',
+        textCustomComparator: this.textCustomComparator,
+        comparator: this.testComparator
+      }
+    }
+    this.rowSelection = 'multiple'
+  },
+  mounted() {
+    // window.onresize = this.windowResize()
+    this.gridApi = this.gridOptions.api
+    this.getList()
+  },
+  beforeDestroy() {
+    clearTimeout(this.timer)
+  },
+  destroyed() {
+    clearTimeout(this.timer)
+  },
+  methods: {
+    /** 选择行变化时，记录选中的行数据 */
+    selectFun(val) {
+      this.multipleSelection = val
+    },
+    /** 分页大小发生改变 */
+    handlePageSizeChange(size) {
+      this.params.page_size = size
+      this.getList()
+    },
+    /** 分页页数发生改变 */
+    handlePageCurrentChange(page) {
+      this.params.page_no = page
+      this.getList()
+    },
+    /** 加载通知列表 */
+    getList() {
+      this.loading = true
+      const param = this.MixinClone(this.params)
+      this.gridApi.showLoadingOverlay()
+      API_SosDeviceSetting.getSosDeviceSettingList(param).then(response => {
+        this.loading = false
+        this.tableData = response.data
+        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(() => {
+        this.loading = false
+      })
+    },
+    /** 处理搜索 */
+    handlerSearch(keywords) {
+      this.params.query = keywords
+      this.getList()
+    },
+    /** 处理排序 */
+    tableSort(column) {
+      if (column.order !== null) {
+        this.params.sort = column.prop
+        this.params.dir = column.order === 'ascending' ? 'asc' : 'desc'
+      } else {
+        this.params.sort = null
+        this.params.dir = null
+      }
+      this.getList()
+    },
+    formatterDate(params) {
+      return unixToDate(params.value)
+    },
+    formatterName(params) {
+      if (params.value && params.data.role_name) {
+        return params.value + ' ' + params.data.role_name
+      } else {
+        if (params.value) {
+          return params.value
+        } else if (params.data.role_name) {
+          return '未绑定 ' + params.data.role_name
+        }
+      }
+    },
+    filterModifed(param) {
+      const 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()
+    },
+    // formatterSatus(param) {
+    //   if (param.value === 1) {
+    //     return '<span style="color:green">已启用</span>'
+    //   } else {
+    //     return '<span style="color:red">未启用</span>'
+    //   }
+    // },
+    /** 修改设备报警  **/
+    handleEdit(params) {
+      // this.getSosDeviceSetting(params.id)
+      this.sosDeviceSettingModel = {
+        ...params
+      }
+      this.sosDeviceSettingEditTitle = '修改设备报警'
+      this.sosDeviceSettingFormShow = true
+    },
+    /** 提交表单  **/
+    handlerFormSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const _this = this;
+          /** 修改 */
+          API_SosDeviceSetting.updateByDeviceId(this.sosDeviceSettingModel.device_id, this.sosDeviceSettingModel).then(() => {
+            this.$message.success('保存成功！')
+            this.sosDeviceSettingFormShow = false
+            this.getList()
+          })
+          }
+      })
+    },
+    /** 获取设备类型文字显示,从DEVICE_TYPE 中找出value值对应的key显示出来 */
+    deviceTypeGetter(params) {
+      const gridVal = params.data.device_type
+      return DEVICE_TYPE.getDescFromValue(gridVal)
+    },
+    /** 获取报警模式 */
+    sosDeviceSettingTypeGetter(params) {
+      const gridVal = params.data.type
+      return SOS_DEVICE_SETTING_TYPE.getDescFromValue(gridVal)
+    },
+    /** 报警时间 */
+    settingTimeGetter(params) {
+      const settingTime = params.data.setting_time
+      const unit = params.data.unit
+      return '每' + settingTime + unit + '/次'
+    }
+    // fanhui() {
+    //   this.sosDeviceSettingFormShow = false
+    // },
+  }
+}
+</script>
+
+<style type="text/scss" scoped>
+  .tablewen{
+    width:100%;
+    border-collapse:collapse;
+    border: 1px solid #a5b6c8;
+    margin-bottom: 30px;
+    line-height: 40px;
+  }
+  .tablewen td{
+    font-size: 14px;
+    -webkit-margin-before: 0.83em;
+    -webkit-margin-after: 0.83em;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    font-weight: bold;
+  }
+  .tablewen td span{
+    font-size: 0.8em;
+    -webkit-margin-before: 0.83em;
+    -webkit-margin-after: 0.83em;
+    -webkit-margin-start: 0px;
+    -webkit-margin-end: 0px;
+    font-weight: bold;
+    color: #8c939d;
+    margin-left: 5px;
+  }
+  .tablewen .td1{
+    width:15%;
+  }
+  .tablewen .td2{
+    width:20%;
+  }
+</style>