huimv.cloud.client/src/views/deviceManagement/CameraManagement.vue

<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" ref="cameraForm" :rules="rules" label-width="100px">
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="设备类型：">
                    <cascader
                        :options="cameraInfoTree"
                        @expand-change="expandChange"
                        @change="change"
                        :props="{ children: 'childs', label: 'nodeName' ,value:'id'}"
                    ></cascader>
                </el-form-item>

                <el-form-item label="设备序列号：" prop="deviceNo">
                    <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-select v-model="formData.status" placeholder="请选择">
                        <el-option label="链接中" :value="0"></el-option>
                        <el-option label="链接中" :value="1"></el-option>
                        <el-option label="链接中" :value="1"></el-option>
                        <el-option label="链接中" :value="1"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="软件版本">
                    <el-input v-model="formData.sVer" placeholder="输入描述"></el-input>
                </el-form-item>

                <el-form-item label="硬件版本">
                    <el-input v-model="formData.hVer" placeholder="输入描述"></el-input>
                </el-form-item>

                <el-form-item label="描述：">
                    <el-input
                        type="textarea"
                        :rows="2"
                        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="submitForm('cameraForm')">保 存</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";

// 表单验证规则
const rules = {
    name: [{ required: true, message: "请输入消息点编码", trigger: "blur" }],
    categoryId: [{required: true,message: "请输入消息点描述",trigger: "blur"}],
    deviceNo: [{ required: true, message: "请输入消息点描述", trigger: "blur" }]
};

export default {
    name: "CameraManagement",
    components: { rtspPlayer, cascader },
    data() {
        return {
            cameraInfoTree: [],
            deviceList: [],
            isShowDialog: false,
            searchParams: "",
            formData: {
                name: "",
                categoryId: "",
                deviceNo: "",
                sVer: "",
                hVer: "",
                description: "",
                meta: ""
            },
            isShowVideo: false,
            videoData: {
                title: null,
                rtsp: null,
                ws: null
            },
            configItems: 2, // 配置项的通道配置项数
            isAdd: true,
            rules
        };
    },
    created() {
        // 获取摄像头 树
        this.getTreeByCode("ip-cam");
        // this.doSearch();
    },
    methods: {
        ...mapActions(["fetch"]),
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log(this.dyForm);
                } else {
                    return false;
                }
            });
        },
        // 通过code获取树
        getTreeByCode(code) {
            this.fetch({
                api: "/publics/treenode/getTreeByCode",
                method: "POST",
                data: { code }, //目前只有一个组织,其他参数调整钟
                success: 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(value) {
            console.log(value);
            this.formData.categoryId = value[value.length];
        },
        change(value) {
            console.log(value);
        },

        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>