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