|
|
<template>
|
|
|
<div class="AreaBox">
|
|
|
<div class="areaHead">
|
|
|
<span @dblclick="handleDblClick(areaData.cmdid)">{{
|
|
|
areaData.cmdid
|
|
|
}}</span>
|
|
|
<!-- <el-tooltip
|
|
|
class="item"
|
|
|
effect="dark"
|
|
|
:content="!collect ? '取消收藏' : '添加收藏'"
|
|
|
placement="top"
|
|
|
>
|
|
|
<i
|
|
|
:class="collect ? 'el-icon-star-off' : 'el-icon-star-on'"
|
|
|
@click="collectCourses"
|
|
|
></i>
|
|
|
</el-tooltip> -->
|
|
|
</div>
|
|
|
<div class="paramsDate">
|
|
|
<h3>日历快速查询</h3>
|
|
|
<el-date-picker
|
|
|
v-model="dateValue"
|
|
|
type="date"
|
|
|
placeholder="选择日期"
|
|
|
format="yyyy 年 MM 月 dd 日"
|
|
|
:picker-options="pickerOptions"
|
|
|
@change="changedate"
|
|
|
@focus="handleDateFocus"
|
|
|
:clearable="false"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<div class="paramsDate">
|
|
|
<h3>通道监拍点</h3>
|
|
|
<!-- <el-radio-group v-model="selectChannelValue" @input="changeChannelId">
|
|
|
<el-radio-button
|
|
|
v-for="item in channelListOption"
|
|
|
:key="item.channelid"
|
|
|
:value="item.channelid"
|
|
|
:label="item.channelid"
|
|
|
>
|
|
|
{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channelname
|
|
|
}}</el-radio-button
|
|
|
>
|
|
|
</el-radio-group> -->
|
|
|
<el-select
|
|
|
v-model="selectChannelValue"
|
|
|
placeholder="请选择通道"
|
|
|
@change="changeChannelId"
|
|
|
ref="multiSelect"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in channelListOption"
|
|
|
:key="item.channelid"
|
|
|
:label="
|
|
|
item.alias !== null && item.alias !== ''
|
|
|
? item.alias
|
|
|
: item.channelname
|
|
|
"
|
|
|
:value="item.channelid"
|
|
|
>
|
|
|
{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channelname
|
|
|
}}
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="paramsDate setTimebtn">
|
|
|
<h3>操作项</h3>
|
|
|
<div class="buttonGroup">
|
|
|
<takePicButton></takePicButton>
|
|
|
<takeVideoButton></takeVideoButton>
|
|
|
|
|
|
<deviceInfoButton></deviceInfoButton>
|
|
|
|
|
|
<scheduleButton></scheduleButton>
|
|
|
<alarmButton></alarmButton>
|
|
|
<cableButton></cableButton>
|
|
|
<gpsButton></gpsButton>
|
|
|
<el-button type="primary" @click="handlehistoryPic">
|
|
|
历史图片</el-button
|
|
|
>
|
|
|
<el-button type="primary" @click="handleParams"> 参数配置</el-button>
|
|
|
<!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
|
|
|
>主动拍照
|
|
|
</el-button> -->
|
|
|
<!-- <el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button>
|
|
|
<el-button type="primary">主动拍照 </el-button> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="setfocalLength" v-if="areaData.protocol == '65286'">
|
|
|
<h3>焦距调节</h3>
|
|
|
<div class="selectChannel">
|
|
|
<span class="labelname">选择通道</span>
|
|
|
<el-select
|
|
|
v-model="channelarrValue"
|
|
|
placeholder="请选择通道"
|
|
|
ref="multiSelect"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in channelfocalOpyion"
|
|
|
:key="item.channelid"
|
|
|
:label="
|
|
|
item.alias !== null && item.alias !== ''
|
|
|
? item.alias
|
|
|
: item.channelname
|
|
|
"
|
|
|
:value="item.channelid"
|
|
|
>
|
|
|
{{
|
|
|
item.alias !== null && item.alias !== ""
|
|
|
? item.alias
|
|
|
: item.channelname
|
|
|
}}
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="buttonGroup">
|
|
|
<el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
|
|
|
>放大</el-button
|
|
|
>
|
|
|
<el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
|
|
|
>缩小</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<parameterSetDialog ref="parameterSetref"></parameterSetDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import takePicButton from "./takePicButton.vue";
|
|
|
import takeVideoButton from "./takeVideoButton.vue";
|
|
|
import deviceInfoButton from "./deviceInfoButton.vue";
|
|
|
import scheduleButton from "./scheduleButton.vue";
|
|
|
import alarmButton from "./alarmButton.vue";
|
|
|
import cableButton from "./cableButton.vue";
|
|
|
import gpsButton from "./gpsButton.vue";
|
|
|
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
|
|
|
import {
|
|
|
getChannelByTermidJoggle,
|
|
|
updateTermCamera,
|
|
|
getTermStatus,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
components: {
|
|
|
takePicButton,
|
|
|
takeVideoButton,
|
|
|
deviceInfoButton,
|
|
|
scheduleButton,
|
|
|
alarmButton,
|
|
|
cableButton,
|
|
|
gpsButton,
|
|
|
parameterSetDialog,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
selectChannelValue: null, //选中的通道
|
|
|
channelListOption: [], //通道数组
|
|
|
channelarrValue: null,
|
|
|
channelfocalOpyion: [], //焦距通道
|
|
|
dateValue: "", //选择日期
|
|
|
pickerOptions: {
|
|
|
disabledDate(date) {
|
|
|
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
|
|
},
|
|
|
},
|
|
|
picLoading: false, //拍照loading
|
|
|
selectDyId: "", //获取当前选中的电压线路等信息
|
|
|
selectLineId: "",
|
|
|
selectTowerId: "",
|
|
|
collect: false, //收藏
|
|
|
};
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
areaData: {
|
|
|
handler(newVal, oldVal) {},
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
areaData() {
|
|
|
return this.$store.state.currentData;
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getDateTime();
|
|
|
},
|
|
|
methods: {
|
|
|
//双击选中复制
|
|
|
handleDblClick(val) {
|
|
|
// alert(val);
|
|
|
var input = document.createElement("input"); // 创建input对象
|
|
|
input.value = val; // 设置复制内容
|
|
|
document.body.appendChild(input); // 添加临时实例
|
|
|
input.select(); // 选择实例内容
|
|
|
document.execCommand("Copy"); // 执行复制
|
|
|
document.body.removeChild(input); // 删除临时实例
|
|
|
//this.$message.success("复制成功！");
|
|
|
this.$message({
|
|
|
duration: 800,
|
|
|
showClose: true,
|
|
|
message: "复制成功！",
|
|
|
type: "success",
|
|
|
});
|
|
|
},
|
|
|
//获取当前时间
|
|
|
getDateTime() {
|
|
|
console.log(new Date());
|
|
|
this.dateValue = new Date().getTime();
|
|
|
console.log(this.dateValue);
|
|
|
},
|
|
|
//点击收藏和取消收藏
|
|
|
collectCourses() {
|
|
|
this.collect = !this.collect;
|
|
|
},
|
|
|
//focus时间重新赋值
|
|
|
handleDateFocus() {
|
|
|
// 更新pickerOptions的disabledDate函数，禁用大于当前时间的日期
|
|
|
this.pickerOptions.disabledDate = (date) => {
|
|
|
//console.log(date);
|
|
|
const currentDate = new Date();
|
|
|
return date.getTime() > currentDate.getTime(); // 禁用大于今天的日期
|
|
|
};
|
|
|
},
|
|
|
//选择时间
|
|
|
changedate() {
|
|
|
console.log(this.dateValue.getTime());
|
|
|
this.$parent.getPhotoList(
|
|
|
this.selectChannelValue,
|
|
|
this.dateValue,
|
|
|
this.areaData.id
|
|
|
);
|
|
|
},
|
|
|
//获取通道的接口
|
|
|
getChannelList() {
|
|
|
console.log(this.areaData);
|
|
|
getChannelByTermidJoggle({ termid: this.areaData.id })
|
|
|
.then((res) => {
|
|
|
console.log(res);
|
|
|
this.channelListOption = [
|
|
|
{ channelname: "全部", channelid: -1, alias: null },
|
|
|
];
|
|
|
this.channelListOption = this.channelListOption.concat(res.data.list);
|
|
|
console.log(this.channelListOption);
|
|
|
this.channelfocalOpyion = res.data.list; //焦距通道
|
|
|
this.channelarrValue = this.channelfocalOpyion[0].channelid;
|
|
|
this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
|
|
|
this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
|
|
|
this.$store.commit("channelIdList", res.data.list); //将通道保存在vuex中
|
|
|
this.$parent.getPhotoList(
|
|
|
this.selectChannelValue,
|
|
|
this.dateValue,
|
|
|
this.areaData.id
|
|
|
);
|
|
|
this.selectDyId = res.data.dyId;
|
|
|
this.selectLineId = res.data.lineId;
|
|
|
this.selectTowerId = res.data.towerId;
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err); //代码错误、请求失败捕获
|
|
|
});
|
|
|
},
|
|
|
//切换通道
|
|
|
changeChannelId(val) {
|
|
|
console.log(val);
|
|
|
this.$store.commit("channelId", val); //将currentData保存在vuex中
|
|
|
this.$parent.getPhotoList(val, this.dateValue, this.areaData.id);
|
|
|
},
|
|
|
//历史图片跳转
|
|
|
handlehistoryPic() {
|
|
|
console.log(this.areaData);
|
|
|
console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
|
|
|
// console.log(this.zzCmdid, this.selectChannelValue);
|
|
|
if (typeof this.dateValue == "number") {
|
|
|
this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
|
|
|
} else {
|
|
|
this.dateValue = this.dateValue.getTime();
|
|
|
}
|
|
|
this.$router.push({
|
|
|
path: "/realTimeSearch",
|
|
|
query: {
|
|
|
dyId: this.selectDyId,
|
|
|
lineId: this.selectLineId,
|
|
|
towerId: this.selectTowerId,
|
|
|
termId: this.areaData.id,
|
|
|
cmdId: this.areaData.cmdid,
|
|
|
channelId: this.selectChannelValue,
|
|
|
date: this.dateValue,
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
//参数配置
|
|
|
handleParams() {
|
|
|
console.log(this.areaData);
|
|
|
this.$refs.parameterSetref.display(this.areaData);
|
|
|
},
|
|
|
//焦距放大缩小
|
|
|
amplify() {
|
|
|
getTermStatus({ termId: this.areaData.id }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
updateTermCamera({
|
|
|
termId: this.areaData.id,
|
|
|
channelId: this.channelarrValue,
|
|
|
type: 6,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch();
|
|
|
//this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
console.log(this.channelarrValue, this.areaData.id);
|
|
|
},
|
|
|
//焦距缩小
|
|
|
reduce() {
|
|
|
getTermStatus({ termId: this.areaData.id }).then((res) => {
|
|
|
console.log(res);
|
|
|
if (res.data.isonline) {
|
|
|
updateTermCamera({
|
|
|
termId: this.areaData.id,
|
|
|
channelId: this.channelarrValue,
|
|
|
type: 7,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch();
|
|
|
//this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
|
|
|
} else {
|
|
|
this.$message({
|
|
|
duration: 1500,
|
|
|
showClose: true,
|
|
|
message: "装置下线，发送指令失败",
|
|
|
type: "error",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.AreaBox {
|
|
|
.areaHead {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
color: #169e8c;
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
i {
|
|
|
margin-left: 16px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.el-icon-star-off {
|
|
|
font-size: 18px;
|
|
|
color: #f08200;
|
|
|
}
|
|
|
.el-icon-star-on {
|
|
|
font-size: 20px;
|
|
|
color: #f08200;
|
|
|
}
|
|
|
}
|
|
|
.paramsDate {
|
|
|
margin-bottom: 16px;
|
|
|
position: relative;
|
|
|
h3 {
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
color: #303133;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
.el-radio-group {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
.el-radio-button {
|
|
|
margin-right: 6px;
|
|
|
margin-top: 6px;
|
|
|
.el-radio-button__inner {
|
|
|
padding: 8px 4px;
|
|
|
width: 66px;
|
|
|
border-left: 1px solid #dcdfe6;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
|
|
box-shadow: none !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.setTimebtn {
|
|
|
.buttonGroup {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
.el-button {
|
|
|
margin-bottom: 8px;
|
|
|
width: 104px;
|
|
|
}
|
|
|
.el-button + .el-button {
|
|
|
margin-left: 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.setfocalLength {
|
|
|
margin-bottom: 16px;
|
|
|
position: relative;
|
|
|
h3 {
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
color: #303133;
|
|
|
margin-bottom: 8px;
|
|
|
}
|
|
|
.selectChannel {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 12px;
|
|
|
.labelname {
|
|
|
font-size: 14px;
|
|
|
margin-right: 4px;
|
|
|
width: 80px;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
.buttonGroup {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
.el-button {
|
|
|
margin-bottom: 8px;
|
|
|
width: 104px;
|
|
|
}
|
|
|
.el-button + .el-button {
|
|
|
margin-left: 0px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|