You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
571 lines
16 KiB
571 lines
16 KiB
2 years ago
|
<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="operationStatus">
|
||
|
|
<el-tag size="small" :type="row.operationStatus == 1 ? 'success' : row.operationStatus == 2 ? '' : row.operationStatus == 3 ? 'info' : ''">
|
||
|
|
{{
|
||
|
|
row.operationStatus == 1 ? '待接单' : row.operationStatus == 2 ? '维修完成' : row.operationStatus == 3 ? '已完成' : ''
|
||
|
|
}}
|
||
|
|
</el-tag>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="{type,disabled}" slot="operationStatusForm">
|
||
|
|
<div v-if="type == 'view'">
|
||
|
|
<el-tag size="small" :type="form.operationStatus == 1 ? 'success' : form.operationStatus == 2 ? '' : form.operationStatus == 3 ? 'info' : ''">
|
||
|
|
{{
|
||
|
|
form.operationStatus == 1 ? '待接单' : form.operationStatus == 2 ? '维修完成' : form.operationStatus == 3 ? '已完成' : ''
|
||
|
|
}}
|
||
|
|
</el-tag>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="{type,disabled}" slot="errorVideoForm">
|
||
|
|
<div v-if="type == 'view'">
|
||
|
|
<video :src="form.errorVideo" muted autoplay style="width:200px;height:200px;"></video>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="{type,disabled}" slot="errorImgForm">
|
||
|
|
<div v-if="type == 'view'">
|
||
|
|
<!-- {{from.errorImg}} -->
|
||
|
|
<img v-for="item in form.errorImg" :key="item" :src="item" alt="" style="width:180px;height:180px;margin:0 5px;">
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="scope" slot="menuLeft">
|
||
|
|
<el-button type="primary" icon="el-icon-plus" size="small" @click="addOperation">需求提报</el-button>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="{row}" slot="menu">
|
||
|
|
<el-button @click="$refs.crud.rowView(row,index)">查看</el-button>
|
||
|
|
<el-button @click="handleEdit(row)">编辑</el-button>
|
||
|
|
<el-button @click="handleEvaluate(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;">
|
||
|
|
<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>
|
||
|
|
<el-form ref="form" :model="item.form" label-width="100px">
|
||
|
|
<el-form-item label="故障位置">
|
||
|
|
<el-input placeholder="请输入故障位置" v-model="item.form.errPosition"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="设备名称">
|
||
|
|
<el-select placeholder="请选择设备名称" v-model="item.form.deviceName" style="width:100%;">
|
||
|
|
<el-option v-for="item in deviceList" :key="item.value" :value="item.value" :label="item.label"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="故障专业类型">
|
||
|
|
<el-select placeholder="请选择故障专业类型" v-model="item.form.errType" style="width:100%;">
|
||
|
|
<el-option v-for="item in errorList" :key="item.value" :value="item.value" :label="item.label"></el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="故障现象描述">
|
||
|
|
<el-input placeholder="请输入故障现象描述" type="textarea" v-model="item.form.errDescirb"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="故障视频">
|
||
|
|
<el-upload
|
||
|
|
action="#"
|
||
|
|
list-type="picture-card"
|
||
|
|
:auto-upload="false"
|
||
|
|
accept=".mp4"
|
||
|
|
:on-success="handleSuccess">
|
||
|
|
<i slot="default" class="el-icon-plus"></i>
|
||
|
|
</el-upload>
|
||
|
|
<video></video>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="handleAdd">新 增</el-button>
|
||
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
|
|
<el-button @click="handleSave">保 存</el-button>
|
||
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</basic-container>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapGetters } from "vuex";
|
||
|
|
import { dateFormat } from "../../util/date";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showPrint: false,
|
||
|
|
dialogTitle:'需求填报',
|
||
|
|
dialogVisible:true,
|
||
|
|
uploadUrl:'',
|
||
|
|
form: {},
|
||
|
|
addForm:[
|
||
|
|
{form:{}},
|
||
|
|
{form:{}},
|
||
|
|
],
|
||
|
|
query: {},
|
||
|
|
loading: true,
|
||
|
|
parentId: 0,
|
||
|
|
direction: 'rtl',
|
||
|
|
page: {
|
||
|
|
pageSize: 10,
|
||
|
|
currentPage: 1,
|
||
|
|
total: 0,
|
||
|
|
},
|
||
|
|
deviceList:[
|
||
|
|
{label:'设备一',value:'001'},
|
||
|
|
{label:'设备二',value:'002'},
|
||
|
|
{label:'设备三',value:'003'},
|
||
|
|
{label:'设备四',value:'004'},
|
||
|
|
],
|
||
|
|
errorList:[
|
||
|
|
{label:'类别一',value:'01'},
|
||
|
|
{label:'类别二',value:'02'},
|
||
|
|
{label:'类别三',value:'03'},
|
||
|
|
{label:'类别四',value:'04'},
|
||
|
|
],
|
||
|
|
isRegister: false,
|
||
|
|
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:320,
|
||
|
|
column: [
|
||
|
|
{
|
||
|
|
label: "提报时间",
|
||
|
|
prop: "addTime",
|
||
|
|
type: "date",
|
||
|
|
format: "yyyy-MM-dd",
|
||
|
|
valueFormat: "yyyy-MM-dd",
|
||
|
|
search: true,
|
||
|
|
hide: true,
|
||
|
|
viewDisplay: false,
|
||
|
|
searchValue: dateFormat(new Date(), 'yyyy-MM-dd'),
|
||
|
|
searchClearable: false,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "需求单号",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "operationNo",
|
||
|
|
overHidden:true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "设备名称",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "deviceName",
|
||
|
|
overHidden:true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "故障位置",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "errPosition",
|
||
|
|
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: "errType",
|
||
|
|
overHidden:true,
|
||
|
|
type: "select",
|
||
|
|
searchLabelWidth: 100,
|
||
|
|
hide: true,
|
||
|
|
search: true,
|
||
|
|
viewDisplay: false,
|
||
|
|
// dicUrl: '/api/blade-system/dict-biz/get-hc-project',
|
||
|
|
props: {
|
||
|
|
label: 'dictValue',
|
||
|
|
value: 'dictValue'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label:'故障现象描述',
|
||
|
|
labelWidth:120,
|
||
|
|
prop:'errDescirb',
|
||
|
|
overHidden:true,
|
||
|
|
slot: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '故障视频',
|
||
|
|
labelWidth:120,
|
||
|
|
prop: 'errorVideo',
|
||
|
|
// hide:true,
|
||
|
|
// propsHttp: {
|
||
|
|
// res: 'data',
|
||
|
|
// url:'url',
|
||
|
|
// name:'name',
|
||
|
|
// home: 'https://www.w3school.com.cn'
|
||
|
|
// },
|
||
|
|
// action: 'https://api.avuejs.com/imgupload',
|
||
|
|
// listType: 'picture-img',
|
||
|
|
// formslot:true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '故障图片',
|
||
|
|
labelWidth:120,
|
||
|
|
prop: 'errorImg',
|
||
|
|
type: 'upload',
|
||
|
|
hide:true,
|
||
|
|
formslot:true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "提报时间",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "operationDate",
|
||
|
|
slot: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "状态",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "operationStatus",
|
||
|
|
slot: true,
|
||
|
|
formslot:true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: "完成时间",
|
||
|
|
labelWidth:120,
|
||
|
|
prop: "finishDate",
|
||
|
|
slot: true
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
data: [],
|
||
|
|
videoList:'',//上传成功的视频
|
||
|
|
};
|
||
|
|
},
|
||
|
|
directives: {
|
||
|
|
print
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
...mapGetters(["userInfo", "permission", "systemTime"]),
|
||
|
|
permissionList() {
|
||
|
|
return {
|
||
|
|
addBtn: this.vaildData(this.permission.notice_add, false),
|
||
|
|
viewBtn: this.vaildData(this.permission.notice_view, false),
|
||
|
|
delBtn: this.vaildData(this.permission.notice_delete, false),
|
||
|
|
editBtn: this.vaildData(this.permission.notice_edit, false)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 需求提报
|
||
|
|
addOperation(){
|
||
|
|
this.dialogTitle = '需求填报'
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
// 视频上传成功
|
||
|
|
handleSuccessVideo(response, file, fileList){
|
||
|
|
console.log('response--------------->',response)
|
||
|
|
console.log('file--------------->',file)
|
||
|
|
console.log('fileList--------------->',fileList)
|
||
|
|
|
||
|
|
},
|
||
|
|
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();
|
||
|
|
},
|
||
|
|
closeDraw() {
|
||
|
|
this.isRegister = false
|
||
|
|
},
|
||
|
|
currentChange(currentPage) {
|
||
|
|
this.page.currentPage = currentPage;
|
||
|
|
},
|
||
|
|
sizeChange(pageSize) {
|
||
|
|
this.page.pageSize = pageSize;
|
||
|
|
},
|
||
|
|
refreshChange() {
|
||
|
|
this.onLoad(this.page, this.query);
|
||
|
|
},
|
||
|
|
onLoad(page, params = {}) {
|
||
|
|
this.data = [
|
||
|
|
{operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:1,finishDate:'2024-02-26',
|
||
|
|
errorVideo:'/i/movie.ogg',errorImg:['https://api.avuejs.com/imgview/1721789673575.jpg','https://api.avuejs.com/imgview/1721800386561.jpg']},
|
||
|
|
{operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:2,finishDate:'2024-02-26',
|
||
|
|
errorVideo:'https://api.avuejs.com/imgview/主动管控页面.mp4',errorImg:[]},
|
||
|
|
{operationNo:'WX-20240820-01',deviceName:'通风柜',errPosition:'一楼102室',errType:'暖通自控',errDescirb:'通风柜无风，不通风',operationDate:'2024-02-15',operationStatus:3,finishDate:'2024-02-26',
|
||
|
|
errorVideo:'https://api.avuejs.com/imgview/主动管控页面.mp4',errorImg:[]},
|
||
|
|
]
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|
||
|
|
<style lang="scss">
|
||
|
|
.el-drawer__wrapper {
|
||
|
|
.register_box {
|
||
|
|
width: 800px !important;
|
||
|
|
// padding: 0 40px;
|
||
|
|
|
||
|
|
.title_box {
|
||
|
|
// padding: 0 40px;
|
||
|
|
// margin-top: 40px;
|
||
|
|
|
||
|
|
.title_txt {
|
||
|
|
display: flex;
|
||
|
|
height: 30px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.txt {
|
||
|
|
color: rgba(0, 0, 0, .85);
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 24px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_box {
|
||
|
|
img {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub_txt {
|
||
|
|
font-size: 12px;
|
||
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
line-height: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tip_box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin: 60px 0 20px 0;
|
||
|
|
|
||
|
|
.img {
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tip_txt {
|
||
|
|
font-size: 24px;
|
||
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #00B578;
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fail_txt {
|
||
|
|
color: #F93A4A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.warn_txt {
|
||
|
|
color: #FF6010;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips_txt {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #F93A4A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips_warn {
|
||
|
|
color: #FF6010;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fail_tip {
|
||
|
|
color: #FF6010;
|
||
|
|
}
|
||
|
|
|
||
|
|
.account_mess {
|
||
|
|
.mess_tit {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
margin: 40px 0 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mess_box {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 123px;
|
||
|
|
background: #F5F6FA;
|
||
|
|
border-radius: 8px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.left_box {
|
||
|
|
width: 25%;
|
||
|
|
margin-left: 30px;
|
||
|
|
|
||
|
|
.acc_text {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acc_txt {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #00B578;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.fail_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.warn_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_box {
|
||
|
|
display: flex;
|
||
|
|
width: 75%;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.acc_box {
|
||
|
|
.acc_text {
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #999999;
|
||
|
|
margin-bottom: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acc_txt {
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #00B578;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.fail_right {
|
||
|
|
.acc_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.warn_right {
|
||
|
|
.acc_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.reg_box {
|
||
|
|
justify-content: start;
|
||
|
|
|
||
|
|
.left_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_box {
|
||
|
|
.acc_box {
|
||
|
|
.acc_txt {
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.acc_warn {
|
||
|
|
color: #FF6010;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 151px;
|
||
|
|
height: 50px;
|
||
|
|
background: #1677FF;
|
||
|
|
border-radius: 2px 2px 2px 2px;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #FFFFFF;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 50px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.prin_table table tr td {
|
||
|
|
padding: 4px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|