123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517 |
- <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"
- :default-col-def="defaultColDef"
- :animate-rows="true"
- :row-selection="rowSelection"
- :enable-cell-change-flash="true"
- @filterChanged="filterModifed"
- @sortChanged="gridSortChange"
- >
- <!-- @rowDoubleClicked="getList"-->
- <div slot="toolbar" class="inner-toolbar">
- <div class="toolbar-search">
- <en-table-search :placeholder="this.$t('action.keywords')" @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>
- <!-- <en-table-layout-->
- <!-- toolbar-->
- <!-- pagination-->
- <!-- :table-data="tableData"-->
- <!-- :height="tableHeight"-->
- <!-- :loading="loading"-->
- <!-- @selection-change="selectFun"-->
- <!-- @sort-change="tableSort"-->
- <!-- >-->
- <!-- <!–工具栏–>-->
- <!-- <div slot="toolbar" class="inner-toolbar" />-->
- <!-- <!–表头–>-->
- <!-- <template slot="table-columns">-->
- <!-- <el-table-column prop="id" sortable="custom" :label="识别码" width="200" align="center" />-->
- <!-- <el-table-column prop="device_name" sortable="custom" :label="别名" width="200" align="center" />-->
- <!-- <el-table-column prop="device_wifi_mac" sortable="custom" :label="mac地址" width="200" align="center" />-->
- <!-- <el-table-column prop="device_eth_ip" sortable="custom" :label="IP地址" width="200" align="center" />-->
- <!-- <el-table-column prop="partid" sortable="custom" :label="科室ID" width="200" align="center" />-->
- <!-- <el-table-column :label="操作" align="center">-->
- <!-- <template slot-scope="scope">-->
- <!-- <el-button type="primary" size="mini" @click="setPartBoard(scope.row)">设定</el-button>-->
- <!-- <el-button type="primary" size="mini" @click="setBoard(scope.row)">设置</el-button>-->
- <!-- <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- </template>-->
- <!-- <!–翻页–>-->
- <!-- <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"-->
- <!-- />-->
- <!-- </en-table-layout>-->
- <el-dialog :title="this.$t('board.boardSet')" :visible.sync="formshow" width="50%">
- <el-form ref="editform" v-model="boardConfig" label-width="120px">
- <fieldset>
- <legend>{{ this.$t('board.statusTime') }}</legend>
- <el-form-item :label="this.$t('board.screenFirst')">
- <el-input v-model="boardConfig.staySeconds[0]" clearable :placeholder="this.$t('board.screenFirstSet')" type="number">
- <template slot="append">{{ second }}</template>
- </el-input>
- </el-form-item>
- <el-form-item :label="this.$t('board.screenSecond')">
- <el-input v-model="boardConfig.staySeconds[1]" clearable :placeholder="this.$t('board.screenSecondSet')" type="number">
- <template slot="append">{{ second }}</template>
- </el-input>
- </el-form-item>
- <el-form-item v-for="(item,index) in boardTitles" :key="index" :label="labelStr(index)">
- <el-input v-model="boardConfig.staySeconds[index+2]" clearable :placeholder="labelStr(index)" type="number">
- <template slot="append">{{ second }}</template>
- </el-input>
- </el-form-item>
- </fieldset>
- <fieldset class="margin-top-sm">
- <legend>{{ this.$t('board.screenFixedSet') }}</legend>
- <el-form-item label-width="80">
- <el-radio-group v-model="boardConfig.stayIndex">
- <el-radio :label="0">{{ this.$t('board.noFixed') }}</el-radio>
- <el-radio :label="1">{{ this.$t('board.screenFirst') }}</el-radio>
- <el-radio :label="2">{{ this.$t('board.screenSecond') }}</el-radio>
- <el-radio v-for="(item,index) in boardTitles" :key="index" :label="(index+3)" > {{ labelStr(index) }}</el-radio>
- </el-radio-group>
- </el-form-item>
- </fieldset>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="formshow = false">{{ this.$t('action.cancel') }}</el-button>
- <el-button type="primary" @click="updateBoard()">{{ this.$t('action.yes') }}</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import { AG_GRID_LOCALE_CN } from '@/utils/AgGridVueLocaleCn'
- import ButtonCellRender from '../../components/AgGridCellRender/ButtonCellRender'
- import ListFilter from '@/components/AgGridCustomFilter/ListFilter'
- import RadioFilter from '@/components/AgGridCustomFilter/RadioFilter'
- // import { DeviceUrl } from '@/utils/domain'
- import * as API_Device from '@/api/ncs_device'
- import * as API_FrameGroup from '@/api/ncs_frameGroup'
- import * as API_Board from '@/api/ncs_board'
- const DeviceUrl = domain.DeviceUrl
- export default {
- name: 'Index',
- components: { ButtonCellRender, ListFilter, RadioFilter },
- data() {
- return {
- /** 列表参数 */
- params: {
- page_size: 20,
- page_no: 1,
- fixedCondition: '(part_id=' + this.$store.getters.partId + ' OR part_id=0) AND device_type=17'
- },
- treeData: [],
- /** ag-grid参数 **/
- pageData: [],
- loading: false,
- 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,
- second: this.$t('action.second'),
- websock: null,
- boardObj: {},
- boardConfig: {
- staySeconds: [30, 30],
- stayIndex: 0
- },
- boardTitles: [],
- formshow: false,
- rules: {
- device_type: [
- { required: true, message: this.$t('deviceManage.deviceTypeMsg'), trigger: 'blur' }
- ]
- }
- }
- },
- computed: {
- tableHeight() {
- return this.mainAreaHeight - 130
- }
- },
- beforeMount() {
- this.gridOptions = {}
- this.columnDefs = [
- {
- headerName: '#',
- headerCheckboxSelection: true,
- headerCheckboxSelectionFilteredOnly: true,
- checkboxSelection: true,
- sortable: false, filter: false,
- width: 100,
- resizable: false,
- valueGetter: this.hashValueGetter
- },
- { headerName: 'ID', field: 'id', sortable: true, filter: 'agNumberColumnFilter', width: 130 },
- {
- headerName: this.$t('board.name'), field: 'name', sortable: true, filter: 'agTextColumnFilter', width: 150
- },
- {
- headerName: this.$t('board.ethMac'), field: 'eth_mac', sortable: true, filter: 'agTextColumnFilter', flex: 1
- },
- {
- headerName: this.$t('board.partId'), field: 'part_id', sortable: true, filter: 'agNumberColumnFilter', width: 150
- },
- {
- headerName: this.$t('action.setUp'), field: 'id',
- cellRendererFramework: 'ButtonCellRender',
- cellRendererParams: {
- onClick: this.handEdit,
- label: this.$t('board.setUpThisPart'),
- buttonType: 'primary',
- buttonSize: 'mini'
- },
- filter: false,
- pinned: 'right',
- lockPinned: true,
- width: 150,
- resizable: false,
- sortable: false
- },
- {
- headerName: this.$t('action.settings'), field: 'id',
- cellRendererFramework: 'ButtonCellRender',
- cellRendererParams: {
- onClick: this.setBoard,
- label: this.$t('board.boardSet'),
- buttonType: 'primary',
- buttonSize: 'mini'
- },
- filter: false,
- pinned: 'right',
- lockPinned: true,
- width: 150,
- resizable: false,
- sortable: false
- },
- {
- headerName: this.$t('action.delete'), field: 'shop_id',
- cellRendererFramework: 'ButtonCellRender',
- cellRendererParams: param => {
- return {
- onClick: this.deleteSingle,
- label: this.$t('action.delete'),
- buttonType: 'danger',
- buttonSize: 'mini'
- }
- },
- pinned: 'right',
- lockPinned: true,
- width: 100,
- resizable: false,
- filter: false,
- sortable: false
- }
- ]
- this.defaultColDef = {
- sortable: true,
- resizable: true,
- comparator: this.dateCustomComparator,
- filterParams: {
- debounceMs: 200,
- newRowsAction: 'keep',
- textCustomComparator: this.textCustomComparator,
- comparator: this.dateCustomComparator
- }
- }
- this.rowSelection = 'multiple'
- },
- mounted() {
- window.onresize = this.windowResize
- this.gridApi = this.gridOptions.api
- this.gridColumnApi = this.gridOptions.columnApi
- // 设置默认排序字段,应用列状态之后会触发 gridSortChange 函数,会调用getlist,后面不需要再调用this.getlist
- this.gridColumnApi.applyColumnState({
- state: [
- {
- colId: 'id',
- sort: 'asc'
- }
- ]
- })
- this.getFrameTree()
- this.getBoardTitles()
- this.initWebSocket()
- },
- methods: {
- /** 表格行选择变化记录选中行数据*/
- selectFun: function(val) {
- this.multipleSelection = val
- },
- windowResize() {
- this.$set(this, 'mainAreaHeight', Number(document.documentElement.clientHeight) - 84)
- },
- deleteSingle(row) {
- this.handlerDelete(row.id)
- },
- handlerDelete(ids) {
- this.$confirm(this.$t('action.sureDelete'), this.$t('action.waring'), {
- confirmButtonText: this.$t('action.yes'),
- cancelButtonText: this.$t('action.cancel'),
- type: 'warning'
- }).then(() => {
- API_Device.remove(ids).then(
- response => {
- this.getList()
- this.$message({
- type: 'success',
- message: this.$t('action.deleted')
- })
- }
- ).catch(response => {
- this.$message({
- type: 'info',
- message: response.message
- })
- })
- }).catch(() => {
- this.$message({
- type: 'info',
- message: this.$t('action.cancelDelete')
- })
- })
- },
- /** 分页大小发生改变 */
- 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)
- API_Device.getList(param).then(response => {
- this.loading = false
- this.rowData = [...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()
- },
- 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()
- console.log(sortState)
- },
- /**
- * 获取空间结构树形数据
- * */
- getFrameTree() {
- return new Promise((resolve, reject) => {
- API_FrameGroup.getframestruct(this.$store.getters.partId, 3).then(res => {
- this.treeData = res.frameTree
- resolve()
- }).catch(err => {
- reject(err)
- })
- })
- },
- setBoard(row) {
- this.boardObj = { ...row }
- this.formshow = true
- if (this.boardObj.config === null || this.boardObj.config === '') { // 没有配置看板时,设置默认值
- if (this.boardTitles.length > 0) {
- this.boardTitles.forEach((item, index) => {
- this.boardConfig.staySeconds[index + 2] = 30 // 添加默认时间
- })
- }
- } else {
- this.boardConfig = JSON.parse(this.boardObj.config)
- }
- // if (this.boardObj.device_hard_ver) this.stayIndex = Number(this.boardObj.device_hard_ver)
- },
- getBoardTitles() {
- API_Board.getBoardTitles(this.$store.getters.partId).then(res => {
- this.boardTitles = res
- })
- },
- updateBoard() {
- this.boardConfig.staySeconds=[this.boardConfig.staySeconds[0],this.boardConfig.staySeconds[1],...this.boardTitles.map((p,index)=>Number(this.boardConfig.staySeconds[index+2]))]
- if (this.boardConfig.staySeconds.length !== this.boardTitles.length + 2) {
- this.$message.success(this.$t('board.statusTimeSetMsg'))
- return false
- }
- this.boardConfig.staySeconds = this.boardConfig.staySeconds.map(p => Number(p))
- this.boardObj.config = JSON.stringify(this.boardConfig)
- API_Device.update(this.boardObj.id, this.boardObj).then(() => {
- this.$message.success(this.$t('action.settingsSuccess'))
- this.getList()
- this.formshow = false
- }).catch(response => {
- this.getList()
- this.formshow = false
- })
- },
- /**
- * 设定到科室
- * @param row
- */
- handEdit(row) {
- row.part_id = this.$store.getters.partId
- row.frame_id = this.treeData[0].id
- API_Device.update(row.id, row).then(res => {
- this.$message.success(this.$t('action.setUpSuccess'))
- this.gridApi.redrawRows()
- }).catch(response => {
- this.getList()
- })
- },
- filterModifed(param) {
- console.log(param)
- var model = param.api.getFilterModel()
- console.log('model', JSON.stringify(model))
- this.params.filter = JSON.stringify(model)
- this.getList()
- },
- initWebSocket: function() {
- var stockbase = DeviceUrl.replace('http', 'ws')
- this.websock = new WebSocket(stockbase + '/boardinfo/0/' + 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() {
- this.$message.success(this.$t('board.webSocketSuccess'))
- console.log(this.$t('deviceManage.webSocketSuccess'))
- },
- websocketonerror: function(e) {
- console.log(this.$t('deviceManage.webSocketError'))
- },
- websocketonmessage: function(e) {
- this.getList()
- },
- websocketclose: function(e) {
- console.log('connection closed (' + e.code + ')')
- },
- labelStr(index) {
- return this.$t('board.the') + (index + 3) + this.$t('board.screen')
- },
- }
- }
- </script>
- <style scoped>
- fieldset{
- border-style: solid;
- border-color: #DCDFE6;
- border-width: 1px;
- }
- .margin-top-sm{margin-top: 20px}
- </style>
|