球机IO表页面构建

src/layouts/AsideMenu.vue

@@ -62,7 +62,7 @@ export default {
                 parents = this.$router.options.routes[0].children.filter(ele => {
                     if (
                         this.userInfo.permissionList.some(item => {
-                            return item.rights === ele.name && ele.name.indexOf("center") < 0;
+                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0;
                         })
                     ) {
                         return ele;
@@ -83,7 +83,7 @@ export default {
                 recursionRoute(parents);
             }else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center");
+                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable");
                 });
             }
             this.routes = parents;

src/router/index.js

@@ -112,6 +112,14 @@ const routes = [{
             },
             component: () => import('@/views/cameraManage/index')
         },
+        {
+            path: 'cameraManage/ioTable',
+            name: 'ioTable',
+            meta: {
+                name: 'IO表配置'
+            },
+            component: () => import('@/views/cameraManage/ioTable')
+        },
         {
             path: 'center',
             name: 'center',

src/views/cameraManage/index.vue

@@ -4,7 +4,7 @@
             <a-button type="primary" class="add" @click="showModel('add','')">
                 新增球机
             </a-button>
-            <a-button type="primary" class="plc">
+            <a-button type="primary" class="plc" @click="goIo">
                 PLC IO表配置
             </a-button>
         </div>
@@ -145,6 +145,9 @@ export default {
             }).catch(err => {
 
             })
+        },
+        goIo(){
+            this.$router.push({ name: "ioTable" });
         }
     },
     components:{

src/views/cameraManage/ioModel.vue

@@ -0,0 +1,207 @@
+<template>
+    <div v-if="isShow">
+        <template v-if="type=='add' || type=='edit'">
+            <a-modal
+                v-model="isShow"
+                :title="[type =='add' ? '新增指令':'编辑指令']"
+                :closable="closable"
+                @ok="handleOk"
+                @cancel="handleCancel"
+                ok-text="确认"
+                cancel-text="取消"
+                class="p-model"
+            >
+                <a-form
+                    :form="form"
+                    :wrapper-col="formItemAcrossLayout.wrapperCol"
+                >
+                    <a-form-item label="名称" :label-col="formItemVerticalLayout.labelCol">
+                        <a-input
+                            v-decorator="['name', { rules: [{ required: true, message: '请输入指令名称!' }] }]"
+                        />
+                    </a-form-item>
+                </a-form>
+            </a-modal>
+        </template>
+    </div>
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 },    //lable长度
+    wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
+};
+export default {
+    props:[ 'visible', 'modelType', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelType: function(newVal){
+            this.type = newVal;
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            this.mdata=newVal
+            console.log(this.type)
+            if(newVal.id && this.type=='edit'){
+                this.id = newVal.id
+                // console.log('触发了watch，重新赋值')
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                        name:newVal.name,
+                        ip:newVal.ip,
+                        rtsp:newVal.rtsp
+                    })
+                })
+            }else{
+
+            }
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            type:'',
+            title:'',
+            closable:false,//取消model模态框右上角的X号
+            formItemAcrossLayout,
+            formItemVerticalLayout,
+            confirmLoading: false,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            id:'',
+            mdata:[],
+        };
+    },
+    mounted() {
+        console.log('mounted执行了')
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        console.log(this.title)
+                        if(this.type=='add'){
+                            this.$api.httpApi.addCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('新增球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }else if(this.type=='edit'){
+                            values.id = this.id
+                            this.$api.httpApi.editCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('编辑球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }
+                    }
+                });
+                this.confirmLoading = false;
+            }, 500);
+        },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            console.log(this.title);
+            this.$emit('close',false,{})
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .p-model{
+        .across-layout{
+            display: flex;
+        }
+        .ant-divider-horizontal{
+            margin:6px 0;
+        }
+    }
+    .video-mask{
+        position:fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color:rgba(0,0,0,0.5);
+        z-index:1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #video-test{
+
+        }
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+            width: 32px;
+            height: 32px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 42px;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+    }
+</style>

src/views/cameraManage/ioTable.vue

@@ -0,0 +1,163 @@
+<template>
+    <div>
+        <div class="button-box">
+            <a-button type="primary" class="add" @click="showModel('add','')">
+                新增
+            </a-button>
+            <a-button type="primary" class="plc" @click="goIo">
+                导入
+            </a-button>
+        </div>
+        <a-table
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetCameraList"
+        >
+          <span slot="action" slot-scope="text, record">
+          <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"
+            :modelType="modelType"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
+    </div>
+</template>
+
+
+<script>
+import Model from "./ioModel.vue"
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'name',
+    },
+    {
+        title: 'IO指令',
+        dataIndex: 'ip',
+    },
+    {
+        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,
+            modelType:'',
+            modelData:[]
+        };
+    },
+    mounted() {
+        this.handleGetCameraList()
+    },
+    methods: {
+        handleGetCameraList(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.getCameraList({
+                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;
+            }).catch(err => {
+
+            });
+        },
+        showModel(type,data){
+            this.visible = true
+            console.log(type)
+            this.modelType = type
+            this.modelData = data
+        },
+        submit(visible){
+            this.visible = visible
+            this.handleGetCameraList()
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+        delDosage(data){
+            console.log(data.id)
+            var id=data.id
+            this.$axios.delete('/camera/'+id, {
+                data: {}
+            }).then(res => {
+                if(res.code==200){
+                    this.$message.success('删除球机成功');
+                    this.handleGetCameraList()
+                }
+            }).catch(err => {
+
+            })
+        },
+        goIo(){
+            this.$router.push({ name: "ioTable" });
+        }
+    },
+    components:{
+        Model
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .button-box{
+        position: absolute;
+        top:0;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .add{
+            margin-right: 20px;
+        }
+    }
+</style>

src/views/cameraManage/model.vue

@@ -109,6 +109,7 @@ export default {
         modelData: function(newVal){
             // console.log(newVal)
             this.mdata=newVal
+            console.log(this.type)
             if(newVal.id && this.type=='edit'){
                 this.id = newVal.id
                 // console.log('触发了watch，重新赋值')
@@ -204,7 +205,9 @@ export default {
         handleCancel() {
             console.log('Clicked cancel button');
             console.log(this.title);
+            if(this.type=='test'){
                 window.vxgplayer('video-test').dispose();
+            }
             this.$emit('close',false,{})
         },
         getTestVideo(rtsp){
@@ -215,14 +218,7 @@ export default {
                 vxgplayer('video-test').size('100%', '100%');
             })
         },
-        beforeRouteLeave(to,form,next){
+
-            if(window.vxgplayer){
-                window.vxgplayer('video-test').dispose();
-                next(true)
-            }else {
-                next(true)
-            }
-        },
         zoomDecStart(){
             console.log('变倍-按下')
             this.zoomSubUrl=require('@/assets/sub-active-icon.png')