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

<template>
    <div class="DeviceInfo">
        <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.keywords"
                    class="input-with-select"
                    @keyup.enter.native="doSearch"
                >
                    <el-select
                        v-model="searchParams.hardTypeId"
                        class="input-with-select-select"
                        slot="prepend"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(type,key) in typeList"
                            :label="type.name"
                            :value="type.id"
                            :key="key"
                        ></el-option>
                    </el-select>
                    <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>
        <hr style="border-top: 2px solid #eee;margin: 10px 0;">
        <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.hardTypeId)"
                        >播放</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-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: "DeviceInfo",
    components: { rtspPlayer },
    data() {
        return {
            typeList: [],
            typeTree: [],
            deviceList: [],
            position: null,
            selectArr: [],
            isShowDialog: false,
            searchParams: {
                hardTypeId: null,
                keywords: ""
            },
            formData: {
                name: "",
                hardTypeId: null,
                deviceNo: "",
                description: "",
                meta: ""
            },
            isShowVideo: false,
            videoData: {
                title: null,
                rtsp: null,
                ws: null
            },
            isAdd: true
        };
    },
    created() {
        this.loadTypeList();
        this.doSearch();
    },
    methods: {
        ...mapActions(["fetch"]),
        doSearch() {
            if (this.searchParams.hardTypeId < 0) {
                this.$message.info("请先选择分类");
                return;
            }
            this.fetch({
                api: "/device/device-communication/list",
                method: "GET",
                data: {
                    orgId: 1,
                    hardTypeId: this.searchParams.hardTypeId,
                    keywords: this.searchParams.keywords
                }, //目前只有一个组织,其他参数调整钟
                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) {
            //获取下一级列表
            this.loadTypeList(item);
        },
        add() {
            this.isAdd = true
            this.formData = {
                orgId: 1,
                name: "",
                hardTypeId: null,
                deviceNo: "",
                description: "",
                meta: ""
            }
            if (this.formData.id) delete this.formData.id;
            this.isShowDialog = true;
        },
        loadTypeList(pid = -1) {
            this.fetch({
                api: "/device/device-type/list-parent",
                method: "GET",
                data: { parentId: pid }, // 动态加载
                success: res => {
                    if (pid < 0) {
                        this.typeList = res;
                        this.typeTree.push(this.typeList);
                    } else {
                        console.log("222");
                        if (res.length > 0)
                            this.typeTree.splice(
                                this.position + 1,
                                this.typeTree.length,
                                res
                            );
                        else
                            this.typeTree.splice(
                                this.position + 1,
                                this.typeTree.length
                            );
                        this.selectArr.splice(
                            this.position + 1,
                            this.selectArr.length
                        );
                    }
                }
            });
        },
        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: "",
                // hardTypeId: null,
                // deviceNo: "",
                // description: "",
                // meta: ""
            
            if (this.formData.id) {
                delete this.formData.id;
                delete this.formData.name;
                delete this.formData.hardTypeId;
                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.hardTypeId = this.selectArr[
                this.selectArr.length - 1
            ];
            let api = this.isAdd
                ? "/device/device-communication/add"
                : "/device/device/device-communication/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("服务器发生异常");
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>


.input-with-select-select {
    width: 180px;
}
</style>