Sfoglia il codice sorgente

增加摄像头管理

linan 5 anni fa
parent
commit
9d293c0a82

+ 6 - 0
src/router/routes.js

@@ -2,6 +2,7 @@ import Home from '../views/Home/Home.vue'
 /* 设备管理 */
 import DeviceType from '../views/deviceManagement/DeviceType.vue'
 import DeviceInfo from '../views/deviceManagement/DeviceInfo.vue'
+import CameraManagement from '../views/deviceManagement/CameraManagement.vue'
 import SubDeviceAdmin from '../views/deviceManagement/SubDeviceAdmin.vue'
 /* 区域管理 */
 import AreaInfo from '../views/areaManagement/AreaInfo.vue'
@@ -45,6 +46,11 @@ export default [
 				component: DeviceInfo
 			},
 			{
+				path: '/cameraManagement',
+				name: 'cameraManagement',
+				component: CameraManagement
+			},
+			{
 				path: '/subDeviceAdmin',
 				name: 'subDeviceAdmin',
 				component: SubDeviceAdmin

+ 5 - 0
src/views/Home/mencCofig.js

@@ -16,6 +16,11 @@ export const menuData = [
                 optionName: '设备信息',
                 index: '1-2',
                 routerName: "deviceInfo"
+            },
+            {
+                optionName: '摄像头管理',
+                index: '1-3',
+                routerName: "cameraManagement"
             }
         ]
     },

+ 330 - 0
src/views/deviceManagement/CameraManagement.vue

