mt-fe-group/11-mes-new
12
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,13 +20,13 @@
<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"
@ -35,11 +41,12 @@
</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() {},

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

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

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

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

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

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