update 3d 的表格
This commit is contained in:
parent
800045d897
commit
9e7747dde9
@ -1,10 +1,16 @@
|
||||
<template>
|
||||
<div class="left-content-equipment-check">
|
||||
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
|
||||
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
|
||||
<el-table
|
||||
<TechyTable
|
||||
key="table-1"
|
||||
:showIndex="false"
|
||||
:page="1"
|
||||
:limit="8"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
></TechyTable>
|
||||
|
||||
<!-- <el-table
|
||||
key="LeftContentEquipmentCheck1"
|
||||
border
|
||||
:data="tableData"
|
||||
@ -14,14 +20,14 @@
|
||||
<el-table-column label="所属产线" prop="pl" align="center" />
|
||||
<el-table-column label="提示等级" prop="warningLevel" align="center">
|
||||
<template slot-scope="scope">
|
||||
<!-- <component :is="PriorityComponent"></component> -->
|
||||
<PriorityComponent :injectData="scope.row"></PriorityComponent>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检内容" prop="checkContent" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- <div class="el-table-wrapper">
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="el-table-wrapper">
|
||||
<el-table
|
||||
key="LeftContentEquipmentCheck2"
|
||||
border
|
||||
@ -34,12 +40,13 @@
|
||||
<el-table-column label="提示等级" prop="checkContent" />
|
||||
</el-table>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
import TechyTable from './TechyTable.vue'
|
||||
|
||||
const PriorityComponent = {
|
||||
name: 'PriorityComponent',
|
||||
props: {
|
||||
@ -61,11 +68,16 @@ const PriorityComponent = {
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
borderRadius: '2px',
|
||||
padding: '2px 6px',
|
||||
// borderRadius: '2px',
|
||||
// padding: '2px 6px',
|
||||
// color: '#fff',
|
||||
// opacity: '0.6',
|
||||
// fontSize: '12px',
|
||||
borderRadius: 'calc(2px * var(--beilv))',
|
||||
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
|
||||
color: '#fff',
|
||||
opacity: '0.6',
|
||||
fontSize: '12px',
|
||||
fontSize: 'calc(12px * var(--beilv))',
|
||||
lineHeight: 1,
|
||||
backgroundColor: this.bgColor
|
||||
}
|
||||
@ -75,12 +87,12 @@ const PriorityComponent = {
|
||||
}
|
||||
}
|
||||
|
||||
// const tableProps = [
|
||||
// { prop: 'eqName', label: '设备名称', width: 120, resizable: false },
|
||||
// { prop: 'pl', label: '所属产线', width: 120, resizable: false },
|
||||
// { prop: 'warningLevel', label: '提示等级', width: 120, resizable: false },
|
||||
// { prop: 'checkContent', label: '提示等级', width: 120, resizable: false }
|
||||
// ]
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
||||
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
|
||||
]
|
||||
const tableData = [
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 1, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 2, checkContent: '巡检内容' },
|
||||
@ -88,22 +100,16 @@ const tableData = [
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 4, checkContent: '巡检内容' },
|
||||
{ eqName: 'A下片机', pl: '产线1', priority: 3, checkContent: '巡检内容' },
|
||||
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' }
|
||||
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
{ eqName: '设备B', pl: '产线1', priority: 2, checkContent: '巡检内容' },
|
||||
{ eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
{ eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
]
|
||||
// const tableData2 = [
|
||||
// { eqName: 'A下片机', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' },
|
||||
// { eqName: '设备B', pl: '产线1', warningLevel: 1, checkContent: '巡检内容' }
|
||||
// { eqName: '下片机', pl: '产线3', warningLevel: 3, checkContent: '巡检内容' },
|
||||
// { eqName: '磨片机', pl: '产线2', warningLevel: 2, checkContent: '巡检内容' }
|
||||
// ]
|
||||
|
||||
export default {
|
||||
name: 'LeftContentEquipmentCheck',
|
||||
components: { PriorityComponent },
|
||||
components: { TechyTable },
|
||||
data() {
|
||||
return { tableData }
|
||||
return { tableProps, tableData }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
|
@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<div class="right-content-alert">
|
||||
<div class="el-table-wrapper fix-table">
|
||||
<TechyTable
|
||||
key="table-1"
|
||||
:showIndex="false"
|
||||
:page="1"
|
||||
:limit="8"
|
||||
:table-config="tableProps"
|
||||
:table-data="tableData"
|
||||
></TechyTable>
|
||||
<!--
|
||||
<el-table
|
||||
key="RightContentAlertTable"
|
||||
border
|
||||
@ -23,20 +32,19 @@
|
||||
/>
|
||||
<el-table-column label="故障等级" prop="priority" :resizable="true" align="center">
|
||||
<template slot-scope="scope">
|
||||
<!-- <component :is="PriorityComponent"></component> -->
|
||||
<PriorityComponent :injectData="scope.row"></PriorityComponent>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
|
||||
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
|
||||
</el-table>
|
||||
</el-table> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import TechyFakeTable from './TechyFakeTable.vue'
|
||||
// import TechyTable from './TechyTable.vue'
|
||||
import TechyTable from './TechyTable.vue'
|
||||
|
||||
const PriorityComponent = {
|
||||
name: 'PriorityComponent',
|
||||
props: {
|
||||
@ -58,11 +66,16 @@ const PriorityComponent = {
|
||||
{
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
borderRadius: '2px',
|
||||
padding: '2px 6px',
|
||||
// borderRadius: '2px',
|
||||
// padding: '2px 6px',
|
||||
// color: '#fff',
|
||||
// opacity: '0.6',
|
||||
// fontSize: '12px',
|
||||
borderRadius: 'calc(2px * var(--beilv))',
|
||||
padding: 'calc(2px * var(--beilv)) calc(6px * var(--beilv))',
|
||||
color: '#fff',
|
||||
opacity: '0.6',
|
||||
fontSize: '12px',
|
||||
fontSize: 'calc(12px * var(--beilv))',
|
||||
lineHeight: 1,
|
||||
backgroundColor: this.bgColor
|
||||
}
|
||||
@ -72,6 +85,14 @@ const PriorityComponent = {
|
||||
}
|
||||
}
|
||||
|
||||
const tableProps = [
|
||||
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 100 },
|
||||
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent },
|
||||
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 },
|
||||
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 128 }
|
||||
]
|
||||
|
||||
const tableData = [
|
||||
{ eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 },
|
||||
{ eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 },
|
||||
@ -82,9 +103,9 @@ const tableData = [
|
||||
|
||||
export default {
|
||||
name: 'RightContentAlert',
|
||||
components: { PriorityComponent },
|
||||
components: { TechyTable },
|
||||
data() {
|
||||
return { tableData }
|
||||
return {tableProps, tableData }
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
|
@ -11,11 +11,11 @@ export default {}
|
||||
<style scoped>
|
||||
.techy-box {
|
||||
background: rgba(255, 255, 255, 0.0168);
|
||||
box-shadow: inset 0 0 17px 0 rgba(255, 255, 255, 0.168);
|
||||
box-shadow: inset 0 0 calc(17px * var(--beilv)) 0 rgba(255, 255, 255, 0.168);
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border-radius: calc(4px * var(--beilv));
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
</style>
|
||||
|
@ -301,13 +301,13 @@ export default {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 136px;
|
||||
width: 176px;
|
||||
height: calc(136px * var(--beilv));
|
||||
width: calc(176px * var(--beilv));
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
padding: calc(16px * var(--beilv));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -316,28 +316,28 @@ export default {
|
||||
.techy-body-part__middle__inner p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-size: calc(12px * var(--beilv));
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner p > span {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
padding-left: calc(16px * var(--beilv));
|
||||
}
|
||||
|
||||
.techy-body-part__middle__inner p > span.round-dot {
|
||||
padding-left: 28px;
|
||||
padding-left: calc(28px * var(--beilv));
|
||||
}
|
||||
|
||||
.round-dot::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 16px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
top: calc(4px * var(--beilv));
|
||||
left: calc(16px * var(--beilv));
|
||||
width: calc(8px * var(--beilv));
|
||||
height: calc(8px * var(--beilv));
|
||||
background-color: rgb(82, 231, 82);
|
||||
border-radius: 4px;
|
||||
border-radius: calc(4px * var(--beilv));
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user