@@ -0,0 +1,330 @@
+
+<template>
+    <div class="CameraManagement">
+        <el-row :gutter="20">
+            <el-col :span="2">
+                <span style="line-height:32px;">工具栏:</span>
+            </el-col>
+            <el-col :span="12">
+                <el-input
+                    placeholder="请输入内容"
+                    v-model="searchParams"
+                    class="input-with-select"
+                    @keyup.enter.native="doSearch"
+                >
+                    <el-button slot="append" icon="el-icon-search" @click="doSearch"></el-button>
+                </el-input>
+            </el-col>
+            <el-col :span="8">
+                <el-button @click="add" type="primary" icon="el-icon-document-add">新建</el-button>
+            </el-col>
+        </el-row>
+        <el-row>
+            <el-table :data="deviceList">
+                <el-table-column prop="id" label="序号" width="120px"></el-table-column>
+                <el-table-column prop="name" label="名称"></el-table-column>
+                <el-table-column prop="deviceNo" label="MAC/SN"></el-table-column>
+                <el-table-column prop="sVer" label="软件版本"></el-table-column>
+                <el-table-column prop="hVer" label="硬件版本"></el-table-column>
+                <el-table-column prop="meta.period" label="数据频率"></el-table-column>
+                <el-table-column prop="status" label="在线状态"></el-table-column>
+                <el-table-column prop="description" label="描述"></el-table-column>
+                <el-table-column label="最后一次">
+                    <template slot-scope="scope">
+                        <span>{{ new Date(scope.row.updated).toLocaleDateString() }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作" width="200">
+                    <template slot-scope="scope">
+                        <el-button
+                            @click="handlePlay(scope.row)"
+                            type="text"
+                            v-if="isCamera(scope.row.categoryId)"
+                        >播放</el-button>
+                        <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
+                        <el-popconfirm title="是否删除此设备的信息?" @onConfirm="del(scope.row)">
+                            <el-button slot="reference" type="text" size="small">删除</el-button>
+                        </el-popconfirm>
+                        <el-button @click="subDeviceAdmin(scope.row)" type="text" size="small">子设备管理</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-row>
+
+        <!-- 设备信息新建、编辑 -->
+        <el-dialog :title="isAdd?'新建设备信息':'编辑设备信息'" :visible.sync="isShowDialog" append-to-body>
+            <el-form :model="formData" label-width="100px">
+                <el-form-item label="名称:">
+                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
+                </el-form-item>
+                <el-form-item label="设备类型:">
+                    <el-select
+                        v-for="(arrItem,key) in typeTree"
+                        :key="key"
+                        v-model="selectArr[key]"
+                        filterable
+                        placeholder="请选择"
+                        value-key="id"
+                        @change="selectedEvt"
+                        @focus="position=key"
+                    >
+                        <el-option
+                            v-for="item in arrItem"
+                            :key="item.id"
+                            :value="item.id"
+                            :label="item.name"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="MAC/SN:">
+                    <el-input v-model="formData.deviceNo" placeholder="MAC或者SN"></el-input>
+                </el-form-item>
+                <!-- <el-form-item label="配置信息:">
+                    <el-input
+                        type="textarea"
+                        autosize
+                        :rows="2"
+                        v-model="formData.meta"
+                        placeholder="先用json做配置,后期可不同类型不同编辑框"
+                    ></el-input>
+                </el-form-item> -->
+                <el-form-item label="配置信息:">
+                    <el-row type="flex" justify="space-between" :gutter="20" style="margin-bottom:10px" v-for="item in configItems" :key="item">
+                        <el-col :span="3" style="text-align:right">
+                            rtsp:{{item}}
+                        </el-col>
+                        <el-col :span="7">
+                            <el-input  placeholder="请输入内容"></el-input>
+                        </el-col>
+                        <el-col :span="3" style="text-align:right">
+                            ws:
+                        </el-col>
+                        <el-col :span="7">
+                            <el-input  placeholder="请输入内容"></el-input>
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button v-show="item==configItems" @click="plus" type="primary" icon="el-icon-plus" circle></el-button>
+                            <el-button v-show="item==configItems&configItems>1" @click="minus" type="primary" icon="el-icon-minus" circle></el-button>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+                <el-form-item label="描述:">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.description"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-button @click="isShowDialog=false">取 消</el-button>
+                <el-button type="primary" @click="save">保 存</el-button>
+            </div>
+        </el-dialog>
+        <!-- 摄像头播放 -->
+        <el-dialog :title="videoData.title" :visible.sync="isShowVideo">
+            <rtsp-player :rtspData="videoData"></rtsp-player>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import rtspPlayer from "../common/rtsp-player/index";
+
+export default {
+    name: "CameraManagement",
+    components: { rtspPlayer },
+    data() {
+        return {
+            typeList: [],
+            typeTree: [],
+            deviceList: [],
+            position: null,
+            selectArr: [],
+            isShowDialog: false,
+            searchParams: '',
+            formData: {
+                name: "",
+                categoryId: 4,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            },
+            isShowVideo: false,
+            videoData: {
+                title: null,
+                rtsp: null,
+                ws: null
+            },
+            configItems: 2, // 配置项的通道配置项数
+            isAdd: true
+            
+        };
+    },
+    created() {
+        // 获取摄像头 树
+        this.getTreeByCode("ip-cam")
+        // this.doSearch();
+    },
+    methods: {
+        ...mapActions(["fetch"]),
+        // 通过code获取树
+        getTreeByCode(code) {
+            this.fetch({
+                api: "/publics/treenode/getTreeByCode",
+                method: "POST",
+                data: { code }, //目前只有一个组织,其他参数调整钟
+                success: res => {
+                    console.log(res)
+                    this.doSearch(res.id)
+                },
+                fail: err => {
+                    console.log(err)
+                    this.$message.error("请重新登录");
+
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                }
+            });
+        },
+        doSearch(categoryId) {
+            this.fetch({
+                api: "/device/list",
+                method: "POST",
+                data: { categoryId }, //目前只有一个组织,其他参数调整钟
+                success: res => {
+                    this.deviceList = res;
+                },
+                fail: err => {
+                    console.log("555");
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                    console.log(err);
+                }
+            });
+        },
+        // 设备信息新建、编辑里的 选择设备类型
+        selectedEvt(item) {
+            //获取下一级列表
+        },
+        add() {
+            this.isAdd = true
+            this.formData = {
+                orgId: 1,
+                name: "",
+                categoryId: null,
+                deviceNo: "",
+                description: "",
+                meta: ""
+            }
+            if (this.formData.id) delete this.formData.id;
+            this.isShowDialog = true;
+        },
+        isCamera(hid) {
+            if (hid === 4 || hid === 5 || hid === 6) return true;
+            else return false;
+        },
+        // 播放
+        handlePlay(row) {
+            console.log(row);
+            this.videoData = {
+                rtsp: row.meta.rtsp,
+                ws: row.meta.ws,
+                title: row.name
+            };
+            this.isShowVideo = true;
+        },
+        // 编辑
+        edit(row) {
+            console.log(row);
+            this.isAdd = false
+            // 判断是为了重复点击不会重复格式化
+            if(typeof row.meta == "object"){
+                row.meta = JSON.stringify(row.meta, null, 4);
+            }
+                // orgId: 1,
+                // name: "",
+                // categoryId: null,
+                // deviceNo: "",
+                // description: "",
+                // meta: ""
+            
+            if (this.formData.id) {
+                delete this.formData.id;
+                delete this.formData.name;
+                delete this.formData.categoryId;
+                delete this.formData.deviceNo;
+                delete this.formData.meta;
+                delete this.formData.description;
+            }
+            this.formData = Object.assign({}, this.formData, row);
+            this.isShowDialog = true;
+        },
+        // 删除
+        del(row) {
+            console.log(row);
+        },
+        // 子设备管理
+        subDeviceAdmin(row) {
+            this.$router.push({
+                path: "/subDeviceAdmin",
+                query: row
+            });
+        },
+        // 编辑的保存按钮
+        save() {
+            this.formData.categoryId = this.selectArr[
+                this.selectArr.length - 1
+            ];
+            let api = this.isAdd
+                ? "/device/device/add"
+                : "/device/device/update";
+            this.formData.meta = JSON.parse(this.formData.meta);
+            this.fetch({
+                api,
+                data: this.formData,
+                success: res => {
+                    console.log(res);
+                    this.doSearch(); //重新加载
+                    this.isShowDialog = false;
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 配置项增加
+        plus() {
+            this.configItems++
+        },
+        // 配置项减少
+        minus() {
+            if(this.configItems<=1) return
+            this.configItems--
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.CameraManagement{
+    .dialog{
+        .item_row{
+            display: flex;
+        }
+    }
+}
+
+</style>

+ 2 - 2
src/views/deviceManagement/DeviceInfo.vue

@@ -1,6 +1,6 @@
 
 <template>
-    <div>
+    <div class="DeviceInfo">
         <el-row :gutter="20">
             <el-col :span="2">
                 <span style="line-height:32px;">工具栏:</span>
@@ -127,7 +127,7 @@ import { mapActions } from "vuex";
 import rtspPlayer from "../common/rtsp-player/index";
 
 export default {
-    name: "deviceInfo",
+    name: "DeviceInfo",
     components: { rtspPlayer },
     data() {
         return {

+ 4 - 8
src/views/treeStructure/TreeManagement.vue

@@ -8,7 +8,6 @@
                         :key="item.id"
                         :label="item.nodeName"
                         :value="item.id"
-                        
                     ></el-option>
                 </el-select>
                 <el-button @click="add_kind" type="primary" class="add_kind">添加分类</el-button>
@@ -20,11 +19,8 @@
             </el-row>
         </header>
         <section id="section">
-            <article v-show="dataTree.length<=0 && id">
-                <el-row>
-                    <span class="hint">这个分类没有任何目录请添加!</span>
+            <article v-show="id">
                     <el-button @click="add_catalog" type="primary">添加目录</el-button>
-                </el-row>
             </article>
             <el-tree
                 :data="dataTree"
@@ -36,13 +32,13 @@
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                     <span>{{ node.label }}</span>
                     <span class="right">
-                        <el-tooltip effect="dark" content="添加节点" placement="top-start">
+                        <el-tooltip effect="dark" content="添加子所属分类" placement="top-start">
                             <i class="el-icon-folder-add icon" @click="() => add(data)"></i>
                         </el-tooltip>
-                        <el-tooltip effect="dark" content="编辑节点" placement="top-start">
+                        <el-tooltip effect="dark" content="编辑此分类" placement="top-start">
                             <i class="el-icon-edit icon" @click="() => edit(data)" alt="编辑"></i>
                         </el-tooltip>
-                        <el-tooltip effect="dark" content="删除节点" placement="top-start">
+                        <el-tooltip effect="dark" content="删除此分类" placement="top-start">
                             <i class="el-icon-delete icon" @click="() => del(data)"></i>
                         </el-tooltip>
                     </span>