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

lb #12

Merged
gtz217 merged 27 commits from lb into master 2022-11-18 17:04:51 +08:00
Conversation 0 Commits 27 Files Changed 33 +414 -259
10 changed files with 414 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f09c048cf0 - Show all commits

27
src/icons/svg/orange_dot.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 25</title>
<defs>
<rect id="path-1" x="0" y="234" width="6" height="6" rx="3"></rect>
<filter x="-100.0%" y="-100.0%" width="300.0%" height="300.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.301960784 0 0 0 0 0.0666666667 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-2工单管理" transform="translate(-1784.000000, -561.000000)">
<g id="编组-16备份-6" transform="translate(1016.000000, 229.000000)">
<g id="编组-19" transform="translate(32.000000, 64.000000)">
<g id="编组-28备份-4" transform="translate(736.000000, 8.000000)">
<g id="矩形备份-25" transform="translate(4.000000, 30.000000)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FF4D11" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

12
src/views/material-manage/cockpit/components/baseContainer/index.vue
View File

@ -7,7 +7,7 @@
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->
<template> <template>
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}"> <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
<div class="line" /> <div class="line" />
<div class="line line-vertical" /> <div class="line line-vertical" />
<div class="line line-right" /> <div class="line line-right" />
@ -75,6 +75,7 @@ export default {
.base-container { .base-container {
color: #fff; color: #fff;
width: 100%; width: 100%;
height: 100%;
background-color: rgba($color: #061027, $alpha: 0.15); background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
border: 2px solid; border: 2px solid;
@ -138,8 +139,11 @@ export default {
font-size: 1.5em; font-size: 1.5em;
padding: .67em; padding: .67em;
} }
// .bar-content{ .bar-item {
// padding: 1em; height: 100%;
// } }
.bar-content{
height: calc(100% - 4em);
}
} }
</style> </style>

180
src/views/material-manage/cockpit/components/baseTable.vue
View File

@ -7,26 +7,29 @@
--> -->
<template> <template>
<div class="visual-base-table-container"> <div class="visual-base-table-container">
<el-table <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
v-loading="isLoading"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column <el-table-column
v-for="item in renderTableHeadList" v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop" :key="item.prop"
:show-overflow-tooltip="showOverflow" :show-overflow-tooltip="showOverflow"
v-bind="item" v-bind="item"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<component
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> :is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -36,7 +39,7 @@
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
export default { export default {
name: 'BaseTable', name: 'TechyTable',
filters: { filters: {
commonFilter: (source, filterType = a => a) => { commonFilter: (source, filterType = a => a) => {
return filterType(source) return filterType(source)
@ -107,70 +110,103 @@ export default {
methods: { methods: {
emitData(val) { emitData(val) {
this.$emit('emitFun', val) this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
} }
} }
} }
</script> </script>
<style lang="scss">
@import "~@/styles/index.scss"; <style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container { .visual-base-table-container {
.el-table { height: 100%;
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
} }
.setting { /* .visual-base-table-container >>> .el-table {
text-align: right; min-width: 120%;
padding: 15px; } */
.setting-box { /* 清除默认样式 */
width: 100px; .visual-base-table-container >>> th.gutter {
} display: none;
i { }
color: #aaa; .visual-base-table-container >>> table {
@extend .pointer; background: transparent;
}
} }
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffffb3;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e90; */
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
/* background-color: #20376090; */
}
</style> </style>

28
src/views/material-manage/cockpit/components/bomList.vue
View File

@ -1,11 +1,9 @@
<template> <template>
<div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px '+ 24 * beilv + 'px' }" class="box"> <div :style="{ padding: 8 * beilv + 'px ' + 24 * beilv + 'px 0'}" class="box">
<div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}"> <div v-for="(item, i) in bomMsg" :key="i" class="bom-box" :style="{ marginBottom: 11 * beilv + 'px'}">
<img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'"> <img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/>
<p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}"> <p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}">
<span class="leftTriangle" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span class="rightTriangle" />
</p> </p>
</div> </div>
</div> </div>
@ -28,29 +26,19 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.box { .box {
display: flex; display: flex;
flex: 1;
height: 100%;
width: 100%;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
.bom-box { .bom-box {
position: relative; position: relative;
width: 48%;
.bom-name { .bom-name {
position: absolute; position: absolute;
width: 100%; width: 100%;
text-align: center; text-align: center;
.leftTriangle, bottom: 6%;
.rightTriangle {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
}
.leftTriangle {
border-right-color: #fff;
margin-right: 10px;
}
.rightTriangle {
border-left-color: #fff;
margin-left: 10px;
}
} }
} }
} }

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

@ -29,32 +29,15 @@
<bom-list :beilv="beilv" :bom-msg="bomMsg" /> <bom-list :beilv="beilv" :bom-msg="bomMsg" />
</base-container> </base-container>
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<!-- 右上 --> <!-- 右上 -->
<el-row> <div class="right-box">
<el-col :style="{ marginTop: 16 * beilv + 'px' }"> <div class="right-top">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="14"
:show-index="false"
:beilv="beilv"
:table-config="originalFilm"
:table-data="originalFilmList"
/>
</div>
</base-container>
</el-col>
</el-row>
<!-- 右下 -->
<el-row>
<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 specil-table1">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="15"
:show-index="false" :show-index="false"
:beilv="beilv" :beilv="beilv"
:table-config="material" :table-config="material"
@ -62,8 +45,22 @@
/> />
</div> </div>
</base-container> </base-container>
</el-col> </div>
</el-row> <div class="right-bottom">
<base-container :beilv="beilv" :height="470" :title="'深加工再制品'" :title-icon="'cockpit_2_2'">
<div class="box-padding specil-table1">
<base-table
:page="1"
:limit="15"
:show-index="false"
:beilv="beilv"
:table-config="originalFilm"
:table-data="originalFilmList"
/>
</div>
</base-container>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -114,7 +111,7 @@ const material = [
}, },
{ {
prop: 'spec', prop: 'spec',
label: '辅料规格', label: '辅料名称',
minWidth: 32.4 minWidth: 32.4
}, },
{ {
@ -178,37 +175,44 @@ export default {
getMsg() { getMsg() {
const arr = [] const arr = []
const temp = [] const temp = []
const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 15)
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss') obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
obj.productLine = '产线A' obj.productLine = sj % 2 ? 'A' : 'B'
obj.spec = '光伏玻璃2.0' obj.spec = productList[parseInt(Math.random() * (productList.length))]
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
obj.num = parseInt(Math.random() * 800 + 100) obj.num = parseInt(Math.random() * 800 + 100) + ' (片)'
arr.push(obj) arr.push(obj)
} }
this.originalFilmList = arr this.originalFilmList = arr
const eqList = ['清洗机', 'A1一次冷却机', 'A1下片机', 'A1一次固化机', 'A1一次镀膜机', 'A1二次固化机', 'A1二次镀膜机', 'A1磨边机', 'A1磨边清洗机', 'A1预热机', 'A2一次冷却机', 'A2一次固化机', 'A2一次镀膜机', 'A2下片机', 'A2二次固化机', 'A2磨边机', 'A2磨边清洗机', 'A储片机206'] const eqList = [
const spcList = ['200*231*0.5', '100*120*0.2', '70*80', '100*100'] {name: '磨边机', fc: ''},
{name: '丝印机', fc: ['油墨', '刮胶']},
{name: '镀膜机', fc: ['镀膜液', '异丙醇']},
{name: '包装机', fc: ['隔离纸', '包装辅材']}
]
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 15)
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss') const sj2 = parseInt(Math.random() * eqList.length)
obj.eqName = eqList[parseInt(Math.random() * eqList.length)] const sj3 = sj % 2 ? 1 : 0
obj.spec = spcList[parseInt(Math.random() * spcList.length)] obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss')
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.eqName = eqList[sj2].name
obj.spec = eqList[sj2].fc ? (eqList[sj2].fc[sj3]) : ''
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD')
obj.num = parseInt(Math.random() * 800 + 100) obj.num = parseInt(Math.random() * 800 + 100)
temp.push(obj) temp.push(obj)
} }
this.materialList = temp this.materialList = temp
this.bomMsg = [ this.bomMsg = [
{ name: '隔离纸' }, { name: '2.0-1128*1716' },
{ name: '异丙醇' }, { name: '2.0-1128*2251' },
{ name: '镀膜液' }, { name: '2.0-1128*2272' },
{ name: '磨轮' }, { name: '3.2-1128*1716' },
{ name: '包装辅材' }, { name: '3.2-1128*1718' },
{ name: '网板' } { name: '3.2-1032*1747' }
] ]
}, },
change() { change() {
@ -256,12 +260,31 @@ export default {
} }
} }
.box-padding { .box-padding {
padding: 0 16px; padding: 0 16px 16px;
height: 100%;
} }
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.material-cockpit { .material-cockpit {
.container-main {
height: calc(100vh - 100px * var(--beilv));
display: flex;
flex: 1;
}
.right-box {
height: 100%;
display: flex;
// flex: 1;
flex-direction: column-reverse;
justify-content: space-between;
}
.right-top {
height: 49.4%;
}
.right-bottom {
height: 49.4%;
}
.specil-table1 { .specil-table1 {
.el-table .cell { .el-table .cell {
padding-left: 40px; padding-left: 40px;

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

@ -24,7 +24,7 @@
</el-row> </el-row>
<el-row class="container-main"> <el-row class="container-main">
<!-- 上 --> <!-- 上 -->
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv"> <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv" class="top-container">
<el-col :span="10"> <el-col :span="10">
<base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'"> <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
<work-order :beilv="beilv" :order-msg="orderList" /> <work-order :beilv="beilv" :order-msg="orderList" />
@ -46,13 +46,13 @@
</el-col> </el-col>
</el-row> </el-row>
<!-- 下 --> <!-- 下 -->
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }"> <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" class="bottom-container">
<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 specil-table2">
<base-table <base-table
:page="1" :page="1"
:limit="16" :limit="17"
:show-index="false" :show-index="false"
:beilv="beilv" :beilv="beilv"
:table-config="orderMonitiring" :table-config="orderMonitiring"
@ -76,17 +76,17 @@ const orderPool = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称', label: '客户名称',
minWidth: 35.2 minWidth: 38
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号', label: '订单编号',
minWidth: 32 minWidth: 36
}, },
{ {
prop: 'productName', prop: 'productName',
label: '产品名称', label: '产品名称',
minWidth: 32 minWidth: 30
}, },
{ {
prop: 'planNum', prop: 'planNum',
@ -96,31 +96,31 @@ const orderPool = [
{ {
prop: 'planDelivery', prop: 'planDelivery',
label: '计划交货期', label: '计划交货期',
minWidth: 28.8 minWidth: 25
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus, subcomponent: orderStatus,
minWidth: 19 minWidth: 21
} }
] ]
const orderMonitiring = [ const orderMonitiring = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称', label: '客户名称',
minWidth: 35.2 minWidth: 40
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号', label: '订单编号',
minWidth: 33.2 minWidth: 38
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus, subcomponent: orderStatus,
minWidth: 27 minWidth: 28
}, },
{ {
prop: 'completion', prop: 'completion',
@ -206,40 +206,55 @@ export default {
}, },
methods: { methods: {
getMsg() { getMsg() {
this.orderList = [ const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司']
{ code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' }, const productList = ['2.0-1128*1716', '2.0-1128*2251', '2.0-1128*2272', '3.2-1128*1716', '3.2-1128*1718','3.2-1032*1747', '3.2-1033*2089']
{ code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' }, const daping = [{name: '3.2-1032*1747', percentage: '72%'},{name: '2.0-1128*1716', percentage: '67%'},{name: '3.2-1128*1716', percentage: '46%'},{name: '2.0-1128*2251', percentage: '89%'}]
{ code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' }, const arr1 = []
{ code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' } const arr2 = []
]
const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
const arr = []
const temp = [] const temp = []
for (let i = 0; i < 20; i++) { for(let i = 0; i < 4; i++) {
const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))] const obj = {}
obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
obj.productName = '光伏玻璃2.0' obj.state = '激活'
obj.planNum = parseInt(Math.random() * 800 + 100) obj.name = daping[i].name
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD') obj.line = sj % 2 ? 'A' : 'B'
obj.status = parseInt(Math.random() * 3 + 1) obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
arr.push(obj) obj.percentage = daping[i].percentage
arr1.push(obj)
} }
this.orderPoolList = arr this.orderList = arr1
for (let i = 0; i < 20; i++) { for (let i = 0; i < 20; i++) {
const obj = {} const obj = {}
const sj = parseInt(Math.random() * 200) const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))] obj.customerName = compList[parseInt(Math.random() * (compList.length))]
obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
obj.productName = productList[parseInt(Math.random() * (productList.length))]
obj.planNum = parseInt(Math.random() * 800 + 100) + '(m²)'
obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
// obj.status = parseInt(Math.random() * 3 + 1)
obj.status = 4
arr2.push(obj)
}
this.orderPoolList = arr2
for (let i = 0; i < 20; i++) {
const obj = {}
const sj = parseInt(Math.random() * 200)
obj.customerName = compList[parseInt(Math.random() * (compList.length))]
obj.orderCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss')
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 ? 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.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.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.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.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
obj.shiftCosts = '0'
obj.energyCosts = '0'
obj.equipmentCost = '0'
obj.materialCost = '0'
obj.totalCost = '0'
temp.push(obj) temp.push(obj)
} }
this.orderMonitiringList = temp this.orderMonitiringList = temp
@ -290,9 +305,20 @@ export default {
} }
.container-main { .container-main {
padding: 16px 8px; padding: 16px 8px;
.top-container {
height: calc((100vh - 100px * var(--beilv)) * 0.42);
display: flex;
flex: 1;
}
.bottom-container {
height: calc((100vh - 100px * var(--beilv)) * 0.56);
display: flex;
flex: 1;
}
} }
.box-padding { .box-padding {
padding: 0 16px; padding: 0 16px;
height: 100%;
} }
} }
</style> </style>
@ -310,11 +336,11 @@ export default {
} }
.specil-table2 { .specil-table2 {
.el-table .cell { .el-table .cell {
padding-left: 50px; padding-left: 25px;
} }
.el-table--border th:first-child .cell, .el-table--border th:first-child .cell,
.el-table--border td:first-child .cell { .el-table--border td:first-child .cell {
padding-left: 50px; padding-left: 25px;
} }
} }
} }

