球机管理页面构建、路由配置

src/router/index.js

@@ -46,8 +46,7 @@ const routes = [{
                 name: '历史监控'
             },
             component: () => import('@/views/history/index')
-        },
-        {
+        }, {
             path: 'roadwayManage',
             name: 'roadwayManage',
             meta: {
@@ -56,6 +55,14 @@ const routes = [{
             },
             component: () => import('@/views/roadwayManage/index')
         }, {
+            path: 'cameraManage',
+            name: 'cameraManage',
+            meta: {
+                icon: 'video-camera',
+                name: '球机管理'
+            },
+            component: () => import('@/views/cameraManage/index')
+        },{
             path: 'center',
             name: 'center',
             meta: {

src/views/cameraManage/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <div>
+        <a-button type="primary" class="add" @click="showModel('add','')">
+            新增球机
+        </a-button>
+        <a-table
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetStreetList"
+        >
+          <span slot="action" slot-scope="text, record">
+          <a @click="showModel('edit',record)">
+            测试
+          </a>
+          <a-divider type="vertical"/>
+          <a @click="showModel('edit',record)">
+            配置
+          </a>
+          <a-divider type="vertical"/>
+          <a @click="showModel('edit',record)">
+            编辑
+          </a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+              title="是否删除?"
+              @confirm="() => delDosage(record)"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+          </span>
+        </a-table>
+        <Model
+            :visible.sync="visible"
+            :modelTitle="modelTitle"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
+    </div>
+</template>
+
+
+<script>
+import Model from "./model.vue"
+const columns = [
+    {
+        title: '球机名称',
+        dataIndex: 'name',
+    },
+    {
+        title: '球机IP',
+        dataIndex: 'plcId',
+    },
+    {
+        title: '修改时间',
+        dataIndex: 'updateTime',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' }
+    },
+];
+export default {
+    data() {
+        return {
+            pageNum:1,
+            pageSize:10,
+            data: [],
+            pagination:{
+                total:0,
+                defaultPageSize:10, // 默认每页显示数量
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+            },
+            loading: false,
+            columns,
+            visible:false,
+            modelTitle:'',
+            modelData:[]
+        };
+    },
+    mounted() {
+        this.handleGetStreetList()
+    },
+    methods: {
+        handleGetStreetList(pagination) {
+            console.log(pagination)
+            if(pagination){
+                this.pagination.current = pagination.current;
+                this.pagination.pageSize = pagination.pageSize;
+                this.pageNum = pagination.current;
+                this.pageSize = pagination.pageSize;
+            }
+            this.request();
+        },
+        request(){
+            this.$api.httpApi.getStreetList({
+                data: {
+                    pageNum:this.pageNum,
+                    pageSize:this.pageSize,
+                }
+            }).then(res => {
+                const pagination = { ...this.pagination };
+                pagination.total = res.data.total;
+                this.data = res.data.list;
+                this.pagination = pagination;
+            });
+        },
+        showModel(type,data){
+            this.visible = true
+            console.log(type)
+            if(type=='add'){
+                this.modelTitle = "新增巷道"
+            }else if(type=='edit'){
+                this.modelTitle = "编辑巷道"
+                this.modelData = data
+            }
+        },
+        submit(visible){
+            this.visible = visible
+            this.handleGetStreetList()
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+        delDosage(data){
+            console.log(data.id)
+            var id=data.id
+            this.$axios.delete('/street/'+id, {
+                data: {}
+            }).then(res => {
+                if(res.code==200){
+                    this.$message.success('删除巷道成功');
+                    this.handleGetStreetList()
+                }
+            })
+        }
+    },
+    components:{
+        Model
+    }
+};
+</script>
+<style lang="scss">
+    .add{
+        position: absolute;
+        top:0;
+        right: 20px;
+    }
+</style>

src/views/roadwayManage/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <a-button type="primary" class="add" @click="showModel('add','')">
-            新增
+            新增巷道
         </a-button>
         <a-table
             :columns="columns"