You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
562 lines
16 KiB
Vue
562 lines
16 KiB
Vue
<template>
|
|
<div class="realTimeSearch">
|
|
<div class="searchMain">
|
|
<div class="searchBox" ref="searchref">
|
|
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
|
<el-form-item label="电压等级">
|
|
<el-select v-model="formdata.dyid" @change="getSearchxl">
|
|
<el-option
|
|
v-for="item in dyOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
{{ item.name }}
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="线路名称">
|
|
<el-select
|
|
v-model="formdata.lineid"
|
|
@change="getSearchgt"
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="item in xlOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="杆塔名称">
|
|
<el-select
|
|
v-model="formdata.towerid"
|
|
@change="getSearchzz"
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="item in gtOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="装置名称">
|
|
<el-select
|
|
v-model="formdata.termid"
|
|
@change="getSearchtd"
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="item in zzOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="通道">
|
|
<el-select v-model="formdata.channelid">
|
|
<el-option
|
|
v-for="item in tdOptions"
|
|
:key="item.id"
|
|
:label="
|
|
item.alias !== null && item.alias !== ''
|
|
? item.alias
|
|
: item.name
|
|
"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="开始日期">
|
|
<el-date-picker
|
|
v-model="formdata.starttime"
|
|
type="datetime"
|
|
placeholder="开始日期"
|
|
value-format="timestamp"
|
|
:picker-options="pickerOptions"
|
|
default-time="00:00:00"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="结束日期">
|
|
<el-date-picker
|
|
v-model="formdata.endtime"
|
|
type="datetime"
|
|
default-time="23:59:59"
|
|
placeholder="结束日期"
|
|
value-format="timestamp"
|
|
:picker-options="pickerOptions"
|
|
class="ml10"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="formdata.search"
|
|
placeholder="请输入线路/杆塔/设备名称"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="pictureBox" v-loading="loading">
|
|
<div
|
|
v-if="picList.length !== 0"
|
|
style="width: 100%"
|
|
v-loading="loading"
|
|
>
|
|
<el-card
|
|
class="box-card imgList"
|
|
v-for="(item, index) in picList"
|
|
:key="index"
|
|
>
|
|
<div class="bigpic" v-if="item.path.indexOf('videos') == -1">
|
|
<el-image
|
|
lazy
|
|
:src="item.path + '!1366x768'"
|
|
:preview-src-list="[item.path]"
|
|
>
|
|
<template slot="error">
|
|
<img src="../../assets/img/nodatapic2.jpg" />
|
|
</template>
|
|
</el-image>
|
|
<div class="caption">
|
|
<p class="infoTop">
|
|
{{ item.linename }} /
|
|
{{
|
|
item.displayname !== null && item.displayname !== ""
|
|
? item.displayname
|
|
: item.cmdid
|
|
}}
|
|
</p>
|
|
<p class="infoBottom">
|
|
拍照时间：{{ $moment(item.photoTime).format("MM-DD HH:mm") }}
|
|
/
|
|
{{
|
|
item.alias !== null && item.alias !== ""
|
|
? item.alias
|
|
: item.channnelname
|
|
}}
|
|
</p>
|
|
</div>
|
|
<div class="deleteBox">
|
|
<el-button
|
|
title="删除照片"
|
|
type="primary"
|
|
icon="el-icon-delete"
|
|
@click.stop="deletePic(item)"
|
|
></el-button>
|
|
</div>
|
|
</div>
|
|
<div class="bigpic" v-else>
|
|
<!-- <el-image :src="item.path" lazy></el-image> -->
|
|
<video
|
|
width="100%"
|
|
height="250px"
|
|
:src="item.path"
|
|
controls="controls"
|
|
></video>
|
|
<div class="caption">
|
|
<p class="infoTop">
|
|
{{ item.linename }} /
|
|
{{
|
|
item.displayname !== null && item.displayname !== ""
|
|
? item.displayname
|
|
: item.cmdid
|
|
}}
|
|
</p>
|
|
<p class="infoBottom">
|
|
拍照时间：{{ $moment(item.photoTime).format("MM-DD HH:mm") }}
|
|
/
|
|
{{
|
|
item.alias !== null && item.alias !== ""
|
|
? item.alias
|
|
: item.channnelname
|
|
}}
|
|
<!-- 上传时间：{{
|
|
$moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
|
|
}} -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="noPicBox" v-else>
|
|
<el-empty description="暂无图片"></el-empty>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pageNation" v-if="picList.length !== 0">
|
|
<el-pagination
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getSearchInfo,
|
|
getRealtimePhoto,
|
|
deletePicList,
|
|
} from "@/utils/api/index";
|
|
import defaultImage from "../../assets/img/nodatapic2.jpg";
|
|
export default {
|
|
name: "realTimeSearch",
|
|
data() {
|
|
return {
|
|
pickerOptions: {
|
|
disabledDate(date) {
|
|
return date.getTime() > Date.now(); // 禁用大于今天的日期
|
|
},
|
|
},
|
|
|
|
picList: [],
|
|
dyOptions: [{ id: -1, name: "全部" }], //电压数据
|
|
xlOptions: [{ id: -1, name: "全部" }], //线路数据
|
|
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
|
|
zzOptions: [{ id: -1, name: "全部" }], //装置数据
|
|
tdOptions: [{ id: -1, name: "全部", alias: null }], //通道数据
|
|
formdata: {
|
|
dyid: -1,
|
|
lineid: -1,
|
|
towerid: -1,
|
|
channelid: -1,
|
|
termid: -1,
|
|
search: "",
|
|
},
|
|
|
|
page: 1, // 当前页数
|
|
pageSize: 20, // 每页数量
|
|
total: 0, //总条数
|
|
loading: false,
|
|
signtype: 0, //0第一次查询
|
|
};
|
|
},
|
|
created() {
|
|
var that = this;
|
|
document.onkeydown = function (e) {
|
|
var key = window.event.keyCode;
|
|
if (key === 13) {
|
|
that.onSubmit(); // 触发事件
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$set(this.formdata, "endtime", new Date().getTime());
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.$set(
|
|
this.formdata,
|
|
"starttime",
|
|
new Date(new Date().toLocaleDateString()).getTime()
|
|
);
|
|
this.getSearchdy();
|
|
} else {
|
|
this.getSearchdy();
|
|
this.formdata.dyid = this.$route.query.dyId;
|
|
this.formdata.lineid = this.$route.query.lineId;
|
|
this.formdata.towerid = this.$route.query.towerId;
|
|
this.formdata.channelid = this.$route.query.channelId;
|
|
this.formdata.termid = this.$route.query.termId;
|
|
this.$set(this.formdata, "starttime", this.$route.query.date);
|
|
}
|
|
},
|
|
methods: {
|
|
setDefaultImage(e) {
|
|
e.target.src = defaultImage;
|
|
},
|
|
//获取电压信息
|
|
getSearchdy() {
|
|
getSearchInfo({ type: 1 })
|
|
.then((res) => {
|
|
this.dyOptions = this.dyOptions.concat(res.data.list);
|
|
console.log(this.dyOptions);
|
|
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.formdata.dyid = this.dyOptions[0].id;
|
|
} else {
|
|
this.formdata.dyid = Number(this.$route.query.dyId);
|
|
}
|
|
this.getSearchxl();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取线路数据
|
|
getSearchxl() {
|
|
getSearchInfo({ type: 2, id: this.formdata.dyid })
|
|
.then((res) => {
|
|
this.xlOptions = [{ id: -1, name: "全部" }];
|
|
this.xlOptions = this.xlOptions.concat(res.data.list);
|
|
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.formdata.lineid = this.xlOptions[0].id;
|
|
} else {
|
|
this.formdata.lineid = Number(this.$route.query.lineId);
|
|
}
|
|
|
|
this.getSearchgt();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取杆塔数据
|
|
getSearchgt() {
|
|
getSearchInfo({ type: 3, id: this.formdata.lineid })
|
|
.then((res) => {
|
|
this.gtOptions = [{ id: -1, name: "全部" }];
|
|
this.gtOptions = this.gtOptions.concat(res.data.list);
|
|
// this.formdata.towerid = this.gtOptions[0].id;
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.formdata.towerid = this.gtOptions[0].id;
|
|
} else {
|
|
this.formdata.towerid = Number(this.$route.query.towerId);
|
|
}
|
|
|
|
this.getSearchzz();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取装置数据
|
|
getSearchzz() {
|
|
getSearchInfo({ type: 4, id: this.formdata.towerid })
|
|
.then((res) => {
|
|
this.zzOptions = [{ id: -1, name: "全部" }];
|
|
this.zzOptions = this.zzOptions.concat(res.data.list);
|
|
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.formdata.termid = this.zzOptions[0].id;
|
|
} else {
|
|
this.formdata.termid = Number(this.$route.query.termId);
|
|
}
|
|
|
|
this.getSearchtd();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取通道数据
|
|
getSearchtd() {
|
|
getSearchInfo({ type: 5, id: this.formdata.termid })
|
|
.then((res) => {
|
|
this.tdOptions = [{ id: -1, name: "全部", alias: null }];
|
|
this.tdOptions = this.tdOptions.concat(res.data.list);
|
|
|
|
if (JSON.stringify(this.$route.query) === "{}") {
|
|
this.formdata.channelid = this.tdOptions[0].id;
|
|
} else {
|
|
this.formdata.channelid = Number(this.$route.query.channelId);
|
|
}
|
|
|
|
this.getPicData();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取图片列表
|
|
getPicData() {
|
|
this.loading = true;
|
|
this.$set(this.formdata, "pageindex", this.page);
|
|
this.$set(this.formdata, "pagesize", this.pageSize);
|
|
|
|
getRealtimePhoto(this.formdata)
|
|
.then((res) => {
|
|
this.picList = [];
|
|
this.picList = res.data.list;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
})
|
|
.catch((err) => {
|
|
this.loading = false;
|
|
console.log(err);
|
|
});
|
|
},
|
|
//查询
|
|
onSubmit() {
|
|
if (this.formdata.starttime > this.formdata.endtime) {
|
|
return this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
message: "开始日期不能大于结束日期",
|
|
type: "warning",
|
|
});
|
|
}
|
|
this.page = 1;
|
|
this.getPicData();
|
|
},
|
|
|
|
//点击分页
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.picList = [];
|
|
this.getPicData();
|
|
},
|
|
//每页条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.getPicData();
|
|
},
|
|
deletePic(val) {
|
|
console.log(val);
|
|
let deleteArr = [];
|
|
deleteArr.push(val.picid);
|
|
console.log(deleteArr);
|
|
deletePicList({ list: deleteArr })
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.$confirm("此操作将永久删除该图片, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.$message({
|
|
type: "success",
|
|
showClose: true,
|
|
message: "删除成功!",
|
|
});
|
|
this.getPicData();
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
showClose: true,
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.realTimeSearch {
|
|
width: calc(100% - 24px);
|
|
height: calc(100% - 24px);
|
|
padding: 12px 12px;
|
|
background: #fff;
|
|
.searchMain {
|
|
border: 1px solid #dddddd;
|
|
height: calc(100% - 22px);
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.pictureBox {
|
|
display: flex;
|
|
// justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
height: calc(100% - 135px);
|
|
max-height: calc(100% - 135px);
|
|
overflow: auto;
|
|
border: 1px solid #eee;
|
|
|
|
.imgList {
|
|
width: calc((100% - 104px) / 4);
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 8px;
|
|
position: relative;
|
|
padding: 4px;
|
|
border-radius: 3px;
|
|
background: #fff;
|
|
height: 200px;
|
|
|
|
.el-card__body {
|
|
padding: 0px;
|
|
height: 100%;
|
|
}
|
|
.bigpic {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
img {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 200px;
|
|
}
|
|
}
|
|
&:hover {
|
|
.deleteBox {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.caption {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
background: #169e8ca1;
|
|
width: calc(100% - 8px);
|
|
padding: 4px;
|
|
color: #333;
|
|
.infoTop {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
margin-top: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
.infoBottom {
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
margin-top: 6px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
.deleteBox {
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 4px;
|
|
z-index: 2;
|
|
display: none;
|
|
.el-button {
|
|
width: auto;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid transparent;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
padding: 3px;
|
|
}
|
|
&:hover {
|
|
.el-button {
|
|
background: #f56c6c;
|
|
//color: #f56c6c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.noPicBox {
|
|
display: flex;
|
|
width: 100%;
|
|
height: calc(100% - 86px);
|
|
overflow: auto;
|
|
.el-empty {
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|