jinna
2 years ago
parent
399744a4aa
commit
ecd7002e8a
18 changed files with 3713 additions and 606 deletions
|
After Width: | Height: | Size: 520 B |
@ -0,0 +1,412 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<avue-crud |
||||
:option="option" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
:page.sync="page" |
||||
ref="crud" |
||||
v-model="form" |
||||
:permission="permissionList" |
||||
:before-open="beforeOpen" |
||||
:before-close="beforeClose" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
@on-load="onLoad" |
||||
> |
||||
<template slot-scope="{ row }" slot="deviceStatus"> |
||||
<el-tag |
||||
size="small" |
||||
:type=" |
||||
row.deviceStatus == 0 |
||||
? 'warning' |
||||
: row.deviceStatus == 1 |
||||
? '' |
||||
: '' |
||||
" |
||||
> |
||||
{{ |
||||
row.deviceStatus == 0 |
||||
? "待确认" |
||||
: row.deviceStatus == 1 |
||||
? "已确认" |
||||
: "" |
||||
}} |
||||
</el-tag> |
||||
</template> |
||||
<template slot-scope="{ row }" slot="runingStatus"> |
||||
<el-tag |
||||
size="small" |
||||
:type=" |
||||
row.runingStatus == 0 |
||||
? 'info' |
||||
: row.runingStatus == 1 |
||||
? 'success' |
||||
: row.runingStatus == 2 |
||||
? 'danger' |
||||
: '' |
||||
" |
||||
> |
||||
{{ |
||||
row.runingStatus == 0 |
||||
? "关机" |
||||
: row.runingStatus == 1 |
||||
? "运行中" |
||||
: row.runingStatus == 2 |
||||
? '报警中' |
||||
: "" |
||||
}} |
||||
</el-tag> |
||||
</template> |
||||
<template slot-scope="scope" slot="menuLeft"> |
||||
<el-button |
||||
size="small" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
@click="addOperation" |
||||
>需求提报</el-button |
||||
> |
||||
</template> |
||||
<template slot-scope="{ row }" slot="menu"> |
||||
<el-button @click="handleView(row)">查看</el-button> |
||||
<el-button @click="handleEdit(row)">编辑</el-button> |
||||
<el-button @click="handleDelete(row)">停用</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
<el-dialog |
||||
:title="dialogTitle" |
||||
:visible.sync="dialogVisible" |
||||
:append-to-body="true" |
||||
width="50%" |
||||
> |
||||
<div style="height: 500px; overflow: auto"> |
||||
<el-form ref="form" :model="addForm" :rules="addRules" label-width="120px" label-position="left"> |
||||
<div> |
||||
<div |
||||
style=" |
||||
color: #101010; |
||||
font-size: 20px; |
||||
font-weight: 550; |
||||
margin-bottom: 20px; |
||||
" |
||||
> |
||||
基本信息 |
||||
</div> |
||||
<el-form-item label="设备编号" prop="deviceNo"> |
||||
<el-input placeholder="请输入设备编号" v-model="addForm.deviceNo"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备名称" prop="deviceName"> |
||||
<el-input placeholder="请输入设备名称" v-model="addForm.deviceName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="型号" prop="deviceModel"> |
||||
<el-input placeholder="请输入型号" v-model="addForm.deviceModel"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备位置" prop="devicePosition"> |
||||
<el-input placeholder="请输入设备位置" v-model="addForm.devicePosition"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备类型" prop="deviceType"> |
||||
<el-select style="width:100%;" placeholder="请选择设备类型" v-model="addForm.deviceType"> |
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="供应商" prop="supplier"> |
||||
<el-input placeholder="请输入供应商" v-model="addForm.supplier"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="生产时间" prop="productTime"> |
||||
<el-date-picker |
||||
style="width:100%;" |
||||
v-model="addForm.productTime" |
||||
type="date" |
||||
placeholder="请选择生产时间"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<div |
||||
style=" |
||||
color: #101010; |
||||
font-size: 20px; |
||||
font-weight: 550; |
||||
margin-bottom: 20px; |
||||
" |
||||
> |
||||
附件 |
||||
</div> |
||||
<el-form-item label="附件名称" prop="fileName"> |
||||
<el-input placeholder="请输入附件名称" v-model="addForm.fileName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="附件上传"> |
||||
<!-- :limit="3" --> |
||||
<el-upload |
||||
class="upload-demo" |
||||
action="https://jsonplaceholder.typicode.com/posts/" |
||||
:on-success="handleSuccess" |
||||
:on-remove="handleRemove" |
||||
multiple |
||||
accept=".jpeg,.jpg,.png,.pdf" |
||||
:on-exceed="handleExceed" |
||||
:file-list="fileList"> |
||||
<el-button size="small" type="primary">点击上传</el-button> |
||||
<div slot="tip" class="el-upload__tip">支持上传jpeg、jpg、pdf文件，且不超过10M</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="handleClose">关 闭</el-button> |
||||
<el-button @click="handleSave">保 存</el-button> |
||||
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
option: { |
||||
height: "auto", |
||||
calcHeight: 30, |
||||
tip: false, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
border: true, |
||||
index: true, |
||||
dialogType: "dialog", |
||||
dialogClickModal: false, |
||||
addBtn: false, |
||||
viewBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
searchShowBtn: false, |
||||
refreshBtn: false, |
||||
columnBtn: false, |
||||
menuWidth: 300, |
||||
column: [ |
||||
{ |
||||
label: "巡检单号", |
||||
labelWidth: 120, |
||||
prop: "inspectionNo", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "单位名称", |
||||
labelWidth: 120, |
||||
prop: "unitName", |
||||
search: true, |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "巡检项目名称", |
||||
labelWidth: 120, |
||||
prop: "inspectionName", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "项目地址", |
||||
labelWidth: 120, |
||||
prop: "projectAddr", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "班组", |
||||
labelWidth: 120, |
||||
prop: "team", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "巡检计划开始时间", |
||||
labelWidth: 120, |
||||
prop: "startTime", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "巡检周期", |
||||
labelWidth: 120, |
||||
prop: "cycle", |
||||
slot: true, |
||||
}, |
||||
{ |
||||
label: "下次巡检日期", |
||||
labelWidth: 120, |
||||
prop: "nextDate", |
||||
}, |
||||
{ |
||||
label: "状态", |
||||
labelWidth: 120, |
||||
prop: "status", |
||||
slot: true, |
||||
formslot: true, |
||||
}, |
||||
], |
||||
}, |
||||
data: [], |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
dialogTitle:'设备新增', |
||||
dialogVisible:false, |
||||
addForm:{}, |
||||
addRules:{ |
||||
deviceNo:{required:true,message:'请输入设备编号',trigger:'blur'}, |
||||
deviceName:{required:true,message:'请输入设备名称',trigger:'blur'}, |
||||
deviceModel:{required:true,message:'请输入型号',trigger:'blur'}, |
||||
devicePosition:{required:true,message:'请输入设备位置',trigger:'blur'}, |
||||
deviceType:{required:true,message:'请选择设备类型',trigger:'blur'}, |
||||
supplier:{required:true,message:'请输入供应商',trigger:'blur'}, |
||||
productTime:{required:true,message:'请选择生产时间',trigger:'blur'}, |
||||
fileName:{required:true,message:'请输入附件名称',trigger:'blur'}, |
||||
}, |
||||
typeList:[ |
||||
{label:'类型一',value:'001'}, |
||||
{label:'类型二',value:'002'}, |
||||
{label:'类型三',value:'003'}, |
||||
], |
||||
fileList:[], |
||||
requestVisible:false, |
||||
requestForm:{} |
||||
} |
||||
}, |
||||
mounted(){}, |
||||
methods:{ |
||||
beforeOpen(done, type) { |
||||
done(); |
||||
}, |
||||
beforeClose(done) { |
||||
done(); |
||||
}, |
||||
searchReset(params, done) { |
||||
// params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd'); |
||||
this.query = params; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
addOperation(val){ |
||||
console.log('val================>',val && val.deviceNo) |
||||
if(val && val.deviceNo){ |
||||
this.requestForm = { |
||||
errPosition:val.devicePosition, |
||||
deviceName:val.deviceName, |
||||
errType:val.deviceType |
||||
} |
||||
this.requestVisible = true |
||||
}else{ |
||||
this.requestVisible = true |
||||
} |
||||
}, |
||||
closeRequest(){ |
||||
this.requestVisible = false |
||||
}, |
||||
// 点击新增按钮 |
||||
handleAdd(){ |
||||
this.dialogTitle = '设备新增' |
||||
this.addForm = {} |
||||
this.fileList = [] |
||||
this.$refs['form'].resetFields() |
||||
this.dialogVisible = true |
||||
}, |
||||
// 点击编辑按钮 |
||||
handleEdit(row){ |
||||
this.addForm = row |
||||
this.fileList = row.fileList |
||||
this.dialogTitle = '设备编辑' |
||||
this.dialogVisible = true |
||||
}, |
||||
// 点击删除按钮 |
||||
handleDelete(row){ |
||||
this.$confirm('请确认是否删除该设备?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '删除成功!' |
||||
}); |
||||
}).catch(() => { |
||||
// this.$message({ |
||||
// type: 'info', |
||||
// message: '已取消删除' |
||||
// }); |
||||
}); |
||||
}, |
||||
// 点击新增弹窗关闭按钮 |
||||
handleClose(){ |
||||
this.dialogVisible = false |
||||
this.addForm = {} |
||||
}, |
||||
// 点击新增弹窗保存按钮 |
||||
handleSave(){ |
||||
this.$refs['form'].validate((valid) => { |
||||
if(valid){ |
||||
if(this.fileList.length == 0){ |
||||
this.$message.error('请至少上传一个附件') |
||||
}else{ |
||||
|
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 附件上传成功 |
||||
handleSuccess(response, file, fileList){ |
||||
console.log('response------------------>',response) |
||||
console.log('file------------------>',file) |
||||
console.log('fileList------------------>',fileList) |
||||
this.fileList = [] |
||||
fileList.map(item =>{ |
||||
this.fileList.push({name:item.name}) |
||||
}) |
||||
console.log('fileList------------------>',this.fileList) |
||||
}, |
||||
// 附件删除 |
||||
handleRemove(file, fileList){ |
||||
this.fileList = [] |
||||
fileList.map(item =>{ |
||||
this.fileList.push({name:item.name}) |
||||
}) |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
this.data = [ |
||||
{ |
||||
inspectionNo:'WX-20240820-01', |
||||
unitName:'济南安池实验室', |
||||
inspectionName:'实验室设备巡检', |
||||
projectAddr:'济南市钢城区', |
||||
deviceType:'通风与空调及净化系统', |
||||
supplier:'山东烁今', |
||||
productTime:'2024/8/20', |
||||
deviceStatus:0, //设备状态 0-待确认 1-已确认 |
||||
runingStatus:1, //运行状态 0-关机 1-运行中 2-报警中 |
||||
fileName:'图纸', |
||||
fileList:[ |
||||
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, |
||||
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'} |
||||
] |
||||
}, |
||||
]; |
||||
this.page.total = this.data.length |
||||
this.loading = false; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,401 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 需求提报页面 --> |
||||
<div v-for="(item, index) in addForm" :key="item"> |
||||
<div |
||||
style=" |
||||
width: 98%; |
||||
height: 30px; |
||||
line-height: 30px; |
||||
padding-left: 5px; |
||||
border-left: 5px solid #000; |
||||
font-size: 18px; |
||||
font-weight: 550; |
||||
color: #000; |
||||
margin: 0px 0 20px; |
||||
" |
||||
v-show="addForm.length > 1" |
||||
> |
||||
填报{{ index + 1 }} |
||||
</div> |
||||
<avue-form :option="item.formOption" :model="item.form"> |
||||
<template slot-scope="{size}" slot="menuForm"> |
||||
<el-button @click="handleAdd" v-show="title == '需求填报'">新 增</el-button> |
||||
<el-button @click="handleCancel">取 消</el-button> |
||||
<el-button @click="handleSave" v-show="title == '需求填报'">保 存</el-button> |
||||
<el-button type="primary" @click="handleConfirm">提 交</el-button> |
||||
</template> |
||||
</avue-form> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
let action = "https://api.avuejs.com/imgupload"; |
||||
export default { |
||||
name:'requestSub', |
||||
props:{ |
||||
title:String, |
||||
form:Object, |
||||
}, |
||||
data(){ |
||||
return{ |
||||
addForm: [ |
||||
{ |
||||
form: { |
||||
errPosition: "", |
||||
deviceName: "", |
||||
errType: "", |
||||
errDescirb: "描述", |
||||
errorVideo: "", |
||||
errorImgs: [], |
||||
}, |
||||
formOption: { |
||||
emptyBtn: false, |
||||
submitBtn: false, |
||||
menuPosition:'right', |
||||
column: [ |
||||
{ |
||||
label: "故障位置", |
||||
labelWidth: 120, |
||||
prop: "errPosition", |
||||
type: "input", |
||||
span: 24, |
||||
}, |
||||
{ |
||||
label: "设备名称", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "deviceName", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "名称1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "名称2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障专业类型", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errType", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "类型1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "类型2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障现象描述", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errDescirb", |
||||
type: "textarea", |
||||
minRows: 3, |
||||
maxRows: 5, |
||||
}, |
||||
{ |
||||
label: "故障视频", |
||||
labelWidth: 120, |
||||
prop: "errorVideo", |
||||
type: "upload", |
||||
propsHttp: { |
||||
res: "data", |
||||
url: "url", |
||||
name: "name", |
||||
home: "https://www.w3school.com.cn", |
||||
}, |
||||
fileType: "video", //img/video/audio |
||||
listType: "picture-img", |
||||
span: 24, |
||||
action: action, |
||||
}, |
||||
{ |
||||
label: "照片墙", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "imgUrl", |
||||
listType: "picture-card", |
||||
type: "upload", |
||||
fileType: "img", //img/video/audio |
||||
action: action, |
||||
}, |
||||
], |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
}, |
||||
mounted(){ |
||||
console.log('11111111111111111',this.form) |
||||
if((this.title == '编辑' && JSON.stringify(this.form) != '{}') || JSON.stringify(this.form) != '{}'){ |
||||
for(let key in this.form){ |
||||
this.addForm[0].formOption.column.map(item =>{ |
||||
if(key == item.prop){ |
||||
item.value = this.form[key] |
||||
} |
||||
}) |
||||
} |
||||
console.log('addForm---------------->',this.addForm) |
||||
} |
||||
}, |
||||
watch:{ |
||||
form(newVal,oldVal){ |
||||
console.log('newVal---------------------') |
||||
let arr = JSON.parse(JSON.stringify(this.addForm)) |
||||
if((this.title == '编辑' && JSON.stringify(newVal) != '{}' || JSON.stringify(this.form) != '{}')){ |
||||
for(let key in newVal){ |
||||
arr[0].formOption.column.map(item =>{ |
||||
if(key == item.prop){ |
||||
item.value = newVal[key] |
||||
} |
||||
}) |
||||
} |
||||
this.addForm = arr |
||||
console.log('addForm---------------->',this.addForm) |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods:{ |
||||
// 点击新增按钮 |
||||
handleAdd() { |
||||
let emptyPos = this.addForm.find((item) => item.form.errPosition == ""); |
||||
let emptyDevice = this.addForm.find((item) => item.form.deviceName == ""); |
||||
let emptyType = this.addForm.find((item) => item.form.errType == ""); |
||||
let emptyDes = this.addForm.find((item) => item.form.errDescirb == ""); |
||||
let emptyVideo = this.addForm.find((item) => item.form.errorVideo == ""); |
||||
let emptyImg = this.addForm.find( |
||||
(item) => item.form.errorImgs.length == 0 |
||||
); |
||||
if ( |
||||
emptyPos || |
||||
emptyDevice || |
||||
emptyType || |
||||
emptyDes || |
||||
emptyVideo || |
||||
emptyImg |
||||
) { |
||||
this.$message.error("需求填报时各内容均不可为空，请填写完全"); |
||||
} else { |
||||
this.addForm.push({ |
||||
form: { |
||||
errPosition: "", |
||||
deviceName: "", |
||||
errType: "", |
||||
errDescirb: "", |
||||
errorVideo: "", |
||||
errorImgs: [], |
||||
}, |
||||
formOption: { |
||||
emptyBtn: false, |
||||
submitBtn: false, |
||||
menuPosition:'right', |
||||
column: [ |
||||
{ |
||||
label: "故障位置", |
||||
labelWidth: 120, |
||||
prop: "errPosition", |
||||
type: "input", |
||||
span: 24, |
||||
}, |
||||
{ |
||||
label: "设备名称", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "deviceName", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "名称1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "名称2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障专业类型", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errType", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "类型1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "类型2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障现象描述", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errDescirb", |
||||
type: "textarea", |
||||
minRows: 3, |
||||
maxRows: 5, |
||||
}, |
||||
{ |
||||
label: "故障视频", |
||||
labelWidth: 120, |
||||
prop: "errorVideo", |
||||
type: "upload", |
||||
propsHttp: { |
||||
res: "data", |
||||
url: "url", |
||||
name: "name", |
||||
home: "https://www.w3school.com.cn", |
||||
}, |
||||
fileType: "video", //img/video/audio |
||||
listType: "picture-img", |
||||
span: 24, |
||||
action: action, |
||||
}, |
||||
{ |
||||
label: "照片墙", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "imgUrl", |
||||
listType: "picture-card", |
||||
type: "upload", |
||||
fileType: "img", //img/video/audio |
||||
action: action, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
} |
||||
}, |
||||
// 点击取消按钮 |
||||
handleCancel() { |
||||
this.dialogVisible = false; |
||||
this.addForm = [ |
||||
{ |
||||
form: { |
||||
errPosition: "", |
||||
deviceName: "", |
||||
errType: "", |
||||
errDescirb: "", |
||||
errorVideo: "", |
||||
errorImgs: [], |
||||
}, |
||||
formOption: { |
||||
emptyBtn: false, |
||||
submitBtn: false, |
||||
menuPosition:'right', |
||||
column: [ |
||||
{ |
||||
label: "故障位置", |
||||
labelWidth: 120, |
||||
prop: "errPosition", |
||||
type: "input", |
||||
span: 24, |
||||
}, |
||||
{ |
||||
label: "设备名称", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "deviceName", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "名称1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "名称2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障专业类型", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errType", |
||||
type: "select", |
||||
dicData: [ |
||||
{ |
||||
label: "类型1", |
||||
value: 0, |
||||
}, |
||||
{ |
||||
label: "类型2", |
||||
value: 1, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: "故障现象描述", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "errDescirb", |
||||
type: "textarea", |
||||
minRows: 3, |
||||
maxRows: 5, |
||||
}, |
||||
{ |
||||
label: "故障视频", |
||||
labelWidth: 120, |
||||
prop: "errorVideo", |
||||
type: "upload", |
||||
propsHttp: { |
||||
res: "data", |
||||
url: "url", |
||||
name: "name", |
||||
home: "https://www.w3school.com.cn", |
||||
}, |
||||
fileType: "video", //img/video/audio |
||||
listType: "picture-img", |
||||
span: 24, |
||||
action: action, |
||||
}, |
||||
{ |
||||
label: "照片墙", |
||||
labelWidth: 120, |
||||
span: 24, |
||||
prop: "imgUrl", |
||||
listType: "picture-card", |
||||
type: "upload", |
||||
fileType: "img", //img/video/audio |
||||
action: action, |
||||
}, |
||||
], |
||||
}, |
||||
}, |
||||
]; |
||||
this.$emit('close') |
||||
}, |
||||
// 点击保存按钮 |
||||
handleSave() { |
||||
this.$emit('close') |
||||
}, |
||||
// 点击确定按钮 |
||||
handleConfirm() { |
||||
this.$emit('close') |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,142 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<div style="height: 760px;"> |
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> |
||||
<el-tab-pane label="图纸" name="drawing"> |
||||
<el-upload |
||||
action="#" |
||||
list-type="picture-card" |
||||
:auto-upload="false" |
||||
> |
||||
<i slot="default" class="el-icon-plus"></i> |
||||
<div slot="file" slot-scope="{file}"> |
||||
<img |
||||
class="el-upload-list__item-thumbnail" |
||||
:src="file.url" alt="" |
||||
> |
||||
<div class="el-upload-list__item-actions" style="display: flex;flex-direction: column;"> |
||||
<div style="margin-top: 35%;margin-bottom: 15%;"> |
||||
<span |
||||
class="el-upload-list__item-preview" |
||||
@click="handlePictureCardPreview(file)" |
||||
> |
||||
<i class="el-icon-zoom-in"></i> |
||||
</span> |
||||
<!-- <span |
||||
v-if="!disabled" |
||||
class="el-upload-list__item-delete" |
||||
@click="handleDownload(file)" |
||||
> |
||||
<i class="el-icon-download"></i> |
||||
</span> --> |
||||
<span |
||||
v-if="!disabled" |
||||
class="el-upload-list__item-delete" |
||||
@click="handleRemove(file)" |
||||
> |
||||
<i class="el-icon-delete"></i> |
||||
</span> |
||||
</div> |
||||
<span>文件名称</span> |
||||
</div> |
||||
</div> |
||||
</el-upload> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="技术资料" name="techData"> |
||||
<el-upload |
||||
action="#" |
||||
list-type="picture-card" |
||||
:auto-upload="false" |
||||
> |
||||
<i slot="default" class="el-icon-plus"></i> |
||||
<div slot="file" slot-scope="{file}"> |
||||
<img |
||||
class="el-upload-list__item-thumbnail" |
||||
:src="file.url" alt="" |
||||
> |
||||
<div class="el-upload-list__item-actions" style="display: flex;flex-direction: column;"> |
||||
<div style="margin-top: 35%;margin-bottom: 15%;"> |
||||
<span |
||||
class="el-upload-list__item-preview" |
||||
@click="handlePictureCardPreview(file)" |
||||
> |
||||
<i class="el-icon-zoom-in"></i> |
||||
</span> |
||||
<!-- <span |
||||
v-if="!disabled" |
||||
class="el-upload-list__item-delete" |
||||
@click="handleDownload(file)" |
||||
> |
||||
<i class="el-icon-download"></i> |
||||
</span> --> |
||||
<span |
||||
v-if="!disabled" |
||||
class="el-upload-list__item-delete" |
||||
@click="handleRemove(file)" |
||||
> |
||||
<i class="el-icon-delete"></i> |
||||
</span> |
||||
</div> |
||||
<span>文件名称</span> |
||||
</div> |
||||
</div> |
||||
</el-upload> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true"> |
||||
<img width="100%" :src="dialogImageUrl" alt=""> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
activeName:'drawing', |
||||
drawList:[ |
||||
{name:'资料一',url:'',}, |
||||
{name:'资料二',url:'',}, |
||||
{name:'资料三',url:'',}, |
||||
{name:'资料四',url:'',}, |
||||
], |
||||
dialogVisible:false, |
||||
dialogImageUrl:'' |
||||
} |
||||
}, |
||||
mounted(){ |
||||
|
||||
}, |
||||
methods:{ |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
handlePictureCardPreview(file){ |
||||
this.dialogImageUrl = file.url; |
||||
this.dialogVisible = true; |
||||
}, |
||||
handleRemove(file) { |
||||
console.log(file); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.draw_box{ |
||||
width: 100%; |
||||
max-height: 700px; |
||||
overflow: auto; |
||||
background: red; |
||||
display: flex; |
||||
|
||||
.draw_item{ |
||||
width: 100px; |
||||
height: 150px; |
||||
background: green; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,484 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<avue-crud |
||||
:option="option" |
||||
:table-loading="loading" |
||||
:data="data" |
||||
:page.sync="page" |
||||
ref="crud" |
||||
v-model="form" |
||||
:permission="permissionList" |
||||
:before-open="beforeOpen" |
||||
:before-close="beforeClose" |
||||
@search-change="searchChange" |
||||
@search-reset="searchReset" |
||||
@current-change="currentChange" |
||||
@size-change="sizeChange" |
||||
@refresh-change="refreshChange" |
||||
@on-load="onLoad" |
||||
> |
||||
<template slot-scope="{ row }" slot="deviceStatus"> |
||||
<el-tag |
||||
size="small" |
||||
:type=" |
||||
row.deviceStatus == 0 |
||||
? 'warning' |
||||
: row.deviceStatus == 1 |
||||
? '' |
||||
: '' |
||||
" |
||||
> |
||||
{{ |
||||
row.deviceStatus == 0 |
||||
? "待确认" |
||||
: row.deviceStatus == 1 |
||||
? "已确认" |
||||
: "" |
||||
}} |
||||
</el-tag> |
||||
</template> |
||||
<template slot-scope="{ row }" slot="runingStatus"> |
||||
<el-tag |
||||
size="small" |
||||
:type=" |
||||
row.runingStatus == 0 |
||||
? 'info' |
||||
: row.runingStatus == 1 |
||||
? 'success' |
||||
: row.runingStatus == 2 |
||||
? 'danger' |
||||
: '' |
||||
" |
||||
> |
||||
{{ |
||||
row.runingStatus == 0 |
||||
? "关机" |
||||
: row.runingStatus == 1 |
||||
? "运行中" |
||||
: row.runingStatus == 2 |
||||
? '报警中' |
||||
: "" |
||||
}} |
||||
</el-tag> |
||||
</template> |
||||
<template slot-scope="scope" slot="menuLeft"> |
||||
<el-button |
||||
size="small" |
||||
@click="handleAdd" |
||||
>新增</el-button |
||||
> |
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
@click="addOperation" |
||||
>需求提报</el-button |
||||
> |
||||
</template> |
||||
<template slot-scope="{ row }" slot="menu"> |
||||
<el-button @click="handleView(row)">查看</el-button> |
||||
<el-button @click="handleEdit(row)">编辑</el-button> |
||||
<el-button @click="addOperation(row)">需求提报</el-button> |
||||
<el-button @click="handleDelete(row)">删除</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
<el-dialog |
||||
:title="dialogTitle" |
||||
:visible.sync="dialogVisible" |
||||
:append-to-body="true" |
||||
width="50%" |
||||
> |
||||
<div style="height: 500px; overflow: auto"> |
||||
<el-form ref="form" :model="addForm" :rules="addRules" label-width="120px" label-position="left"> |
||||
<div> |
||||
<div |
||||
style=" |
||||
color: #101010; |
||||
font-size: 20px; |
||||
font-weight: 550; |
||||
margin-bottom: 20px; |
||||
" |
||||
> |
||||
基本信息 |
||||
</div> |
||||
<el-form-item label="设备编号" prop="deviceNo"> |
||||
<el-input placeholder="请输入设备编号" v-model="addForm.deviceNo"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备名称" prop="deviceName"> |
||||
<el-input placeholder="请输入设备名称" v-model="addForm.deviceName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="型号" prop="deviceModel"> |
||||
<el-input placeholder="请输入型号" v-model="addForm.deviceModel"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备位置" prop="devicePosition"> |
||||
<el-input placeholder="请输入设备位置" v-model="addForm.devicePosition"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="设备类型" prop="deviceType"> |
||||
<el-select style="width:100%;" placeholder="请选择设备类型" v-model="addForm.deviceType"> |
||||
<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="供应商" prop="supplier"> |
||||
<el-input placeholder="请输入供应商" v-model="addForm.supplier"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="生产时间" prop="productTime"> |
||||
<el-date-picker |
||||
style="width:100%;" |
||||
v-model="addForm.productTime" |
||||
type="date" |
||||
placeholder="请选择生产时间"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<div |
||||
style=" |
||||
color: #101010; |
||||
font-size: 20px; |
||||
font-weight: 550; |
||||
margin-bottom: 20px; |
||||
" |
||||
> |
||||
附件 |
||||
</div> |
||||
<el-form-item label="附件名称" prop="fileName"> |
||||
<el-input placeholder="请输入附件名称" v-model="addForm.fileName"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="附件上传"> |
||||
<!-- :limit="3" --> |
||||
<el-upload |
||||
class="upload-demo" |
||||
action="https://jsonplaceholder.typicode.com/posts/" |
||||
:on-success="handleSuccess" |
||||
:on-remove="handleRemove" |
||||
multiple |
||||
accept=".jpeg,.jpg,.png,.pdf" |
||||
:on-exceed="handleExceed" |
||||
:file-list="fileList"> |
||||
<el-button size="small" type="primary">点击上传</el-button> |
||||
<div slot="tip" class="el-upload__tip">支持上传jpeg、jpg、pdf文件，且不超过10M</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="handleClose">关 闭</el-button> |
||||
<el-button @click="handleSave">保 存</el-button> |
||||
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
<el-dialog |
||||
title="需求填报" |
||||
:visible.sync="requestVisible" |
||||
:append-to-body="true" |
||||
width="50%" |
||||
> |
||||
<div style="height: 500px; overflow: auto"> |
||||
<requestSub @close="closeRequest" title="需求填报" :form="requestForm"></requestSub> |
||||
</div> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import {dateFormat} from '../../util/date' |
||||
import requestSub from '../components/requestSub.vue' |
||||
export default { |
||||
components:{ |
||||
requestSub |
||||
}, |
||||
data(){ |
||||
return{ |
||||
option: { |
||||
height: "auto", |
||||
calcHeight: 30, |
||||
tip: false, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
border: true, |
||||
index: true, |
||||
dialogType: "dialog", |
||||
dialogClickModal: false, |
||||
addBtn: false, |
||||
viewBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
searchShowBtn: false, |
||||
refreshBtn: false, |
||||
columnBtn: false, |
||||
menuWidth: 400, |
||||
column: [ |
||||
{ |
||||
label: "设备编号", |
||||
labelWidth: 120, |
||||
prop: "deviceNo", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "设备名称", |
||||
labelWidth: 120, |
||||
prop: "deviceName", |
||||
search: true, |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "型号", |
||||
labelWidth: 120, |
||||
prop: "deviceModel", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "设备位置", |
||||
labelWidth: 120, |
||||
prop: "devicePosition", |
||||
type: "select", |
||||
overHidden: true, |
||||
// hide: true, |
||||
search: true, |
||||
// viewDisplay: false, |
||||
// dicUrl: '/api/blade-system/dict-biz/get-hc-project', |
||||
props: { |
||||
label: "dictValue", |
||||
value: "dictValue", |
||||
}, |
||||
}, |
||||
{ |
||||
label: "设备类型", |
||||
labelWidth: 120, |
||||
prop: "deviceType", |
||||
overHidden: true, |
||||
type: "select", |
||||
searchLabelWidth: 100, |
||||
search: true, |
||||
viewDisplay: false, |
||||
// dicUrl: '/api/blade-system/dict-biz/get-hc-project', |
||||
props: { |
||||
label: "dictValue", |
||||
value: "dictValue", |
||||
}, |
||||
}, |
||||
{ |
||||
label: "供应商", |
||||
labelWidth: 120, |
||||
prop: "supplier", |
||||
overHidden: true, |
||||
}, |
||||
{ |
||||
label: "生产时间", |
||||
labelWidth: 120, |
||||
prop: "productTime", |
||||
slot: true, |
||||
}, |
||||
{ |
||||
label: "设备状态", |
||||
labelWidth: 120, |
||||
prop: "deviceStatus", |
||||
slot: true, |
||||
formslot: true, |
||||
}, |
||||
{ |
||||
label: "运行状态", |
||||
labelWidth: 120, |
||||
prop: "runingStatus", |
||||
slot: true, |
||||
formslot: true, |
||||
}, |
||||
{ |
||||
label: "附件", |
||||
labelWidth: 120, |
||||
prop: "fileName", |
||||
slot: true, |
||||
}, |
||||
], |
||||
}, |
||||
data: [], |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0, |
||||
}, |
||||
dialogTitle:'设备新增', |
||||
dialogVisible:false, |
||||
addForm:{}, |
||||
addRules:{ |
||||
deviceNo:{required:true,message:'请输入设备编号',trigger:'blur'}, |
||||
deviceName:{required:true,message:'请输入设备名称',trigger:'blur'}, |
||||
deviceModel:{required:true,message:'请输入型号',trigger:'blur'}, |
||||
devicePosition:{required:true,message:'请输入设备位置',trigger:'blur'}, |
||||
deviceType:{required:true,message:'请选择设备类型',trigger:'blur'}, |
||||
supplier:{required:true,message:'请输入供应商',trigger:'blur'}, |
||||
productTime:{required:true,message:'请选择生产时间',trigger:'blur'}, |
||||
fileName:{required:true,message:'请输入附件名称',trigger:'blur'}, |
||||
}, |
||||
typeList:[ |
||||
{label:'类型一',value:'001'}, |
||||
{label:'类型二',value:'002'}, |
||||
{label:'类型三',value:'003'}, |
||||
], |
||||
fileList:[], |
||||
requestVisible:false, |
||||
requestForm:{} |
||||
} |
||||
}, |
||||
mounted(){}, |
||||
methods:{ |
||||
beforeOpen(done, type) { |
||||
done(); |
||||
}, |
||||
beforeClose(done) { |
||||
done(); |
||||
}, |
||||
searchReset(params, done) { |
||||
// params.releaseTimeRange = dateFormat(new Date(), 'yyyy-MM-dd'); |
||||
this.query = params; |
||||
this.onLoad(this.page); |
||||
}, |
||||
searchChange(params, done) { |
||||
this.query = params; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page, params); |
||||
done(); |
||||
}, |
||||
addOperation(val){ |
||||
console.log('val================>',val && val.deviceNo) |
||||
if(val && val.deviceNo){ |
||||
this.requestForm = { |
||||
errPosition:val.devicePosition, |
||||
deviceName:val.deviceName, |
||||
errType:val.deviceType |
||||
} |
||||
this.requestVisible = true |
||||
}else{ |
||||
this.requestVisible = true |
||||
} |
||||
}, |
||||
closeRequest(){ |
||||
this.requestVisible = false |
||||
}, |
||||
// 点击新增按钮 |
||||
handleAdd(){ |
||||
this.dialogTitle = '设备新增' |
||||
this.addForm = {} |
||||
this.fileList = [] |
||||
this.$refs['form'].resetFields() |
||||
this.dialogVisible = true |
||||
}, |
||||
// 点击编辑按钮 |
||||
handleEdit(row){ |
||||
this.addForm = row |
||||
this.fileList = row.fileList |
||||
this.dialogTitle = '设备编辑' |
||||
this.dialogVisible = true |
||||
}, |
||||
// 点击删除按钮 |
||||
handleDelete(row){ |
||||
this.$confirm('请确认是否删除该设备?', '提示', { |
||||
confirmButtonText: '确定', |
||||
cancelButtonText: '取消', |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$message({ |
||||
type: 'success', |
||||
message: '删除成功!' |
||||
}); |
||||
}).catch(() => { |
||||
// this.$message({ |
||||
// type: 'info', |
||||
// message: '已取消删除' |
||||
// }); |
||||
}); |
||||
}, |
||||
// 点击新增弹窗关闭按钮 |
||||
handleClose(){ |
||||
this.dialogVisible = false |
||||
this.addForm = {} |
||||
}, |
||||
// 点击新增弹窗保存按钮 |
||||
handleSave(){ |
||||
this.$refs['form'].validate((valid) => { |
||||
if(valid){ |
||||
if(this.fileList.length == 0){ |
||||
this.$message.error('请至少上传一个附件') |
||||
}else{ |
||||
|
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 附件上传成功 |
||||
handleSuccess(response, file, fileList){ |
||||
console.log('response------------------>',response) |
||||
console.log('file------------------>',file) |
||||
console.log('fileList------------------>',fileList) |
||||
this.fileList = [] |
||||
fileList.map(item =>{ |
||||
this.fileList.push({name:item.name}) |
||||
}) |
||||
console.log('fileList------------------>',this.fileList) |
||||
}, |
||||
// 附件删除 |
||||
handleRemove(file, fileList){ |
||||
this.fileList = [] |
||||
fileList.map(item =>{ |
||||
this.fileList.push({name:item.name}) |
||||
}) |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
this.data = [ |
||||
{ |
||||
deviceNo:'WX-20240820-01', |
||||
deviceName:'通风柜', |
||||
deviceModel:'MDP-456', |
||||
devicePosition:'一楼102室', |
||||
deviceType:'通风与空调及净化系统', |
||||
supplier:'山东烁今', |
||||
productTime:'2024/8/20', |
||||
deviceStatus:0, //设备状态 0-待确认 1-已确认 |
||||
runingStatus:1, //运行状态 0-关机 1-运行中 2-报警中 |
||||
fileName:'图纸', |
||||
fileList:[ |
||||
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, |
||||
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'} |
||||
] |
||||
}, |
||||
{ |
||||
deviceNo:'WX-20240820-02', |
||||
deviceName:'通风柜', |
||||
deviceModel:'MDP-455', |
||||
devicePosition:'一楼103室', |
||||
deviceType:'通风与空调及净化系统', |
||||
supplier:'山东烁今', |
||||
productTime:'2024/8/20', |
||||
deviceStatus:1, //设备状态 0-待确认 1-已确认 |
||||
runingStatus:2, //运行状态 0-关机 1-运行中 2-报警中 |
||||
fileName:'图纸', |
||||
fileList:[ |
||||
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, |
||||
] |
||||
}, |
||||
{ |
||||
deviceNo:'WX-20240820-03', |
||||
deviceName:'通风柜', |
||||
deviceModel:'MDP-454', |
||||
devicePosition:'一楼101室', |
||||
deviceType:'通风与空调及净化系统', |
||||
supplier:'山东烁今', |
||||
productTime:'2024/8/20', |
||||
deviceStatus:1, //设备状态 0-待确认 1-已确认 |
||||
runingStatus:0, //运行状态 0-关机 1-运行中 2-报警中 |
||||
fileName:'图纸', |
||||
fileList:[ |
||||
{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'} |
||||
] |
||||
}, |
||||
]; |
||||
this.page.total = this.data.length |
||||
this.loading = false; |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -1,13 +0,0 @@ |
||||
<template> |
||||
<div>设备管理</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
@ -0,0 +1,97 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<div class="container"> |
||||
<div class="title_box"> |
||||
<div>意见反馈</div> |
||||
<!-- <div>X</div> --> |
||||
</div> |
||||
<div style="width:550px;height:650px;"> |
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left"> |
||||
<el-form-item label="具体意见内容" prop="content"> |
||||
<el-input placeholder="请输入具体意见内容" type="textarea" v-model="form.content"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="联系电话" prop="phoneNumber"> |
||||
<el-input placeholder="请输入联系电话" v-model="form.phoneNumber"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<div class="btn_box"> |
||||
<!-- <el-button>关闭</el-button> --> |
||||
<el-button style="margin:0px 10px 0px 20px;;" @click="handleSave">保存</el-button> |
||||
<el-button type="primary" @click="handleSubmit">提交</el-button> |
||||
</div> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from "vuex"; |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
form:{ |
||||
content:'', |
||||
phoneNumber:'' |
||||
}, |
||||
rules:{ |
||||
content:{required:true,message:'请输入具体意见内容',trigger:'blur'}, |
||||
phoneNumber:[ |
||||
{required:true,message:'请输入联系电话',trigger:'blur'}, |
||||
{pattern:/^1[3-9][0-9]{9}$|^15[0-9]{2}[0-9]{8}$|^17[0-9]{2}[0-9]{7}$|^18[0-9]{3}[0-9]{6}$/,message:'请输入正确的手机号格式'} |
||||
] |
||||
} |
||||
} |
||||
}, |
||||
computed: { |
||||
...mapGetters(["userInfo", "permission", "systemTime"]), |
||||
}, |
||||
mounted(){ |
||||
console.log('userInfo==============>',this.userInfo) |
||||
this.form = { |
||||
content:'', |
||||
phoneNumber:this.userInfo.user_id |
||||
} |
||||
}, |
||||
methods:{ |
||||
handleSave(){ |
||||
this.$refs['form'].validate((valid) =>{ |
||||
if(valid){ |
||||
|
||||
} |
||||
}) |
||||
}, |
||||
handleSubmit(){ |
||||
this.$refs['form'].validate((valid) =>{ |
||||
if(valid){ |
||||
|
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
width: 99%; |
||||
height: 800px; |
||||
margin: 0 auto; |
||||
|
||||
.title_box{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 20px; |
||||
color: #101010; |
||||
font-weight: 550; |
||||
margin-bottom: 30px; |
||||
} |
||||
.btn_box{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,434 @@ |
||||
<template> |
||||
<el-row> |
||||
<el-col :span="5"> |
||||
<div class="box"> |
||||
<el-scrollbar> |
||||
<basic-container> |
||||
<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" /> |
||||
</basic-container> |
||||
</el-scrollbar> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="19"> |
||||
<basic-container> |
||||
<avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" |
||||
v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" |
||||
:before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset" |
||||
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
||||
@refresh-change="refreshChange" @on-load="onLoad"> |
||||
<template slot-scope="scope" slot="menuLeft"> |
||||
<el-button type="primary" size="small" @click="handleAdd">新建</el-button> |
||||
</template> |
||||
<template slot-scope="{ row }" slot="menu"> |
||||
<el-button @click="$refs.crud.rowView(row,index)">查看</el-button> |
||||
<el-button @click="$refs.crud.rowEdit(row,index)">编辑</el-button> |
||||
<el-button @click="handleImport(row)">导入</el-button> |
||||
</template> |
||||
</avue-crud> |
||||
<el-dialog title="新增" :visible.sync="dialogVisible" :append-to-body="true" width="70%"> |
||||
<el-form ref="form" :model="addForm" :rules="addRules" label-width="120px" label-position="left" style="height: 500px;overflow: auto;"> |
||||
<div> |
||||
<div style="color: #101010;font-size: 20px;font-weight: 550;margin-bottom: 20px;">基本信息</div> |
||||
<el-form-item label="单位名称" prop="unitName"> |
||||
<el-select style="width:98%" placeholder="请选择单位名称" v-model="addForm.unitName"> |
||||
<el-option label="安池实验室" value="1"></el-option> |
||||
<el-option label="畜牧局实验室" value="2"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</div> |
||||
<div> |
||||
<div style="color: #101010;font-size: 20px;font-weight: 550;margin-bottom: 20px;">巡检内容</div> |
||||
<el-form-item label="巡检主要内容" prop="content"> |
||||
<el-input style="width: 98%;" type="textarea" v-model="addForm.content" placeholder="请输入巡检主要内容"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="楼层"> |
||||
<div style="display: flex;"> |
||||
<div v-for="item in floorArr" :key="item.value" |
||||
style="padding: 0px 15px;border: 1px solid #bbbbbb; height: 30px;display: flex;align-items: center;justify-content: center;margin-right: 10px;border-radius: 3px;cursor: pointer;" |
||||
:style="{background:item.value == activeFloor ? '#3a62d7' : '',color:item.value == activeFloor ? '#fff' : '',borderColor:item.value == activeFloor ? '#3a62d7' : '#bbb'}"> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="房间"> |
||||
<div style="display: flex;"> |
||||
<div v-for="item in roomArr" :key="item.value" |
||||
style="padding: 0px 15px;border: 1px solid #bbbbbb; height: 30px;display: flex;align-items: center;justify-content: center;margin-right: 10px;border-radius: 3px;cursor: pointer;" |
||||
:style="{background:item.value == activeRoom ? '#3a62d7' : '',color:item.value == activeRoom ? '#fff' : '',borderColor:item.value == activeRoom ? '#3a62d7' : '#bbb'}"> |
||||
{{ item.name }} |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="巡检配置"> |
||||
<el-table :data="tableData" border style="width: 100%" > |
||||
<el-table-column width="50" align="center" > |
||||
<template slot="header" slot-scope="scope"> |
||||
<div @click="addColumn()" |
||||
style="width:30px;height: 30px;background: #409eff;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;"> |
||||
<i style="color:#fff;font-size: 20px;" class="el-icon-plus"></i></div> |
||||
</template> |
||||
<template slot-scope="scope"> |
||||
<div @click="deleteColumn(scope.row, scope.$index)" |
||||
style="width:30px;height: 30px;background: #f56c6c;border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;"> |
||||
<i style="color:#fff;font-size: 20px;" class="el-icon-delete"></i></div> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="majorName" align="center" label="专业名称"> |
||||
<template slot-scope="scope"> |
||||
<el-select placeholder="请选择专业名称" v-model="scope.row.majorName"> |
||||
<el-option label="水系统" value="001"></el-option> |
||||
<el-option label="电气系统" value="002"></el-option> |
||||
<el-option label="风机" value="003"></el-option> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="inspectionCon" align="center" label="巡检内容"> |
||||
<template slot-scope="scope"> |
||||
<el-input placeholder="请输入巡检内容" v-model="scope.row.inspectionCon"></el-input> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="techRequire" align="center" label="工艺要求"> |
||||
<template slot-scope="scope"> |
||||
<el-select placeholder="请选择专业名称" v-model="scope.row.techRequire"> |
||||
<el-option label="工艺要求1" value="001"></el-option> |
||||
<el-option label="工艺要求2" value="002"></el-option> |
||||
<el-option label="工艺要求3" value="003"></el-option> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="cycle" align="center" label="巡检周期"> |
||||
<template slot-scope="scope"> |
||||
<el-select placeholder="请选择巡检周期" v-model="scope.row.cycle"></el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="startTime" align="center" label="开始时间"> |
||||
<template slot-scope="scope"> |
||||
<el-date-picker |
||||
style="width: 100%;" |
||||
v-model="scope.row.startTime" |
||||
type="date" |
||||
placeholder="请选择开始时间"> |
||||
</el-date-picker> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="handleCancel">取 消</el-button> |
||||
<el-button @click="handleSave">保 存</el-button> |
||||
<el-button type="primary" @click="handleConfirm">提 交</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</basic-container> |
||||
</el-col> |
||||
</el-row> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
const validatePass = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请输入密码')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
const validatePass2 = (rule, value, callback) => { |
||||
if (value === '') { |
||||
callback(new Error('请再次输入密码')); |
||||
} else if (value !== this.form.password) { |
||||
callback(new Error('两次输入密码不一致!')); |
||||
} else { |
||||
callback(); |
||||
} |
||||
}; |
||||
return { |
||||
form: {}, |
||||
search: {}, |
||||
roleBox: false, |
||||
excelBox: false, |
||||
platformBox: false, |
||||
initFlag: true, |
||||
selectionList: [], |
||||
query: {}, |
||||
loading: true, |
||||
platformLoading: false, |
||||
page: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0 |
||||
}, |
||||
platformPage: { |
||||
pageSize: 10, |
||||
currentPage: 1, |
||||
total: 0 |
||||
}, |
||||
init: { |
||||
roleTree: [], |
||||
deptTree: [], |
||||
}, |
||||
props: { |
||||
label: "title", |
||||
value: "key" |
||||
}, |
||||
roleGrantList: [], |
||||
roleTreeObj: [], |
||||
treeDeptId: '', |
||||
treeData: [ |
||||
{ |
||||
hasChildren: true, |
||||
id: "1123598813738675201", |
||||
key: "1123598813738675201", |
||||
parentId: "0", |
||||
title: "山东区", |
||||
children: [ |
||||
{ |
||||
hasChildren: true, |
||||
id: "1123598813738675202", |
||||
key: "1123598813738675202", |
||||
parentId: "1123598813738675202", |
||||
title: "安池实验室", |
||||
value: "1123598813738675202", |
||||
children: [ |
||||
{ |
||||
hasChildren: false, |
||||
id: "1123598813738675204", |
||||
key: "1123598813738675204", |
||||
parentId: "1123598813738675204", |
||||
title: "三楼", |
||||
value: "1123598813738675204", |
||||
}, |
||||
{ |
||||
hasChildren: false, |
||||
id: "1123598813738675205", |
||||
key: "1123598813738675205", |
||||
parentId: "1123598813738675205", |
||||
title: "四楼", |
||||
value: "1123598813738675205", |
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
hasChildren: true, |
||||
id: "1123598813738675203", |
||||
key: "1123598813738675203", |
||||
parentId: "1123598813738675203", |
||||
title: "畜牧局实验室", |
||||
value: "1123598813738675203", |
||||
} |
||||
] |
||||
} |
||||
], |
||||
treeOption: { |
||||
nodeKey: 'id', |
||||
// lazy: true, |
||||
// treeLoad: function (node, resolve) { |
||||
// const parentId = (node.level === 0) ? 0 : node.data.id; |
||||
// getDeptLazyTree(parentId).then(res => { |
||||
// resolve(res.data.data.map(item => { |
||||
// return { |
||||
// ...item, |
||||
// leaf: !item.hasChildren |
||||
// } |
||||
// })) |
||||
// }); |
||||
// }, |
||||
addBtn: false, |
||||
menu: false, |
||||
size: 'small', |
||||
props: { |
||||
labelText: '标题', |
||||
label: 'title', |
||||
value: 'value', |
||||
children: 'children' |
||||
} |
||||
}, |
||||
option: { |
||||
height: 'auto', |
||||
calcHeight: 80, |
||||
tip: false, |
||||
searchShow: true, |
||||
searchMenuSpan: 6, |
||||
border: true, |
||||
index: true, |
||||
selection: true, |
||||
addBtn: false, |
||||
viewBtn: false, |
||||
editBtn: false, |
||||
delBtn: false, |
||||
dialogType: 'dialog', |
||||
dialogClickModal: false, |
||||
searchShowBtn: false, |
||||
refreshBtn: false, |
||||
columnBtn: false, |
||||
menuWidth: 300, |
||||
column: [ |
||||
{ |
||||
label: "单位名称", |
||||
labelWidth: 120, |
||||
prop: "unitName", |
||||
search: true, |
||||
overHidden:true, |
||||
}, |
||||
{ |
||||
label: "楼层", |
||||
labelWidth: 120, |
||||
prop: "floor", |
||||
overHidden:true, |
||||
}, |
||||
{ |
||||
label: "房间名称", |
||||
labelWidth: 120, |
||||
prop: "roomName", |
||||
overHidden:true, |
||||
}, |
||||
{ |
||||
label: "包含专业/设备", |
||||
labelWidth: 120, |
||||
prop: "major", |
||||
labelWidth: 120, |
||||
overHidden:true, |
||||
}, |
||||
{ |
||||
label: "备注", |
||||
labelWidth: 120, |
||||
overHidden:true, |
||||
prop: "remark", |
||||
}, |
||||
], |
||||
}, |
||||
data: [], |
||||
dialogVisible:false, |
||||
addForm:{}, |
||||
addRules:{}, |
||||
floorArr:[ |
||||
{name:'三层',value:'001'}, |
||||
{name:'四层',value:'002'}, |
||||
], |
||||
activeFloor:'001', |
||||
roomArr:[ |
||||
{name:'种子常规检测1',value:'001'}, |
||||
{name:'PCR室',value:'002'}, |
||||
{name:'种子常规检测2',value:'003'}, |
||||
], |
||||
activeRoom:'001', |
||||
tableData:[ |
||||
{majorName:'水系统',inspectionCon:'1、水量水压满足用水要求',techRequire:'工艺要求1'}, |
||||
{majorName:'水系统',inspectionCon:'1、水量水压满足用水要求',techRequire:'工艺要求2'}, |
||||
{majorName:'水系统',inspectionCon:'1、水量水压满足用水要求',techRequire:'工艺要求2'}, |
||||
{majorName:'电气系统',inspectionCon:'1、水量水压满足用水要求',techRequire:'工艺要求3'}, |
||||
{majorName:'电气系统',inspectionCon:'1、水量水压满足用水要求',techRequire:'工艺要求3'}, |
||||
] |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.tableData = this.mergeTableRow(this.tableData,['majorName']) |
||||
console.log('tableData--------------->',this.tableData) |
||||
}, |
||||
methods: { |
||||
objectSpanMethod({ row, column, rowIndex, columnIndex }){ |
||||
// console.log('row--------------->',row) |
||||
// console.log('column--------------->',column) |
||||
// console.log('rowIndex--------------->',rowIndex) |
||||
// console.log('columnIndex--------------->',columnIndex) |
||||
const span = column['property'] + '-span' |
||||
if(row[span]){ |
||||
return row[span] |
||||
} |
||||
|
||||
}, |
||||
/** |
||||
* 方法一 |
||||
* table合并行通用 */ |
||||
mergeTableRow(data, merge) { |
||||
if (!merge || merge.length === 0) { |
||||
return data |
||||
} |
||||
merge.forEach((m) => { |
||||
const mList = {} |
||||
data = data.map((v, index) => { |
||||
const rowVal = v[m] |
||||
if (mList[rowVal] && mList[rowVal].newIndex === index) { |
||||
mList[rowVal]['num']++ |
||||
mList[rowVal]['newIndex']++ |
||||
data[mList[rowVal]['index']][m + '-span'].rowspan++ |
||||
v[m + '-span'] = { |
||||
rowspan: 0, |
||||
colspan: 0 |
||||
} |
||||
} else { |
||||
mList[rowVal] = { num: 1, index: index, newIndex: index + 1 } |
||||
v[m + '-span'] = { |
||||
rowspan: 1, |
||||
colspan: 1 |
||||
} |
||||
} |
||||
return v |
||||
}) |
||||
}) |
||||
return data |
||||
}, |
||||
addColumn() { |
||||
let arr = JSON.parse(JSON.stringify(this.tableData)) |
||||
arr.push({ majorName: '', inspectionCon: '', techRequire: '' }) |
||||
this.tableData = arr |
||||
}, |
||||
deleteColumn(row, index) { |
||||
this.tableData.splice(index, 1); |
||||
// this.tableData = this.mergeTableRow(this.tableData,['majorName']) |
||||
}, |
||||
handleAdd(){ |
||||
this.dialogVisible = true |
||||
}, |
||||
handleCancel(){ |
||||
this.dialogVisible = false |
||||
}, |
||||
nodeClick(data) { |
||||
this.treeDeptId = data.id; |
||||
this.page.currentPage = 1; |
||||
this.onLoad(this.page); |
||||
}, |
||||
currentChange(currentPage) { |
||||
this.page.currentPage = currentPage; |
||||
}, |
||||
sizeChange(pageSize) { |
||||
this.page.pageSize = pageSize; |
||||
}, |
||||
refreshChange() { |
||||
this.onLoad(this.page, this.query); |
||||
}, |
||||
onLoad(page, params = {}) { |
||||
this.loading = true; |
||||
this.data = [ |
||||
{unitName:'安池实验室',floor:'3楼',roomName:'大型仪器室',major:'水系统、电气系统、通风与空调及净化系统、家具及配套设施',remark:''}, |
||||
{unitName:'安池实验室',floor:'3楼',roomName:'PCR室',major:'水系统、电气系统、通风与空调及净化系统、家具及配套设施',remark:''}, |
||||
] |
||||
this.loading = false |
||||
// getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => { |
||||
// const data = res.data.data; |
||||
// this.page.total = data.total; |
||||
// this.data = data.records; |
||||
// this.loading = false; |
||||
// this.selectionClear(); |
||||
// }); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
.box { |
||||
height: 800px; |
||||
} |
||||
|
||||
.el-scrollbar { |
||||
height: 100%; |
||||
} |
||||
|
||||
.box .el-scrollbar__wrap { |
||||
overflow: scroll; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,184 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<el-form :inline="true" v-model="form"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="时间："> |
||||
<el-date-picker |
||||
size="small" |
||||
style="width: 315px;" |
||||
v-model="form.timeRange" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="角色："> |
||||
<el-select style="width: 315px;" size="small" placeholder="请选择角色" v-model="form.role"> |
||||
<el-option v-for="item in roleList" :key="item.label" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="人员："> |
||||
<el-select style="width: 315px;" size="small" placeholder="请选择人员" v-model="form.person"> |
||||
<el-option v-for="item in personList" :key="item.label" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item> |
||||
<el-button type="primary" size="small" @click="onSubmit" icon="el-icon-search">搜索</el-button> |
||||
<el-button size="small" icon="el-icon-delete" @click="onSubmit">重置</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div class="record_box"> |
||||
<div class="record_item" v-for="item in recordList" :key="item.month" style="margin-bottom: 30px;"> |
||||
<div class="month_tit">{{ item.month }}</div> |
||||
<div v-for="(item1,index) in item.arr" :key="item1.time" class="bottom_box"> |
||||
<div class="month_item"> |
||||
<div class="line" :class="index == item.arr.length - 1 ? 'last' : ''"></div> |
||||
<div class="con_box"> |
||||
<div class="line_box"></div> |
||||
<div class="time_box">{{item1.time}}</div> |
||||
<div class="person_con">{{item1.content}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
form:{}, |
||||
roleList:[ |
||||
{label:'角色一',value:'001'}, |
||||
{label:'角色二',value:'002'}, |
||||
{label:'角色三',value:'003'}, |
||||
], |
||||
personList:[ |
||||
{label:'人员一',value:'001'}, |
||||
{label:'人员二',value:'002'}, |
||||
{label:'人员三',value:'003'}, |
||||
], |
||||
recordList:[ |
||||
{ |
||||
month:'2024年8月', |
||||
arr:[ |
||||
{time:'20日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'17日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'16日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'12日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'10日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'8日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'7日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'5日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'2日 15:30:58',content:'质量部张三登录成功'}, |
||||
] |
||||
}, |
||||
{ |
||||
month:'2024年7月', |
||||
arr:[ |
||||
{time:'20日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'17日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'16日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'12日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'10日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'8日 15:30:58',content:'质量部张三登录成功'}, |
||||
] |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
/deep/ .el-card{ |
||||
box-shadow: none; |
||||
background: transparent; |
||||
|
||||
.record_box{ |
||||
width: 100%; |
||||
height: 615px; |
||||
background: #fff; |
||||
overflow: auto; |
||||
padding: 40px; |
||||
.record_item{ |
||||
.month_tit{ |
||||
color: rgba(108,108,108,1); |
||||
font-size: 16px; |
||||
font-family: SourceHanSansSC; |
||||
font-weight: 700; |
||||
line-height: 30px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.bottom_box{ |
||||
.month_item{ |
||||
display: flex; |
||||
padding-bottom: 20px; |
||||
position: relative; |
||||
z-index: 100; |
||||
|
||||
.line{ |
||||
height: 35px; |
||||
width: 2px; |
||||
background: rgb(239, 239, 239); |
||||
position: absolute; |
||||
left: 4px; |
||||
top: 10px; |
||||
z-index: 10; |
||||
|
||||
&.last{ |
||||
background: transparent; |
||||
} |
||||
} |
||||
|
||||
.con_box{ |
||||
display: flex; |
||||
height: 21px; |
||||
align-items: center; |
||||
|
||||
.line_box{ |
||||
width: 10px; |
||||
height: 10px; |
||||
background: #3a62d7; |
||||
border-radius: 50%; |
||||
position: relative; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.time_box{ |
||||
color: rgba(154,154,154,1); |
||||
font-size: 14px; |
||||
font-family: SourceHanSansSC; |
||||
margin: 0 15px; |
||||
width: 100px; |
||||
} |
||||
|
||||
.person_con{ |
||||
color: rgba(0,0,0,1); |
||||
font-size: 14px; |
||||
font-family: SourceHanSansSC; |
||||
margin-left: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,184 @@ |
||||
<template> |
||||
<basic-container style="max-height: 800px; overflow: hidden"> |
||||
<el-form :inline="true" v-model="form"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="时间："> |
||||
<el-date-picker |
||||
size="small" |
||||
style="width: 315px;" |
||||
v-model="form.timeRange" |
||||
type="daterange" |
||||
range-separator="至" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="角色："> |
||||
<el-select style="width: 315px;" size="small" placeholder="请选择角色" v-model="form.role"> |
||||
<el-option v-for="item in roleList" :key="item.label" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item label="人员："> |
||||
<el-select style="width: 315px;" size="small" placeholder="请选择人员" v-model="form.person"> |
||||
<el-option v-for="item in personList" :key="item.label" :label="item.label" :value="item.value"></el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6"> |
||||
<el-form-item> |
||||
<el-button type="primary" size="small" @click="onSubmit" icon="el-icon-search">搜索</el-button> |
||||
<el-button size="small" icon="el-icon-delete" @click="onSubmit">重置</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div class="record_box"> |
||||
<div class="record_item" v-for="item in recordList" :key="item.month" style="margin-bottom: 30px;"> |
||||
<div class="month_tit">{{ item.month }}</div> |
||||
<div v-for="(item1,index) in item.arr" :key="item1.time" class="bottom_box"> |
||||
<div class="month_item"> |
||||
<div class="line" :class="index == item.arr.length - 1 ? 'last' : ''"></div> |
||||
<div class="con_box"> |
||||
<div class="line_box"></div> |
||||
<div class="time_box">{{item1.time}}</div> |
||||
<div class="person_con">{{item1.content}}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data(){ |
||||
return{ |
||||
form:{}, |
||||
roleList:[ |
||||
{label:'角色一',value:'001'}, |
||||
{label:'角色二',value:'002'}, |
||||
{label:'角色三',value:'003'}, |
||||
], |
||||
personList:[ |
||||
{label:'人员一',value:'001'}, |
||||
{label:'人员二',value:'002'}, |
||||
{label:'人员三',value:'003'}, |
||||
], |
||||
recordList:[ |
||||
{ |
||||
month:'2024年8月', |
||||
arr:[ |
||||
{time:'20日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'17日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'16日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'12日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'10日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'8日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'7日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'5日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'2日 15:30:58',content:'质量部张三登录成功'}, |
||||
] |
||||
}, |
||||
{ |
||||
month:'2024年7月', |
||||
arr:[ |
||||
{time:'20日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'17日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'16日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'12日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'10日 15:30:58',content:'质量部张三登录成功'}, |
||||
{time:'8日 15:30:58',content:'质量部张三登录成功'}, |
||||
] |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
/deep/ .el-card{ |
||||
box-shadow: none; |
||||
background: transparent; |
||||
|
||||
.record_box{ |
||||
width: 100%; |
||||
height: 615px; |
||||
background: #fff; |
||||
overflow: auto; |
||||
padding: 40px; |
||||
.record_item{ |
||||
.month_tit{ |
||||
color: rgba(108,108,108,1); |
||||
font-size: 16px; |
||||
font-family: SourceHanSansSC; |
||||
font-weight: 700; |
||||
line-height: 30px; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.bottom_box{ |
||||
.month_item{ |
||||
display: flex; |
||||
padding-bottom: 20px; |
||||
position: relative; |
||||
z-index: 100; |
||||
|
||||
.line{ |
||||
height: 35px; |
||||
width: 2px; |
||||
background: rgb(239, 239, 239); |
||||
position: absolute; |
||||
left: 4px; |
||||
top: 10px; |
||||
z-index: 10; |
||||
|
||||
&.last{ |
||||
background: transparent; |
||||
} |
||||
} |
||||
|
||||
.con_box{ |
||||
display: flex; |
||||
height: 21px; |
||||
align-items: center; |
||||
|
||||
.line_box{ |
||||
width: 10px; |
||||
height: 10px; |
||||
background: #3a62d7; |
||||
border-radius: 50%; |
||||
position: relative; |
||||
z-index: 100; |
||||
} |
||||
|
||||
.time_box{ |
||||
color: rgba(154,154,154,1); |
||||
font-size: 14px; |
||||
font-family: SourceHanSansSC; |
||||
margin: 0 15px; |
||||
width: 100px; |
||||
} |
||||
|
||||
.person_con{ |
||||
color: rgba(0,0,0,1); |
||||
font-size: 14px; |
||||
font-family: SourceHanSansSC; |
||||
margin-left: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue