网关管理

MrShi

2026-04-03 662d8ce4e3561263278b5bab92c04702537b411a

网关管理

 admin/.env.development

@@ -3,6 +3,8 @@
# é¡¹ç›®ä¸Šä¸‹æ–‡è·¯å¾„
VUE_APP_CONTEXT_PATH = './'

VUE_APP_API_URL  = 'http://localhost:10010'
#VUE_APP_API_URL  = 'http://localhost:10010'

VUE_APP_API_URL  = 'http://192.168.1.44:10010'

#VUE_APP_API_URL  = 'https://zhcg.fnwtzx.com/gateway_interface'

 admin/src/api/business/ywGateway.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
import request from '../../utils/request'

// æŸ¥è¯¢
export function fetchList (data) {
  return request.post('/visitsAdmin/cloudService/business/ywGateway/page', data)
}
// åˆ›å»º
export function create (data) {
  return request.post('/visitsAdmin/cloudService/business/ywGateway/create', data)
}
// ä¿®æ”¹
export function updateById (data) {
  return request.post('/visitsAdmin/cloudService/business/ywGateway/updateById', data)
}
// åˆ é™¤
export function deleteById (id) {
  return request.get(`/visitsAdmin/cloudService/business/ywGateway/delete/${id}`)
}

 admin/src/components/business/DeviceGatewayWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        width="65%"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-form :model="form" ref="form" :rules="rules">
          <el-form-item label="项目名称" prop="name">
            <el-select v-model="form.projectId" placeholder="请选择项目名称">
                <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网关名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入网关名称" v-trim/>
          </el-form-item>
          <el-form-item label="网关型号" prop="gatewayModel">
            <el-input v-model="form.gatewayModel" placeholder="请输入网关型号" v-trim/>
          </el-form-item>
          <el-form-item label="网关设备号" prop="gatewayCode">
            <el-input v-model="form.gatewayCode" placeholder="请输入网关设备号" v-trim/>
          </el-form-item>
        </el-form>
    </GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
import { getProjectList } from '@/api/project/ywProject'
export default {
  name: 'DeviceGatewayWindow ',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    return {
      // è¡¨å•æ•°æ®
      form: {
        id: null,
        projectId: '',
        name: '',
        gatewayModel: '',
        gatewayCode: ''
      },
      // éªŒè¯è§„则
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        projectId: [
          { required: true, message: '请选择项目名称', trigger: 'change' }
        ],
        gatewayModel: [
          { required: true, message: '请输入网关型号', trigger: 'blur' }
        ],
        gatewayCode: [
          { required: true, message: '请输入网关设备号', trigger: 'blur' }
        ]
      },
      projectList: []
    }
  },
  created () {
    this.config({
      api: '/business/ywGateway',
      'field.id': 'id'
    })
  },
  methods: {
    open (title, target) {
      this.title = title
      this.getProject()
      this.visible = true
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(async () => {
        for (const key in this.form) {
          this.form[key] = target[key]
        }
      })
    },
    getProject() {
      getProjectList({}).then(res => {
        this.projectList = res || []
      })
    },
  }
}
</script>

 admin/src/components/business/electricityMeter.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,58 @@
<template>
    <GlobalWindow
        :title="title"
        :visible.sync="visible"
        :showConfirm="false"
        width="65%"
        :confirm-working="isWorking"
        @confirm="confirm"
    >
        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
                prop="date"
                label="表号">
            </el-table-column>
            <el-table-column
                prop="name"
                label="表名称">
            </el-table-column>
            <el-table-column
                prop="付费类型"
                label="付费类型">
            </el-table-column>
            <el-table-column
                prop="设备绑定状态"
                label="设备绑定状态">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="{row}">
                    <el-button type="text">解绑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </GlobalWindow>
</template>
<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalWindow from '@/components/common/GlobalWindow'
export default {
  name: 'electricityMeter',
  extends: BaseOpera,
  components: { GlobalWindow },
  data () {
    return {
      tableData: []
    }
  },
  created () {
    
  },
  methods: {
    
  }
}
</script>

 admin/src/views/business/deviceGateway.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,100 @@
<template>
  <TableLayout :permissions="['business:device:query']">
    <!-- æœç´¢è¡¨å• -->
    <el-form ref="searchForm"  slot="search-form" :model="searchForm" label-width="100px" inline>
        <el-form-item title="网关名称" prop="name">
            <el-input v-model="searchForm.name" placeholder="请输入网关名称" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item title="项目名称" prop="projectId">
            <el-select v-model="searchForm.projectId" placeholder="请选择项目名称">
                <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <section>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
        </section>
    </el-form>
    <!-- è¡¨æ ¼å’Œåˆ†é¡µ -->
    <template v-slot:table-wrap>
      <ul class="toolbar" v-permissions="['business:device:create', 'business:device:delete']">
        <li><el-button type="primary" @click="$refs.operaDeviceGateway.open('新建网关')" icon="el-icon-plus" v-permissions="['business:device:create']">添加网关</el-button></li>
      </ul>
        <el-table
            v-loading="isWorking.search"
            :data="tableData.list"
            stripe >
          <el-table-column prop="name" label="网关名称" fixed min-width="150" align="center"></el-table-column>
          <el-table-column prop="gatewayModel" label="网关型号" min-width="100" align="center" ></el-table-column>
          <el-table-column prop="gatewayCode" label="网关设备号"  min-width="120" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="lastHeartbeatTime" label="最后心跳时间" align="center" min-width="100" show-overflow-tooltip></el-table-column>
          <el-table-column
              label="操作"
              align="center"
              min-width="280"
              fixed="right"
          >
              <template slot-scope="{row}">
                <el-button type="text" @click="$refs.operaElectricityMeter.open('查看绑定电表', row)">已绑电表</el-button>
                <el-button type="text" @click="$refs.operaDeviceGateway.open('编辑网关', row)">编辑</el-button>
                <el-button type="text" class="red" @click="deleteById(row)" v-permissions="['business:device:delete']">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <pagination
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :pagination="tableData.pagination">
        </pagination>
    </template>
  <!-- æ–°å»º/修改 -->
  <DeviceGatewayWindow ref="operaDeviceGateway" @success="handlePageChange"/>
  <!-- è§£ç»‘电表 -->
  <ElectricityMeter ref="operaElectricityMeter" @success="handlePageChange"/>
  </TableLayout>
</template>
<script>
import BaseTable from '@/components/base/BaseTable'
import TableLayout from '@/layouts/TableLayout'
import Pagination from '@/components/common/Pagination'
import { getProjectList } from '@/api/project/ywProject'
import DeviceGatewayWindow from '@/components/business/DeviceGatewayWindow'
import ElectricityMeter from '@/components/business/electricityMeter'
export default {
  name: 'deviceGateway',
  extends: BaseTable,
  components: { TableLayout, Pagination, DeviceGatewayWindow, ElectricityMeter },
  data () {
    return {
      // æœç´¢
      searchForm: {
        projectId: '',
        name: ''
      },
      projectList: []
    }
  },
  created () {
    this.config({
      module: '网关管理',
      api: '/business/ywGateway',
      'field.id': 'id',
      'field.main': 'id'
    })
    this.search()
    this.getProject()
  },
  methods: {
    getProject() {
      getProjectList({}).then(res => {
        this.projectList = res || []
      })
    },
  }
}
</script>