Big-Data-Lab
/
report-ui
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏

This commit is contained in:
hh 2024-03-05 17:55:40 +08:00
parent 283a00e305
commit 367ada1f7a
2 changed files with 85 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/bigScreenReport/components/addReportPage.vue
View File

@ -1,17 +1,17 @@
<template>
<el-dialog title="新增大屏" :visible.sync="dialogVisible" width="30%" @close="close">
<el-dialog :title="FormTitle" :visible.sync="dialogVisible" width="30%" @close="close">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="form">
<el-row :gutter="20" style="margin-top: 40px;margin-bottom: 60px;">
<el-col :span="24" style="margin-bottom: 40px;">
<el-col :span="24" style="margin-top: 40px;">
<el-form-item label="大屏名称" prop="reportName">
<el-input v-model="ruleForm.reportName" placeholder="请输入大屏名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<!-- <el-col :span="24">
<el-form-item label="大屏编码" prop="reportCode">
<el-input v-model="ruleForm.reportCode" placeholder="请输入唯一编码" />
</el-form-item>
</el-col>
</el-col> -->
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
@ -22,9 +22,24 @@
</template>
<script>
import { addReport } from "@/api/report";
import { addReport, editReport } from "@/api/report";
export default {
name: 'addReportPage',
props: {
item: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
if(this.item.reportCode == undefined || this.item.reportCode == ''){
this.FormTitle = '新增大屏'
}else{
this.FormTitle = '修改大屏'
}
},
data() {
return {
newProductName: '',
@ -36,13 +51,14 @@ export default {
protocolName: '',
remark: ''
},
FormTitle: '',
rules: {
reportName: [
{ required: true, message: '请输入大屏名称', trigger: 'blur' }
],
reportCode: [
{ required: true, message: '请输入大屏编码', trigger: 'blur' }
]
// reportCode: [
// { required: true, message: '请输入大屏编码', trigger: 'blur' }
// ]
}
}
},
@ -54,24 +70,42 @@ export default {
// 提交表单
submitForm() {
this.$refs['ruleForm'].validate(valid => {
console.log(this.item.reportCode)
if (valid) {
let obj = {
reportCode: this.ruleForm.reportCode,
reportGroup: "default",
reportName: this.ruleForm.reportName,
reportType: "report_screen"
}
console.log(obj)
addReport(obj).then(res => {
if (res.code == 200) {
this.$notify({
title: '成功',
message: '新增成功!',
type: 'success'
})
this.close()
if (this.item.reportCode == undefined || this.item.reportCode == '') {
let obj = {
reportCode: Math.random().toString(36).substr(2, 9) + Date.now(),
reportGroup: "default",
reportName: this.ruleForm.reportName,
reportType: "report_screen"
}
})
console.log(1, obj)
addReport(obj).then(res => {
if (res.code == 200) {
this.$notify({
title: '成功',
message: '新增成功!',
type: 'success'
})
this.close()
}
})
}
else {
console.log(this.item.reportCode)
this.item.reportName = this.ruleForm.reportName
console.log(2, this.item)
editReport(this.item).then(res => {
if (res.code == 200) {
this.$notify({
title: '成功',
message: '修改成功!',
type: 'success'
})
this.close()
}
})
}
}
})
}
@ -96,4 +130,3 @@ export default {
padding-top: 10px;
}
</style>

41
src/views/bigScreenReport/index.vue
View File

@ -15,11 +15,6 @@
<el-input v-model="params.reportName" size="mini" clearable placeholder="名称" class="filter-item" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="20" :md="12" :lg="6" :xl="4">
<el-form-item label="报表编码">
<el-input v-model="params.reportCode" size="mini" clearable placeholder="报表编码" class="filter-item" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="20" :md="4" :lg="4" :xl="4">
<el-button type="primary" size="mini" @click="search('form')">查询</el-button>
<el-button type="danger" size="mini" @click="reset('form')">重置</el-button>
@ -27,21 +22,28 @@
</el-col>
</el-row>
</el-form>
<div class="center">
<el-row :gutter="20">
<el-col v-for="item in list" :key="item.id" :span="6">
<div class="bg">
<img class="bg-img" :src="item.reportImage == null || item.reportImage == ''
? require('@/assets/images/charts.jpg')
: item.reportImage
" alt="" />
<img class="bg-img" :src="item.reportImage == null || item.reportImage == ''
? require('@/assets/images/charts.jpg')
: item.reportImage
" alt="" />
<div class="content">
<header>{{ item.reportName }}</header>
<header>
{{ item.reportName }}
</header>
<div style="text-align: center;">
<el-button icon="el-icon-edit-outline" @click="addReport(item)" style="font-size: 15px;color:white;"
type="text">修改</el-button>
</div>
<footer>
<div class="operation">
<el-button icon="el-icon-delete" class="delete" type="text" @click="deleteReport(item)" />
<el-button icon="el-icon-view" class="view" type="text" @click="viewDesign(item)" />
<el-button icon="el-icon-edit" class="edit" type="text" @click="openDesign(item)" />
<el-button icon="el-icon-delete" class="delete" type="text" @click="deleteReport(item)">删除</el-button>
<el-button icon="el-icon-view" class="view" type="text" @click="viewDesign(item)">查看</el-button>
<el-button icon="el-icon-edit" class="edit" type="text" @click="openDesign(item)">编辑</el-button>
</div>
</footer>
</div>
@ -54,7 +56,7 @@
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</div>
<addReportPage v-if="addVisible" @close="reportClose" />
<addReportPage v-if="addVisible" :item="currentItem" @close="reportClose" />
</div>
</template>
@ -83,6 +85,7 @@ export default {
sort: "update_time"
},
addVisible: false,
currentItem: null, // 用于保存当前的item数据
};
},
created() {
@ -102,7 +105,8 @@ export default {
});
},
// 新增
addReport() {
addReport(item) {
this.currentItem = item; // 保存当前的item数据
this.addVisible = true;
},
// 关闭表单的回调
@ -238,17 +242,17 @@ export default {
header {
font-size: 32px;
text-align: center;
line-height: 80px;
margin-top: 40px;
}
.center {
margin-top: 20px;
margin-top: 10px;
min-height: 400px;
height: 100%;
.bg {
width: 100%;
height: 300px;
height: 250px;
position: relative;
overflow: hidden;
margin: 10px 0;
@ -259,6 +263,7 @@ export default {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
filter: blur(6px);
z-index: 2;
}