mt-fe-group/11-mes-new
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 3d 的表格

Browse Source
This commit is contained in:
lb
2022-11-11 14:39:16 +08:00
parent 800045d897
commit 9e7747dde9
4 changed files with 78 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
View File

@@ -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() {},

39
src/views/3DOverview/components/RightContentAlert.vue
View File

@@ -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() {},

4
src/views/3DOverview/components/TechyBox.vue
View File

@@ -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>

22
src/views/3DOverview/index.vue
View File

@@ -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>