VUE
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-lx-calendar"></ I > Data entry </el-breadcrumb-item> </el-breadcrumb> </div> <div class="container">
<div class="">
<el-form ref="formData" :model="formData" :rules="rules">
<el-form-item required label="Data version" prop="version" label-width="80px">
<el-input v-model="formData.version" ref="version" style="max-width: 215px;"></el-input>
</el-form-item>
<el-form-item label="Critical model" label-width="80px">
<el-select v-model="pageDataValue" @change='selectPageType'>
<el-option v-for="item in pageData" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-row :gutter="20">
<el-col :span="16" v-for="(dataType, index) in formData.selectPageData" :key="index">
<el-card shadow="hover" style="margin-top: 10px; background-color: #F2F6FC;">
<div style="line-height: 32px; color: #606266; font-size: 16px; font-weight: 600;">
{{dataType.label}}
</div>
<el-form :model="formData.selectPageData[index]" inline ref="formDataDetail">
<el-col v-for="(item1, index1) in dataType.item" :key="index1">
<div style="line-height: 32px; color: #606266;">{{item1.value}}</div>
<el-col :span="12">
<el-form-item label="Accuracy" size="small"
:prop="'item['+index1+'].correctRate'"
:rules="[{required: true,message:' Only numbers '}]">
<el-input v-model="dataType.item[index1].correctRate"
type="number"&western nkeypress ="return(/[\d]/g.test(String.fromCharCode(event.keyCode)))">
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Recall rate" size="small" :prop="'item['+index1+'].recallRate'"
:rules="[{required: true,message:' Only numbers '}]">
<el-input v-model.number="dataType.item[index1].recallRate"></el-input>
</el-form-item>
</el-col>
</el-col>
</el-form>
</el-card>
</el-col>
</el-row>
<el-form-item style="margin-top: 10px;">
<el-button type="primary" @click="addPageData('formData')"> New data </el-button> <el-button> Cancel </el-button> </el-form-item> </el-form> </div> </div> </template> <script> import interfaceURL from'.. /common/interface';
import utils from '.. /common/utils';
import bus from '.. /common/bus';
export default {
name: 'dataEntry',
data: function () {
return {
pageDataValue: "pg_worth_data",
pageData: [
{
value: 'pg_worth_data',
label: 'Page Value (low quality)',
item: [
{
key: "cont_deadlink",
value: "Content dead link",
correctRate: "",
recallRate: ""
},
{
key: "rt_deadlink",
value: "Jump dead chain",
correctRate: "",
recallRate: ""
},
{
key: "kw_pileup",
value: "Keyword stacking",
correctRate: "",
recallRate: ""
},
{
key: "lk_pileup",
value: "Link stacking",
correctRate: "",
recallRate: ""
},
{
key: "sp_search",
value: "Empty search page",
correctRate: "",
recallRate: ""
},
{
key: "sp_page",
value: "Blank page",
correctRate: "",
recallRate: ""
},
{
key: "qu_nonan",
value: Is there a question and answer page?,
correctRate: "",
recallRate: ""
},
{
key: "pro_non",
value: "Items Sold out page",
correctRate: "",
recallRate: ""
},
]
},
{
value: 'element_data',
label: 'Element extraction/Element Identification',
item: [
{
key: "cont",
value: "content",
correctRate: "",
recallRate: ""
},
{
key: "refer",
value: "refer",
correctRate: "",
recallRate: ""
},
{
key: "title",
value: "title",
correctRate: "",
recallRate: ""
},
{
key: "retitle",
value: "True title",
correctRate: "",
recallRate: ""
},
{
key: "pub_time",
value: "article-info/publish time",
correctRate: "",
recallRate: ""
},
{
key: "myops",
value: "myops",
correctRate: "",
recallRate: ""
},
{
key: "pg_turn",
value: "Flip",
correctRate: "",
recallRate: ""
},
{
key: "header",
value: "Navigation",
correctRate: "",
recallRate: ""
},
{
key: "footer",
value: "Copyright Information",
correctRate: "",
recallRate: ""
},
{
key: "footer",
value: "Other borders",
correctRate: "",
recallRate: ""
},
{
key: "share",
value: "Share the block",
correctRate: "",
recallRate: ""
},
{
key: "video",
value: "Video block",
correctRate: "",
recallRate: ""
},
{
key: "link",
value: "Link block",
correctRate: "",
recallRate: ""
},
{
key: "comment",
value: Comment block,
correctRate: "",
recallRate: ""
},
]
},
{
value: 'classify_data',
label: 'Page structure classification',
item: [
{
key: "article",
value: "Article page",
correctRate: "",
recallRate: ""
},
{
key: "news",
value: "News Content page",
correctRate: "",
recallRate: ""
},
{
key: "novel",
value: "Novel Content page",
correctRate: "",
recallRate: ""
},
{
key: "blog",
value: "Blog Content page",
correctRate: "",
recallRate: ""
},
{
key: "introduction",
value: "Introduction page",
correctRate: "",
recallRate: ""
},
{
key: "index",
value: "Index page",
correctRate: "",
recallRate: ""
},
{
key: "qaanswer",
value: Question and Answer page,
correctRate: "",
recallRate: ""
},
{
key: "baike",
value: "Encyclopedia page",
correctRate: "",
recallRate: ""
},
{
key: "image",
value: "Picture page",
correctRate: "",
recallRate: ""
},
{
key: "video",
value: "Video page",
correctRate: "",
recallRate: ""
},
{
key: "high_video",
value: "High quality video",
correctRate: "",
recallRate: ""
},
{
key: "product_detail",
value: "Product Details Page",
correctRate: "",
recallRate: ""
},
{
key: "download",
value: "Download page",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'content_data',
label: 'Body extraction',
item: [
{
key: "content_data",
value: "Text extraction",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'image_data',
label: 'Graphic extraction',
item: [
{
key: "image_data",
value: "Text and text extraction",
correctRate: "",
recallRate: ""
}
]
},
{
value: 'sugges_data',
label: 'Search engines',
item: [
{
key: "sugges_data",
value: "Search engine",
correctRate: "",
recallRate: ""
}
]
}
],
formData: {
version: "",
selectPageData: [
{
value: 'pg_worth_data',
label: 'Page Value (low quality)',
item: [
{
key: "cont_deadlink",
value: "Content dead link",
correctRate: "",
recallRate: ""
},
{
key: "rt_deadlink",
value: "Jump dead chain",
correctRate: "",
recallRate: ""
},
{
key: "kw_pileup",
value: "Keyword stacking",
correctRate: "",
recallRate: ""
},
{
key: "lk_pileup",
value: "Link stacking",
correctRate: "",
recallRate: ""
},
{
key: "sp_search",
value: "Empty search page",
correctRate: "",
recallRate: ""
},
{
key: "sp_page",
value: "Blank page",
correctRate: "",
recallRate: ""
},
{
key: "qu_nonan",
value: Is there a question and answer page?,
correctRate: "",
recallRate: ""
},
{
key: "pro_non",
value: "Items Sold out page",
correctRate: "",
recallRate: ""
},
]
}
],
},
rules: {
version: [
{required: true, message: 'Cannot be empty'}
]
},
}
},
methods: {
addPageData(value) {
this.$refs[value].validate((valid) => {
if (valid) {
this.$refs[value].resetFields();
const lang = localStorage.getItem("locale")?localStorage.getItem("locale") : 'en';
let formData = this.formData.selectPageData;
let newForm = {};
letcreate_time = utils.timeToDateAndTime(); // Use this.formdata.version to get the bound valuelet version = this.$refs.version.value;
newForm.lang = lang;
newForm.create_time = create_time;
newForm.version = version;
newForm.pageData = JSON.parse(JSON.stringify(formData));
let url = "";
switch (this.pageDataValue) {
case 'pg_worth_data':
url = interfaceURL.addPgworthData;
break;
case 'element_data':
url = interfaceURL.addElementData;
break;
case 'classify_data':
url = interfaceURL.addClassifyData;
break;
case 'content_data':
url = interfaceURL.addContentData;
break;
case 'image_data':
url = interfaceURL.addImageData;
break;
case 'sugges_data':
url = interfaceURL.addSuggesData;
break;
default:
break;
}
this.$axios({
method: "POST",
url: url,
data: newForm
}).then(res => {
this.$message.success('Submission successful! ');
// window.location.reload();
}).catch(error => {
this.$message({
showClose: true,
message: 'Network busy, save failed! '.type: 'error'
});
});
} else {
this.$message.error("Please enter data version information!");
return false; }}); }, selectPageType(val) { this.pageDataValue = val;for (let i = 0; i < this.pageData.length; i++) {
if (val === this.pageData[i].value) {
let obj = JSON.parse(JSON.stringify(this.pageData[i]));
this.formData.selectPageData[0] = this.pageData[i];
}
}
console.log(this.formData.selectPageData)
console.log(this.pageData)
},
}
}
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>Copy the code