<template>
|
<div class="sub-account">
|
<!-- <div class="add-title" @click="isShowAdd = false">
|
<span class="iconfont"></span>
|
<span>子账户管理</span>
|
</div> -->
|
<div class="head-name" style="margin-bottom:20px">自定义数据报表</div>
|
<el-form
|
:model="ruleForm"
|
:rules="rules"
|
:label-position="'left'"
|
ref="ruleForm"
|
label-width="120px"
|
class="add-ruleForm"
|
>
|
<el-form-item label="报表名称" prop="FileName">
|
<el-input
|
maxlength="15"
|
show-word-limit
|
v-model="ruleForm.FileName"
|
placeholder="请输入报表名称"
|
style="width: 350px"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="报表类型" prop="FormType">
|
<el-select @change="changeFormType" style="width: 350px" v-model="ruleForm.FormType" placeholder="请选择">
|
<el-option v-for="item in formTypeOptions" :key="item.formType" :label="item.formName" :value="item.formType">
|
</el-option>
|
</el-select>
|
<!-- <el-input v-model="ruleForm.formType" placeholder="请输入报表类型" style="width: 350px"></el-input> -->
|
</el-form-item>
|
<el-form-item label="报表字段选择" prop="titles">
|
<el-select style="width: 350px" v-model="ruleForm.titles" multiple placeholder="">
|
<el-option v-for="(item, index) in titlesOptions" :key="index" :label="item" :value="item"> </el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<!-- <div class="right">
|
<div class="button searchBtn" @click="saveUser">保存</div>
|
<div class="button resetBtn" @click="resetUser">重置</div>
|
<div class="button resetBtn" style="margin-left:20px" @click="goback">返回</div>
|
</div> -->
|
<div style="margin-left: 100px;">
|
<el-button @click="changeActive()" type="primary">生成报表</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { reportFormGetFormType, reportFormExportForm } from "@/api/area"
|
import { getClusterDevList } from "@/api/clusterManage"
|
|
export default {
|
props: {
|
activeName: String,
|
tableData: Array
|
},
|
data() {
|
return {
|
cluster_id: "",
|
titlesOptions: [],
|
formTypeOptions: [],
|
options: [],
|
value1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
ruleForm: {
|
//y
|
FileName: "",
|
FormType: "",
|
titles: []
|
},
|
rules: {
|
FileName: [{ required: true, message: "请输入报表名称", trigger: "blur" }],
|
FormType: [{ required: true, message: "请选择报表类型", trigger: "change" }],
|
titles: [{ type: "array", required: true, message: "请至少选择一个报表字段选择", trigger: "change" }]
|
// devCode: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
|
// companyCode: [{ required: true, message: "请输入企业编码", trigger: "blur" }]
|
}
|
}
|
},
|
async created() {
|
const res = await getClusterDevList()
|
console.log(res, "res")
|
// sessionStorage.setItem("clusterId", res.data.clusterList[0].cluster_id)
|
this.cluster_id = res.data.clusterList[0].cluster_id
|
// let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
|
// this.query = query
|
|
this.report()
|
// this.dataList = res.data
|
// this.total = res.total
|
},
|
mounted() {},
|
methods: {
|
submitForm(formName) {
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
alert("submit!")
|
} else {
|
console.log("error submit!!")
|
return false
|
}
|
})
|
},
|
changeFormType(val) {
|
console.log(val, "val")
|
let obj = this.formTypeOptions.find((item) => item.formType === val)
|
console.log(obj, "obj")
|
this.titlesOptions = obj.titles
|
this.ruleForm.titles = obj.titles
|
},
|
async report() {
|
let res = await reportFormGetFormType()
|
// console.log(res, "resres")
|
this.formTypeOptions = res.data.list
|
// this.ruleForm.formName = res.data.list[0].formName
|
// this.ruleForm.formType = res.data.list[0].formType
|
// this.options = res.data.list[0].titles
|
// this.ruleForm.titles = res.data.list[0].titles
|
|
// console.log(this.options, "this.options")
|
},
|
async changeActive() {
|
this.$refs["ruleForm"].validate((valid) => {
|
if (valid) {
|
// console.log(this.ruleForm.titles, "ruleForm.titles")
|
let query = {
|
ClusterId: this.cluster_id,
|
// DevId: row.id,
|
// ParentId: row.id,
|
FileName: this.ruleForm.FileName,
|
FormType: this.ruleForm.FormType,
|
Titles: this.ruleForm.titles
|
}
|
reportFormExportForm(query).then((res) => {
|
console.log(res, "res")
|
// this.$emit("update:tableData", res.data.list)
|
this.$emit("commit")
|
this.$emit("update:activeName", "formList")
|
})
|
} else {
|
console.log("error submit!!")
|
return false
|
}
|
})
|
}
|
// async fetchDevicesList(val) {
|
// this.tbLoading = true
|
// if (val === 1) {
|
// let query = { pageIndex: this.page, pageSize: this.size, keyword: this.inputText }
|
// this.query = query
|
// let res = await getDevicesList(query)
|
// this.dataList = res.data
|
// this.total = res.total
|
// } else {
|
// let res = await getDevicesList(this.query)
|
// this.dataList = res.data
|
// this.total = res.total
|
// }
|
// setTimeout(() => {
|
// this.tbLoading = false
|
// }, 200)
|
// },
|
// delUser(row) {
|
// console.log(row, "row")
|
// this.$confirm("确认要删除设备吗, 是否继续?", "提示", {
|
// confirmButtonText: "确定",
|
// cancelButtonText: "取消",
|
// type: "warning"
|
// }).then(async () => {
|
// let rsp = await devicesDelete({ id: row.id })
|
// if (rsp && rsp.success) {
|
// this.$message({
|
// type: "success",
|
// message: "删除成功!"
|
// })
|
// }
|
// this.fetchDevicesList()
|
// })
|
// },
|
// //分页功能
|
// handleSizeChange(size) {
|
// this.size = size
|
// this.fetchDevicesList(1)
|
// },
|
// //分页功能
|
// refrash(page) {
|
// this.page = page
|
// this.fetchDevicesList(1)
|
// },
|
// addDevice() {
|
// this.isShowAdd = true
|
// this.tip = 1
|
// this.resetUser()
|
// }, //y
|
// resetUser() {
|
// //devName , devId , devIp, devCode, companyCode
|
// this.ruleForm = {
|
// devName: "",
|
// devId: "",
|
// devIp: "",
|
// devCode: "",
|
// companyCode: ""
|
// }
|
// },
|
// saveUser() {
|
// this.$refs["ruleForm"].validate((valid) => {
|
// if (valid) {
|
// if (this.tip === 1) {
|
// let params = {
|
// devName: this.ruleForm.devName,
|
// devId: this.ruleForm.devId,
|
// devIp: this.ruleForm.devIp,
|
// devCode: this.ruleForm.devCode,
|
// companyCode: this.ruleForm.companyCode
|
// }
|
// // console.log(params, "params")
|
// devicesCreate(params).then((res) => {
|
// // console.log(res, "res")
|
// if (res && res.success) {
|
// // Notification({
|
// // title: "成功",
|
// // showClose: true,
|
// // message: res.data,
|
// // type: "success"
|
// // })
|
// this.$message({
|
// type: "success",
|
// message: res.data
|
// })
|
// this.goback()
|
// this.fetchDevicesList()
|
// }
|
// })
|
// } else if (this.tip === 2) {
|
// let params = {
|
// devName: this.ruleForm.devName,
|
// devId: this.ruleForm.devId,
|
// devIp: this.ruleForm.devIp,
|
// devCode: this.ruleForm.devCode,
|
// companyCode: this.ruleForm.companyCode,
|
// id: this.ruleForm.id,
|
// createdAt: this.ruleForm.createdAt,
|
// state: this.ruleForm.state,
|
// updatedAt: this.ruleForm.updatedAt
|
// }
|
// devicesUpdate(params).then((res) => {
|
// console.log(res, "res")
|
// if (res && res.success) {
|
// this.$message({
|
// type: "success",
|
// message: res.msg
|
// })
|
// this.goback()
|
// this.fetchDevicesList()
|
// }
|
// })
|
// }
|
// } else {
|
// return false
|
// }
|
// })
|
// },
|
// goback() {
|
// this.isShowAdd = false
|
// },
|
// editUser(row) {
|
// this.tip = 2
|
// this.isShowAdd = true
|
// this.ruleForm.devName = row.devName
|
// this.ruleForm.devId = row.devId
|
// this.ruleForm.devIp = row.devIp
|
// this.ruleForm.devCode = row.devCode
|
// this.ruleForm.companyCode = row.companyCode
|
// this.ruleForm.id = row.id
|
// this.ruleForm.createdAt = row.createdAt
|
// this.ruleForm.state = row.state
|
// this.ruleForm.updatedAt = row.updatedAt
|
// }
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.sub-account {
|
padding: 20px;
|
.head-name {
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22px;
|
color: #3d3d3d;
|
border-left: 4px solid #0065ff;
|
padding-left: 10px;
|
}
|
.add-title {
|
font-weight: 700;
|
font-size: 16px;
|
cursor: pointer;
|
line-height: 22px;
|
color: #3d3d3d;
|
margin-bottom: 30px;
|
.iconfont {
|
margin-right: 10px;
|
}
|
}
|
.add-ruleForm::v-deep {
|
.el-input__inner {
|
color: #3d3d3d;
|
border-radius: 4px;
|
border-color: #c0c5cc;
|
height: 32px;
|
line-height: 32px;
|
border-color: #c0c5cc;
|
}
|
.user-tree {
|
.el-form-item__label:before {
|
content: "*";
|
color: #f52323;
|
margin-right: 4px;
|
}
|
.el-form-item__content {
|
display: flex;
|
.tree-box {
|
.t {
|
height: 32px;
|
background: #f0f5fa;
|
border-radius: 3px 3px 0px 0px;
|
line-height: 32px;
|
text-align: center;
|
border-bottom: 1px solid #c0c5cc;
|
}
|
width: 336px;
|
height: 480px;
|
border: 1px solid #c0c5cc;
|
margin-right: 20px;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
.searchBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #fff;
|
background: #0065ff;
|
margin-right: 20px;
|
}
|
.right {
|
display: flex;
|
}
|
.resetBtn {
|
width: 50px;
|
height: 25px;
|
line-height: 25px;
|
font-size: 14px;
|
text-align: center;
|
color: #0065ff;
|
box-sizing: border-box;
|
border: 1px solid #0065ff;
|
}
|
.search {
|
display: flex;
|
font-size: 14px;
|
border-bottom: 1px solid #e9ebee;
|
margin-top: 30px;
|
padding-bottom: 20px;
|
.left,
|
.right,
|
.id,
|
.time,
|
.cluster {
|
display: flex;
|
align-items: center;
|
.el-select {
|
width: auto;
|
}
|
}
|
|
.id .el-input ::v-deep {
|
width: 200px;
|
}
|
|
.cluster::v-deep .el-input {
|
width: 300px;
|
|
margin-left: 10px;
|
margin-right: 20px;
|
.el-input__icon {
|
line-height: 32px;
|
}
|
input {
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-input ::v-deep {
|
width: 200px;
|
margin-left: 10px;
|
margin-right: 20px;
|
height: 32px;
|
line-height: 32px;
|
input {
|
border-radius: 0;
|
height: 32px;
|
line-height: 32px;
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-date-editor {
|
width: 318px;
|
height: 40px;
|
margin-left: 10px;
|
margin-right: 20px;
|
border-radius: 0;
|
|
&::-webkit-input-placeholder {
|
color: #999;
|
}
|
|
&.is-active {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.btns {
|
display: flex;
|
margin: 20px 0;
|
text-align: center;
|
.add {
|
margin-right: 20px;
|
width: 126px;
|
height: 32px;
|
background: #0065ff;
|
color: #fff;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
|
.export {
|
width: 126px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
box-sizing: border-box;
|
span {
|
margin-right: 5px;
|
line-height: 32px;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.el-table ::v-deep {
|
background-color: rgb(233, 235, 238);
|
padding: 1px;
|
|
&::after {
|
display: none;
|
}
|
|
td.index .cell {
|
padding-left: 16px;
|
padding-right: 4px;
|
}
|
|
.has-gutter tr th {
|
background: #f0f3f5;
|
font-size: 16px;
|
color: #3d3d3d;
|
font-weight: 700;
|
}
|
|
td .cell {
|
color: #3d3d3d;
|
}
|
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
tr:hover > td.el-table__cell {
|
background-color: #fff;
|
}
|
|
.el-table__row--striped .el-table__cell {
|
background-color: #f0f5fa !important;
|
}
|
|
.status {
|
color: #ff4b33;
|
|
&.green {
|
color: #36b24a;
|
}
|
}
|
|
.option {
|
margin-right: 10px;
|
font-size: 14px;
|
color: rgb(0, 101, 255);
|
cursor: pointer;
|
}
|
}
|
|
.el-pagination ::v-deep {
|
margin-top: 30px;
|
text-align: center;
|
height: 24px;
|
.el-pagination__sizes {
|
margin-right: 0;
|
}
|
|
button {
|
margin: 0;
|
background-color: #fff;
|
border: 1px solid #c0c5cc;
|
border-radius: 2px;
|
}
|
|
.number {
|
background-color: #fff;
|
|
&:not(.disabled):hover {
|
color: #0065ff;
|
}
|
|
&:not(.disabled).active {
|
background-color: #0065ff;
|
color: #fff;
|
}
|
}
|
|
.el-input .el-input__inner {
|
padding-left: 0;
|
|
&:hover,
|
&:focus {
|
border-color: #0065ff;
|
}
|
}
|
}
|
|
.el-select ::v-deep {
|
.el-select__tags-text {
|
color: #3d3d3d;
|
}
|
}
|
}
|
</style>
|
|
<style>
|
.el-date-table td.start-date span,
|
.el-date-table td.end-date span {
|
background-color: #0065ff;
|
}
|
|
.el-button--text span {
|
color: #0065ff;
|
}
|
|
.el-button.is-plain:hover,
|
.el-button.is-plain:focus {
|
color: #0065ff;
|
border-color: #0065ff;
|
}
|
</style>
|