12
src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue
View File

@ -7,7 +7,7 @@
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
--> -->
<template> <template>
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}"> <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
<div class="line" /> <div class="line" />
<div class="line line-vertical" /> <div class="line line-vertical" />
<div class="line line-right" /> <div class="line line-right" />
@ -75,6 +75,7 @@ export default {
.base-container { .base-container {
color: #fff; color: #fff;
width: 100%; width: 100%;
height: 100%;
background-color: rgba($color: #061027, $alpha: 0.15); background-color: rgba($color: #061027, $alpha: 0.15);
position: relative; position: relative;
border: 2px solid; border: 2px solid;
@ -138,8 +139,11 @@ export default {
font-size: 1.5em; font-size: 1.5em;
padding: .67em; padding: .67em;
} }
// .bar-content{ .bar-item {
// padding: 1em; height: 100%;
// } }
.bar-content{
height: calc(100% - 6em);
}
} }
</style> </style>

180
src/views/orderManage/orderManagerCockpit/components/baseTable.vue
View File

@ -7,26 +7,29 @@
--> -->
<template> <template>
<div class="visual-base-table-container"> <div class="visual-base-table-container">
<el-table <el-table v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%">
v-loading="isLoading"
:header-cell-style="{background:'rgba(32, 55, 96, 0.8)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
<el-table-column <el-table-column
v-for="item in renderTableHeadList" v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70 * beilv"
align="center"
/>
<el-table-column
v-for="(item, index) in renderTableHeadList"
:key="item.prop" :key="item.prop"
:show-overflow-tooltip="showOverflow" :show-overflow-tooltip="showOverflow"
v-bind="item" v-bind="item"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<component
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> :is="item.subcomponent"
v-if="item.subcomponent"
:key="index"
:inject-data="{ ...scope.row, ...item }"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<slot name="content" /> <slot name="content" />
@ -36,7 +39,7 @@
<script> <script>
import { isObject, isString } from 'lodash' import { isObject, isString } from 'lodash'
export default { export default {
name: 'BaseTable', name: 'TechyTable',
filters: { filters: {
commonFilter: (source, filterType = a => a) => { commonFilter: (source, filterType = a => a) => {
return filterType(source) return filterType(source)
@ -107,70 +110,103 @@ export default {
methods: { methods: {
emitData(val) { emitData(val) {
this.$emit('emitFun', val) this.$emit('emitFun', val)
},
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(14, 32, 62, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
} else {
return {
background: 'rgba(32, 55, 96, 0.8)',
color: 'rgba(255,255,255,0.5)',
height: 26 * this.beilv + 'px',
lineHeight: 26 * this.beilv + 'px',
padding: 0,
fontSize: 12 * this.beilv + 'px'
}
}
},
setCellStyle(v) {
return {
lineHeight: 23 * this.beilv + 'px'
}
} }
} }
} }
</script> </script>
<style lang="scss">
@import "~@/styles/index.scss"; <style scoped>
.visual-base-table-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv));
}
.visual-base-table-container >>> ::-webkit-scrollbar-track {
background-color: #14243f;
border-radius: 0;
}
.visual-base-table-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
background: #5bc4bf9f;
position: relative;
}
.visual-base-table-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f;
}
/* .visual-base-table-container {
min-width: 30vw;
} */
.visual-base-table-container { .visual-base-table-container {
.el-table { height: 100%;
border: 0;
}
.el-table::before,.el-table--border::after {
background-color: transparent;
}
.el-table th,td{
border-color: #0D1728 !important;
padding: 0;
}
.el-table tr {
background: transparent;
}
.el-table__row:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
} }
.setting { /* .visual-base-table-container >>> .el-table {
text-align: right; min-width: 120%;
padding: 15px; } */
.setting-box { /* 清除默认样式 */
width: 100px; .visual-base-table-container >>> th.gutter {
} display: none;
i { }
color: #aaa; .visual-base-table-container >>> table {
@extend .pointer; background: transparent;
}
} }
.visual-base-table-container >>> .el-table,
.visual-base-table-container >>> th,
.visual-base-table-container >>> tr {
background: unset;
}
/* 设置设计稿样式 */
.visual-base-table-container >>> .el-table::before,
.visual-base-table-container >>> .el-table--group::after,
.visual-base-table-container >>> .el-table--border::after,
.visual-base-table-container >>> .el-table--border::after {
background: unset;
}
.visual-base-table-container >>> table * {
border-color: #0d1728;
border-width: calc(1px * var(--beilv));
}
.visual-base-table-container >>> td {
padding: calc(5px * var(--beilv));
}
.visual-base-table-container >>> td span {
color: #ffffffb3;
font-size: calc(12px * var(--beilv));
line-height: calc(14px * var(--beilv));
}
.visual-base-table-container >>> thead th {
padding: 0;
}
.visual-base-table-container >>> thead th .cell {
color: #fff;
font-size: calc(14px * var(--beilv));
line-height: calc(14px * var(--beilv));
padding: calc(6px * var(--beilv));
white-space: nowrap;
}
.visual-base-table-container >>> .el-table__body tr:hover > td {
background-color: #42537130;
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(odd) {
background-color: #0e203e;
/* background-color: #0e203e90; */
}
.visual-base-table-container >>> .el-table tbody tr:nth-child(even),
.visual-base-table-container >>> .el-table thead {
background-color: #203760;
/* background-color: #20376090; */
}
</style> </style>

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

@ -1,9 +1,5 @@
<template> <template>
<div :style="{ height: 15 * beilv + 'px' }"> <div class="state-box">
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
</span>
<span v-if="this.injectData.status === 1"> <span v-if="this.injectData.status === 1">
<svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
在途 在途
@ -12,6 +8,14 @@
<svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
已下发 已下发
</span> </span>
<span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成
</span>
<span v-if="this.injectData.status === 4">
<svg-icon icon-class="orange_dot" style="font-size: 14px; position: relative; top: .08em" />
待下发
</span>
</div> </div>
</template> </template>
<script> <script>
@ -40,3 +44,8 @@ export default {
} }
} }
</script> </script>
<style scoped>
.state-box {
height: 15px;
}
</style>

4
src/views/orderManage/orderManagerCockpit/components/workOrder.vue
View File

@ -5,7 +5,7 @@
v-for="(item,index) in orderMsg" v-for="(item,index) in orderMsg"
:key="index" :key="index"
:style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv :style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv
+ 'px', height: 168 * beilv + 'px'}" + 'px'}"
class="box" class="box"
> >
<p class="line1"> <p class="line1">
@ -57,6 +57,8 @@ export default {
<style lang='scss' scoped> <style lang='scss' scoped>
.order-box { .order-box {
display: flex; display: flex;
flex: 1;
height: 100%;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: space-between; justify-content: space-between;
.box { .box {