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

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

@ -1,17 +1,17 @@
<template> <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-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="form">
<el-row :gutter="20" style="margin-top: 40px;margin-bottom: 60px;"> <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-form-item label="大屏名称" prop="reportName">
<el-input v-model="ruleForm.reportName" placeholder="请输入大屏名称" /> <el-input v-model="ruleForm.reportName" placeholder="请输入大屏名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <!-- <el-col :span="24">
<el-form-item label="大屏编码" prop="reportCode"> <el-form-item label="大屏编码" prop="reportCode">
<el-input v-model="ruleForm.reportCode" placeholder="请输入唯一编码" /> <el-input v-model="ruleForm.reportCode" placeholder="请输入唯一编码" />
</el-form-item> </el-form-item>
</el-col> </el-col> -->
</el-row> </el-row>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -20,11 +20,26 @@
</span> </span>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import { addReport } from "@/api/report"; import { addReport, editReport } from "@/api/report";
export default { export default {
name: 'addReportPage', name: 'addReportPage',
props: {
item: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
if(this.item.reportCode == undefined || this.item.reportCode == ''){
this.FormTitle = '新增大屏'
}else{
this.FormTitle = '修改大屏'
}
},
data() { data() {
return { return {
newProductName: '', newProductName: '',
@ -36,13 +51,14 @@ export default {
protocolName: '', protocolName: '',
remark: '' remark: ''
}, },
FormTitle: '',
rules: { rules: {
reportName: [ reportName: [
{ required: true, message: '请输入大屏名称', trigger: 'blur' } { required: true, message: '请输入大屏名称', trigger: 'blur' }
], ],
reportCode: [ // reportCode: [
{ required: true, message: '请输入大屏编码', trigger: 'blur' } // { required: true, message: '请输入大屏编码', trigger: 'blur' }
] // ]
} }
} }
}, },
@ -54,31 +70,49 @@ export default {
// 提交表单 // 提交表单
submitForm() { submitForm() {
this.$refs['ruleForm'].validate(valid => { this.$refs['ruleForm'].validate(valid => {
console.log(this.item.reportCode)
if (valid) { if (valid) {
let obj = { if (this.item.reportCode == undefined || this.item.reportCode == '') {
reportCode: this.ruleForm.reportCode, let obj = {
reportGroup: "default", reportCode: Math.random().toString(36).substr(2, 9) + Date.now(),
reportName: this.ruleForm.reportName, reportGroup: "default",
reportType: "report_screen" 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()
} }
}) 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()
}
})
}
} }
}) })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/label { /deep/label {
font-weight: 500; font-weight: 500;
@ -95,5 +129,4 @@ export default {
/deep/.el-dialog__body { /deep/.el-dialog__body {
padding-top: 10px; padding-top: 10px;
} }
</style> </style>

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