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

update table 的距离问题

Browse Source
This commit is contained in:
lb 2022-11-08 14:40:04 +08:00
parent 567aa98452
commit 9b91d86f40
9 changed files with 139 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<div class="left-content-equipment-check"> <div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" /> <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> --> <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper"> <div class="el-table-wrapper fix-table">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> --> <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table <el-table
key="LeftContentEquipmentCheck1" key="LeftContentEquipmentCheck1"
@ -10,10 +10,10 @@
:data="tableData" :data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
> >
<el-table-column label="设备名称" prop="eqName" /> <el-table-column label="设备名称" prop="eqName" align="center" />
<el-table-column label="所属产线" prop="pl" /> <el-table-column label="所属产线" prop="pl" align="center" />
<el-table-column label="提示等级" prop="warningLevel" /> <el-table-column label="提示等级" prop="warningLevel" align="center" />
<el-table-column label="提示等级" prop="checkContent" /> <el-table-column label="提示等级" prop="checkContent" align="center" />
</el-table> </el-table>
</div> </div>
<!-- <div class="el-table-wrapper"> <!-- <div class="el-table-wrapper">
@ -73,6 +73,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fix-table >>> .el-table td .cell {
width: 60% !important;
margin: auto;
text-align: left;
}
.left-content-equipment-check { .left-content-equipment-check {
height: calc(100% - 32px); height: calc(100% - 32px);
display: flex; display: flex;

32
src/views/3DOverview/components/LeftContentOrder.vue
View File

@ -2,7 +2,7 @@
<div class="left-content-equipment-check"> <div class="left-content-equipment-check">
<!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" /> <!-- <TechyFakeTable :table-props="tableProps" :table-data="tableData" />
<TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> --> <TechyFakeTable :table-props="tableProps2" :table-data="tableData2" /> -->
<div class="el-table-wrapper"> <div class="el-table-wrapper fix-table">
<!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> --> <!-- <TechyTable key="table-1" :showIndex="false" :table-config="tableProps" :table-data="tableData"></TechyTable> -->
<el-table <el-table
key="LeftContentOrder1" key="LeftContentOrder1"
@ -10,10 +10,22 @@
:data="tableData" :data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
> >
<el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" /> <el-table-column
<el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" /> label="订单编号"
<el-table-column label="规格" prop="specs" :resizable="true" /> prop="orderCode"
<el-table-column label="完成度" prop="finished" :resizable="true"> :show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column
label="客户名称"
prop="clientName"
:show-overflow-tooltip="true"
:resizable="true"
align="center"
/>
<el-table-column label="规格" prop="specs" :resizable="true" align="center" />
<el-table-column label="完成度" prop="finished" :resizable="true" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-progress <el-progress
class="lb-progress-bar" class="lb-progress-bar"
@ -79,6 +91,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fix-table >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.left-content-equipment-check { .left-content-equipment-check {
display: flex; display: flex;
gap: calc(100vw / 1920 * 16); gap: calc(100vw / 1920 * 16);
@ -144,11 +162,11 @@ export default {
} }
.lb-progress-bar { .lb-progress-bar {
left: 40px; left: 30px;
display: flex; display: flex;
} }
.lb-progress-bar >>> .el-progress__text { .lb-progress-bar >>> .el-progress__text {
color: #fff9; color: #fff9;
left: -70%; left: -75%;
} }
</style> </style>

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

@ -1,17 +1,17 @@
<template> <template>
<div class="right-content-alert"> <div class="right-content-alert">
<div class="el-table-wrapper"> <div class="el-table-wrapper fix-table">
<el-table <el-table
key="RightContentAlertTable" key="RightContentAlertTable"
border border
:data="tableData" :data="tableData"
:header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }"
> >
<el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" /> <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" align="center" />
<el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" /> <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" align="center" />
<el-table-column label="故障等级" prop="level" :resizable="true" /> <el-table-column label="故障等级" prop="level" :resizable="true" align="center" />
<el-table-column label="故障内容" prop="content" :resizable="true" /> <el-table-column label="故障内容" prop="content" :resizable="true" align="center" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" /> <el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" />
</el-table> </el-table>
</div> </div>
</div> </div>
@ -42,6 +42,12 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fix-table >>> .el-table td .cell {
width: 80% !important;
margin: auto;
text-align: left;
}
.right-content-alert { .right-content-alert {
height: calc(100% - 32px); height: calc(100% - 32px);
display: flex; display: flex;

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

@ -19,7 +19,7 @@
<div class="techy-body-part__middle"> <div class="techy-body-part__middle">
<TechyBox> <TechyBox>
<div class="flex"> <div class="techy-body-part__middle__inner">
<p> <p>
<b>产线名称 :</b> <b>产线名称 :</b>
<span>A产线</span> <span>A产线</span>
@ -29,7 +29,7 @@
<span>清洗机</span> <span>清洗机</span>
</p> </p>
<p> <p>
<b>累计加工数量 :</b> <b>累计加工 :</b>
<span>20</span> <span>20</span>
</p> </p>
<p> <p>
@ -167,7 +167,7 @@ export default {
} }
#v3d-outter *::-webkit-scrollbar-track { #v3d-outter *::-webkit-scrollbar-track {
background-color: #14243F; background-color: #14243f;
/* background-color: white; */ /* background-color: white; */
border-radius: 0; border-radius: 0;
} }
@ -244,19 +244,21 @@ export default {
.techy-body-part__middle { .techy-body-part__middle {
position: absolute; position: absolute;
top: 12%; top: 9%;
left: 36%; left: 26%;
height: 96px; height: 136px;
width: 128px; width: 176px;
} }
.flex { .techy-body-part__middle__inner {
height: 100%;
padding: 12px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
} }
.flex p { .techy-body-part__middle__inner p {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
@ -264,15 +266,15 @@ export default {
color: #fff; color: #fff;
} }
.flex p > span { .techy-body-part__middle__inner p > span {
position: relative; position: relative;
padding-left: 6px; padding-left: 16px;
} }
.round-dot::before { .round-dot::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 5px; top: 4px;
left: -3px; left: 2px;
width: 8px; width: 8px;
height: 8px; height: 8px;
background-color: rgb(82, 231, 82); background-color: rgb(82, 231, 82);

15
src/views/EquipmentManager/HomePage.vue
View File

@ -8,7 +8,7 @@
<div class="equipment-exception"> <div class="equipment-exception">
<!-- 设备报修/异常上报 --> <!-- 设备报修/异常上报 -->
<techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG"> <techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
<div class="table-wrapper"> <div class="table-wrapper fix-table-exception-report">
<techy-table <techy-table
:page="1" :page="1"
:limit="7" :limit="7"
@ -22,7 +22,7 @@
<div class="equipment-alarm"> <div class="equipment-alarm">
<!-- 设备异常报警 --> <!-- 设备异常报警 -->
<techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG"> <techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
<div class="table-wrapper"> <div class="table-wrapper fix-table-eq-exception">
<techy-table <techy-table
:page="1" :page="1"
:limit="7" :limit="7"
@ -325,6 +325,17 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fix-table-eq-exception >>> .el-table td .cell {
width: 80% !important;
margin: auto;
text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.visual-container { .visual-container {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;

48
src/views/EquipmentManager/mockData.js
View File

@ -27,18 +27,18 @@ const PriorityComponent = {
} }
}, },
methods: {}, methods: {},
render: function(h) { render: function (h) {
return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText) return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
} }
} }
export const equipmentExceptionProps = [ export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName' }, { label: '设备名称', prop: 'eqName', align: 'center' },
{ label: '所属产线', prop: 'pl' }, { label: '所属产线', prop: 'pl', align: 'center', width: 80 },
{ label: '报修/异常内容', prop: 'content' }, { label: '报修/异常内容', prop: 'content', align: 'center' },
{ label: '报修/发现人', prop: 'creator' }, { label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent } { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
] ]
export const equipmentExceptionDatalist = [ export const equipmentExceptionDatalist = [
@ -70,7 +70,7 @@ const LifeRemainComponent = {
} }
}, },
render: function(h) { render: function (h) {
return h('span', { return h('span', {
style: style:
{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' } { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', opacity: '0.8', backgroundColor: this.statusColor, color: '#fff' }
@ -80,11 +80,11 @@ const LifeRemainComponent = {
} }
export const equipmentAlarmProps = [ export const equipmentAlarmProps = [
{ label: '设备名称', prop: 'eqName' }, { label: '设备名称', prop: 'eqName', align: 'center' },
{ label: '设备编码', prop: 'eqCode' }, { label: '设备编码', prop: 'eqCode', align: 'center' },
{ label: '所属产线', prop: 'pl' }, { label: '所属产线', prop: 'pl', align: 'center' },
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent }, { label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
{ label: '报警内容', prop: 'content' } { label: '报警内容', prop: 'content', align: 'center' }
] ]
export const equipmentAlarmDatalist = [ export const equipmentAlarmDatalist = [
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
] ]
export const sparepartsProps = [ export const sparepartsProps = [
{ prop: 'name', label: '部件名称' }, { prop: 'name', label: '部件名称', align: 'center' },
{ prop: 'eq', label: '所属设备' }, { prop: 'eq', label: '所属设备', align: 'center' },
{ prop: 'pl', label: '所属产线' }, { prop: 'pl', label: '所属产线', align: 'center' },
{ prop: 'update_time', label: '更换时间' }, { prop: 'update_time', label: '更换时间', align: 'center' },
{ prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent }, { prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量' }, { prop: 'stock', label: '备件库存量', align: 'center' },
{ prop: 'location', label: '库位' } { prop: 'location', label: '库位', align: 'center' }
] ]
export const sparepartsDatalist = [ export const sparepartsDatalist = [
@ -172,9 +172,9 @@ const StatusComponent = {
][this.injectData.status - 1] ][this.injectData.status - 1]
} }
}, },
render: function(h) { render: function (h) {
return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [ return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' }}, ''), h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '8px' } }, ''),
h('span', this.statusText) h('span', this.statusText)
]) ])
} }

