添加首页报表，下载
fanluyan
2 years ago
parent
cd0069339a
commit
8589e39db5
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
title="历史图片"
|
||||||
|
:visible.sync="isShow"
|
||||||
|
class="historyPic"
|
||||||
|
width="1192px"
|
||||||
|
@close="handleclose"
|
||||||
|
>
|
||||||
|
<div v-loading="loadingpic">
|
||||||
|
<el-carousel
|
||||||
|
:loop="false"
|
||||||
|
:autoplay="false"
|
||||||
|
height="650px"
|
||||||
|
indicator-position="none"
|
||||||
|
>
|
||||||
|
<el-carousel-item v-for="(item, index) in imglist" :key="index">
|
||||||
|
<el-image
|
||||||
|
:src="item.path"
|
||||||
|
fit="contain"
|
||||||
|
v-if="item.mediaType == 0"
|
||||||
|
></el-image>
|
||||||
|
<el-image
|
||||||
|
:src="item.thumb"
|
||||||
|
fit="contain"
|
||||||
|
v-if="item.mediaType == 1"
|
||||||
|
></el-image>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getHistoryList } from "@/utils/api/index";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow: false,
|
||||||
|
imglist: [],
|
||||||
|
page: 1, // 当前页数
|
||||||
|
pageSize: 10, // 每页数量
|
||||||
|
total: 0, //总条数
|
||||||
|
selectnr: "", //获取当前数据内容
|
||||||
|
loadingpic: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
//获取图片数据
|
||||||
|
getdataform(val) {
|
||||||
|
this.selectnr = val;
|
||||||
|
this.loadingpic = true;
|
||||||
|
getHistoryList({
|
||||||
|
channelId: this.selectnr.channelId,
|
||||||
|
termId: this.selectnr.termId,
|
||||||
|
pageindex: this.page,
|
||||||
|
pagesize: this.pageSize,
|
||||||
|
}).then((res) => {
|
||||||
|
this.loadingpic = false;
|
||||||
|
this.imglist = res.data.list;
|
||||||
|
this.total = res.data.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//下一页
|
||||||
|
changebtn(e) {
|
||||||
|
console.log(e);
|
||||||
|
if (Math.floor(e / 9) == 1) {
|
||||||
|
this.page++;
|
||||||
|
getHistoryList({
|
||||||
|
channelId: this.selectnr.channelId,
|
||||||
|
termId: this.selectnr.termId,
|
||||||
|
pageindex: this.page,
|
||||||
|
pagesize: this.pageSize,
|
||||||
|
}).then((res) => {
|
||||||
|
this.imglist.push(res.data.list);
|
||||||
|
this.total = res.data.total;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
display() {
|
||||||
|
this.isShow = true;
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
this.isShow = false;
|
||||||
|
this.imglist = [];
|
||||||
|
},
|
||||||
|
handleclose() {
|
||||||
|
this.isShow = false;
|
||||||
|
this.imglist = [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.historyPic {
|
||||||
|
.el-image {
|
||||||
|
width: 1152px;
|
||||||
|
height: 648px;
|
||||||
|
img {
|
||||||
|
width: 1152px;
|
||||||
|
height: 648px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-carousel__arrow {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
color: #169e8c;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,216 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="parameterArea">
|
|
||||||
<div class="timeBox"></div>
|
|
||||||
<div class="monitorItemBox">
|
|
||||||
<h3>检测项</h3>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
v-for="(item, index) in MonitorItem"
|
|
||||||
:key="index"
|
|
||||||
icon="el-icon-thumb"
|
|
||||||
>{{ item.name }}</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="monitorPointBox">
|
|
||||||
<h3>监拍点</h3>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
v-for="(item, index) in MonitorPoint"
|
|
||||||
:key="index"
|
|
||||||
icon="el-icon-thumb"
|
|
||||||
>{{ item.name }}</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="actionItem">
|
|
||||||
<h3>操作项</h3>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
v-for="(item, index) in actionItem"
|
|
||||||
:key="index"
|
|
||||||
icon="el-icon-thumb"
|
|
||||||
>{{ item.name }}</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="configItem">
|
|
||||||
<h3>配置项</h3>
|
|
||||||
<div class="btnBox">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
v-for="(item, index) in configItem"
|
|
||||||
:key="index"
|
|
||||||
icon="el-icon-thumb"
|
|
||||||
>{{ item.name }}</el-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
//检测项
|
|
||||||
MonitorItem: [
|
|
||||||
{
|
|
||||||
name: "图片视频",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "测温",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "微气象",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "倾斜监测",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "风偏监测",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "覆冰检测",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "实时视频",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "弧垂",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "电压检测",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
//监拍点
|
|
||||||
MonitorPoint: [
|
|
||||||
{
|
|
||||||
name: "小号侧",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "大号侧",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
//操作项
|
|
||||||
actionItem: [
|
|
||||||
{
|
|
||||||
name: "主动拍照",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "主动录像",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "声光报警",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "图片调阅",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "微信推送",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "历史图片",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "线缆绘制",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "清除绘制",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "主动巡检",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "指令集",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "开启雨刮",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "喊话",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "上一设备",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "下一设备",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "返回",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "历史对比",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "图片标记",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "主动巡航",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
//配置项
|
|
||||||
configItem: [
|
|
||||||
{
|
|
||||||
name: "设置分组",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "隐患类型",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "地图查看",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "监拍点信息",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "告警级别",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "设备信息",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "设置漏告",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
// .parameterArea {
|
|
||||||
// width: 300px;
|
|
||||||
// padding: 16px 8px;
|
|
||||||
// .monitorItemBox,
|
|
||||||
// .monitorPointBox,
|
|
||||||
// .actionItem,
|
|
||||||
// .configItem {
|
|
||||||
// border: 1px solid @border-color-base;
|
|
||||||
// padding: 8px 16px 8px 16px;
|
|
||||||
// margin-bottom: 32px;
|
|
||||||
// h3 {
|
|
||||||
// font-size: 16px;
|
|
||||||
// margin-bottom: 8px;
|
|
||||||
// background: transparent;
|
|
||||||
// color: @color-text-regular;
|
|
||||||
// }
|
|
||||||
// .btnBox {
|
|
||||||
// display: flex;
|
|
||||||
// flex-wrap: wrap;
|
|
||||||
// justify-content: space-between;
|
|
||||||
// .el-button {
|
|
||||||
// width: 84px;
|
|
||||||
// padding: 6px 0px;
|
|
||||||
// font-size: 12px;
|
|
||||||
// margin-bottom: 8px;
|
|
||||||
// }
|
|
||||||
// .el-button + .el-button {
|
|
||||||
// margin-left: 0px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue