添加首页报表，下载
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