17
src/views/QualityManager/HomePage.vue
View File

@ -5,7 +5,7 @@
<div class="part-1"> <div class="part-1">
<div> <div>
<techy-container :title="'质量异常上报'" :icon="qualitySVG"> <techy-container :title="'质量异常上报'" :icon="qualitySVG">
<div> <div class="fix-table-exception-report">
<techy-table <techy-table
:page="1" :page="1"
:limit="10" :limit="10"
@ -17,7 +17,7 @@
</techy-container> </techy-container>
</div> </div>
<div> <div class="fix-table-exception-alert">
<techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG"> <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
<techy-table <techy-table
:page="1" :page="1"
@ -337,6 +337,19 @@ export default {
</script> </script>
<style scoped> <style scoped>
.fix-table-exception-alert >>> .el-table td .cell {
width: 75% !important;
margin: auto;
text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
width: 70% !important;
margin: auto;
text-align: left;
}
.visual-container { .visual-container {
width: 100%; width: 100%;
min-width: 1280px; min-width: 1280px;

10
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -101,7 +101,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#FB418C' // 0% 处的颜色 color: '#FB418C66' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -132,7 +132,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#DDB112' // 0% 处的颜色 color: '#DDB11266' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -163,7 +163,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#1A99FF' // 0% 处的颜色 color: '#1A99FF66' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -194,7 +194,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#A691FF' // 0% 处的颜色 color: '#A691FF66' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -229,7 +229,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#49FBD6' // 0% 处的颜色 color: '#49FBD666' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,

36
src/views/QualityManager/mockData.js
View File

@ -30,20 +30,20 @@ const PriorityComponent = {
console.log(this.injectData.priority) console.log(this.injectData.priority)
}, },
methods: {}, methods: {},
render: function(h) { render: function (h) {
return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor }}, this.priorityText) return h('span', { style: { display: 'inline-block', borderRadius: '2px', padding: '2px 8px', color: '#fff', opacity: '0.6', backgroundColor: this.bgColor } }, this.priorityText)
} }
} }
console.log('is component?', PriorityComponent) console.log('is component?', PriorityComponent)
export const qualityTableProps = [ export const qualityTableProps = [
{ label: '工序名称', width: 80, prop: 'wsName' }, { label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
{ label: '所属产线', width: 80, prop: 'pl' }, { label: '所属产线', width: 130, prop: 'pl', align: 'center' },
{ label: '异常内容', align: 'center', prop: 'content' }, { label: '异常内容', align: 'center', prop: 'content' },
{ label: '报告人', width: 80, prop: 'creator' }, { label: '报告人', width: 120, prop: 'creator', align: 'center' },
{ label: '时间', prop: 'time' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent } { label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
] ]
export const qualityDatalist = [ export const qualityDatalist = [
@ -87,23 +87,23 @@ const StatusComponent = {
][this.injectData.status - 1] ][this.injectData.status - 1]
} }
}, },
render: function(h) { render: function (h) {
return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' }}, [ return h('span', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff' } }, [
h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' }}, ''), h('span', { style: { width: '6px', height: '6px', borderRadius: '50%', backgroundColor: this.statusColor, boxShadow: '0 0 2px 2px ' + this.statusColor, marginRight: '6px' } }, ''),
h('span', this.statusText) h('span', this.statusText)
]) ])
} }
} }
export const qualityExceptionTableProps = [ export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName' }, { label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
{ label: '所属产线', prop: 'pl' }, { label: '所属产线', prop: 'pl', align: 'center', width: 120 },
{ label: '异常内容', prop: 'content' }, { label: '异常内容', prop: 'content', align: 'center' },
{ label: '发现人', prop: 'creator' }, { label: '发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time' }, { label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }, { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
{ label: '处理人', prop: 'charger' }, { label: '处理人', prop: 'charger', align: 'center', width: 100 },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent } { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
] ]
export const qualityExceptionDatalist = [ export const qualityExceptionDatalist = [