优化

MrShi

2026-01-13 3a154bdb0a5aaa2c0ac3eac95a6ba747068bd454

 admin/src/views/business/regionDevice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,205 @@
<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>
      <p class="tip-warn" style="margin-bottom: 10px;"><i class="el-icon-info"></i>说明：
        åŒºåŸŸè®¾å¤‡ä¿¡æ¯è¡¨ç¤ºåŒæ­¥æµ·åº·å®‰é˜²å¹³å°ä¿¡æ¯æ•°æ®ï¼Œå½“安防平台相关数据发生变动时，请【刷新缓存】同步本系统中数据信息
      </p>
      <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 = falsex
          })
    },
    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>