Merge branch 'master' of http://115.238.57.190:3000/linan/huimv.cloud.client

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'
@@ -48,6 +49,11 @@ export default [
 				component: DeviceInfo
 			},
 			{
+				path: '/cameraManagement',
+				name: 'cameraManagement',
+				component: CameraManagement
+			},
+			{
 				path: '/subDeviceAdmin',
 				name: 'subDeviceAdmin',
 				component: SubDeviceAdmin

src/views/Home/mencCofig.js

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

src/views/deviceManagement/CameraManagement.vue

@@ -0,0 +1,373 @@
+
+<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="设备类型：">
+                    <cascader
+                        :options="cameraInfoTree"
+                        @expandChange="expandChange"
+                        @change="change"
+                        :props="{ children: 'childs', label: 'nodeName' ,value:'id'}"
+                    ></cascader>
+                </el-form-item>
+
+                <el-form-item label="MAC/SN：">
+                    <el-input v-model="formData.deviceNo" placeholder="设备序列号"></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.status"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+
+                <el-form-item label="软件版本">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.sVer"
+                        placeholder="输入描述"
+                    ></el-input>
+                </el-form-item>
+
+                <el-form-item label="硬件版本">
+                    <el-input
+                        type="textarea"
+                        :rows="4"
+                        v-model="formData.hVer"
+                        placeholder="输入描述"
+                    ></el-input>
+                </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";
+import cascader from "../../components/Cascader/Cascader";
+
+export default {
+    name: "CameraManagement",
+    components: { rtspPlayer, cascader },
+    data() {
+        return {
+            cameraInfoTree: [],
+            deviceList: [],
+            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);
+                    this.getCameraList(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 }, //目前只有一个组织,其他参数调整钟 732971735112749056
+                success: res => {
+                    this.deviceList = res;
+                },
+                fail: err => {
+                    console.log("555");
+                    if (err.errCode == "request_not_authorize") {
+                        this.$message({
+                            message: "请重新登录",
+                            type: "warning"
+                        });
+                    }
+                    console.log(err);
+                }
+            });
+        },
+
+        // 请求 拿到摄像头列表
+        getCameraList(parentId) {
+            this.fetch({
+                api: "/publics/treenode/listNodeByParent",
+                method: "POST",
+                data: {
+                    parentId,
+                    hasSub: true
+                },
+                success: res => {
+                    this.cameraInfoTree = res
+                },
+                fail: err => {
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        },
+        // 选择改变
+        expandChange(e) {
+
+        },
+        change(e) {
+
+        },
+
+        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() {
+            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>

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 {

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>