自动拍照

master
fanluyan 2 years ago
parent 00dbfeebd5
commit 36b9dab83f

@ -60,7 +60,7 @@ Vue.directive("debounce", {
}
timer = setTimeout(() => {
binding.value();
}, 2000);
}, 500);
});
},
});

@ -3,8 +3,10 @@
<div class="picTop">
<viewer
class="bigimg"
:style="{ backgroundImage: 'url(' + bigPicPath + '!180x160)' }"
v-if="bigPicPath.indexOf('nopic') == -1"
v-if="
bigPicPath.indexOf('nopic') == -1 &&
bigPicPath.indexOf('videos') == -1
"
>
<img class="animImg" :src="bigPicPath + '!1280x720'" />
<!-- <p class="mark">
@ -12,6 +14,14 @@
<span>{{ this.activeSmall }}</span>
</p> -->
</viewer>
<div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
<video
width="100%"
height="100%"
:src="bigPicPath"
controls="controls"
></video>
</div>
<div class="bigimg" v-else>
<img class="animImg" :src="bigPicPath" />
</div>
@ -33,7 +43,13 @@
@click="handleBigpic(item, index)"
:class="activeSmall === index ? 'borderActive' : ''"
>
<div class="smallhavePic" v-if="item.path.indexOf('nopic') == -1">
<div
class="smallhavePic"
v-if="
item.path.indexOf('nopic') == -1 &&
item.path.indexOf('videos') == -1
"
>
<img :src="item.path + '!260x160'" />
<p class="timeInfo">
<el-tooltip
@ -58,6 +74,17 @@
<span>--通道{{ item.channelId }}</span>
</p>
</div>
<div
class="smallnoPic"
v-else-if="item.path.indexOf('videos') !== -1"
>
<video
width="100%"
height="100%"
:src="item.path"
controls="controls"
></video>
</div>
<div class="smallnoPic" v-else>
<img :src="item.path" />
</div>
@ -108,6 +135,14 @@ export default {
this.bigPicPath = this.terminalPhoto[0].path;
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
console.log("this.bigPicPath");
},
watch: {
terminalPhoto: function (newVal, oldVal) {
this.bigPicPath = this.terminalPhoto[0].path;
this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
this.total = this.terminalPhoto.length / this.pagesize;
},
},
methods: {
@ -180,7 +215,7 @@ export default {
width: 100%;
display: flex;
flex-direction: column;
height: calc(100% - 24px);
height: calc(100% - 0px);
box-sizing: border-box;
.picTop {
width: 100%;
@ -250,7 +285,7 @@ export default {
}
.picBottom {
width: 100%;
height: 18%;
height: 20%;
position: relative;
.smallPicBox {
width: 100%;

@ -4,14 +4,27 @@
title="设置"
:visible.sync="isShow"
:close-on-click-modal="false"
width="720px"
width="1020px"
>
<div class="setTimeTd">
<h3>时间表规则</h3>
<el-descriptions title="" :column="3" border v-for="( val,index ) in ruleSchedule" :key="index" >
<el-descriptions-item label="开始时间">{{ val.startTime }}</el-descriptions-item>
<el-descriptions-item label="结束时间">{{ val.endTime }}</el-descriptions-item>
<el-descriptions-item label="时间间隔(分)">
<el-descriptions
title=""
:column="3"
border
v-for="(val, index) in ruleSchedule"
:key="index"
>
<el-descriptions-item label="开始时间">{{
val.startTime
}}</el-descriptions-item>
<el-descriptions-item label="结束时间">{{
val.endTime
}}</el-descriptions-item>
<el-descriptions-item
label="时间间隔(分)"
:contentStyle="contentStyle"
>
<el-tag size="small">{{ val.span }}</el-tag>
</el-descriptions-item>
</el-descriptions>
@ -19,13 +32,28 @@
<div class="chooseTDBox">
<label>选择通道:</label>
<div class="checkBox">
<el-checkbox-group v-model="checkedAisle" @change="handleChange">
<el-checkbox :label="val.id" border v-for=" val in aisleList" :key="val.id">{{ val.name }}</el-checkbox>
</el-checkbox-group>
<!-- <el-checkbox-group v-model="checkedAisle" @change="handleChange">
<el-checkbox
:label="val.id"
border
v-for="val in aisleList"
:key="val.id"
>{{ val.name }}</el-checkbox
>
</el-checkbox-group> -->
<el-radio-group v-model="checkedAisle" @change="handleChange">
<el-radio
:label="val.id"
border
v-for="val in aisleList"
:key="val.id"
>{{ val.name }}</el-radio
>
</el-radio-group>
</div>
</div>
<div class="flexnr">
<div class="w50">通道:</div>
<!-- <div class="w50">通道:</div>
<el-tree
:data="listnr"
show-checkbox
@ -33,7 +61,7 @@
ref="tree"
node-key="id"
:default-expand-all="true"
></el-tree>
></el-tree> -->
</div>
</div>
<div slot="footer" class="dialog-footer">
@ -54,12 +82,13 @@ export default {
},
data() {
return {
contentStyle: { width: "90px" },
isShow: false,
selid: 0,//id
ruleSchedule:[],//
checkedAisle: [],//
aisleList:[],//
listnr: [],//
selid: 0, //id
ruleSchedule: [], //
checkedAisle: "", //
aisleList: [], //
listnr: [], //
defaultProps: {
children: "list",
label: "name",
@ -110,7 +139,8 @@ export default {
},
],
multipleSelection: [],
//
newzzList: [],
};
},
mounted() {},
@ -118,7 +148,8 @@ export default {
//
getdataform(val) {
this.selid = val.id;
this.ruleSchedule = val.list
this.ruleSchedule = val.list;
console.log(this.ruleSchedule, "时间规则");
this.getlistnr();
},
//
@ -131,25 +162,30 @@ export default {
.catch((err) => {});
},
//
handleChange(){
console.log(this.listnr)
console.log(this.checkedAisle)
handleChange() {
console.log(this.listnr);
console.log(this.checkedAisle);
this.newzzList = this.listnr.filter((item) => {
console.log(item);
});
console.log(this.newzzList);
this.$refs.tree.setCheckedKeys(this.checkedAisle);
},
//
eachTreeData(data, callback, childKey){
if (!childKey) childKey = 'children';
data.forEach(d => {
if (callback(d) !== false && d[childKey]) this.eachTreeData(d[childKey], callback, childKey);
})
eachTreeData(data, callback, childKey) {
if (!childKey) childKey = "children";
data.forEach((d) => {
if (callback(d) !== false && d[childKey])
this.eachTreeData(d[childKey], callback, childKey);
});
},
// keykey
addKeyToList(data){
addKeyToList(data) {
let key = 0;
this.eachTreeData(data, (d) => {
d.key = key++
})
d.key = key++;
});
},
//
getCheckedNodes() {

@ -45,21 +45,7 @@
</ul>
</template>
</el-table-column>
<!-- <el-table-column
prop="startTime"
label="开始时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="endTime"
label="结束时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="span"
label="间隔(分)"
show-overflow-tooltip
></el-table-column> -->
<el-table-column
prop="remark"
label="备注"

@ -22,7 +22,7 @@
</div>
<div class="flexno bt30">
<div class="w8">时间表:</div>
<div class="w80 flexonly">
<div class="w80 flexonly" v-if="this.shedulenr.length !== 0">
<el-tag
class="mr10 mt10"
size="mini"
@ -31,6 +31,7 @@
>{{ val }}</el-tag
>
</div>
<div class="w80 flexonly" v-else></div>
</div>
</el-tab-pane>
<el-tab-pane label="设置时间表" name="2">
@ -65,24 +66,7 @@
</ul>
</template>
</el-table-column>
<!-- <el-table-column label="时间表类型" show-overflow-tooltip>
<template>时间表类型</template>
</el-table-column>
<el-table-column
prop="startTime"
label="开始时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="endTime"
label="结束时间"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="span"
label="间隔(分)"
show-overflow-tooltip
></el-table-column> -->
<el-table-column
prop="remark"
label="备注"
@ -116,37 +100,20 @@
width="680px"
append-to-body
>
<!-- <el-form
label-position="left"
ref="formInfo"
label-width="100px"
v-loading="loading"
>
<el-form-item label="通道:">
<el-tree
:data="listnr"
show-checkbox
:props="defaultProps"
ref="tree"
node-key="id"
:default-expand-all="true"
></el-tree>
</el-form-item>
</el-form> -->
<div class="setTimeTd">
<div class="tdSetBox">
<!--<h3>装置信息</h3>
<h3>装置信息</h3>
<el-descriptions title="" :column="3" border>
<el-descriptions-item label="电压等级"
>220kV</el-descriptions-item
>
<el-descriptions-item label="电压等级">{{
deviceListData.dyname
}}</el-descriptions-item>
<el-descriptions-item label="线路名称">
线路</el-descriptions-item
{{ deviceListData.xlname }}</el-descriptions-item
>
<el-descriptions-item label="装置名称">
XYIGQ10C230300104</el-descriptions-item
>
</el-descriptions> -->
{{ deviceListData.zzname }}
</el-descriptions-item>
</el-descriptions>
<h3>时间表规则</h3>
<p class="timename">时间表名称{{ timeName }}</p>
<el-descriptions
@ -169,42 +136,21 @@
<h3>选择通道</h3>
<div class="checkBox">
<!-- <el-checkbox-group v-model="checkList">
<el-checkbox label="通道1" border></el-checkbox>
<el-checkbox label="通道2" border></el-checkbox>
</el-checkbox-group> -->
<!-- <el-checkbox-group v-model="checkList" @change="handleChange">
<el-checkbox-group v-model="checkList" @change="handleChange">
<el-checkbox
:label="val.channelid"
:label="val.id"
border
v-for="val in accesslist"
:key="val.channelid"
>{{ val.channelname }}</el-checkbox
v-for="val in zzchannel"
:key="val.id"
>{{ val.name }}</el-checkbox
>
</el-checkbox-group> -->
<el-form
label-position="left"
ref="formInfo"
label-width="100px"
v-loading="loading"
>
<el-form-item label="通道:">
<el-tree
:data="listnr"
show-checkbox
:props="defaultProps"
ref="tree"
node-key="id"
:default-expand-all="true"
></el-tree>
</el-form-item>
</el-form>
</el-checkbox-group>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="isShowset = false"> </el-button>
<el-button type="primary" @click="submitForm()"> </el-button>
<el-button type="primary" v-debounce="submitForm"> </el-button>
</div>
</el-dialog>
</el-tab-pane>
@ -245,11 +191,14 @@ export default {
ruleid: "", //线id
parmsList: [], //
scheduleid: 0, //id
checkList: [],
//-
timeName: "",
scheduleInfo: [],
//
deviceListData: {}, //
zzchannel: [], //
checkList: [], //
};
},
mounted() {},
@ -265,6 +214,7 @@ export default {
this.accesslist = res.data.list;
console.log(this.accesslist);
this.selaccess = res.data.list[0].channelid;
this.inquirebtn();
})
.catch((err) => {});
},
@ -311,13 +261,24 @@ export default {
console.log(val);
this.scheduleInfo = val.list;
this.timeName = val.name;
getScheduleRulelAccessList({ termid: this.selfacilityId })
.then((res) => {
this.listnr = res.data.list;
console.log("1111111111111111111");
console.log(this.listnr);
this.loading = false;
this.deviceListData = {
dyname: this.listnr[0].name,
dyid: this.listnr[0].id,
xlname: this.listnr[0].list[0].name,
xlid: this.listnr[0].list[0].id,
zzname: this.listnr[0].list[0].list[0].name,
zzcmid: this.listnr[0].list[0].list[0].cmdid,
zzid: this.listnr[0].list[0].list[0].id,
};
this.zzchannel = this.listnr[0].list[0].list[0].list;
console.log(this.deviceListData);
console.log(this.zzchannel);
this.this.loading = false;
})
.catch((err) => {});
},
@ -370,18 +331,45 @@ export default {
},
//
submitForm() {
this.getCheckedNodes();
if (this.parmsList.length == 0)
return this.$message.error("通道不能为空");
setScheduleRulel({ ruleid: this.scheduleid, list: this.parmsList })
.then((res) => {
this.isShowset = false;
this.$message.success("添加成功");
this.deviceList();
//this.getCheckedNodes();
console.log("111111111111111111111");
console.log(this.deviceListData);
console.log(this.checkList);
console.log(this.scheduleid);
console.log("22222222222222222");
if (this.checkList.length == 0) {
this.$message.error("请选择通道");
} else {
setScheduleRulel({
scheduleid: this.scheduleid,
list: [
{
termid: this.deviceListData.zzid,
channelidlist: this.checkList,
},
],
})
.catch((err) => {
this.$message.error("添加失败");
});
.then((res) => {
this.isShowset = false;
this.$message.success("添加成功");
this.deviceList();
})
.catch((err) => {
this.$message.error("添加失败");
});
}
// if (this.parmsList.length == 0)
// return this.$message.error("");
// setScheduleRulel({ ruleid: this.scheduleid, list: this.parmsList })
// .then((res) => {
// this.isShowset = false;
// this.$message.success("");
// this.deviceList();
// })
// .catch((err) => {
// this.$message.error("");
// });
},
display() {
this.isShow = true;
@ -404,6 +392,7 @@ export default {
.flexonly {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.flexno {
display: flex;

@ -38,9 +38,9 @@
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto.length > 0"
></carouselChart>
<div class="totalPic" v-if="totalPic !== 0">
<!-- <div class="totalPic" v-if="totalPic !== 0">
图片总数{{ totalPic }}
</div>
</div> -->
</div>
<div class="parameterArea">
<div class="paramsDate">
@ -79,9 +79,33 @@
<el-button type="primary" @click.native.stop="handleSetSchedule()"
>时间表设置</el-button
>
<el-button type="primary" v-debounce="handleShowPic"
<!-- <el-button type="primary" v-debounce="handleShowPic"
>手动拍照</el-button
>
> -->
<el-dropdown @command="handleCommandpic">
<el-button type="primary">
手动拍照<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
:command="item.value"
v-for="(item, index) in channelOption"
>{{ item.label }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown @command="handleCommandvideo">
<el-button type="primary">
手动拍视频<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
:command="item.value"
v-for="(item, index) in channelOption"
>{{ item.label }}</el-dropdown-item
>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button type="primary" @click="handleShowPic"
>手动拍视频</el-button
@ -277,11 +301,23 @@ export default {
console.log(this.channelValue);
// console.log(JSON.parse(JSON.stringify(this.channelValue)));
// this.channelValue = JSON.parse(JSON.stringify(this.channelValue));
this.getTerminalPhotoList(
this.channelValue,
this.dateValue,
this.channelList[0].termId
); // id termid
console.log(this.channelOption.length);
if (this.channelOption.length == 0) {
console.log("没有绑定通道");
this.terminalPhoto = [
{
path: this.nopicPath,
},
];
console.log(this.terminalPhoto);
return;
} else {
this.getTerminalPhotoList(
this.channelValue,
this.dateValue,
this.channelList[0].termId
); // id termid
}
})
.catch((err) => {
console.log(err); //
@ -399,12 +435,11 @@ export default {
});
},
//
handleShowPic() {
console.log(this.channelValue[0]);
console.log(this.cmdid);
handleCommandpic(command) {
console.log(command);
getLatestPhotoJoggle({
captureType: 0,
channel: this.channelValue[0],
channel: command,
cmdid: this.cmdid,
preset: 255,
})
@ -421,12 +456,69 @@ export default {
this.timer = window.setInterval(() => {
this.newPicApi();
this.i++;
}, 10000);
}, 5000);
})
.catch((err) => {
console.log(err); //
});
},
//
handleCommandvideo(command) {
console.log(command);
getLatestPhotoJoggle({
captureType: 1,
channel: command,
cmdid: this.cmdid,
preset: 255,
})
.then((res) => {
this.$message({
message: "自动拍视频请求成功!",
type: "success",
});
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); //
});
},
//
// handleShowPic() {
// console.log(this.channelValue[0]);
// console.log(this.cmdid);
// getLatestPhotoJoggle({
// captureType: 0,
// channel: this.channelValue[0],
// cmdid: this.cmdid,
// preset: 255,
// })
// .then((res) => {
// this.$message({
// message: "",
// type: "success",
// });
// 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); //
// });
// },
//
newPicApi() {
getReturnedPhotoJoggle({
@ -452,7 +544,7 @@ export default {
clearInterval(this.timer);
this.timer = null;
this.$message({
message: "自动拍照暂无响应,请稍后再试!",
message: "装置暂无响应,请稍后再试!",
type: "warning",
});
}
@ -489,8 +581,8 @@ export default {
<style lang="less">
.monitorBox {
width: calc(100% - 0px);
height: calc(100% - 32px);
padding: 16px 0px 8px 0px;
height: calc(100% - 16px);
padding: 16px 0px 0px 0px;
background: #ffffff;
.monitor-container {
display: flex;

Loading…
Cancel
Save