|
|
<template>
|
|
|
<div class="AreaBox">
|
|
|
<div class="areaHead">
|
|
|
<span @dblclick="handleDblClick(areaData.cmdid)">{{
|
|
|
areaData.cmdid
|
|
|
}}</span>
|
|
|
<el-button
|
|
|
type="text"
|
|
|
:icon="areaData.isfavor == 1 ? 'el-icon-star-on' : 'el-icon-star-off'"
|
|
|
@click="addCollectClick"
|
|
|
>{{ areaData.isfavor == 1 ? "取消收藏" : "添加收藏" }}</el-button
|
|
|
>
|
|
|
</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"
|
|
|
v-if="roleUser != 4"
|
|
|
>
|
|
|
历史图片</el-button
|
|
|
>
|
|
|
<el-button type="primary" @click="handleParams"> 参数配置</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="handleuploadPic" v-if="roleUser == 0">
|
|
|
上传图片</el-button
|
|
|
>
|
|
|
<takeTimePicButton v-if="roleUser == 0"></takeTimePicButton>
|
|
|
|
|
|
<setChannelButton v-if="roleUser == 0"></setChannelButton>
|
|
|
<setAppButton v-if="roleUser == 0"></setAppButton>
|
|
|
<el-dropdown
|
|
|
class="dropgps"
|
|
|
trigger="click"
|
|
|
@command="
|
|
|
(command) => {
|
|
|
handleSearchCommand(command, areaData);
|
|
|
}
|
|
|
"
|
|
|
>
|
|
|
<el-button type="primary">
|
|
|
数据查询<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</el-button>
|
|
|
<el-dropdown-menu slot="dropdown" class="picdropStyle">
|
|
|
<el-dropdown-item command="info">基本信息</el-dropdown-item>
|
|
|
<el-dropdown-item command="workStatus">工作状态</el-dropdown-item>
|
|
|
<el-dropdown-item command="runStatus">运行状态</el-dropdown-item>
|
|
|
<el-dropdown-item command="GPS">GPS位置</el-dropdown-item>
|
|
|
<el-dropdown-item command="faultInfo">故障信息报</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
<!-- <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>
|
|
|
<uploadpic ref="uploadpicref"></uploadpic>
|
|
|
|
|
|
<baseInfor ref="baseInfor_ref"></baseInfor>
|
|
|
<workStatus ref="workStatus_ref"></workStatus>
|
|
|
<runStatus ref="runStatus_ref"></runStatus>
|
|
|
<gpsSite ref="gpsSite_ref"></gpsSite>
|
|
|
<faultInfomation ref="fultInfo_ref"></faultInfomation>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import EventBus from "@/utils/event-bus";
|
|
|
import takePicButton from "./takePicButton.vue";
|
|
|
import setChannelButton from "./setChannelButton.vue";
|
|
|
import takeTimePicButton from "./takeTimePicButton.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 uploadpic from "./uploadpic.vue";
|
|
|
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
|
|
|
import setAppButton from "./setAppButton.vue";
|
|
|
|
|
|
import baseInfor from "../../photographicDevice/components/baseInfor.vue";
|
|
|
import workStatus from "../../photographicDevice/components/workStatus.vue";
|
|
|
import runStatus from "../../photographicDevice/components/runStatus.vue";
|
|
|
import gpsSite from "../../photographicDevice/components/gpsSite.vue";
|
|
|
import faultInfomation from "../../photographicDevice/components/faultInfomation.vue";
|
|
|
import {
|
|
|
getChannelByTermidJoggle,
|
|
|
updateTermCamera,
|
|
|
getTermStatus,
|
|
|
addFavorList,
|
|
|
} from "@/utils/api/index";
|
|
|
export default {
|
|
|
components: {
|
|
|
takePicButton,
|
|
|
takeTimePicButton,
|
|
|
takeVideoButton,
|
|
|
deviceInfoButton,
|
|
|
scheduleButton,
|
|
|
alarmButton,
|
|
|
cableButton,
|
|
|
gpsButton,
|
|
|
parameterSetDialog,
|
|
|
uploadpic,
|
|
|
setChannelButton,
|
|
|
setAppButton,
|
|
|
baseInfor,
|
|
|
workStatus,
|
|
|
runStatus,
|
|
|
gpsSite,
|
|
|
faultInfomation,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
roleUser: "",
|
|
|
selectChannelValue: null, //选中的通道
|
|
|
channelListOption: [], //通道数组
|
|
|
channelarrValue: null,
|
|
|
channelfocalOpyion: [], //焦距通道
|
|
|
dateValue: "", //选择日期
|
|
|
pickerOptions: {
|
|
|
disabledDate(date) {
|
|
|
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
|
|
},
|
|
|
},
|
|
|
picLoading: false, //拍照loading
|
|
|
selectDyId: "", //获取当前选中的电压线路等信息
|
|
|
selectLineId: "",
|
|
|
selectTowerId: "",
|
|
|
collectFlag: false, //收藏
|
|
|
};
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
|
areaData: {
|
|
|
handler(newVal, oldVal) {},
|
|
|
deep: true,
|
|
|
immediate: true,
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
areaData() {
|
|
|
return this.$store.state.currentData;
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
this.roleUser = localStorage.getItem("role");
|
|
|
console.log("asdsaddddddddddddddddddddddddd", this.roleUser);
|
|
|
},
|
|
|
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);
|
|
|
},
|
|
|
//点击收藏和取消收藏
|
|
|
addCollectClick() {
|
|
|
if (this.areaData.isfavor !== 1) {
|
|
|
this.areaData.isfavor = 1;
|
|
|
addFavorList({ list: [this.areaData.id], type: 1 }).then((res) => {
|
|
|
EventBus.$emit("treelist");
|
|
|
});
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "添加成功!",
|
|
|
});
|
|
|
// this.$confirm("此操作将添加至收藏夹, 是否继续?", "提示", {
|
|
|
// confirmButtonText: "确定",
|
|
|
// cancelButtonText: "取消",
|
|
|
// type: "warning",
|
|
|
// }).then(() => {
|
|
|
|
|
|
// });
|
|
|
} else {
|
|
|
this.$confirm("此操作将取消收藏, 是否继续?", "提示", {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
type: "warning",
|
|
|
}).then(() => {
|
|
|
this.areaData.isfavor = 0;
|
|
|
addFavorList({ list: [this.areaData.id], type: 0 }).then((res) => {
|
|
|
EventBus.$emit("treelist");
|
|
|
});
|
|
|
this.$message({
|
|
|
type: "success",
|
|
|
message: "取消收藏!",
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
//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.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;
|
|
|
if (res.data.list.length == 0) {
|
|
|
this.channelarrValue = null;
|
|
|
return;
|
|
|
} else {
|
|
|
this.channelarrValue = this.channelfocalOpyion[0].channelid;
|
|
|
}
|
|
|
})
|
|
|
.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);
|
|
|
if (this.areaData.id == "13276") {
|
|
|
// "id": 13009,
|
|
|
// "towerid": 3980,
|
|
|
this.$set(this.areaData, "id", 13009);
|
|
|
this.$set(this.areaData, "towerid", 3980);
|
|
|
}
|
|
|
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.areaData.towerid,
|
|
|
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);
|
|
|
},
|
|
|
//基本信息报
|
|
|
//数据查询
|
|
|
handleSearchCommand(command, row) {
|
|
|
console.log(command, row);
|
|
|
switch (command) {
|
|
|
case "info":
|
|
|
this.$refs.baseInfor_ref.display(row);
|
|
|
break;
|
|
|
case "workStatus":
|
|
|
this.$refs.workStatus_ref.display(row);
|
|
|
break;
|
|
|
case "runStatus":
|
|
|
this.$refs.runStatus_ref.display(row);
|
|
|
break;
|
|
|
case "GPS":
|
|
|
this.$refs.gpsSite_ref.display(row);
|
|
|
break;
|
|
|
case "faultInfo":
|
|
|
this.$refs.fultInfo_ref.display(row);
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
//焦距放大缩小
|
|
|
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",
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
handleuploadPic() {
|
|
|
this.$refs.uploadpicref.display(this.areaData);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.AreaBox {
|
|
|
.areaHead {
|
|
|
height: 32px;
|
|
|
line-height: 32px;
|
|
|
color: #169e8c;
|
|
|
font-size: 14px;
|
|
|
font-weight: normal;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
.el-button--text {
|
|
|
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>
|