| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <TableLayout1 class="menu-layout" :permissions="['system:menu:query']"> |
| | | <template v-slot:menu> |
| | | <div |
| | | style="width: 100%; height: 50px; background: rgba(242, 242, 242, 1); line-height: 50px; text-align: center; font-size: 14px;"> |
| | | åºåä¿¡æ¯</div> |
| | | <div style="width: 100%; height: calc(100vh - 170px); overflow-y: scroll;"> |
| | | <Tree :list="regionList" :defaultProps="{ name: 'name', status: 'fsStatus', children: 'childList', id: 'indexCode' }" @callback="callback" /> |
| | | </div> |
| | | </template> |
| | | <!-- è¡¨æ ¼åå页 --> |
| | | <template v-slot:table-wrap> |
| | | <ul class="toolbar" > |
| | | <li><el-button type="primary" icon="el-icon-refresh" :loading="isWorking.sort" @click="refreshRegionData()">å·æ°ç¼å</el-button></li> |
| | | </ul> |
| | | <el-form ref="searchForm" slot="search-form" label-width="100px" inline> |
| | | <div class="platgroup_tabs"> |
| | | <div class="tab" :class="{ active: activeGroup === item.id }" @click="groupClick(item)" |
| | | v-for="(item, i) in groupList" :key="i"> |
| | | {{ item.name }} |
| | | </div> |
| | | </div> |
| | | </el-form> |
| | | <el-table :height="tableHeightNew" v-loading="isWorking.search" :data="currentList" stripe @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55"></el-table-column> |
| | | <el-table-column prop="name" label="设å¤åç§°" min-width="120px"> </el-table-column> |
| | | <el-table-column prop="indexCode" label="设å¤indexCode" min-width="200px"></el-table-column> |
| | | <el-table-column prop="regionName" label="åºååç§°" min-width="200px"></el-table-column> |
| | | </el-table> |
| | | <!-- æ¥ç人åå¼å¡è®°å½ --> |
| | | </template> |
| | | </TableLayout1> |
| | | </template> |
| | | |
| | | <script> |
| | | import TableLayout1 from '@/layouts/TableLayout1' |
| | | import BaseTable from '@/components/base/BaseTable' |
| | | import Tree from '@/components/common/Tree' |
| | | import { refreshRegionData, regionList } from '@/api/business/warning' |
| | | export default { |
| | | name: 'regionDevice', |
| | | extends: BaseTable, |
| | | components: { TableLayout1, Tree }, |
| | | data: function () { |
| | | return { |
| | | regionList: [], |
| | | curentReg: {}, |
| | | activeType: 0, |
| | | activeGroup: 0, |
| | | currentList: [], |
| | | groupList: [{ id: 0, name: 'çæ§ç¹', type: 0 }, { id: 1, name: 'æ¶é²è®¾å¤', type: 1 }, { id: 2, name: 'æ¶é²ä¼ æå¨', type: 2 }], |
| | | isWorking: { |
| | | sort: false |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | currentDataList () { |
| | | this.currentList = [] |
| | | if (this.activeGroup === 0) { |
| | | this.currentList = this.curentReg.carmeraList || [] |
| | | } else if (this.activeGroup === 1) { |
| | | this.currentList = this.curentReg.deviceList || [] |
| | | } else if (this.activeGroup === 2) { |
| | | this.currentList = this.curentReg.sensorList || [] |
| | | } |
| | | }, |
| | | groupClick (item) { |
| | | this.activeGroup = item.id |
| | | this.activeType = item.type |
| | | this.currentDataList() |
| | | this.handlePageChange() |
| | | }, |
| | | // æ¥è¯¢æ°æ® |
| | | handlePageChange () { |
| | | }, |
| | | // æåº |
| | | refreshRegionData () { |
| | | if (this.isWorking.sort) { |
| | | return |
| | | } |
| | | this.isWorking.sort = true |
| | | refreshRegionData({}) |
| | | .then(() => { |
| | | this.loadRegions() |
| | | this.$tip.apiSuccess('å·æ°æåï¼') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking.sort = false |
| | | }) |
| | | }, |
| | | loadRegions () { |
| | | if (this.isWorking.loading) { |
| | | return |
| | | } |
| | | this.isWorking.loading =true |
| | | this.regionList = [] |
| | | this.curentReg = {} |
| | | this.currentList = [] |
| | | regionList(1) |
| | | .then(res => { |
| | | if (res && res.length > 0) { |
| | | res[0].fsStatus = 1 |
| | | this.regionList = res |
| | | this.curentReg = res[0] |
| | | this.currentDataList() |
| | | } |
| | | }) .catch(e => { |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking.loading = false |
| | | }) |
| | | }, |
| | | getDepartmentTree (tree) { |
| | | if (tree == null) { |
| | | return [] |
| | | } |
| | | return tree.map(item => { |
| | | const newItem = { ...item } |
| | | if (newItem) { |
| | | newItem.children = newItem.childList |
| | | } |
| | | if (item.children && item.children.length == 0) { |
| | | this.$delete(newItem, 'children') |
| | | } else { |
| | | newItem.children = this.getDepartmentTree(newItem.children) |
| | | } |
| | | |
| | | if (newItem.type === this.searchForm.companyType) { |
| | | // newItem.disabled =false |
| | | } else { |
| | | newItem.disabled = true |
| | | } |
| | | return newItem |
| | | }) |
| | | }, |
| | | callback (row) { |
| | | console.log(row) |
| | | this.curentReg = row |
| | | this.currentDataList() |
| | | } |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | module: 'èå', |
| | | api: '/system/menu' |
| | | }) |
| | | this.loadRegions() |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | @import "@/assets/style/variables.scss"; |
| | | .platgroup_tabs { |
| | | flex: 1; |
| | | display: flex; |
| | | border-bottom: 1px solid #dfe2e8; |
| | | |
| | | .tab { |
| | | color: #666666; |
| | | margin-right: 40px; |
| | | cursor: pointer; |
| | | padding-bottom: 18px; |
| | | border-bottom: 2px solid #fff; |
| | | } |
| | | |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | border-bottom: 2px solid $primary-color; |
| | | } |
| | | } |
| | | .menu-layout { |
| | | /deep/ .table-content { |
| | | margin-top: 0px; |
| | | } |
| | | } |
| | | // 徿 å |
| | | .table-column-icon { |
| | | // element-ui徿 |
| | | i { |
| | | background-color: $primary-color; |
| | | opacity: 0.72; |
| | | font-size: 20px; |
| | | color: #fff; |
| | | padding: 4px; |
| | | border-radius: 50%; |
| | | } |
| | | // èªå®ä¹å¾æ |
| | | [class^="eva-icon-"] { |
| | | width: 20px; |
| | | height: 20px; |
| | | background-size: 16px; |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | </style> |