Compare commits

..

No commits in common. "4b70e4956cbd5f7309b19b3b60518f0f6571feb5" and "60077b538a4e52073acc74f993e202be29286198" have entirely different histories.

20 changed files with 142 additions and 524 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

Binary file not shown.

View File

@ -13,6 +13,7 @@ Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
{
path: '/3d-overview',
@ -2297,6 +2298,7 @@ export const dynamicRoutes = [
// },
]
},
{
path: '/basic',
component: Layout,

View File

@ -1,223 +0,0 @@
<template>
<div :id="id" ref="techy-line-chart" class="techy-chart" />
</template>
<script>
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'DianLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 应该在每个父组件为flex:1的echarts组件里都加上以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-dian-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() {
const colors = ['#5470C6', '#EE6666', '#339888']
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
let data = [
//
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5],
//
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71],
//
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73]
]
let wendu = data[0]
let dianliu = data[1]
let dianya = data[2]
return {
chart: null,
option: {
color: colors,
legend: {
top: 4,
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#fff9',
fontSize: 8
},
// data: ['ABC/v', 'ABC/a', '']
},
grid: {
top: 32,
left: 64,
bottom: 28
},
xAxis: [
{
type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false },
axisLabel: {
color: '#fff9'
},
axisLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
yAxis: [
{
name: '电流/A',
nameTextStyle: { align: 'right', fontSize: 8 },
type: 'value',
splitNumber: 4,
onZero: true,
position: 'left',
offset: 42,
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: '#fff9',
width: 1
}
},
splitLine: {
show: false
// lineStyle: {
// color: '#fff3'
// }
}
},
{
name: '电压/V',
nameTextStyle: { align: 'right', fontSize: 8 },
type: 'value',
splitNumber: 4,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 0,
axisLine: {
show: true,
lineStyle: {
color: '#fff9',
width: 1
}
},
splitLine: {
show: false
// lineStyle: {
// color: '#fff3'
// }
}
},
{
name: '温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 },
axisTick: { show: false },
axisLine: {
show: false,
lineStyle: {
color: '#fff9',
width: 1
}
},
type: 'value',
splitNumber: 4,
splitLine: {
lineStyle: {
color: '#fff3'
}
}
}
],
series: [
{
name: 'ABC三相电压/v',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianliu,
symbol: 'none'
},
{
name: 'ABC三相电流/a',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: dianya,
symbol: 'none'
},
{
name: '电缆温度',
type: 'line',
yAxisIndex: 2,
// smooth: true,
emphasis: {
focus: 'series'
},
data: wendu,
symbol: 'none'
}
]
}
}
},
computed: {
shouldResize() {
return this.resizeStatus()
}
},
watch: {
shouldResize(val, oldVal) {
setTimeout(() => {
this.chart.resize()
}, 250)
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
}
</script>
<style scoped>
.techy-chart {
height: 100%;
width: 100%;
}
.techy-chart >>> div {
width: 100% !important;
height: 100% !important;
}
</style>

View File

@ -15,7 +15,7 @@ export default {
props: {
id: {
type: String,
default: 'default-fadian-id'
default: 'default-id'
},
title: {
type: String,

View File

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

View File

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

View File

@ -98,9 +98,7 @@
<img src="./assets/consume/d.png" width="32" height="32" alt="dian">
<span></span>
</div>
<div class="content-part">
<DianChart />
</div>
<div class="content-part" />
</TechyBox>
</div>
@ -123,10 +121,10 @@ import TechyBarChart from './TechyBarChart.vue'
import TechyLineChart from './TechyLineChart.vue'
import TechyBox from './TechyBox.vue'
import FadianChart from './FadianChart.vue'
import DianChart from './DianChart.vue'
export default {
name: 'LeftContentPublicConsume',
components: { TechyBarChart, TechyBox, FadianChart, DianChart, TechyLineChart },
components: { TechyBarChart, TechyBox, FadianChart, TechyLineChart },
data() {
return {}
},

View File

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

View File

@ -49,7 +49,7 @@ export default {
.right-content-quality-analysis {
height: calc(100% - 32px);
overflow: hidden;
overflow-y: auto; /** 右边会有多的padding给滑道 */
overflow-y: scroll; /** 右边会有多的padding给滑道 */
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: min-content;

View File

@ -52,6 +52,7 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
</g>
</g>
</svg>`
export default {
name: 'TechyHeader',
props: ['headTitle'],

View File

@ -1,9 +1,9 @@
<template>
<div id="v3d-outter" ref="v3d-outter">
<V3DApp @3d-loaded="handle3DLoaded" />
<!-- <V3DApp @3d-loaded="handle3DLoaded" /> -->
<!-- 正式内容: -->
<div v-if="showPage" id="v3d-main-content">
<!-- <div v-if="true" id="v3d-main-content"> -->
<!-- <div v-if="showPage" id="v3d-main-content"> -->
<div v-if="true" id="v3d-main-content">
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part">
@ -19,7 +19,7 @@
<div class="techy-body-part__middle">
<TechyBox>
<div class="techy-body-part__middle__inner">
<div class="flex">
<p>
<b>产线名称 :</b>
<span>A产线</span>
@ -29,7 +29,7 @@
<span>清洗机</span>
</p>
<p>
<b>累计加工 :</b>
<b>累计加工数量 :</b>
<span>20</span>
</p>
<p>
@ -162,28 +162,6 @@ export default {
position: relative;
}
#v3d-outter *::-webkit-scrollbar {
width: 8px;
}
#v3d-outter *::-webkit-scrollbar-track {
background-color: #14243f;
/* background-color: white; */
border-radius: 0;
}
#v3d-outter *::-webkit-scrollbar-button {
width: 8px;
height: 8px;
background: #5bc4bf9f;
position: relative;
}
#v3d-outter *::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #5bc4bf9f;
}
#v3d-main-content {
width: 100%;
height: 100%;
@ -244,21 +222,19 @@ export default {
.techy-body-part__middle {
position: absolute;
top: 9%;
left: 26%;
height: 136px;
width: 176px;
top: 12%;
left: 36%;
height: 96px;
width: 128px;
}
.techy-body-part__middle__inner {
height: 100%;
.flex {
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.techy-body-part__middle__inner p {
.flex p {
margin: 0;
padding: 0;
font-size: 12px;
@ -266,15 +242,15 @@ export default {
color: #fff;
}
.techy-body-part__middle__inner p > span {
.flex p > span {
position: relative;
padding-left: 16px;
padding-left: 6px;
}
.round-dot::before {
content: '';
position: absolute;
top: 4px;
left: 2px;
top: 5px;
left: -3px;
width: 8px;
height: 8px;
background-color: rgb(82, 231, 82);

View File

@ -8,7 +8,7 @@
<div class="equipment-exception">
<!-- 设备报修/异常上报 -->
<techy-container :title="'设备报修/异常上报'" :icon="equipmentExceptionSVG">
<div class="table-wrapper fix-table-exception-report">
<div class="table-wrapper">
<techy-table
:page="1"
:limit="7"
@ -22,7 +22,7 @@
<div class="equipment-alarm">
<!-- 设备异常报警 -->
<techy-container :title="'设备异常报警'" :icon="equipmentAlarmSVG">
<div class="table-wrapper fix-table-eq-exception">
<div class="table-wrapper">
<techy-table
:page="1"
:limit="7"
@ -325,17 +325,6 @@ export default {
</script>
<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 {
width: 100%;
min-width: 1280px;

View File

@ -27,18 +27,18 @@ const PriorityComponent = {
}
},
methods: {},
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)
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)
}
}
export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName', align: 'center' },
{ label: '所属产线', prop: 'pl', align: 'center', width: 80 },
{ label: '报修/异常内容', prop: 'content', align: 'center' },
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 }
{ label: '设备名称', prop: 'eqName' },
{ label: '所属产线', prop: 'pl' },
{ label: '报修/异常内容', prop: 'content' },
{ label: '报修/发现人', prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
]
export const equipmentExceptionDatalist = [
@ -70,7 +70,7 @@ const LifeRemainComponent = {
}
},
render: function (h) {
render: function(h) {
return h('span', {
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' }
@ -80,11 +80,11 @@ const LifeRemainComponent = {
}
export const equipmentAlarmProps = [
{ label: '设备名称', prop: 'eqName', align: 'center' },
{ label: '设备编码', prop: 'eqCode', align: 'center' },
{ label: '所属产线', prop: 'pl', align: 'center' },
{ label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent },
{ label: '报警内容', prop: 'content', align: 'center' }
{ label: '设备名称', prop: 'eqName' },
{ label: '设备编码', prop: 'eqCode' },
{ label: '所属产线', prop: 'pl' },
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '报警内容', prop: 'content' }
]
export const equipmentAlarmDatalist = [
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
]
export const sparepartsProps = [
{ prop: 'name', label: '部件名称', align: 'center' },
{ prop: 'eq', label: '所属设备', align: 'center' },
{ prop: 'pl', label: '所属产线', align: 'center' },
{ prop: 'update_time', label: '更换时间', align: 'center' },
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量', align: 'center' },
{ prop: 'location', label: '库位', align: 'center' }
{ prop: 'name', label: '部件名称' },
{ prop: 'eq', label: '所属设备' },
{ prop: 'pl', label: '所属产线' },
{ prop: 'update_time', label: '更换时间' },
{ prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量' },
{ prop: 'location', label: '库位' }
]
export const sparepartsDatalist = [
@ -172,9 +172,9 @@ const StatusComponent = {
][this.injectData.status - 1]
}
},
render: function (h) {
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' } }, ''),
render: function(h) {
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', this.statusText)
])
}

View File

@ -5,7 +5,7 @@
<div class="part-1">
<div>
<techy-container :title="'质量异常上报'" :icon="qualitySVG">
<div class="fix-table-exception-report">
<div>
<techy-table
:page="1"
:limit="10"
@ -17,7 +17,7 @@
</techy-container>
</div>
<div class="fix-table-exception-alert">
<div>
<techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
<techy-table
:page="1"
@ -337,19 +337,6 @@ export default {
</script>
<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 {
width: 100%;
min-width: 1280px;

View File

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

View File

@ -30,20 +30,20 @@ const PriorityComponent = {
console.log(this.injectData.priority)
},
methods: {},
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)
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)
}
}
console.log('is component?', PriorityComponent)
export const qualityTableProps = [
{ label: '工序名称', width: 130, prop: 'wsName', align: 'center' },
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' },
{ label: '工序名称', width: 80, prop: 'wsName' },
{ label: '所属产线', width: 80, prop: 'pl' },
{ label: '异常内容', align: 'center', prop: 'content' },
{ label: '报告人', width: 120, prop: 'creator', align: 'center' },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
{ label: '报告人', width: 80, prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', width: 80, prop: 'priority', align: 'center', subcomponent: PriorityComponent }
]
export const qualityDatalist = [
@ -87,23 +87,23 @@ const StatusComponent = {
][this.injectData.status - 1]
}
},
render: function (h) {
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' } }, ''),
render: function(h) {
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', this.statusText)
])
}
}
export const qualityExceptionTableProps = [
{ label: '工序名称', prop: 'wsName', align: 'center', width: 120 },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 },
{ label: '异常内容', prop: 'content', align: 'center' },
{ label: '发现人', prop: 'creator', align: 'center', width: 100 },
{ label: '时间', prop: 'time', align: 'center' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 },
{ label: '处理人', prop: 'charger', align: 'center', width: 100 },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 }
{ label: '工序名称', prop: 'wsName' },
{ label: '所属产线', prop: 'pl' },
{ label: '异常内容', prop: 'content' },
{ label: '发现人', prop: 'creator' },
{ label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '处理人', prop: 'charger' },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
]
export const qualityExceptionDatalist = [

View File

@ -1,5 +1,5 @@
<template>
<div id="container" ref="container" class="visual-container material-cockpit">
<div id="container" ref="container" class="visual-container">
<el-row
class="container-title"
:style="{
@ -8,10 +8,8 @@
fontSize: beilv * 30 + 'px'
}"
>
<div :style="{ paddingLeft: 645 * beilv + 'px' }">
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
合肥新能源数字工厂物料管理驾驶舱
</div>
<el-button
type="text"
class="title-button"
@ -34,7 +32,7 @@
<el-row>
<el-col :style="{ marginTop: 16 * beilv + 'px' }">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1">
<div class="box-padding">
<base-table
:page="1"
:limit="14"
@ -51,7 +49,7 @@
<el-row>
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
<div class="box-padding specil-table1">
<div class="box-padding">
<base-table
:page="1"
:limit="14"
@ -77,55 +75,45 @@ import bomList from './components/bomList.vue'
const originalFilm = [
{
prop: 'time',
label: '上线时间',
minWidth: 35
label: '上线时间'
},
{
prop: 'productLine',
label: '产线',
minWidth: 33
label: '产线'
},
{
prop: 'spec',
label: '原片规格',
minWidth: 32.4
label: '原片规格'
},
{
prop: 'batch',
label: '批次',
minWidth: 35
label: '批次'
},
{
prop: 'num',
label: '数量',
minWidth: 28
label: '数量'
}
]
const material = [
{
prop: 'time',
label: '上线时间',
minWidth: 35
label: '上线时间'
},
{
prop: 'eqName',
label: '设备名称',
minWidth: 33
label: '设备名称'
},
{
prop: 'spec',
label: '辅料规格',
minWidth: 32.4
label: '辅料规格'
},
{
prop: 'batch',
label: '批次',
minWidth: 35
label: '批次'
},
{
prop: 'num',
label: '数量',
minWidth: 28
label: '数量'
}
]
export default {
@ -232,7 +220,6 @@ export default {
})
return false
}
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container)
}
}
@ -249,6 +236,7 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%;
color: #fff;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
@ -260,17 +248,3 @@ export default {
}
}
</style>
<style lang="scss">
.material-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 40px;
padding-right: 40px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 40px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div id="container" ref="container" class="visual-container order-cockpit">
<div id="container" ref="container" class="visual-container">
<el-row
class="container-title"
:style="{
@ -8,18 +8,16 @@
fontSize: beilv * 30 + 'px'
}"
>
<div :style="{ paddingLeft: 645 * beilv + 'px' }">
<img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
合肥新能源数字工厂工单管理驾驶舱
</div>
<el-button
type="text"
class="title-button"
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
<svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button>
</el-row>
<el-row class="container-main">
@ -32,7 +30,7 @@
</el-col>
<el-col :span="14">
<base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
<div class="box-padding specil-table1">
<div class="box-padding">
<base-table
:page="1"
:limit="12"
@ -49,7 +47,7 @@
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
<div class="box-padding specil-table2">
<div class="box-padding">
<base-table
:page="1"
:limit="16"
@ -75,87 +73,71 @@ import orderStatus from './components/orderStatus.vue'
const orderPool = [
{
prop: 'customerName',
label: '客户名称',
minWidth: 35.2
label: '客户名称'
},
{
prop: 'orderCode',
label: '订单编号',
minWidth: 32
label: '订单编号'
},
{
prop: 'productName',
label: '产品名称',
minWidth: 32
label: '产品名称'
},
{
prop: 'planNum',
label: '计划加工量',
minWidth: 23.6
label: '计划加工量'
},
{
prop: 'planDelivery',
label: '计划交货期',
minWidth: 28.8
label: '计划交货期'
},
{
prop: 'status',
label: '订单状态',
subcomponent: orderStatus,
minWidth: 19
subcomponent: orderStatus
}
]
const orderMonitiring = [
{
prop: 'customerName',
label: '客户名称',
minWidth: 35.2
label: '客户名称'
},
{
prop: 'orderCode',
label: '订单编号',
minWidth: 33.2
label: '订单编号'
},
{
prop: 'status',
label: '订单状态',
subcomponent: orderStatus,
minWidth: 27
subcomponent: orderStatus
},
{
prop: 'completion',
label: '完成率',
minWidth: 24.8
label: '完成率'
},
{
prop: 'yield',
label: '良品率',
minWidth: 24.8
label: '良品率'
},
{
prop: 'shiftCosts',
label: '班组费用',
minWidth: 24.8
label: '班组费用'
},
{
prop: 'energyCosts',
label: '能耗费用',
minWidth: 29.4
label: '能耗费用'
},
{
prop: 'equipmentCost',
label: '设备费用',
minWidth: 29.4
label: '设备费用'
},
{
prop: 'materialCost',
label: '材料费用',
minWidth: 29.4
label: '材料费用'
},
{
prop: 'totalCost',
label: '总费用',
minWidth: 31.6
label: '总费用'
}
]
export default {
@ -235,11 +217,11 @@ export default {
obj.status = parseInt(Math.random() * 3 + 1)
obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
obj.yield = parseInt(Math.random() * 50 + 50) + '%'
obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
obj.shiftCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100)
obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost
temp.push(obj)
}
this.orderMonitiringList = temp
@ -265,7 +247,6 @@ export default {
})
return false
}
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container)
}
}
@ -282,6 +263,7 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%;
color: #fff;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
@ -296,26 +278,3 @@ export default {
}
}
</style>
<style lang="scss">
.order-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 25px;
padding-right: 25px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 25px;
}
}
.specil-table2 {
.el-table .cell {
padding-left: 50px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 50px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div :style="{ height: 15 * beilv + 'px' }">
<div style="height: 14px">
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
@ -22,21 +22,6 @@ export default {
type: Object,
default: () => ({})
}
},
data() {
return {
beilv: 1
}
},
mounted() {
this.beilv = document.getElementById('container').offsetWidth / 1920
window.addEventListener('resize', () => {
if (this.isFullScreen) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
})
}
}
</script>