|
|
@@ -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>
|
linan