自动拍照

master
fanluyan 2 years ago
parent 00dbfeebd5
commit 36b9dab83f

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

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

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

@ -45,21 +45,7 @@
</ul> </ul>
</template> </template>
</el-table-column> </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 <el-table-column
prop="remark" prop="remark"
label="备注" label="备注"

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

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

Loading…
Cancel
Save