|
|
<template>
|
|
|
<div class="monitorBox" v-loading="loadingBg">
|
|
|
<div class="monitor-container">
|
|
|
<!-- 左侧数据列表树 -->
|
|
|
<div class="sideBar">
|
|
|
<div class="searchBar">
|
|
|
<el-input
|
|
|
placeholder="输入关键字进行过滤"
|
|
|
v-model="filterText"
|
|
|
prefix-icon="el-icon-search"
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<el-tree
|
|
|
:data="lineTreeData"
|
|
|
:props="defaultProps"
|
|
|
ref="tree"
|
|
|
node-key="id"
|
|
|
highlight-current
|
|
|
:default-expand-all="true"
|
|
|
@node-click="handleNodeClick"
|
|
|
:current-node-key="currentNodekey"
|
|
|
:filter-node-method="filterNode"
|
|
|
>
|
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
<div v-if="node.level === 1">
|
|
|
<span class="iconfont icon-dianli"></span>
|
|
|
<span>{{ node.label }} </span>
|
|
|
</div>
|
|
|
<div v-else-if="data.list && node.level !== 1">
|
|
|
<span class="iconfont icon-dianlihangye"> </span>
|
|
|
<span>{{ node.label }} </span>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<span
|
|
|
class="iconfont icon-video-camera"
|
|
|
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
|
|
|
style="margin-right: 6px"
|
|
|
></span>
|
|
|
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''">{{
|
|
|
node.label
|
|
|
}}</span>
|
|
|
</div>
|
|
|
</span>
|
|
|
<!-- <span
|
|
|
v-else
|
|
|
class="iconfont icon-video-camera"
|
|
|
style="margin-right: 6px"
|
|
|
></span>
|
|
|
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
|
|
|
>{{ node.label }} -- {{ data.cmdid }}</span
|
|
|
>
|
|
|
</span> -->
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
<div class="resize" title="收缩侧边栏"></div>
|
|
|
<!-- 带参数的中心内容右侧参数区 -->
|
|
|
<div class="picSetBox">
|
|
|
<div class="swiperBox" v-loading="loadingpic">
|
|
|
<carouselChart
|
|
|
ref="carouselpic"
|
|
|
:terminalPhoto="terminalPhoto"
|
|
|
v-if="terminalPhoto.length > 0"
|
|
|
></carouselChart>
|
|
|
</div>
|
|
|
<div class="parameterArea">
|
|
|
<div class="zzbox">
|
|
|
<!-- <h3>装置名称</h3> -->
|
|
|
<p class="zzidname">{{ cmdid }}</p>
|
|
|
<p class="addressname">{{ address }}</p>
|
|
|
</div>
|
|
|
<div class="paramsDate">
|
|
|
<h3>日历快速查询</h3>
|
|
|
<el-date-picker
|
|
|
v-model="dateValue"
|
|
|
type="date"
|
|
|
placeholder="选择日期"
|
|
|
value-format="timestamp"
|
|
|
@change="changedate"
|
|
|
:clearable="false"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="monitorItemBox">
|
|
|
<h3>选择通道监拍点</h3>
|
|
|
|
|
|
<el-select
|
|
|
v-model="channelListValue"
|
|
|
placeholder="请选择"
|
|
|
@change="changeChannelId"
|
|
|
ref="multiSelect"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in channelListOption"
|
|
|
:key="item.value"
|
|
|
:label="
|
|
|
item.alias !== null && item.alias !== ''
|
|
|
? item.alias
|
|
|
: item.label
|
|
|
"
|
|
|
:value="item.value"
|
|
|
>
|
|
|
{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.label
|
|
|
}}
|
|
|
<!-- {{ item.label }}{{ item.alias }} -->
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
<div class="setTimebtn">
|
|
|
<h3>操作项</h3>
|
|
|
<div class="buttonGroup">
|
|
|
<el-dropdown trigger="click" @command="handleCommandpic">
|
|
|
<el-button type="primary" :loading="btnpicloading">
|
|
|
主动拍照<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="picdropStyle">
|
|
|
<el-dropdown-item
|
|
|
:command="item.value"
|
|
|
v-for="(item, index) in channelOption"
|
|
|
:key="index"
|
|
|
>{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.label
|
|
|
}}</el-dropdown-item
|
|
|
>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
<el-dropdown trigger="click" @command="handleCommandvideo">
|
|
|
<el-button type="primary" :loading="btnvideoloading">
|
|
|
主动录像<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="videodropStyle">
|
|
|
<el-dropdown-item
|
|
|
:command="item.value"
|
|
|
v-for="(item, index) in channelOption"
|
|
|
:key="index"
|
|
|
>{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.label
|
|
|
}}</el-dropdown-item
|
|
|
>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
|
|
|
<el-button type="primary" @click="handleShowInfo">
|
|
|
装置信息</el-button
|
|
|
>
|
|
|
<el-button type="primary" @click.native.stop="handleSetSchedule()"
|
|
|
>拍照时间表</el-button
|
|
|
>
|
|
|
|
|
|
<el-dropdown
|
|
|
class="dropgps"
|
|
|
trigger="click"
|
|
|
@command="handleCommandWarn"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
声光报警<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
|
|
<el-dropdown-item command="open">开启</el-dropdown-item>
|
|
|
<el-dropdown-item command="close">关闭</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
<!-- 线缆显示 -->
|
|
|
<el-dropdown
|
|
|
class="dropgps"
|
|
|
trigger="click"
|
|
|
@command="handleCommandLine"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
线缆显示<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
|
|
<el-dropdown-item command="open">开启</el-dropdown-item>
|
|
|
<el-dropdown-item command="close">关闭</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
<!-- 获取gps位置 -->
|
|
|
<el-button type="primary" @click.native.stop="handleShowGPS()"
|
|
|
>获取GPS位置</el-button
|
|
|
>
|
|
|
<!-- gps开关 -->
|
|
|
<el-dropdown
|
|
|
class="dropgps"
|
|
|
trigger="click"
|
|
|
@command="handleCommandGps"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
|
|
|
<el-dropdown-item command="open">开启GPS</el-dropdown-item>
|
|
|
<el-dropdown-item command="close">关闭GPS</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<setschedule ref="setschedule_ref"></setschedule>
|
|
|
<info-dialog ref="infodialog_ref"></info-dialog>
|
|
|
<gps-position ref="gpsdialog_ref"></gps-position>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
getdyTreeListJoggle,
|
|
|
getChannelByTermidJoggle,
|
|
|
getTerminalPhotoListJoggle,
|
|
|
getLatestPhotoJoggle,
|
|
|
getReturnedPhotoJoggle,
|
|
|
alarmMarkJoggle,
|
|
|
getTermStatus,
|
|
|
setTermGPSJoggle,
|
|
|
} from "@/utils/api/index";
|
|
|
import { mapState } from "vuex";
|
|
|
import carouselChart from "../components/carouselChart.vue";
|
|
|
import setschedule from "./components/setschedule.vue";
|
|
|
import deviceUpgrade from "./components/deviceUpgrade.vue";
|
|
|
import infoDialog from "./components/infoDialog.vue";
|
|
|
import gpsPosition from "./components/gpsPosition.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
carouselChart,
|
|
|
setschedule,
|
|
|
deviceUpgrade,
|
|
|
infoDialog,
|
|
|
gpsPosition,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
btnpicloading: false,
|
|
|
btnvideoloading: false,
|
|
|
flag: true,
|
|
|
onlinestatus: "", //设备状态啊
|
|
|
showBigPic: true,
|
|
|
defaultKey: "",
|
|
|
lineTreeData: [],
|
|
|
treeStatus: [],
|
|
|
statusTimer: null,
|
|
|
filterText: "",
|
|
|
defaultProps: {
|
|
|
//指定参数格式回显数据
|
|
|
children: "list",
|
|
|
label: "name",
|
|
|
},
|
|
|
currentNodekey: "", //默认选中的节点树,
|
|
|
cmdid: "", //装置id,
|
|
|
channelId: "", //通道装置id
|
|
|
channelList: "", //通道数据
|
|
|
channelOption: [], //通道分类
|
|
|
channelListOption: [], //通道内容
|
|
|
channelListValue: "",
|
|
|
channelValue: [], //选中的通道
|
|
|
terminalPhoto: [], //获取拍照装置当前数据
|
|
|
totalPic: "",
|
|
|
dateValue: "", //日期
|
|
|
nopicPath: require("@/assets/img/nopic.jpg"),
|
|
|
loadingBg: false,
|
|
|
loadingpic: false,
|
|
|
newPicData: "",
|
|
|
timer: null,
|
|
|
treetimer: null,
|
|
|
treenum: 0,
|
|
|
i: 0,
|
|
|
newTermId: "",
|
|
|
zzstatus: "",
|
|
|
address: "",
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
filterText(val) {
|
|
|
console.log(val);
|
|
|
this.$refs.tree.filter(val);
|
|
|
console.log(this.$refs.tree);
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(["channelid", "termid"]),
|
|
|
channelid() {
|
|
|
let storechannelid = localStorage.getItem("channelid");
|
|
|
return storechannelid;
|
|
|
// return this.$store.state.channelid;
|
|
|
},
|
|
|
termid() {
|
|
|
let storetermid = localStorage.getItem("termid");
|
|
|
return storetermid;
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.dragControllerDiv();
|
|
|
},
|
|
|
created() {
|
|
|
this.getLineTreeList();
|
|
|
this.getDateTime();
|
|
|
console.log(this.dateValue);
|
|
|
this.treetimer = window.setInterval(() => {
|
|
|
setTimeout(this.getLineTreeStatus(), 0);
|
|
|
}, 300000);
|
|
|
},
|
|
|
methods: {
|
|
|
//树状图搜索
|
|
|
filterNode(value, data) {
|
|
|
console.log(value, data);
|
|
|
if (!value) return true;
|
|
|
return data.name.indexOf(value) !== -1;
|
|
|
},
|
|
|
//获取当前时间
|
|
|
getDateTime() {
|
|
|
this.dateValue = new Date().getTime();
|
|
|
},
|
|
|
//选择时间
|
|
|
changedate() {
|
|
|
console.log(this.dateValue);
|
|
|
console.log(this.channelList);
|
|
|
this.getTerminalPhotoList(
|
|
|
this.channelValue,
|
|
|
this.dateValue,
|
|
|
this.channelList[0].termId
|
|
|
);
|
|
|
},
|
|
|
//获取状态
|
|
|
getLineTreeStatus() {
|
|
|
getdyTreeListJoggle()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.lineTreeData = res.data.list;
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.tree.setCurrentKey(this.newTermId); //一定要加这个选中了否则样式没有出来
|
|
|
});
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//获取左侧树结构
|
|
|
getLineTreeList() {
|
|
|
this.loadingBg = true;
|
|
|
getdyTreeListJoggle()
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.lineTreeData = res.data.list;
|
|
|
console.log(this.lineTreeData);
|
|
|
console.log(this.lineTreeData[0].list[0].list);
|
|
|
if (this.lineTreeData[0].list[0].list.length > 0) {
|
|
|
this.currentNodekey = this.lineTreeData[0].list[0].list[0].id; //第一个数据
|
|
|
this.newTermId = this.lineTreeData[0].list[0].list[0].id;
|
|
|
|
|
|
this.cmdid = this.lineTreeData[0].list[0].list[0].cmdid;
|
|
|
this.zzstatus = this.lineTreeData[0].list[0].list[0].onlinestatus;
|
|
|
console.log(this.zzstatus);
|
|
|
this.$nextTick(() => {
|
|
|
this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
|
|
|
this.channelId = this.currentNodekey;
|
|
|
this.getChannelList(this.channelId); //获取通道id接口
|
|
|
});
|
|
|
}
|
|
|
this.loadingBg = false;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//点击获取当前点击的tree数据
|
|
|
handleNodeClick(data, node) {
|
|
|
console.log(data, node);
|
|
|
if (data.list) {
|
|
|
this.$refs.tree.setCurrentKey(data.list[0].id);
|
|
|
}
|
|
|
this.zzstatus = data.onlinestatus;
|
|
|
console.log(this.zzstatus);
|
|
|
this.channelId = data.id; //获取当前点击的id
|
|
|
this.cmdid = data.cmdid;
|
|
|
this.address = data.address;
|
|
|
this.newTermId = data.id; //获取当前点击的id
|
|
|
console.log(data);
|
|
|
this.channelValue = [];
|
|
|
this.channelOption = [];
|
|
|
this.channelListOption = [];
|
|
|
this.getChannelList(this.channelId); //获取通道id接口
|
|
|
this.stop();
|
|
|
this.btnvideoloading = false;
|
|
|
this.btnpicloading = false;
|
|
|
},
|
|
|
//获取通道的接口
|
|
|
getChannelList(id) {
|
|
|
getChannelByTermidJoggle({ termid: id })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.channelList = res.data.list;
|
|
|
console.log(this.channelList);
|
|
|
|
|
|
this.channelOption = [];
|
|
|
this.channelList.forEach((item) => {
|
|
|
this.channelOption.push({
|
|
|
label: item.channelname,
|
|
|
value: item.channelid,
|
|
|
termid: item.termId,
|
|
|
alias: item.alias,
|
|
|
});
|
|
|
this.channelValue.push(item.channelid); //默认选中所有通道
|
|
|
}); // 选择通道一通道二select框
|
|
|
console.log(this.channelOption);
|
|
|
console.log(this.channelValue);
|
|
|
this.channelListOption = [];
|
|
|
this.channelListOption.push({
|
|
|
label: "全部",
|
|
|
value: "",
|
|
|
termid: "",
|
|
|
alias: "",
|
|
|
});
|
|
|
this.channelList.forEach((item) => {
|
|
|
this.channelListOption.push({
|
|
|
label: item.channelname,
|
|
|
value: item.channelid,
|
|
|
termid: item.termId,
|
|
|
alias: item.alias,
|
|
|
});
|
|
|
});
|
|
|
this.channelListValue = this.channelListOption[0].value; //默认选中所有通道
|
|
|
// console.log(JSON.parse(JSON.stringify(this.channelValue)));
|
|
|
// this.channelValue = JSON.parse(JSON.stringify(this.channelValue));
|
|
|
console.log(this.channelOption.length);
|
|
|
if (this.channelOption.length == 0) {
|
|
|
console.log("没有绑定通道");
|
|
|
this.terminalPhoto = [
|
|
|
{
|
|
|
path: this.nopicPath,
|
|
|
termId: id,
|
|
|
},
|
|
|
];
|
|
|
console.log(this.terminalPhoto);
|
|
|
return;
|
|
|
} else {
|
|
|
this.getTerminalPhotoList(
|
|
|
this.channelValue,
|
|
|
this.dateValue,
|
|
|
this.channelList[0].termId
|
|
|
); //获取图片列表是传当前设备的 id 和termid
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.loading = false;
|
|
|
console.log("没有绑定通道");
|
|
|
this.terminalPhoto = [
|
|
|
{
|
|
|
path: this.nopicPath,
|
|
|
termId: id,
|
|
|
},
|
|
|
];
|
|
|
console.log(this.terminalPhoto);
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//获取图片
|
|
|
getTerminalPhotoList(id, date, termId) {
|
|
|
this.loadingpic = true;
|
|
|
this.terminalPhoto = [];
|
|
|
console.log(id, date, termId);
|
|
|
getTerminalPhotoListJoggle({
|
|
|
channelid: id,
|
|
|
time: date,
|
|
|
terminalid: termId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.list.length == 0) {
|
|
|
this.terminalPhoto = [
|
|
|
{
|
|
|
path: this.nopicPath,
|
|
|
termId: termId,
|
|
|
},
|
|
|
];
|
|
|
this.totalPic = 0;
|
|
|
} else {
|
|
|
this.terminalPhoto = res.data.list;
|
|
|
}
|
|
|
|
|
|
console.log(this.terminalPhoto.length);
|
|
|
this.totalPic = res.data.num;
|
|
|
//this.$refs.a.getphotodata(this.terminalPhoto);
|
|
|
this.loadingpic = false;
|
|
|
console.log(this.terminalPhoto);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//切换通道
|
|
|
changeChannelId(val) {
|
|
|
let selchannel = [];
|
|
|
if (!val) {
|
|
|
this.channelList.forEach((item) => {
|
|
|
selchannel.push(item.channelid); //选中所有通道
|
|
|
});
|
|
|
} else {
|
|
|
selchannel.push(val);
|
|
|
}
|
|
|
let channelObj = {};
|
|
|
channelObj = this.channelOption.find(function (i) {
|
|
|
return i.value;
|
|
|
});
|
|
|
console.log(channelObj);
|
|
|
this.getTerminalPhotoList(selchannel, this.dateValue, channelObj.termid);
|
|
|
},
|
|
|
|
|
|
//设置时间表
|
|
|
handleSetSchedule() {
|
|
|
this.$refs.setschedule_ref.display();
|
|
|
this.$refs.setschedule_ref.getSingleAccess(this.channelId, this.cmdid);
|
|
|
this.$refs.setschedule_ref.deviceList();
|
|
|
},
|
|
|
//声光报警开启关闭
|
|
|
handleCommandWarn(command) {
|
|
|
switch (command) {
|
|
|
case "open": //开启
|
|
|
this.handleWarn(1);
|
|
|
break;
|
|
|
case "close": //关闭
|
|
|
this.handleWarn(0);
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
//声光报警
|
|
|
handleWarn(val) {
|
|
|
console.log("声光报警");
|
|
|
console.log(this.cmdid);
|
|
|
getTermStatus({ termId: this.newTermId }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
alarmMarkJoggle({
|
|
|
cmdId: this.cmdid,
|
|
|
ctrl: val,
|
|
|
termId: this.newTermId,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.code == 200) {
|
|
|
if (val == 1) {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "声光报警开启成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "声光报警关闭成功",
|
|
|
type: "success",
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "声光报警操作失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//线缆显示
|
|
|
handleCommandLine(command) {
|
|
|
switch (command) {
|
|
|
case "open": //开启
|
|
|
this.$refs.carouselpic.openline();
|
|
|
break;
|
|
|
case "close": //关闭
|
|
|
this.$refs.carouselpic.handelClear();
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
handleShowErr() {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "该功能暂未开发,敬请期待",
|
|
|
type: "warning",
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//手动拍照
|
|
|
handleCommandpic(command) {
|
|
|
console.log(command);
|
|
|
getTermStatus({ termId: this.newTermId }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
this.btnpicloading = true;
|
|
|
getLatestPhotoJoggle({
|
|
|
captureType: 0,
|
|
|
channel: command,
|
|
|
// cmdid: this.cmdid,
|
|
|
termId: this.newTermId,
|
|
|
preset: 255,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "手动拍照请求成功！",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.loadingpic = true;
|
|
|
console.log(res);
|
|
|
this.newPicData = res.data;
|
|
|
console.log(this.newPicData);
|
|
|
console.log(this.newTermId);
|
|
|
this.timer = window.setInterval(() => {
|
|
|
this.newPicApi();
|
|
|
this.i++;
|
|
|
}, 5000);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
} else {
|
|
|
this.btnpicloading = false;
|
|
|
this.loadingpic = false;
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//手动拍视频
|
|
|
handleCommandvideo(command) {
|
|
|
console.log(command);
|
|
|
|
|
|
getTermStatus({ termId: this.newTermId }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
this.btnvideoloading = true;
|
|
|
getLatestPhotoJoggle({
|
|
|
captureType: 1,
|
|
|
channel: command,
|
|
|
//cmdid: this.cmdid,
|
|
|
termId: this.newTermId,
|
|
|
preset: 255,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "手动拍视频请求成功！",
|
|
|
type: "success",
|
|
|
});
|
|
|
this.loadingpic = true;
|
|
|
console.log(res);
|
|
|
this.newPicData = res.data;
|
|
|
console.log(this.newPicData);
|
|
|
console.log(this.newTermId);
|
|
|
this.timer = window.setInterval(() => {
|
|
|
this.newPicApi();
|
|
|
this.i++;
|
|
|
}, 10000);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
} else {
|
|
|
this.btnvideoloading = false;
|
|
|
this.loadingpic = false;
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//获取最新图片
|
|
|
newPicApi() {
|
|
|
getReturnedPhotoJoggle({
|
|
|
photoTime: this.newPicData,
|
|
|
termId: this.newTermId,
|
|
|
}).then((res) => {
|
|
|
console.log(res.data);
|
|
|
console.log(this.i);
|
|
|
//console.log(this.newPicData, this.currentNodekey);
|
|
|
if (res.data == true && this.i < 10) {
|
|
|
console.log(res.data);
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.getTerminalPhotoList(
|
|
|
this.channelValue,
|
|
|
this.dateValue,
|
|
|
this.channelList[0].termId
|
|
|
);
|
|
|
this.btnpicloading = false;
|
|
|
this.btnvideoloading = false;
|
|
|
console.log("返回最新图片");
|
|
|
this.i = 0;
|
|
|
} else if (res.data == false && this.i > 10) {
|
|
|
this.i = 0;
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置暂无响应，请稍后再试！",
|
|
|
type: "warning",
|
|
|
});
|
|
|
this.btnpicloading = false;
|
|
|
this.btnvideoloading = false;
|
|
|
this.loadingpic = false;
|
|
|
}
|
|
|
console.log("2222222222222222");
|
|
|
});
|
|
|
},
|
|
|
stop() {
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
},
|
|
|
|
|
|
//装置信息handleShowInfo
|
|
|
handleShowInfo() {
|
|
|
getTermStatus({ termId: this.newTermId }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
this.$refs.infodialog_ref.display(this.channelId, this.cmdid);
|
|
|
this.$refs.infodialog_ref.getinfo();
|
|
|
//this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//获取GPS位置
|
|
|
|
|
|
handleShowGPS() {
|
|
|
this.$refs.gpsdialog_ref.display(this.cmdid, this.newTermId);
|
|
|
this.$refs.gpsdialog_ref.getgpssql();
|
|
|
},
|
|
|
|
|
|
//切换gps开启关闭
|
|
|
handleCommandGps(command) {
|
|
|
switch (command) {
|
|
|
case "open": //开启
|
|
|
this.changeGPS(1, this.cmdid);
|
|
|
break;
|
|
|
case "close": //关闭
|
|
|
this.changeGPS(0, this.cmdid);
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
changeGPS(val, cmdid) {
|
|
|
console.log(val, cmdid);
|
|
|
setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
if (val == 0) {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
message: "关闭GPS",
|
|
|
type: "success",
|
|
|
showClose: true,
|
|
|
});
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
message: "成功开启GPS",
|
|
|
type: "success",
|
|
|
showClose: true,
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
|
|
|
//历史图片
|
|
|
// handlehistoryPic() {
|
|
|
// this.$router.push({ path: "/realTimeSearch" });
|
|
|
// // sessionStorage.setItem("keyPath", " realTimeSearch");
|
|
|
// },
|
|
|
dragControllerDiv() {
|
|
|
var resize = document.getElementsByClassName("resize");
|
|
|
var left = document.getElementsByClassName("sideBar");
|
|
|
var mid = document.getElementsByClassName("picSetBox");
|
|
|
var box = document.getElementsByClassName("monitor-container");
|
|
|
for (let i = 0; i < resize.length; i++) {
|
|
|
// 鼠标按下事件
|
|
|
resize[i].onmousedown = function (e) {
|
|
|
//颜色改变提醒
|
|
|
resize[i].style.background = "#128071";
|
|
|
var startX = e.clientX;
|
|
|
resize[i].left = resize[i].offsetLeft;
|
|
|
// 鼠标拖动事件
|
|
|
document.onmousemove = function (e) {
|
|
|
var endX = e.clientX;
|
|
|
var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
|
|
|
var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
|
|
|
|
|
|
if (moveLen < 290) moveLen = 290; // 左边区域的最小宽度为32px
|
|
|
if (moveLen > maxT - 600) moveLen = maxT - 600; //右边区域最小宽度为150px
|
|
|
|
|
|
resize[i].style.left = moveLen; // 设置左侧区域的宽度
|
|
|
|
|
|
for (let j = 0; j < left.length; j++) {
|
|
|
left[j].style.width = moveLen + "px";
|
|
|
mid[j].style.width = box[i].clientWidth - moveLen - 3 + "px";
|
|
|
}
|
|
|
};
|
|
|
// 鼠标松开事件
|
|
|
document.onmouseup = function (evt) {
|
|
|
//颜色恢复
|
|
|
resize[i].style.background = "#dcdfe6";
|
|
|
document.onmousemove = null;
|
|
|
document.onmouseup = null;
|
|
|
resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
|
|
|
};
|
|
|
resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
|
|
|
return false;
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
|
|
|
destroyed() {
|
|
|
clearInterval(this.treetimer);
|
|
|
this.treetimer = null;
|
|
|
//离开页面是销毁
|
|
|
if (this.timer) {
|
|
|
console.log(this.timer);
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
} //利用vue的生命周期函数
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
.monitorBox {
|
|
|
width: calc(100% - 0px);
|
|
|
height: calc(100% - 12px);
|
|
|
padding: 12px 0px 0px 0px;
|
|
|
background: #ffffff;
|
|
|
.monitor-container {
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
background: @color-white;
|
|
|
border: 1px solid #dddddd;
|
|
|
border-radius: 4px;
|
|
|
.sideBar {
|
|
|
width: 300px;
|
|
|
//border-right: 1px solid @border-color-base;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 16px 0px;
|
|
|
.searchBar {
|
|
|
width: 94%;
|
|
|
margin: 0 auto;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.el-tree {
|
|
|
overflow: auto;
|
|
|
.el-tree-node__content {
|
|
|
height: 40px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.custom-tree-node {
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
.el-tree--highlight-current
|
|
|
.el-tree-node.is-current
|
|
|
> .el-tree-node__content {
|
|
|
// 设置颜色
|
|
|
color: #fff;
|
|
|
background: #169e8c;
|
|
|
.custom-tree-node {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.disconnect {
|
|
|
color: #d3d3d3;
|
|
|
}
|
|
|
}
|
|
|
/*拖拽区div样式*/
|
|
|
.resize {
|
|
|
cursor: col-resize;
|
|
|
float: left;
|
|
|
position: relative;
|
|
|
background-color: #dcdfe6;
|
|
|
width: 3px;
|
|
|
height: 100%;
|
|
|
/*拖拽区鼠标悬停样式*/
|
|
|
&:hover {
|
|
|
background-color: #169e8c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.picSetBox {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
//background: #fcc;
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
border-left: 1px solid @border-color-base;
|
|
|
.swiperBox {
|
|
|
-webkit-box-flex: 1;
|
|
|
-ms-flex: 1;
|
|
|
flex: 1;
|
|
|
width: auto;
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.el-loading-mask {
|
|
|
background-color: rgba(255, 255, 255, 0.6) !important;
|
|
|
}
|
|
|
}
|
|
|
.totalPic {
|
|
|
width: 100%;
|
|
|
height: 16px;
|
|
|
margin-bottom: 8px;
|
|
|
text-align: right;
|
|
|
font-size: 12px;
|
|
|
color: #2d8cf0;
|
|
|
font-weight: bold;
|
|
|
line-height: 16px;
|
|
|
}
|
|
|
}
|
|
|
.parameterArea {
|
|
|
width: 220px;
|
|
|
padding: 16px 16px;
|
|
|
border-left: 1px solid #dcdfe6;
|
|
|
position: relative;
|
|
|
.monitorItemBox,
|
|
|
.paramsDate,
|
|
|
.setTimebtn,
|
|
|
.GPSItemBox,
|
|
|
.zzbox {
|
|
|
margin-bottom: 16px;
|
|
|
h3 {
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
color: @color-text-primary;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
.el-date-editor.el-input {
|
|
|
width: 215px;
|
|
|
}
|
|
|
.zzidname {
|
|
|
font-weight: normal;
|
|
|
color: #169e8c;
|
|
|
}
|
|
|
.addressname {
|
|
|
margin-top: 16px;
|
|
|
font-size: 14px;
|
|
|
line-height: 22px;
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
.setTimebtn {
|
|
|
// position: absolute;
|
|
|
// bottom: 0px;
|
|
|
.buttonGroup {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
.el-button {
|
|
|
margin-bottom: 8px;
|
|
|
width: 104px;
|
|
|
}
|
|
|
.el-button + .el-button {
|
|
|
margin-left: 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.messageGps {
|
|
|
.el-message-box__message {
|
|
|
p {
|
|
|
line-height: 32px;
|
|
|
font-size: 16px;
|
|
|
label {
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
span {
|
|
|
color: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-loading-mask {
|
|
|
z-index: 99;
|
|
|
}
|
|
|
.picdropStyle,
|
|
|
.videodropStyle,
|
|
|
.gpsdropStyle {
|
|
|
width: 104px;
|
|
|
margin-top: 0px !important;
|
|
|
}
|
|
|
</style>
|