602 lines
22 KiB
Vue
602 lines
22 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div>
|
||
<el-form :model="search" inline>
|
||
<el-form-item label="年">
|
||
<el-input v-model="search.year" placeholder="输入年份"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="周">
|
||
<el-input v-model="search.week" placeholder="输入周"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="零件号">
|
||
<el-input v-model="search.partnumber" placeholder="输入零件号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="颜色">
|
||
<el-input v-model="search.color" placeholder="输入颜色名称"></el-input>
|
||
</el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" @click="handleClick">搜索</el-button>
|
||
</el-form>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="1.5"> <el-button type="primary" size="mini" @click="addworkplan">新建生产计划</el-button> </el-col>
|
||
<el-col :span="1.5"> <el-button type="warning" size="mini" @click="importworkplan">导入生产计划</el-button> </el-col>
|
||
<el-col :span="1.5"> <el-button type="info" size="mini" @click="download_workplan">导出生产计划</el-button> </el-col>
|
||
<el-col :span="1.5"> <el-button type="danger" size="mini" @click="handleAllworkplan">删除本周计划</el-button> </el-col>
|
||
<el-col :span="13" style="float: right">
|
||
<el-form :model="weekAll" inline class="form_define">
|
||
<!-- 周汇总 -->
|
||
<el-form-item label="本周要货数量">
|
||
<el-tag type="success">{{ weekAll.requireNum }}</el-tag>
|
||
</el-form-item>
|
||
<el-form-item label="订单需生产挂具数量">
|
||
<el-tag type="success">{{ weekAll.requireHanger }}</el-tag>
|
||
</el-form-item>
|
||
<el-form-item label="圈数">
|
||
<el-tag type="success">{{ weekAll.turnnum }}</el-tag>
|
||
</el-form-item>
|
||
<el-form-item label="订单生产时间(分钟)">
|
||
<el-tag type="success">{{ weekAll.productiontime }}</el-tag>
|
||
</el-form-item>
|
||
</el-form></el-col
|
||
>
|
||
</el-row>
|
||
<!-- 用户导入对话框 -->
|
||
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
||
<el-upload
|
||
name="file"
|
||
ref="upload"
|
||
:limit="1"
|
||
accept=".xlsx, .xls"
|
||
:headers="upload.headers"
|
||
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
||
:disabled="upload.isUploading"
|
||
:on-progress="handleFileUploadProgress"
|
||
:on-success="handleFileSuccess"
|
||
:auto-upload="false"
|
||
drag
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip text-center" slot="tip">
|
||
<div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的生产计划</div>
|
||
<span>仅允许导入xls、xlsx格式文件。</span>
|
||
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
|
||
</div>
|
||
</el-upload>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||
<el-button @click="upload.open = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog :title="download_.title" :visible.sync="download_.open" width="400px" append-to-body>
|
||
<el-form :model="download_.query" inline>
|
||
<el-form-item label="年">
|
||
<el-input v-model="download_.query.year" placeholder="输入年份"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="周">
|
||
<el-input v-model="download_.query.week" placeholder="输入周"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitdowm">确 定</el-button>
|
||
<el-button @click="download_.open = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<vxe-table
|
||
border
|
||
resizable
|
||
show-overflow
|
||
ref="xTable"
|
||
v-loading="loading_1"
|
||
height="500"
|
||
:row-config="{ isHover: true }"
|
||
:data="workplan_table_data"
|
||
>
|
||
<vxe-column type="seq" width="60"></vxe-column>
|
||
<vxe-column field="blankNum" title="毛坯号"></vxe-column>
|
||
<vxe-column field="partnumber" title="零件号"></vxe-column>
|
||
<vxe-column field="productName" title="产品描述" width="250"></vxe-column>
|
||
<vxe-column field="specification" title="规格"></vxe-column>
|
||
<vxe-column field="colorCode" title="颜色代码"></vxe-column>
|
||
<vxe-column field="requireNum" title="计划数量"></vxe-column>
|
||
<vxe-column field="qualificationRate" title="产品合格率">
|
||
<template #default="{ row }">
|
||
<span>{{ row.qualificationRate * 100 }}%</span>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="everyHangerNum" title="每挂数量"></vxe-column>
|
||
<vxe-column field="productionBeat" title="生产节拍（分钟）"></vxe-column>
|
||
<vxe-column field="allHangerNum" title="总挂具数"></vxe-column>
|
||
<vxe-column field="requireHanger" title="订单需生产挂具数量"></vxe-column>
|
||
<vxe-column field="turnNumber" title="圈数"></vxe-column>
|
||
<vxe-column field="productTime" title="订单生产时间(分钟)"></vxe-column>
|
||
<vxe-column field="noSchedule" title="未排程数"></vxe-column>
|
||
<vxe-column title="操作" width="100" show-overflow>
|
||
<template #default="{ row }">
|
||
<vxe-button size="mini" type="text" status="primary" content="修改" @click="updateitem(row)"></vxe-button>
|
||
<vxe-button size="mini" type="text" status="danger" content="删除" @click="deleteitem(row)"></vxe-button>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
<pagination
|
||
v-show="pagination.total > 0"
|
||
:total="pagination.total"
|
||
:page.sync="pagination.pageNum"
|
||
:limit.sync="pagination.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
<!-- 添加或修改生产计划对话框 -->
|
||
<el-dialog :title="dialog.title" :visible.sync="dialog.open" width="63%">
|
||
<el-form :model="workplanItem" :rules="rules" ref="workplan">
|
||
<el-row>
|
||
<el-col :span="8"
|
||
><el-form-item label="毛坯号" prop="blankNum"> <el-input v-model="workplanItem.blankNum" placeholder="毛坯号"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="零件号" prop="partnumber">
|
||
<el-input v-model="workplanItem.partnumber" placeholder="零件号"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="产品描述" prop="productName">
|
||
<el-input v-model="workplanItem.productName" placeholder="产品描述"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="规格" prop="specification">
|
||
<el-input v-model="workplanItem.specification" placeholder="规格"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="颜色代码" prop="colorCode">
|
||
<el-input v-model="workplanItem.colorCode" placeholder="颜色代码"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="计划数量" prop="requireNum">
|
||
<el-input v-model="workplanItem.requireNum" placeholder="计划数量" type="number"></el-input> </el-form-item
|
||
></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="产品合格率(0.9)" prop="qualificationRate">
|
||
<el-input v-model="workplanItem.qualificationRate" placeholder="产品合格率" type="number"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="每挂数量" prop="everyHangerNum">
|
||
<el-input v-model="workplanItem.everyHangerNum" placeholder="每挂数量" type="number"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="生产节拍（分钟）" prop="productionBeat">
|
||
<el-input v-model="workplanItem.productionBeat" placeholder="生产节拍（分钟）"></el-input> </el-form-item
|
||
></el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="总挂具数" prop="allHangerNum">
|
||
<el-input v-model="workplanItem.allHangerNum" placeholder="总挂具数" type="number"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="订单需生产挂具数量">
|
||
<el-input v-model="calculate_everyHangerNum" placeholder="订单需生产挂具数量" disabled type="number"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="圈数"> <el-input v-model="calculate_turnNumber" placeholder="圈数" disabled></el-input> </el-form-item
|
||
></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-form-item label="订单生产时间(分钟)">
|
||
<el-input v-model="calculate_productTime" placeholder="订单生产时间(分钟)" disabled></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="年"> <el-input v-model="workplanItem.year" placeholder="年"></el-input> </el-form-item
|
||
></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="周次"> <el-input v-model="workplanItem.week" placeholder="周次"></el-input> </el-form-item
|
||
></el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getWorkplanList,
|
||
addNewworkplan,
|
||
deleteworkplan,
|
||
updateworkplan,
|
||
handleWeekSummary,
|
||
dowmloadWorkplan,
|
||
deleteAllWorkplan,
|
||
} from '@/api/productManagement/workplan_v2.js'
|
||
import { getToken } from '@/utils/auth'
|
||
export default {
|
||
name: 'workplan2',
|
||
data() {
|
||
return {
|
||
workplan_table_data: [],
|
||
search: {
|
||
year: new Date().getFullYear(),
|
||
week: null,
|
||
partnumber: '',
|
||
color: '',
|
||
},
|
||
pagination: {
|
||
total: 0,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
loading_1: true,
|
||
// 新增或者修改表格
|
||
workplanItem: {
|
||
id: '',
|
||
blankNum: '',
|
||
partnumber: '',
|
||
productName: '',
|
||
specification: '',
|
||
colorCode: '',
|
||
requireNum: null,
|
||
qualificationRate: null,
|
||
everyHangerNum: null,
|
||
productionBeat: null,
|
||
allHangerNum: null,
|
||
turnNumber: null,
|
||
productTime: null,
|
||
requireHanger: null,
|
||
year: 0,
|
||
week: 0,
|
||
},
|
||
rules: {
|
||
blankNum: [{ required: true, message: '毛坯号不能为空', trigger: 'blur' }],
|
||
partnumber: [{ required: true, message: '零件号不能为空', trigger: 'blur' }],
|
||
productName: [{ required: true, message: '产品描述不能为空', trigger: 'blur' }],
|
||
specification: [{ required: true, message: '规格不能为空', trigger: 'blur' }],
|
||
colorCode: [{ required: true, message: '颜色代码不能为空', trigger: 'blur' }],
|
||
requireNum: [{ required: true, message: '本周要货数量不能为空', trigger: 'blur' }],
|
||
qualificationRate: [{ required: true, message: '合格率不能为空', trigger: 'blur' }],
|
||
everyHangerNum: [{ required: true, message: '每挂数量不能为空', trigger: 'blur' }],
|
||
productionBeat: [{ required: true, message: '生产节拍不能为空', trigger: 'blur' }],
|
||
allHangerNum: [{ required: true, message: '总挂具数不能为空', trigger: 'blur' }],
|
||
},
|
||
//本周合计
|
||
weekAll: {
|
||
requireNum: null,
|
||
requireHanger: null,
|
||
turnnum: null,
|
||
productiontime: null,
|
||
},
|
||
// 新增修改计划模态框
|
||
dialog: {
|
||
title: '',
|
||
open: false,
|
||
form: {},
|
||
},
|
||
|
||
flag: '', //判断新增还是修改
|
||
|
||
upload: {
|
||
// 用户导入参数
|
||
// 是否显示弹出层（用户导入）
|
||
open: false,
|
||
// 弹出层标题（用户导入）
|
||
title: '',
|
||
// 是否禁用上传
|
||
isUploading: false,
|
||
// 是否更新已经存在的用户数据
|
||
updateSupport: false,
|
||
// 设置上传的请求头部
|
||
headers: { Authorization: 'Bearer ' + getToken() },
|
||
// 上传的地址
|
||
url: process.env.VUE_APP_BASE_API + '/mes/pro/workplan_v2/importData',
|
||
},
|
||
download_: {
|
||
title: '下载生产计划',
|
||
open: false,
|
||
query: {
|
||
year: 0,
|
||
week: 0,
|
||
},
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getList()
|
||
},
|
||
computed: {
|
||
//计算 订单需生产挂具数量
|
||
calculate_everyHangerNum() {
|
||
this.workplanItem.requireHanger = (
|
||
this.workplanItem.requireNum /
|
||
this.workplanItem.everyHangerNum /
|
||
this.workplanItem.qualificationRate
|
||
).toFixed(2)
|
||
return this.workplanItem.requireHanger
|
||
},
|
||
//计算 圈数
|
||
calculate_turnNumber() {
|
||
this.workplanItem.turnNumber = (this.workplanItem.requireHanger / 170).toFixed(2)
|
||
return this.workplanItem.turnNumber
|
||
},
|
||
//计算 订单生产时间(分钟)
|
||
calculate_productTime() {
|
||
this.workplanItem.productTime = (this.workplanItem.productionBeat * this.workplanItem.requireHanger).toFixed(2)
|
||
return this.workplanItem.productTime
|
||
},
|
||
|
||
// 本周合计
|
||
// 本周要货数量
|
||
// calculate_requireNum() {
|
||
// this.workplan_table_data.forEach((item) => {
|
||
// this.weekAll.requireNum += Number(item.requireNum)
|
||
// })
|
||
// return this.weekAll.requireNum
|
||
// },
|
||
// // 订单需生产挂具数量
|
||
// calculate_requireHanger() {
|
||
// this.workplan_table_data.forEach((item) => {
|
||
// this.weekAll.requireHanger += Number(item.requireHanger)
|
||
// })
|
||
// return this.weekAll.requireHanger
|
||
// },
|
||
// // 圈数
|
||
// calculate_turnnum() {
|
||
// this.workplan_table_data.forEach((item) => {
|
||
// this.weekAll.turnnum += Number(item.turnNumber)
|
||
// })
|
||
// return this.weekAll.turnnum
|
||
// },
|
||
// //订单生产时间(分钟)
|
||
// calculate_productiontime() {
|
||
// this.workplan_table_data.forEach((item) => {
|
||
// this.weekAll.productiontime += Number(item.productTime)
|
||
// })
|
||
// return this.weekAll.productiontime
|
||
// },
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
this.getList()
|
||
this.getWeekSummary()
|
||
},
|
||
//todo 获取生产计划列表
|
||
getList() {
|
||
const query = { ...this.search, ...this.pagination }
|
||
if (query.week == null || query.week == undefined || query.week == '') query.week = -1
|
||
if (query.year == null || query.year == undefined || query.year == '') query.year = -1
|
||
getWorkplanList(query).then((res) => {
|
||
if (res.code == 200) {
|
||
this.loading_1 = false
|
||
this.workplan_table_data = res.data.item1
|
||
this.pagination.total = res.data.item2
|
||
}
|
||
})
|
||
},
|
||
|
||
//todo 新增生产计划
|
||
addworkplan() {
|
||
this.dialog.title = '新增生产计划'
|
||
this.dialog.open = true
|
||
this.flag = 'insert'
|
||
},
|
||
//todo 修改生产计划
|
||
updateitem(row) {
|
||
this.dialog.open = true
|
||
this.flag = 'update'
|
||
this.dialog.title = '修改生产计划'
|
||
this.workplanItem.id = row.id
|
||
this.workplanItem.blankNum = row.blankNum
|
||
this.workplanItem.partnumber = row.partnumber
|
||
this.workplanItem.productName = row.productName
|
||
this.workplanItem.specification = row.specification
|
||
this.workplanItem.colorCode = row.colorCode
|
||
this.workplanItem.requireNum = row.requireNum
|
||
this.workplanItem.qualificationRate = row.qualificationRate
|
||
this.workplanItem.everyHangerNum = row.everyHangerNum
|
||
this.workplanItem.productionBeat = row.productionBeat
|
||
this.workplanItem.allHangerNum = row.allHangerNum
|
||
this.workplanItem.turnNumber = row.turnNumber
|
||
this.workplanItem.productTime = row.productTime
|
||
this.workplanItem.requireHanger = row.requireHanger
|
||
this.workplanItem.year = row.year
|
||
this.workplanItem.week = row.week
|
||
},
|
||
|
||
|
||
|
||
//todo 新增或者修改 提交按钮
|
||
submitForm() {
|
||
const query = { ...this.workplanItem }
|
||
;(query.requireNum = Number(query.requireNum)),
|
||
(query.qualificationRate = Number(query.qualificationRate)),
|
||
(query.everyHangerNum = Number(query.everyHangerNum)),
|
||
(query.productionBeat = Number(query.productionBeat)),
|
||
(query.allHangerNum = Number(query.allHangerNum)),
|
||
(query.productTime = Number(query.productTime)),
|
||
(query.requireHanger = Number(query.requireHanger)),
|
||
(query.year = Number(query.year)),
|
||
(query.week = Number(query.week)),
|
||
(query.turnNumber = Number(query.turnNumber))
|
||
|
||
if (this.flag == 'insert') {
|
||
this.$refs['workplan'].validate((valid) => {
|
||
if (valid) {
|
||
addNewworkplan(query).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$notify.success('新增成功')
|
||
this.getList()
|
||
this.dialog.open = false
|
||
// 清空表单
|
||
this.clearworkplanItem()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else if (this.flag == 'update') {
|
||
this.$refs['workplan'].validate((valid) => {
|
||
if (valid) {
|
||
updateworkplan(query).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$notify.success('修改成功')
|
||
this.getList()
|
||
this.dialog.open = false
|
||
// 清空表单
|
||
//this.resetForm('workplan')
|
||
this.clearworkplanItem()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
//todo 清空表单
|
||
clearworkplanItem() {
|
||
Object.keys(this.workplanItem).forEach((key) => {
|
||
this.workplanItem[key] = null
|
||
})
|
||
},
|
||
//todo 返回
|
||
cancel() {
|
||
this.dialog.open = false
|
||
this.clearworkplanItem()
|
||
},
|
||
//todo 删除事件
|
||
deleteitem(row) {
|
||
this.$modal
|
||
.confirm('是否确认删除生产计划名称为' + row.partnumber + '"的数据项？')
|
||
.then(function () {
|
||
return deleteworkplan(row.id)
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data == 1) {
|
||
this.$notify.success('删除成功')
|
||
this.getList()
|
||
} else {
|
||
this.$notify.error('删除失败')
|
||
}
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
//todo 导入文件
|
||
importworkplan() {
|
||
this.upload.open = true
|
||
this.upload.title = '生产计划导入'
|
||
},
|
||
|
||
//todo 下载模板
|
||
importTemplate() {
|
||
// @/utils/ruoyi"
|
||
this.download('/mes/pro/workplan_v2/importTemplate', '生产计划导入模板')
|
||
},
|
||
|
||
// todo 文件上传中处理
|
||
handleFileUploadProgress(event, file, fileList) {
|
||
this.upload.isUploading = true
|
||
},
|
||
//todo 提交上传文件
|
||
submitFileForm() {
|
||
this.$refs.upload.submit()
|
||
},
|
||
//todo 文件上传成功处理
|
||
handleFileSuccess(response, file, fileList) {
|
||
this.upload.open = false
|
||
this.upload.isUploading = false
|
||
this.$refs.upload.clearFiles()
|
||
if (response.code == 200) {
|
||
this.$alert(response.data, '导入结果', { dangerouslyUseHTMLString: true })
|
||
} else {
|
||
this.$alert(response.msg, '导入结果', {
|
||
dangerouslyUseHTMLString: true,
|
||
type: 'error',
|
||
})
|
||
}
|
||
|
||
this.getList()
|
||
},
|
||
//todo 获取周汇总
|
||
getWeekSummary() {
|
||
const query = {}
|
||
query.year = this.search.year
|
||
query.week = this.search.week
|
||
handleWeekSummary(query).then((res) => {
|
||
if (res.code == 200) {
|
||
this.weekAll = res.data
|
||
} else if ((res.code = 210)) {
|
||
Object.keys(this.weekAll).forEach((key) => {
|
||
this.weekAll[key] = null
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//todo 下载
|
||
async submitdowm() {
|
||
this.download_.open = false
|
||
await dowmloadWorkplan(this.download_.query)
|
||
},
|
||
//todo
|
||
download_workplan() {
|
||
this.download_.open = true
|
||
this.download_.query.year = this.search.year
|
||
this.download_.query.week = this.search.week
|
||
},
|
||
|
||
//todo 删除本周计划
|
||
handleAllworkplan() {
|
||
if (this.search.week == undefined) {
|
||
return
|
||
}
|
||
const query = {
|
||
year: this.search.year,
|
||
week: this.search.week,
|
||
}
|
||
|
||
this.$modal
|
||
.confirm('是否确认删除本周所有生产计划？')
|
||
.then(function () {
|
||
return deleteAllWorkplan(query)
|
||
})
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
if (res.data >1) {
|
||
this.$notify.success('删除成功')
|
||
this.getList()
|
||
} else {
|
||
this.$notify.error('删除失败')
|
||
}
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: #409eff;
|
||
}
|
||
.el-icon-arrow-down {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.form_define ::v-deep .el-form-item__content {
|
||
height: 27.6px;
|
||
}
|
||
.form_define {
|
||
height: 37px;
|
||
}
|
||
</style>
|