console
var Main = {
data() {
return {
tableData: [],
gridOptions: {
border: true,
height: 1000,
padding: false,
scrollX: {
enabled: true,
gt: 0,
},
scrollY: {
enabled: true,
gt: 0,
},
loading: false, //loaing加载
stripe: true, //斑马纹
// 行配置信息
rowConfig: {
useKey: true,
isCurrent: true,
isHover: true,
height: 27
},
align: "center",
size: 'mini',
border: true,
showOverflow: true, //当内容过长时显示为省略号
showFooterOverflow: true,
headerCellStyle({ column }) {
return {
backgroundColor: ' #EAF0FA',
color: '#6b6c6e',
'background-image': 'linear-gradient(#C2D1E4, #C2D1E4), linear-gradient(#C2D1E4, #C2D1E4)',
'background-repeat': 'no-repeat',
'background-size': '1px 100%, 100% 1px',
'background-position': '100% 0, 100% 100%'
}
},
columns: [
{ field: 'ftimeout', title: '异', width: 28, align: "center", fixed: 'left' },
{ field: 'ffirst', title: '异', width: 28, align: "center", fixed: 'left' },
{ field: 'ffirst', title: '首', width: 28, align: "center", fixed: 'left' },
{ field: 'fsample_box_falg', title: '样', width: 28, align: "center", fixed: 'left' },
{ field: 'fclass_date', title: '生产日期', width: 73, align: "left", fixed: 'left' },
{ field: 'fmachine_id', title: '机台', width: 35, align: "center", fixed: 'left' },
{ field: 'fclass', title: '班组', width: 35, align: "center", fixed: 'left' },
{ field: 'fcust_name', title: '客户', width: 35, align: "center", fixed: 'left' },
{ field: 'fbox_name', title: '产品名称', width: 135, align: "center", fixed: 'left' },
{ field: 'fbox_size', title: '纸箱规格', width: 80, align: "center", fixed: 'left' },
{ field: 'fcolor_qty', title: '色数', width: 80, align: "center", fixed: 'left' },
{ field: 'fbox_plan_qty', title: '计划数', width: 80, align: "center", fixed: 'left' },
{ field: 'fpaper_qty', title: '来料数', width: 45, align: "center" },
{
title: '生产',
children: [
{ field: 'finish_qty', title: '完工数', width: 40, align: "center" },
{ field: 'fgood_qty', title: '良品数', width: 40, align: "center" },
{ field: 'fbad_qty', title: '废品数', width: 40, align: "center" },
]
},
{
title: '准备时间',
children: [
{ field: 'fready_stime', title: '开始准备', width: '35px', align: "center" },
{ field: 'ftuning_stime', title: '开始首检', width: '35px', align: "center" },
{ field: 'fready_time', title: '换单分钟', width: '35px', align: "center" },
{ field: 'fproduce_stime', title: '开始运转', width: '35px', align: "center" },
{ field: 'ftuning_time', title: '首检分钟', width: '35px', align: "center" },
]
},
{
title: '运转时间',
children: [
{ field: 'fproduce_etime', label: '结束运转', width: '35px', align: "center" },
{ field: 'fproduce_time', label: '运转分钟', width: '35px', align: "center" },
{ field: 'favg_speed', label: '平均车速', width: '35px', align: "center" },
]
},
{
title: '停机时间',
children: [
{ field: 'fstop_cnt', label: '停机次数', width: '35px', align: "center" },
{ field: 'fstop_time', label: '停机时间', width: '35px', align: "center" },
]
},
{
title: '生产总时',
children: [
{ field: 'fsum_time', label: '生产时长', width: '35px', align: "center" },
{ field: 'fsum_time_avg_speed', label: '平均车速', width: '33px', align: "center" },
]
},
{ field: 'fmouct', label: '模数', width: '40px', align: "center" },
{ field: 'fbox_color', label: '颜色', width: '250px', align: "center" },
{ field: 'fartlb', label: '材质', width: '70px', align: "center" },
{ field: 'fworkprocListname2', label: '工序', width: '100px', align: "center" },
{ field: 'fpaper_no', label: '纸板工单号', width: '100px', align: "center" },
{ field: 'fpremark', label: '备注', width: '140px', align: "center" },
{
title: '平方',
children: [
{ field: 'fgood_area', label: '良品', width: '40px', align: "center" },
{ field: 'fbad_area', label: '不良', width: '40px', align: "center" },
]
},
{ field: 'fprint_plate', label: '印版号', width: '50px', align: "center" },
{ field: 'fsweight', label: '单重', width: '50px', align: "center" },
{ field: 'fweight', label: '重量', width: '50px', align: "center" },
{ field: 'feremark', label: '异常备注', width: '140px', align: "center" },
{ field: 'ffinish_cnt', label: '生产次数', width: '33px', align: "center" }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
]
}
}
},
created() {
this.initdata()
},
methods: {
initdata() {
function generateData(count) {
const data = [];
for (let i = 0; i < count; i++) {
const item = {
fartlb: `${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${String.fromCharCode(65 + Math.floor(Math.random() * 26))}${String.fromCharCode(65 + Math.floor(Math.random() * 26))}B/BC`,
favg_speed: Math.floor(Math.random() * 901) + 100,
fbad_area: '0',
fbad_qty: '0',
fbox_color: `${randomColor()},${randomColor()}`,
fbox_in_qty: '0',
fbox_name: randomChinese(10),
fbox_plan_qty: Math.floor(Math.random() * 9001) + 1000,
fbox_size: `${randomInteger(200, 400)}*${randomInteger(200, 300)}*${randomInteger(200, 300)}`,
fclass: ['A', 'B', 'C'][Math.floor(Math.random() * 3)],
fclass_date: randomDate(),
fclass_scheduling: ['白班', '夜班'][Math.floor(Math.random() * 2)],
fcolor_qty: randomInteger(1, 5),
fcust_name: randomChinese(5),
feremark: '',
ffinish_cnt: randomInteger(1, 20),
ffirst: randomInteger(1, 20),
fgood_area: (Math.random() * (1000 - 100) + 100).toFixed(2),
fgood_qty: randomInteger(100, 1000),
fguid: generateGUID(),
fid: i + 1,
finish_qty: randomInteger(100, 1000),
fmachine_desc: `${randomChinese(5)}联动线${['A', 'B', 'C'][Math.floor(Math.random() * 3)]}-${randomInteger(100, 200)}`,
fmachine_id: `${randomInteger(10, 99)}`,
fmouct: randomInteger(1, 5),
fpaper_qty: randomInteger(1000, 10000),
fpremark: randomChineseSentence(10, 20),
fprint_img: `${randomInteger(100000000, 999999999)}.PDF`,
fprint_plate: generateRandomString(4),
fprodno: randomInteger(100000000, 999999999),
fproduce_etime: randomTime(),
fproduce_stime: randomTime(),
fproduce_time: randomInteger(1, 10),
fready_stime: randomTime(),
fready_time: '0',
fsample_box_falg: '0',
fstop_cnt: '0',
fstop_time: '0',
fsum_time: randomInteger(1, 10),
fsum_time_avg_speed: randomInteger(100, 1000),
fsweight: (Math.random() * (1 - 0.2) + 0.2).toFixed(8),
ftimeout: '0',
ftuning_etime: randomTime(),
ftuning_stime: randomTime(),
ftuning_time: '0',
fweight: (Math.random() * (500 - 100) + 100).toFixed(2),
fwork_remark: randomChineseSentence(5, 10),
fworkprocListname: '印刷,开槽,粘箱,打包',
fworkprocListname2: '印刷,开槽,粘箱,打包',
indexNo: i + 1,
};
data.push(item);
}
return data;
}
// Helper Functions
function randomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomColor() {
return `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`;
}
function randomDate() {
const date = new Date();
date.setDate(date.getDate() - randomInteger(0, 365));
return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
}
function randomTime() {
return `${String(randomInteger(0, 23)).padStart(2, '0')}:${String(randomInteger(0, 59)).padStart(2, '0')}`;
}
function randomChinese(length) {
const base = 0x4E00;
const range = 0x9FFF - base;
return Array.from({ length }, () => String.fromCharCode(base + Math.floor(Math.random() * range))).join('');
}
function randomChineseSentence(min, max) {
const length = randomInteger(min, max);
return randomChinese(length);
}
function generateGUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = Math.random() * 16 | 0;
const v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function generateRandomString(length) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join('');
}
// Usage
const result = generateData(1000); // 生成 10 条数据
this.gridOptions.data = result
console.log(result);
}
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-pc-ui@3.3.81"></script>
<script src="https://unpkg.com/vxe-table@3.12.10-beta.26"></script>
<div id="app">
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
</div>
@import url("https://unpkg.com/vxe-pc-ui@3.3.81/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.12.10-beta.26/lib/style.css");