|
|
@@ -1,312 +1,31 @@
|
|
|
-
|
|
|
<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 class="EnterOut">
|
|
|
+ EnterOut
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapActions } from "vuex";
|
|
|
-import rtspPlayer from "../common/rtsp-player/index";
|
|
|
|
|
|
export default {
|
|
|
- name: "DeviceInfo",
|
|
|
- components: { rtspPlayer },
|
|
|
+ name: "EnterOut",
|
|
|
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) {
|
|
|
+ get() {
|
|
|
this.fetch({
|
|
|
- api: "/device/device-type/list-parent",
|
|
|
+ api: "aaa",
|
|
|
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,
|
|
|
+ data: {},
|
|
|
success: res => {
|
|
|
console.log(res);
|
|
|
- this.doSearch(); //重新加载
|
|
|
- this.isShowDialog = false;
|
|
|
},
|
|
|
fail: err => {
|
|
|
console.log(err);
|
|
|
@@ -321,8 +40,4 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
-
|
|
|
-.input-with-select-select {
|
|
|
- width: 180px;
|
|
|
-}
|
|
|
</style>
|
linan