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.
725 lines
22 KiB
725 lines
22 KiB
<script>
|
|
import {
|
|
selectCollectList,
|
|
editCollect,
|
|
removeCollect,
|
|
saveCollect,
|
|
selectCollectListDetail
|
|
} from "../../../api/cdc/collect";
|
|
import dayjs from "dayjs";
|
|
import CollectError from "./collect/collectError.vue";
|
|
|
|
const tableId = "2000002"
|
|
const tableName = "采集数据定义"
|
|
const table1 = "2000002Table1"
|
|
const table2 = "2000002Table2"
|
|
const table3 = "2000002Table3"
|
|
export default {
|
|
name: "collect",
|
|
components: {CollectError},
|
|
props:{
|
|
height:{
|
|
type:Number,
|
|
default:700
|
|
},
|
|
component:{
|
|
type:Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
// 异常预警弹出层
|
|
errorVisible: false,
|
|
// 遮罩层
|
|
loading: true,
|
|
// 设备信息表格数据
|
|
infoList: [],
|
|
// 弹出层标题
|
|
title: tableName,
|
|
// 是否显示弹出层
|
|
open: false,
|
|
// 查询参数
|
|
queryParams: {
|
|
collectId: '',
|
|
collectDesc: null,
|
|
active: "",
|
|
},
|
|
// 表单参数
|
|
form: {},
|
|
// 表单校验
|
|
rules: {
|
|
collectDesc: [
|
|
{ required: true, message: "数据标识描述不能为空", trigger: "blur" }
|
|
],
|
|
collectId: [
|
|
{ required: true, message: "数据标识ID不能为空", trigger: "blur" }
|
|
],
|
|
maxValue: [
|
|
{ required: true, message: "上限值不能为空", trigger: "blur" }
|
|
],
|
|
minValue: [
|
|
{ required: true, message: "下限值不能为空", trigger: "blur" }
|
|
],
|
|
},
|
|
deviceColumns:[
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}CollectId`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'collectId',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '数据标识ID',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}CollectDesc`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'collectDesc',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '数据标识描述',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 120
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}MaxValue`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'maxValue',
|
|
headerAlign: 'center',
|
|
align: 'right',
|
|
columnLabel: '上限值',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}MinValue`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'minValue',
|
|
headerAlign: 'center',
|
|
align: 'right',
|
|
columnLabel: '下限值',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}PhoneInfoFlag`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'phoneInfoFlag',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '短信预警',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}MailInfoFlag`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'mailInfoFlag',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '邮箱预警',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}Remark`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'remark',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '备注',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 140
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table1}Active`,
|
|
tableId: table1,
|
|
tableName: tableName,
|
|
columnProp: 'active',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '在用',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},
|
|
],
|
|
// 异常预警 header
|
|
header:{},
|
|
detailList:[],
|
|
|
|
mailColumns:[
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}Username`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'username',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '人员',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}itemValue`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'itemValue',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '邮箱',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}Active`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'active',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '在用',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}CreateBy`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'createBy',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '创建人',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}CreateTime`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'createTime',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '创建时间',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}UpdateBy`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'updateBy',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '修改人',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table2}UpdateTime`,
|
|
tableId: table2,
|
|
tableName: tableName,
|
|
columnProp: 'updateTime',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '修改时间',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},
|
|
],
|
|
phoneColumns:[
|
|
{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}Username`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'username',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '人员',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}itemValue`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'itemValue',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '手机号',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}Active`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'active',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '在用',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}CreateBy`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'createBy',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '创建人',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}CreateTime`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'createTime',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '创建时间',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}UpdateBy`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'updateBy',
|
|
headerAlign: 'center',
|
|
align: 'left',
|
|
columnLabel: '修改人',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},{
|
|
userId: this.$store.state.user.name,
|
|
functionId: tableId,
|
|
serialNumber: `${table3}UpdateTime`,
|
|
tableId: table3,
|
|
tableName: tableName,
|
|
columnProp: 'updateTime',
|
|
headerAlign: 'center',
|
|
align: 'center',
|
|
columnLabel: '修改时间',
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
columnWidth: 100
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods:{
|
|
/** 查询设备信息列表 */
|
|
getList() {
|
|
let params = {
|
|
...this.queryParams,
|
|
site:this.$store.state.user.site
|
|
}
|
|
this.loading = true;
|
|
selectCollectList(params).then(({data}) => {
|
|
if (data && data.code === 0){
|
|
this.infoList = data.rows;
|
|
}
|
|
this.loading = false;
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.form = {
|
|
collectId: '',
|
|
site: null,
|
|
collectDesc: null,
|
|
minValue: null,
|
|
maxValue: null,
|
|
phoneInfoFlag: 'N',
|
|
mailInfoFlag: 'N',
|
|
remark: null,
|
|
active: 'Y',
|
|
createBy: null,
|
|
createTime: null
|
|
};
|
|
this.resetForm("form");
|
|
},
|
|
/** 搜索按钮操作 */
|
|
handleQuery() {
|
|
this.getList();
|
|
},
|
|
/** 新增按钮操作 */
|
|
handleAdd() {
|
|
this.reset();
|
|
this.open = true;
|
|
},
|
|
/** 修改按钮操作 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
this.form = {...row}
|
|
this.form.newCollectId = this.form.collectId;
|
|
this.open = true;
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm() {
|
|
this.$refs["form"].validate((valid,obj) => {
|
|
if (valid) {
|
|
if (!this.form.newCollectId) {
|
|
this.form.site = this.$store.state.user.site;
|
|
this.form.createBy = this.$store.state.user.name;
|
|
this.form.createTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
|
|
saveCollect(this.form).then(({data}) => {
|
|
this.form.site = null;
|
|
if (data && data.code === 0){
|
|
this.$message.success(data.msg);
|
|
this.open = false;
|
|
this.getList();
|
|
}else {
|
|
this.$message.warning(data.msg);
|
|
}
|
|
}).catch((error)=>{
|
|
this.$message.error(error);
|
|
});
|
|
} else {
|
|
editCollect(this.form).then(({data}) => {
|
|
if (data && data.code === 0){
|
|
this.$message.success(data.msg);
|
|
this.open = false;
|
|
this.getList();
|
|
}else {
|
|
this.$message.warning(data.msg);
|
|
}
|
|
}).catch((error)=>{
|
|
this.$message.error(error);
|
|
});
|
|
}
|
|
}else {
|
|
Object.keys(obj).forEach((key)=>{
|
|
this.$message.warning(obj[key][0].message);
|
|
return
|
|
})
|
|
}
|
|
});
|
|
},
|
|
handleDelete(row) {
|
|
this.$confirm('此操作将该数据标识, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
removeCollect(row).then(({data})=>{
|
|
if (data && data.code === 0){
|
|
this.$message.success(data.msg);
|
|
this.getList();
|
|
}else {
|
|
this.$message.success(data.msg);
|
|
}
|
|
}).catch((error)=>{
|
|
this.$message.error(error);
|
|
})
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
handleError(row){
|
|
this.header = {...row}
|
|
this.getDetailList();
|
|
this.errorVisible = true;
|
|
},
|
|
getDetailList(){
|
|
this.detailList = [];
|
|
selectCollectListDetail(this.header).then(({data})=>{
|
|
if (data && data.code === 0){
|
|
this.detailList = data.rows;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed:{
|
|
mailList:{
|
|
get(){
|
|
return this.detailList.filter(item => item.type === 'mail')
|
|
}
|
|
},
|
|
phoneList: {
|
|
get() {
|
|
return this.detailList.filter(item => item.type === 'phone')
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
"queryParams.collectId"(newVal, oldVal){
|
|
this.queryParams.collectId = newVal.toUpperCase();
|
|
},
|
|
"form.collectId"(newVal, oldVal){
|
|
this.form.collectId = newVal.toUpperCase();
|
|
},
|
|
},
|
|
created() {
|
|
this.getList();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<el-form :model="queryParams" label-position="top" ref="queryForm" :inline="true" label-width="68px">
|
|
<el-form-item label="数据标识ID" prop="collectId">
|
|
<el-input
|
|
v-model="queryParams.collectId"
|
|
placeholder=" "
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="数据标识描述" prop="collectDesc">
|
|
<el-input
|
|
v-model="queryParams.collectDesc"
|
|
placeholder=" "
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="在用" prop="active">
|
|
<el-select v-model="queryParams.active" placeholder="请选择在用" >
|
|
<el-option label="全部" value=""/>
|
|
<el-option label="在用" value="Y"/>
|
|
<el-option label="停用" value="N"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label=" ">
|
|
<el-button type="primary" @click="handleQuery" plain>查询</el-button>
|
|
<el-button type="primary" @click="handleAdd" v-if="!component">新增</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table v-loading="loading" border :data="infoList" :height="height">
|
|
<el-table-column label="操作" align="center" v-if="!component">
|
|
<template slot-scope="scope">
|
|
<el-link @click="handleUpdate(scope.row)">编辑</el-link>
|
|
<el-link @click="handleDelete(scope.row)">删除</el-link>
|
|
<el-link @click="handleError(scope.row)">异常预警</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="(item,index) in deviceColumns" :key="index"
|
|
:sortable="item.columnSortable"
|
|
:prop="item.columnProp"
|
|
:header-align="item.headerAlign"
|
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
:align="item.align"
|
|
:fixed="item.fixed === ''?false:item.fixed"
|
|
:min-width="item.columnWidth"
|
|
:label="item.columnLabel">
|
|
<template slot-scope="scope">
|
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span>
|
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 添加或修改设备信息对话框 -->
|
|
<el-dialog :title="title" v-if="!component" v-drag :visible.sync="open" width="600px" append-to-body>
|
|
<el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
|
|
<el-row :gutter="10">
|
|
<el-col :span="6">
|
|
<el-form-item label="数据标识ID" prop="collectId" :show-message="false">
|
|
<el-input v-model="form.collectId" :disabled="form.newCollectId" placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-form-item label="数据标识描述" prop="collectDesc" :show-message="false">
|
|
<el-input v-model="form.collectDesc" placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label=" " prop="phoneInfoFlag" :show-message="false">
|
|
<el-checkbox v-model="form.phoneInfoFlag" true-label="Y" false-label="N">短信预警</el-checkbox>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="上限值" prop="maxValue" :show-message="false">
|
|
<el-input-number :controls="false" :step="0" v-model="form.maxValue" placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="下限值" prop="minValue" :show-message="false">
|
|
<el-input-number :controls="false" :step="0" v-model="form.minValue" placeholder=" " />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6" :offset="2">
|
|
<el-form-item label=" " prop="active" :show-message="false">
|
|
<el-checkbox v-model="form.active" true-label="Y" false-label="N">在用</el-checkbox>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-form-item label=" " prop="mailInfoFlag" :show-message="false">
|
|
<el-checkbox v-model="form.mailInfoFlag" true-label="Y" false-label="N">邮箱预警</el-checkbox>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="备注" prop="remark" :show-message="false">
|
|
<el-input v-model="form.remark"></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>
|
|
|
|
<collect-error v-if="errorVisible"
|
|
:visible.sync="errorVisible"
|
|
:collect="header"
|
|
:mail-data-list="mailList" :mail-columns="mailColumns"
|
|
:phone-data-list="phoneList" :phone-columns="phoneColumns"
|
|
@refresh="getDetailList"></collect-error>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|