ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request '关联设备bug修复' (#54) from lukeyan into master

Browse Source 
Reviewed-on: #54
pull/64/head^2
lukeyan 1 year ago
parent 49cb5abc32 3758ae8c24
commit cedbc3ec0c
11 changed files with 1462 additions and 16 deletions
Show Stats Download Patch File Download Diff File

20
src/api/correlationEquipment/index.js
Unescape View File

@ -1,5 +1,6 @@
// 系统管理模块接口
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
// 字典表查询
export function commonDict(params) {
return request({
@ -71,11 +72,21 @@ export function importVideoList(params) {
params
})
}
// 下载视频监控模板
export function importTemplateVideo(params) {
return request({
url: '/safety/tbDeviceVideoInfo/importTemplate',
method: 'post',
params,
responseType: 'blob',
headers: { 'Access-Control-Allow-origin': '*', 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ' + getToken() }
})
}
// 新增智能感应
export function addPerceptionList(params) {
return request({
url: '/safety/tbDevicePerceptionInfo/insert',
method: 'get',
method: 'post',
params
})
}
@ -87,6 +98,13 @@ export function changePerceptionList(params) {
params
})
}
// 删除智能感应
export function deletePerception(params) {
return request({
url: '/safety/tbDevicePerceptionInfo?' + params,
method: 'delete',
})
}
// 导出视频监控
export function exportVideo(params) {
return request({

4
src/api/download/index.js
Unescape View File

@ -3,8 +3,8 @@ import { getToken } from '@/utils/auth'
//通用下载接口
export function download(params) {
return axios({
url: `http://${window.location.host}/download`,
//url: 'http://218.92.196.102:8118/hjapi/common/download',
url: `http://${window.location.host}/hjapi/common/download`,
//url: 'http://218.92.196.102:8888/zhapi/common/download',
//url: 'http://192.168.0.188:8118/hjapi/common/download',
method: 'get',
params,

8
src/utils/auth.js
Unescape View File

@ -1,15 +1,15 @@
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
const zhToken = 'Admin-Token'
export function getToken() {
return Cookies.get(TokenKey)
return Cookies.get(zhToken)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
return Cookies.set(zhToken, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
return Cookies.remove(zhToken)
}

106
src/views/systemManagement/correlationEquipment2/components/deletePerception.vue
Unescape View File

@ -0,0 +1,106 @@
<template>
<!-- 删除文件 -->
<el-dialog
class="dialog"
title="删除"
:visible.sync="visible"
:close-on-click-modal="false"
width="500px"
@close="close"
>
<div class="main_text">确认删除该数据？</div>
<div class="form_btn" slot="footer">
<el-button @click="save_delete">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { deletePerception } from "@/api/correlationEquipment";
export default {
name: "DeletePerception",
data() {
return {
visible: false,
data: {},
id: "",
};
},
methods: {
open(val) {
this.visible = true;
this.id = val[0].id;
},
save_delete() {
const params = `idList=${this.id}`;
deletePerception(params)
.then((res) => {
console.log(res);
this.$message.success("删除成功");
this.$emit("refresh_perception");
this.visible = false;
})
.catch((err) => {
console.log(err);
this.$message.warning("删除失败");
this.$emit("refresh_perception");
this.visible = false;
});
},
close() {
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
.main_text {
width: 470px;
height: 280px;
color: #fff;
text-align: center;
line-height: 280px;
font-size: 35px;
font-weight: 500;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
.el-button {
width: 120px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>

90
src/views/systemManagement/correlationEquipment2/components/equipmentTable.vue
Unescape View File

@ -113,7 +113,11 @@
</el-form>
</div>
<div class="table_btn_list">
<el-button v-for="item in btn_list" :key="item.value">
<el-button
v-for="item in btn_list"
:key="item.value"
@click="open_perception_dialog(item.value)"
>
<i :class="`el-icon-${item.icon}`" />
{{ item.label }}</el-button
>
@ -124,6 +128,7 @@
:header-cell-style="table_header"
:data="table_data"
:highlight-current-row="true"
@selection-change="handle_perception_change"
height="336"
>
<el-table-column type="selection" width="55"> </el-table-column>
@ -139,13 +144,13 @@
<el-button
size="small"
class="operation"
@click="openDialog('2', scope.row)"
@click="open_perception_dialog('5', scope.row)"
>编辑
</el-button>
<el-button
size="small"
class="operation"
@click="openDialog('5', scope.row)"
@click="open_perception_dialog('6', scope.row)"
>详情
</el-button>
</template>
@ -169,16 +174,47 @@
<VideoForm ref="videoForm" @refresh_video="refresh_video"></VideoForm>
<!-- 删除视频设备表单弹窗 -->
<DeleteVideo ref="deleteVideo" @refresh_video="refresh_video"></DeleteVideo>
<!-- 导入视频设备弹窗 -->
<ImportVideo ref="importVideo"></ImportVideo>
<!-- 导出视频设备弹窗 -->
<ExportVideo ref="exportVideo"></ExportVideo>
<!-- 智能设备表单弹窗 -->
<PerceptionForm
ref="perceptionForm"
@refresh_perception="refresh_perception"
></PerceptionForm>
<!-- 删除智能设备表单弹窗 -->
<DeletePerception
ref="deletePerception"
@refresh_perception="refresh_perception"
></DeletePerception>
<!-- 导入智能设备弹窗 -->
<ImportPerception ref="importPerception"></ImportPerception>
<!-- 导出智能设备弹窗 -->
<ExportPerception ref="exportPerception"></ExportPerception>
</div>
</template>
<script>
import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
import VideoForm from "./videoForm";
import DeleteVideo from "./deleteVideo";
import ImportVideo from "./importVideo";
import ExportVideo from "./exportVideo";
import PerceptionForm from "./perceptionForm";
import DeletePerception from "./deletePerception";
import ImportPerception from "./importPerception";
import ExportPerception from "./exportPerception"
export default {
name:'EquipmentTable',
components: {
VideoForm,
DeleteVideo,
ImportVideo,
ExportVideo,
PerceptionForm,
DeletePerception,
ImportPerception,
ExportPerception,
},
data() {
return {
@ -214,7 +250,8 @@ export default {
{ prop: "deviceIp", label: "设备IP" },
{ prop: "orientationCn", label: "进出方向" },
],
handle_video: "",
handle_video: "", // 选中视频表格数据
handle_perception: "", // 选中智能表格数据
pageSize: 0,
pageNum: 0,
only_params: {},
@ -242,6 +279,12 @@ export default {
this.total = res.total;
});
},
refresh_perception() {
getPerceptionList(this.only_params).then((res) => {
this.table_data = res.rows;
this.total = res.total;
});
},
// 视频设备查询
video_search() {
this.only_params = Object.assign(this.only_params, this.search);
@ -281,6 +324,7 @@ export default {
this.total = res.total;
});
},
// 视频设备增删改导
open_video_dialog(num, row) {
if (num === "1") {
// 新增视频设备
@ -292,19 +336,55 @@ export default {
} else {
this.$refs.deleteVideo.open(this.handle_video);
}
} else if (num === "3") {
// 导入视频设备
this.$refs.importVideo.open();
} else if (num === "4") {
// 导出视频设备
this.$refs.exportVideo.open();
} else if (num === "5") {
// 修改视频设备
this.$refs.videoForm.open(num, row);
} else if (num === '6') {
} else if (num === "6") {
// 详情视频设备
this.$refs.videoForm.open(num, row);
}
},
// 智能感应增删改导
open_perception_dialog(num, row) {
if (num === "1") {
// 新增智能感知
this.$refs.perceptionForm.open();
} else if (num === "2") {
// 删除智能设备
if (this.handle_perception.length != 1) {
this.$message.warning("请选择一条表格数据");
} else {
this.$refs.deletePerception.open(this.handle_perception);
}
} else if (num === "3") {
// 导入智能设备
this.$refs.importPerception.open();
} else if (num === "4") {
// 导出智能设备
this.$refs.exportPerception.open();
} else if (num === "5") {
// 修改智能设备
this.$refs.perceptionForm.open(num, row);
} else if (num === "6") {
// 详情视频设备
this.$refs.perceptionForm.open(num, row);
}
},
// 选择视频表格数据
handle_video_change(val) {
console.log("val_handle", val);
this.handle_video = val;
},
// 选择智能表格数据
handle_perception_change(val) {
this.handle_perception = val;
},
table_header({ row, rowIndex }) {
console.log(row);
console.log(rowIndex);

110
src/views/systemManagement/correlationEquipment2/components/exportPerception.vue
Unescape View File

@ -0,0 +1,110 @@
<template>
<!-- 智能设备导出 -->
<el-dialog
class="dialog"
title="导出"
:visible.sync="visible"
:close-on-click-modal="false"
width="500px"
@close="close"
>
<div class="main_text">确认导出文件吗？</div>
<div class="form_btn" slot="footer">
<el-button @click="save">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div></el-dialog
>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {
name: "ExportPerception",
data() {
return {
visible: false,
downUrl: `http://${window.location.host}/safety/tbDevicePerceptionInfo/export`,
// downUrl: "http://192.168.0.188:8888/zhapi/safety/tbDevicePerceptionInfo/export",
};
},
methods: {
open() {
this.visible = true;
},
close() {
this.visible = false;
},
save() {
axios({
url: this.downUrl,
method: "post",
responseType: "blob",
headers: {
"Access-Control-Allow-origin": "*",
"Content-Type": "application/json; charset=UTF-8",
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
const xlsx = "application/octet-stream";
const blob1 = new Blob([response.data], { type: xlsx });
const b = document.createElement("a"); // 转换完成，创建一个a标签用于下载
b.download = "智能监控设备数据表.xlsx";
b.href = window.URL.createObjectURL(blob1);
b.click();
b.remove();
});
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
.main_text {
width: 470px;
height: 280px;
color: #fff;
text-align: center;
line-height: 280px;
font-size: 35px;
font-weight: 500;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
.el-button {
width: 120px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>

110
src/views/systemManagement/correlationEquipment2/components/exportVideo.vue
Unescape View File

@ -0,0 +1,110 @@
<template>
<!-- 视频设备导出 -->
<el-dialog
class="dialog"
title="导出"
:visible.sync="visible"
:close-on-click-modal="false"
width="500px"
@close="close"
>
<div class="main_text">确认导出文件吗？</div>
<div class="form_btn" slot="footer">
<el-button @click="save">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div></el-dialog
>
</template>
<script>
import axios from "axios";
import { getToken } from "@/utils/auth";
export default {
name: "ExportVideo",
data() {
return {
visible: false,
downUrl: `http://${window.location.host}/safety/tbDeviceVideoInfo/export`,
// downUrl: "http://192.168.0.188:8888/zhapi/safety/tbDeviceVideoInfo/export",
};
},
methods: {
open() {
this.visible = true;
},
close() {
this.visible = false;
},
save() {
axios({
url: this.downUrl,
method: "post",
responseType: "blob",
headers: {
"Access-Control-Allow-origin": "*",
"Content-Type": "application/json; charset=UTF-8",
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
const xlsx = "application/octet-stream";
const blob1 = new Blob([response.data], { type: xlsx });
const b = document.createElement("a"); // 转换完成，创建一个a标签用于下载
b.download = "视频监控设备数据表.xlsx";
b.href = window.URL.createObjectURL(blob1);
b.click();
b.remove();
});
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
.main_text {
width: 470px;
height: 280px;
color: #fff;
text-align: center;
line-height: 280px;
font-size: 35px;
font-weight: 500;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
.el-button {
width: 120px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>

226
src/views/systemManagement/correlationEquipment2/components/importPerception.vue
Unescape View File

@ -0,0 +1,226 @@
<template>
<!-- 智能设备导入 -->
<el-dialog
class="dialog"
title="导入"
:visible.sync="visible"
:close-on-click-modal="false"
width="500px"
@close="close"
>
<div class="up_main">
<div class="up_text">上传文档:</div>
<el-upload
class="upload-demo"
ref="upload_demo"
:action="importUrl"
:headers="{ Authorization: token }"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="upLoadError"
:before-upload="beforeUpload"
:multiple="false"
:file-list="fileList"
accept="xlsx"
>
<div class="up_btn">
<el-button icon="el-icon-folder-opened">上传文件</el-button>
</div>
<p slot="tip">支持文件类型：.xlsx 格式</p>
</el-upload>
<div class="template_down">
<el-button @click="download_template">模板下载</el-button>
</div>
</div>
<div class="form_btn" slot="footer">
<el-button @click="save_delete">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
// import { download } from "@/api/download";
//import request from "@/utils/request";
import axios from "axios";
import { getToken } from "@/utils/auth";
//import { importTemplateVideo } from "@/api/correlationEquipment";
export default {
name: "ImportPerception",
data() {
return {
visible: false,
importUrl: `http://${window.location.host}/safety/tbDevicePerceptionInfo/importData`,
// importUrl: "http://192.168.0.188:8888/zhapi/safety/tbDevicePerceptionInfo/importData",
downUrl: `http://${window.location.host}/safety/tbDevicePerceptionInfo/importTemplate`,
// downUrl: "http://192.168.0.188:8888/zhapi/safety/tbDevicePerceptionInfo/importTemplate",
fileList: [],
loading: {},
token: "",
};
},
created() {
this.obtain_token();
},
methods: {
open() {
this.visible = true;
},
close() {
this.visible = false;
},
// 获取token
obtain_token() {
this.token = "Bearer " + getToken();
console.log("this.token", this.token);
},
// 上传文件之前
beforeUpload(file) {
const isText = file.type === "application/vnd.ms-excel";
const isTextComputer =
file.type ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
this.loading = this.$loading({
lock: true,
text: "上传中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
if (!isText && !isTextComputer) {
this.$message.warning("请上传excel格式文件!");
this.$nextTick(() => {
this.loading.close();
});
}
return isText || isTextComputer;
},
// 文件上传成功时
handleSuccess(res) {
if (res.code == 200) {
this.$message.success("上传成功");
} else {
this.$message.error(res.msg);
// 清空已上传的文件列表
this.$refs.upload_demo.clearFiles();
}
this.loading.close();
},
// 文件列表移除文件时
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 文件超出个数限制时的钩子
handleExceed() {
this.$message.warning("一次只能上传一个文件");
},
// 文件上传失败时
upLoadError(err) {
this.$message.error(err.msg);
this.loading.close();
},
// 下载模板
download_template() {
axios({
url: this.downUrl,
method: "post",
responseType: "blob",
headers: {
"Access-Control-Allow-origin": "*",
"Content-Type": "application/json; charset=UTF-8",
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
const xlsx = "application/octet-stream";
const blob1 = new Blob([response.data], { type: xlsx });
const b = document.createElement("a"); // 转换完成，创建一个a标签用于下载
b.download = "智能监控设备.xlsx";
b.href = window.URL.createObjectURL(blob1);
b.click();
b.remove();
});
},
save_delete() {
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
.up_main {
width: 100%;
height: 24vh;
background-image: url("~@/assets/companyFile/27812.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
.up_text {
height: 24vh;
line-height: 18.5vh;
color: #fff;
font-size: 16px;
}
.upload-demo {
width: 200px;
}
.up_btn {
width: 200px;
}
.template_down {
height: 24vh;
line-height: 18.5vh;
.el-button {
border: 0px;
color: #2fbdf4;
background: rgba(0, 0, 0, 0);
}
.el-button:focus,
.el-button:hover {
border: 0px;
color: #2fbdf4;
background: rgba(0, 0, 0, 0) !important;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
}
}
.el-button {
width: 120px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>

218
src/views/systemManagement/correlationEquipment2/components/importVideo.vue
Unescape View File

@ -1,12 +1,226 @@
<template>
<div></div>
<!-- 视频设备导入 -->
<el-dialog
class="dialog"
title="导入"
:visible.sync="visible"
:close-on-click-modal="false"
width="500px"
@close="close"
>
<div class="up_main">
<div class="up_text">上传文档:</div>
<el-upload
class="upload-demo"
ref="upload_demo"
:action="importUrl"
:headers="{ Authorization: token }"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:on-error="upLoadError"
:before-upload="beforeUpload"
:multiple="false"
:file-list="fileList"
accept="xlsx"
>
<div class="up_btn">
<el-button icon="el-icon-folder-opened">上传文件</el-button>
</div>
<p slot="tip">支持文件类型：.xlsx 格式</p>
</el-upload>
<div class="template_down">
<el-button @click="download_template">模板下载</el-button>
</div>
</div>
<div class="form_btn" slot="footer">
<el-button @click="save_delete">确 定</el-button>
<el-button @click="close">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
// import { download } from "@/api/download";
//import request from "@/utils/request";
import axios from "axios";
import { getToken } from "@/utils/auth";
//import { importTemplateVideo } from "@/api/correlationEquipment";
export default {
name: "ImportVideo",
data() {
return {};
return {
visible: false,
importUrl: `http://${window.location.host}/safety/tbDeviceVideoInfo/importData`,
// importUrl: "http://192.168.0.188:8888/zhapi/safety/tbDeviceVideoInfo/importData",
downUrl: `http://${window.location.host}/safety/tbDeviceVideoInfo/importTemplate`,
// downUrl: "http://192.168.0.188:8888/zhapi/safety/tbDeviceVideoInfo/importTemplate",
fileList: [],
loading: {},
token: "",
};
},
created() {
this.obtain_token();
},
methods: {
open() {
this.visible = true;
},
close() {
this.visible = false;
},
// 获取token
obtain_token() {
this.token = "Bearer " + getToken();
console.log("this.token", this.token);
},
// 上传文件之前
beforeUpload(file) {
const isText = file.type === "application/vnd.ms-excel";
const isTextComputer =
file.type ===
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
this.loading = this.$loading({
lock: true,
text: "上传中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
if (!isText && !isTextComputer) {
this.$message.warning("请上传excel格式文件!");
this.$nextTick(() => {
this.loading.close();
});
}
return isText || isTextComputer;
},
// 文件上传成功时
handleSuccess(res) {
if (res.code == 200) {
this.$message.success("上传成功");
} else {
this.$message.error(res.msg);
// 清空已上传的文件列表
this.$refs.upload_demo.clearFiles();
}
this.loading.close();
},
// 文件列表移除文件时
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 文件超出个数限制时的钩子
handleExceed() {
this.$message.warning("一次只能上传一个文件");
},
// 文件上传失败时
upLoadError(err) {
this.$message.error(err.msg);
this.loading.close();
},
// 下载模板
download_template() {
axios({
url: this.downUrl,
method: "post",
responseType: "blob",
headers: {
"Access-Control-Allow-origin": "*",
"Content-Type": "application/json; charset=UTF-8",
Authorization: "Bearer " + getToken(),
},
}).then((response) => {
const xlsx = "application/octet-stream";
const blob1 = new Blob([response.data], { type: xlsx });
const b = document.createElement("a"); // 转换完成，创建一个a标签用于下载
b.download = "视频监控设备.xlsx";
b.href = window.URL.createObjectURL(blob1);
b.click();
b.remove();
});
},
save_delete() {
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 400px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
.up_main {
width: 100%;
height: 24vh;
background-image: url("~@/assets/companyFile/27812.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
.up_text {
height: 24vh;
line-height: 18.5vh;
color: #fff;
font-size: 16px;
}
.upload-demo {
width: 200px;
}
.up_btn {
width: 200px;
}
.template_down {
height: 24vh;
line-height: 18.5vh;
.el-button {
border: 0px;
color: #2fbdf4;
background: rgba(0, 0, 0, 0);
}
.el-button:focus,
.el-button:hover {
border: 0px;
color: #2fbdf4;
background: rgba(0, 0, 0, 0) !important;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
}
}
.el-button {
width: 120px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
</style>

583
src/views/systemManagement/correlationEquipment2/components/perceptionForm.vue
Unescape View File

@ -0,0 +1,583 @@
<template>
<!-- 智能新增、编辑、查看表单 -->
<el-dialog
class="dialog"
:title="title"
:visible.sync="visible"
@close="close()"
:close-on-click-modal="false"
width="970px"
>
<div class="form_body">
<el-form ref="form" :model="form" :rules="rules" :disabled="disabled">
<el-form-item> <p>设备基础信息</p> </el-form-item>
<el-form-item> </el-form-item>
<el-form-item label="企业名称" prop="companyName">
<el-select
v-model="form.companyName"
placeholder="请选择企业"
@change="company_change"
>
<el-option
v-for="item in form_list.company"
:key="item.id"
:label="item.companyName"
:value="item.companyName"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item> </el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName"></el-input>
</el-form-item>
<el-form-item label="设备IP" prop="deviceIp">
<el-input v-model="form.deviceIp"></el-input>
</el-form-item>
<el-form-item label="登录账号" prop="account">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item label="设备大类" prop="devicePerceptionParentTypeCn">
<el-select
v-model="form.devicePerceptionParentTypeCn"
placeholder="请选择设备大类"
@change="parent_change"
>
<el-option
v-for="item in form_list.parent_type"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictLabel"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否卡口" prop="isDoorwayVideoCn">
<el-select
v-model="form.isDoorwayVideoCn"
placeholder="请选择是否卡口"
@change="door_change"
>
<el-option
v-for="item in form_list.door_type"
:key="item.id"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备小类" prop="devicePerceptionSubTypeCn">
<el-select
v-model="form.devicePerceptionSubTypeCn"
placeholder="请选择设备小类"
@change="son_change"
>
<el-option
v-for="item in form_list.son_type"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictLabel"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item> </el-form-item>
<el-form-item> <p>视频通道信息</p> </el-form-item>
<el-form-item> </el-form-item>
<el-form-item label="通道编码" prop="gbsChannelNo">
<el-input v-model="form.gbsChannelNo"></el-input>
</el-form-item>
<el-form-item label="NVR编码" prop="gbsNvrNo">
<el-input v-model="form.gbsNvrNo"></el-input>
</el-form-item>
<el-form-item label="通道号" prop="channelNo">
<el-input v-model="form.channelNo"></el-input>
</el-form-item>
<el-form-item label="RTSP流地址" prop="rtspAddress">
<el-input v-model="form.rtspAddress"></el-input>
</el-form-item>
<el-form-item> <p>设备位置信息</p> </el-form-item>
<el-form-item> </el-form-item>
<el-form-item label="设备经度" prop="longitude">
<el-input v-model="form.longitude"></el-input>
</el-form-item>
<el-form-item label="设备纬度" prop="latitude">
<el-input v-model="form.latitude"></el-input>
</el-form-item>
<el-form-item label="U3D经度" prop="u3dLongitude">
<el-input v-model="form.u3dLongitude"></el-input>
</el-form-item>
<el-form-item label="U3D纬度" prop="u3dLatitude">
<el-input v-model="form.u3dLatitude"></el-input>
</el-form-item>
<el-form-item label="设备高度" prop="deviceHeight">
<el-input v-model="form.deviceHeight"></el-input>
</el-form-item>
<el-form-item label="U3D高度" prop="u3dHeight">
<el-input v-model="form.u3dHeight"></el-input>
</el-form-item>
<el-form-item label="进出方向" prop="directionCn">
<el-select
v-model="form.directionCn"
placeholder="请选择进出方向"
@change="direction_change"
>
<el-option
v-for="item in form_list.direction_type"
:key="item.id"
:label="item.label"
:value="item.label"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="设备方位" prop="orientationCn">
<el-select
v-model="form.orientationCn"
placeholder="请选择设备方位"
@change="orientation_change"
>
<el-option
v-for="item in form_list.orientation_type"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictLabel"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="安装位置" prop="deviceAddress">
<el-input v-model="form.deviceAddress"></el-input>
</el-form-item>
<el-form-item> </el-form-item>
<el-form-item> <p>设备其他信息</p> </el-form-item>
<el-form-item> </el-form-item>
<el-form-item label="设备品牌" prop="deviceBrand">
<el-input v-model="form.deviceBrand"></el-input>
</el-form-item>
<el-form-item label="设备厂家" prop="manufactor">
<el-input v-model="form.manufactor"></el-input>
</el-form-item>
<el-form-item label="设备MAC" prop="deviceMac">
<el-input v-model="form.deviceMac"></el-input>
</el-form-item>
<el-form-item label="SN号" prop="deviceSn">
<el-input v-model="form.deviceSn"></el-input>
</el-form-item>
<el-form-item label="设备IMEI" prop="deviceImei">
<el-input v-model="form.deviceImei"></el-input>
</el-form-item>
<el-form-item label="设备端口" prop="devicePort">
<el-input v-model="form.devicePort"></el-input>
</el-form-item>
</el-form>
</div>
<div v-if="!disabled" class="form_btn" slot="footer">
<el-button @click="save">保 存</el-button>
<el-button @click="close">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import {
commonDict,
getCompanyList,
addPerceptionList,
changePerceptionList,
} from "@/api/correlationEquipment";
// import { validateIP } from "@/utils/publicMethod_lxy/validator";
export default {
name: "PerceptionForm",
data() {
return {
visible: false,
title: "新建",
form: {
companyId: "",
companyName: "",
deviceName: "",
deviceIp: "",
devicePerceptionParentType: "",
devicePerceptionParentTypeCn: "",
devicePerceptionSubType: "",
devicePerceptionSubTypeCn: "",
isDoorwayVideoCn: "",
isDoorwayVideo: "",
directionCn: "",
direction: "",
account: "",
password: "",
gbsChannelNo: "",
gbsNvrNo: "",
channelNo: "",
rtspAddress: "",
longitude: "",
latitude: "",
u3dLongitude: "",
u3dLatitude: "",
deviceHeight: "",
u3dHeight: "",
orientation: "",
orientationCn: "",
deviceAddress: "",
deviceBrand: "",
manufactor: "",
manufactorPhone: "",
deviceSn: "",
deviceMac: "",
devicePort: "",
deviceImei: "",
},
form_list: {
company: [],
parent_type: [],
son_type: [],
orientation_type: [],
door_type: [
{ label: "是", id: "1" },
{ label: "否", id: "2" },
],
direction_type: [
{ label: "进", id: "1" },
{ label: "出", id: "2" },
],
},
num: "", // 判断是新增修改等何种形式进入表单
disabled: false, // 详情时表单禁选
rules: {
companyName: [
{ required: true, message: "请选择企业", trigger: "change" },
],
deviceName: [
{ required: true, message: "请填写设备名称", trigger: "blur" },
],
deviceIp: [
{
required: true,
message: "请填写正确的设备ip",
pattern:
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
trigger: "blur",
},
],
devicePerceptionParentTypeCn: [
{ required: true, message: "请选择设备大类", trigger: "change" },
],
devicePerceptionSubTypeCn: [
{ required: true, message: "请选择设备小类", trigger: "change" },
],
isDoorwayVideoCn: [
{ required: true, message: "请选择是否卡口", trigger: "change" },
],
gbsChannelNo: [
{
required: true,
message: "请输入20位通道编码",
pattern: /^[0-9]{20}$/,
trigger: "blur",
},
],
gbsNvrNo: [
{
required: true,
message: "请输入20位NVR编码",
pattern: /^[0-9]{20}$/,
trigger: "blur",
},
],
longitude: [
{
required: true,
pattern:
/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, // eslint-disable-line
message: "请输入设备经度 -180~180(保留小数点后六位)",
trigger: "blur",
},
],
latitude: [
{
required: true,
pattern:
/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/, // eslint-disable-line
message: "请输入设备纬度 -90~90(保留小数点后六位）",
trigger: "blur",
},
],
u3dLongitude: [
{
pattern:
/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/, // eslint-disable-line
message: "请输入u3d经度 -180~180(保留小数点后六位)",
trigger: "blur",
},
],
u3dLatitude: [
{
pattern:
/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/, // eslint-disable-line
message: "请输入u3d设备纬度 -90~90(保留小数点后六位）",
trigger: "blur",
},
],
deviceAddress: [
{ required: true, message: "请输入安装位置", trigger: "blur" },
],
},
};
},
methods: {
async open(num, row) {
this.visible = true;
this.num = num;
await this.obtain_select_list(); // 请求下拉
if (num === "1") {
this.title = "新建";
this.disabled = false;
this.form = {
companyId: "",
companyName: "",
deviceName: "",
deviceIp: "",
deviceVideoParentType: "",
deviceVideoParentTypeCn: "",
deviceVideoSubType: "",
deviceVideoSubTypeCn: "",
isDoorwayVideoCn: "",
isDoorwayVideo: "",
directionCn: "",
direction: "",
account: "",
password: "",
gbsChannelNo: "",
gbsNvrNo: "",
channelNo: "",
rtspAddress: "",
longitude: "",
latitude: "",
u3dLongitude: "",
u3dLatitude: "",
deviceHeight: "",
u3dHeight: "",
orientation: "",
orientationCn: "",
deviceAddress: "",
deviceBrand: "",
manufactor: "",
manufactorPhone: "",
deviceSn: "",
deviceMac: "",
devicePort: "",
};
} else if (num === "5") {
this.title = "修改";
this.form = Object.assign(this.form, row);
this.disabled = false;
console.log("trrr", this.form);
} else if (num === "6") {
this.title = "详情";
this.form = Object.assign(this.form, row);
this.disabled = true;
}
},
// 请求本表单下拉list
obtain_select_list() {
// 请求企业名称下拉
getCompanyList().then((res) => {
this.form_list.company = res.data;
console.log("this.form_list.company", this.form_list.company);
});
// 请求设备大类下拉
commonDict({ dictType: "device_perception_sub_type" }).then((res) => {
this.form_list.parent_type = res.data;
});
// 请求设备小类下拉
commonDict({ dictType: "device_video_sub_type" }).then((res) => {
this.form_list.son_type = res.data;
});
// 请求设备方位下拉
commonDict({ dictType: "orientation" }).then((res) => {
this.form_list.orientation_type = res.data;
});
},
// 选中企业下拉
company_change(val) {
this.form.companyId = this.form_list.company.find(
(item) => item.companyName === val
).id;
},
// 选中大类下拉
parent_change(val) {
this.form.deviceVideoParentType = this.form_list.parent_type.find(
(item) => item.dictLabel === val
).dictValue;
},
// 选中小类下拉
son_change(val) {
this.form.deviceVideoSubType = this.form_list.son_type.find(
(item) => item.dictLabel === val
).dictValue;
},
// 选中卡口下拉
door_change(val) {
this.form.isDoorwayVideo = this.form_list.door_type.find(
(item) => item.label === val
).id;
},
// 进出方向下拉
direction_change(val) {
this.form.directionCn = this.form_list.direction_type.find(
(item) => item.label === val
).id;
},
// 选中方向下拉
orientation_change(val) {
this.form.orientation = this.form_list.orientation_type.find(
(item) => item.dictLabel === val
).dictValue;
},
save() {
this.$refs["form"].validate((valid) => {
if (valid) {
console.log("this.form_a", this.form); // 传给后台的表单数据
if (this.num === "1") {
addPerceptionList(this.form).then((res) => {
this.visible = false;
console.log(res);
this.$message.success("新建数据成功");
// 新建数据成功后，表格刷新
this.$emit("refresh_perception");
});
} else if (this.num === "5") {
changePerceptionList(this.form).then((res) => {
this.visible = false;
console.log(res);
this.$message.success("修改数据成功");
this.$emit("refresh_perception");
});
}
} else {
this.$message.warning("请填入必填项");
return false;
}
});
},
// 关闭弹窗
close() {
// 表单清空
this.$refs["form"].resetFields();
this.visible = false;
},
},
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
.el-dialog__title {
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
background-image: url("~@/assets/companyFile/dialogBack.png");
background-size: 100% 100%;
background-repeat: no-repeat;
height: 750px;
/* 关闭弹窗叉号 */
.el-dialog__headerbtn {
.el-dialog__close {
color: #fff;
font-size: 18px;
}
}
.el-dialog__body {
padding: 0px;
padding-left: 15px;
padding-right: 15px;
p {
font-size: 16px;
color: #fff;
}
}
}
.form_body {
margin-top: 3%;
height: 600px;
overflow-y: scroll;
background: url("~@/assets/companyFile/242112.png") no-repeat;
background-size: 100% 100%;
p {
padding-top: 15px;
margin-left: 17px;
font-size: 16px;
color: #fff;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
}
.form_body::-webkit-scrollbar {
width: 6px;
background-color: #5e666a;
border-radius: 4px;
}
.form_body::-webkit-scrollbar-thumb {
width: 5px;
background-color: #3c4b4a;
border-radius: 4px;
}
.form_btn {
.el-button {
width: 70px;
border: 1px solid #4a6072;
color: #fff;
border-radius: 0px !important;
background: #323f43;
}
.el-button:focus,
.el-button:hover {
color: #34e1b3;
background: url("~@/assets/companyFile/891771.png") no-repeat !important;
background-size: 100% 100% !important;
}
}
/deep/.el-form {
/* 表单内容浮动布局，多行多列表单 */
width: 900px !important;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 2vh;
.el-form-item {
/* 表单域名跟input浮动布局 */
display: flex;
width: 50%;
.el-form-item__label {
width: 40%;
text-align: center;
color: #fff;
}
.el-form-item__content {
.el-input__inner {
width: 300px;
border-radius: 0px;
// border: 0.5px dashed;
background: #3c4b4a;
color: #fff;
}
/* 查询框点击颜色变化 */
.el-input__inner:focus,
.el-input__inner:hover {
border-color: #1b3736;
}
}
}
}
</style>

1
src/views/systemManagement/correlationEquipment2/components/videoForm.vue
Unescape View File

@ -158,7 +158,6 @@ import {
changeVideoList,
} from "@/api/correlationEquipment";
// import { validateIP } from "@/utils/publicMethod_lxy/validator";
export default {
name: "VideoForm",
data() {

Write Preview
Loading…
Cancel
Save