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

Compare commits

base: mt-fe-group:4b70e4956cbd5f7309b19b3b60518f0f6571feb5
Branches Tags
mt-fe-group:master
mt-fe-group:lb
mt-fe-group:zjl
mt-fe-group:gtz
..
compare: mt-fe-group:60077b538a4e52073acc74f993e202be29286198
Branches Tags
mt-fe-group:lb
mt-fe-group:master
mt-fe-group:zjl
mt-fe-group:gtz

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

20 changed files with 142 additions and 524 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/img/choicepart/choicepart-back.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 MiB

BIN
src/assets/video/3d.mkv
View File

Binary file not shown.

2
src/router/index.js
View File

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

223
src/views/3DOverview/components/DianChart.vue
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>

2
src/views/3DOverview/components/FadianChart.vue
View File

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

18
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 fix-table"> <div class="el-table-wrapper">
<!-- <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" align="center" /> <el-table-column label="设备名称" prop="eqName" />
<el-table-column label="所属产线" prop="pl" align="center" /> <el-table-column label="所属产线" prop="pl" />
<el-table-column label="提示等级" prop="warningLevel" align="center" /> <el-table-column label="提示等级" prop="warningLevel" />
<el-table-column label="提示等级" prop="checkContent" align="center" /> <el-table-column label="提示等级" prop="checkContent" />
</el-table> </el-table>
</div> </div>
<!-- <div class="el-table-wrapper"> <!-- <div class="el-table-wrapper">
@ -73,12 +73,6 @@ 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;
@ -110,7 +104,7 @@ export default {
color: #fff9; color: #fff9;
border: 0; border: 0;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: scroll;
} }
.el-table-wrapper >>> .el-table th.is-leaf, .el-table-wrapper >>> .el-table th.is-leaf,

34
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 fix-table"> <div class="el-table-wrapper">
<!-- <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,22 +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 <el-table-column label="订单编号" prop="orderCode" :show-overflow-tooltip="true" :resizable="true" />
label="订单编号" <el-table-column label="客户名称" prop="clientName" :show-overflow-tooltip="true" :resizable="true" />
prop="orderCode" <el-table-column label="规格" prop="specs" :resizable="true" />
:show-overflow-tooltip="true" <el-table-column label="完成度" prop="finished" :resizable="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"
@ -91,12 +79,6 @@ 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);
@ -108,7 +90,7 @@ export default {
.left-content-equipment-check > div { .left-content-equipment-check > div {
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: scroll;
} }
.el-table-wrapper >>> * { .el-table-wrapper >>> * {
@ -162,11 +144,11 @@ export default {
} }
.lb-progress-bar { .lb-progress-bar {
left: 30px; left: 40px;
display: flex; display: flex;
} }
.lb-progress-bar >>> .el-progress__text { .lb-progress-bar >>> .el-progress__text {
color: #fff9; color: #fff9;
left: -75%; left: -70%;
} }
</style> </style>

8
src/views/3DOverview/components/LeftContentPublicConsume.vue
View File

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

20
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 fix-table"> <div class="el-table-wrapper">
<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" align="center" /> <el-table-column label="设备名称" prop="eqName" :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="plName" :show-overflow-tooltip="true" :resizable="true" />
<el-table-column label="故障等级" prop="level" :resizable="true" align="center" /> <el-table-column label="故障等级" prop="level" :resizable="true" />
<el-table-column label="故障内容" prop="content" :resizable="true" align="center" /> <el-table-column label="故障内容" prop="content" :resizable="true" />
<el-table-column label="累计时间(min)" prop="duration" :resizable="true" align="center" :width="128" /> <el-table-column label="累计时间(min)" prop="duration" :resizable="true" />
</el-table> </el-table>
</div> </div>
</div> </div>
@ -42,12 +42,6 @@ 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;
@ -79,7 +73,7 @@ export default {
color: #fff9; color: #fff9;
border: 0; border: 0;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: scroll;
} }
.el-table-wrapper >>> .el-table th.is-leaf, .el-table-wrapper >>> .el-table th.is-leaf,

2
src/views/3DOverview/components/RightContentQualityAnalysis.vue
View File

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

1
src/views/3DOverview/components/TechyHeader.vue
View File

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

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

@ -1,9 +1,9 @@
<template> <template>
<div id="v3d-outter" ref="v3d-outter"> <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="showPage" id="v3d-main-content"> -->
<!-- <div v-if="true" id="v3d-main-content"> --> <div v-if="true" id="v3d-main-content">
<techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" /> <techy-header :head-title="'合肥新能源数字工厂总览'" @toggle-full-screen="toggleFullScreen" />
<section id="techy-body-part"> <section id="techy-body-part">
@ -19,7 +19,7 @@
<div class="techy-body-part__middle"> <div class="techy-body-part__middle">
<TechyBox> <TechyBox>
<div class="techy-body-part__middle__inner"> <div class="flex">
<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>
@ -162,28 +162,6 @@ export default {
position: relative; 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 { #v3d-main-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -244,21 +222,19 @@ export default {
.techy-body-part__middle { .techy-body-part__middle {
position: absolute; position: absolute;
top: 9%; top: 12%;
left: 26%; left: 36%;
height: 136px; height: 96px;
width: 176px; width: 128px;
} }
.techy-body-part__middle__inner { .flex {
height: 100%;
padding: 12px; padding: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
} }
.techy-body-part__middle__inner p { .flex p {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 12px; font-size: 12px;
@ -266,15 +242,15 @@ export default {
color: #fff; color: #fff;
} }
.techy-body-part__middle__inner p > span { .flex p > span {
position: relative; position: relative;
padding-left: 16px; padding-left: 6px;
} }
.round-dot::before { .round-dot::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 4px; top: 5px;
left: 2px; left: -3px;
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 fix-table-exception-report"> <div class="table-wrapper">
<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 fix-table-eq-exception"> <div class="table-wrapper">
<techy-table <techy-table
:page="1" :page="1"
:limit="7" :limit="7"
@ -325,17 +325,6 @@ 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;

50
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', align: 'center' }, { label: '设备名称', prop: 'eqName' },
{ label: '所属产线', prop: 'pl', align: 'center', width: 80 }, { label: '所属产线', prop: 'pl' },
{ label: '报修/异常内容', prop: 'content', align: 'center' }, { label: '报修/异常内容', prop: 'content' },
{ label: '报修/发现人', prop: 'creator', align: 'center', width: 100 }, { label: '报修/发现人', prop: 'creator' },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 80 } { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent }
] ]
export const equipmentExceptionDatalist = [ export const equipmentExceptionDatalist = [
@ -70,21 +70,21 @@ 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' }
}, },
this.injectData.remain) this.injectData.remain)
} }
} }
export const equipmentAlarmProps = [ export const equipmentAlarmProps = [
{ label: '设备名称', prop: 'eqName', align: 'center' }, { label: '设备名称', prop: 'eqName' },
{ label: '设备编码', prop: 'eqCode', align: 'center' }, { label: '设备编码', prop: 'eqCode' },
{ label: '所属产线', prop: 'pl', align: 'center' }, { label: '所属产线', prop: 'pl' },
{ label: '报警级别', prop: 'priority', align: 'center', width: 80, subcomponent: PriorityComponent }, { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '报警内容', prop: 'content', align: 'center' } { label: '报警内容', prop: 'content' }
] ]
export const equipmentAlarmDatalist = [ export const equipmentAlarmDatalist = [
@ -122,13 +122,13 @@ export const equipmentAnalysisData = [
] ]
export const sparepartsProps = [ export const sparepartsProps = [
{ prop: 'name', label: '部件名称', align: 'center' }, { prop: 'name', label: '部件名称' },
{ prop: 'eq', label: '所属设备', align: 'center' }, { prop: 'eq', label: '所属设备' },
{ prop: 'pl', label: '所属产线', align: 'center' }, { prop: 'pl', label: '所属产线' },
{ prop: 'update_time', label: '更换时间', align: 'center' }, { prop: 'update_time', label: '更换时间' },
{ prop: 'remain', label: '剩余寿命', align: 'center', subcomponent: LifeRemainComponent }, { prop: 'remain', label: '剩余寿命', subcomponent: LifeRemainComponent },
{ prop: 'stock', label: '备件库存量', align: 'center' }, { prop: 'stock', label: '备件库存量' },
{ prop: 'location', label: '库位', align: 'center' } { prop: 'location', label: '库位' }
] ]
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 class="fix-table-exception-report"> <div>
<techy-table <techy-table
:page="1" :page="1"
:limit="10" :limit="10"
@ -17,7 +17,7 @@
</techy-container> </techy-container>
</div> </div>
<div class="fix-table-exception-alert"> <div>
<techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG"> <techy-container :title="'质量异常报警'" :icon="qualityExceptionSVG">
<techy-table <techy-table
:page="1" :page="1"
@ -337,19 +337,6 @@ 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: '#FB418C66' // 0% 处的颜色 color: '#FB418C' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -132,7 +132,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#DDB11266' // 0% 处的颜色 color: '#DDB112' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -163,7 +163,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#1A99FF66' // 0% 处的颜色 color: '#1A99FF' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -194,7 +194,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#A691FF66' // 0% 处的颜色 color: '#A691FF' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -229,7 +229,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#49FBD666' // 0% 处的颜色 color: '#49FBD6' // 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: 130, prop: 'wsName', align: 'center' }, { label: '工序名称', width: 80, prop: 'wsName' },
{ label: '所属产线', width: 130, prop: 'pl', align: 'center' }, { label: '所属产线', width: 80, prop: 'pl' },
{ label: '异常内容', align: 'center', prop: 'content' }, { label: '异常内容', align: 'center', prop: 'content' },
{ label: '报告人', width: 120, prop: 'creator', align: 'center' }, { label: '报告人', width: 80, prop: 'creator' },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time' },
{ label: '优先级', width: 100, prop: 'priority', align: 'center', subcomponent: PriorityComponent } { label: '优先级', width: 80, 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', align: 'center', width: 120 }, { label: '工序名称', prop: 'wsName' },
{ label: '所属产线', prop: 'pl', align: 'center', width: 120 }, { label: '所属产线', prop: 'pl' },
{ label: '异常内容', prop: 'content', align: 'center' }, { label: '异常内容', prop: 'content' },
{ label: '发现人', prop: 'creator', align: 'center', width: 100 }, { label: '发现人', prop: 'creator' },
{ label: '时间', prop: 'time', align: 'center' }, { label: '时间', prop: 'time' },
{ label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent, width: 100 }, { label: '优先级', prop: 'priority', align: 'center', subcomponent: PriorityComponent },
{ label: '处理人', prop: 'charger', align: 'center', width: 100 }, { label: '处理人', prop: 'charger' },
{ label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent, width: 100 } { label: '完成情况', prop: 'status', align: 'center', subcomponent: StatusComponent }
] ]
export const qualityExceptionDatalist = [ export const qualityExceptionDatalist = [

58
src/views/material-manage/cockpit/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="container" ref="container" class="visual-container material-cockpit"> <div id="container" ref="container" class="visual-container">
<el-row <el-row
class="container-title" class="container-title"
:style="{ :style="{
@ -8,10 +8,8 @@
fontSize: beilv * 30 + 'px' 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 <el-button
type="text" type="text"
class="title-button" class="title-button"
@ -34,7 +32,7 @@
<el-row> <el-row>
<el-col :style="{ marginTop: 16 * beilv + 'px' }"> <el-col :style="{ marginTop: 16 * beilv + 'px' }">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'"> <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1"> <div class="box-padding">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="14"
@ -51,7 +49,7 @@
<el-row> <el-row>
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }"> <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'"> <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
<div class="box-padding specil-table1"> <div class="box-padding">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="14"
@ -77,55 +75,45 @@ import bomList from './components/bomList.vue'
const originalFilm = [ const originalFilm = [
{ {
prop: 'time', prop: 'time',
label: '上线时间', label: '上线时间'
minWidth: 35
}, },
{ {
prop: 'productLine', prop: 'productLine',
label: '产线', label: '产线'
minWidth: 33
}, },
{ {
prop: 'spec', prop: 'spec',
label: '原片规格', label: '原片规格'
minWidth: 32.4
}, },
{ {
prop: 'batch', prop: 'batch',
label: '批次', label: '批次'
minWidth: 35
}, },
{ {
prop: 'num', prop: 'num',
label: '数量', label: '数量'
minWidth: 28
} }
] ]
const material = [ const material = [
{ {
prop: 'time', prop: 'time',
label: '上线时间', label: '上线时间'
minWidth: 35
}, },
{ {
prop: 'eqName', prop: 'eqName',
label: '设备名称', label: '设备名称'
minWidth: 33
}, },
{ {
prop: 'spec', prop: 'spec',
label: '辅料规格', label: '辅料规格'
minWidth: 32.4
}, },
{ {
prop: 'batch', prop: 'batch',
label: '批次', label: '批次'
minWidth: 35
}, },
{ {
prop: 'num', prop: 'num',
label: '数量', label: '数量'
minWidth: 28
} }
] ]
export default { export default {
@ -232,7 +220,6 @@ export default {
}) })
return false return false
} }
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container) screenfull.toggle(this.$refs.container)
} }
} }
@ -249,6 +236,7 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat; background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
text-align: center;
.title-button { .title-button {
color: #00fff0; color: #00fff0;
font-size: 20px; font-size: 20px;
@ -260,17 +248,3 @@ export default {
} }
} }
</style> </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>

99
src/views/orderManage/orderManagerCockpit/cockpit.vue
View File

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

17
src/views/orderManage/orderManagerCockpit/components/orderStatus.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :style="{ height: 15 * beilv + 'px' }"> <div style="height: 14px">
<span v-if="this.injectData.status === 3"> <span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成 已完成
@ -22,21 +22,6 @@ export default {
type: Object, type: Object,
default: () => ({}) 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> </script>