@@ -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> |
@@ -7,7 +7,7 @@ | |||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue | |||
--> | |||
<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 line-vertical" /> | |||
<div class="line line-right" /> | |||
@@ -75,6 +75,7 @@ export default { | |||
.base-container { | |||
color: #fff; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba($color: #061027, $alpha: 0.15); | |||
position: relative; | |||
border: 2px solid; | |||
@@ -138,8 +139,11 @@ export default { | |||
font-size: 1.5em; | |||
padding: .67em; | |||
} | |||
// .bar-content{ | |||
// padding: 1em; | |||
// } | |||
.bar-item { | |||
height: 100%; | |||
} | |||
.bar-content{ | |||
height: calc(100% - 4em); | |||
} | |||
} | |||
</style> |
@@ -7,26 +7,29 @@ | |||
--> | |||
<template> | |||
<div class="visual-base-table-container"> | |||
<el-table | |||
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 v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%"> | |||
<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" | |||
:show-overflow-tooltip="showOverflow" | |||
v-bind="item" | |||
> | |||
<template slot-scope="scope"> | |||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> | |||
<component | |||
: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> | |||
</template> | |||
</el-table-column> | |||
<slot name="content" /> | |||
@@ -36,7 +39,7 @@ | |||
<script> | |||
import { isObject, isString } from 'lodash' | |||
export default { | |||
name: 'BaseTable', | |||
name: 'TechyTable', | |||
filters: { | |||
commonFilter: (source, filterType = a => a) => { | |||
return filterType(source) | |||
@@ -107,70 +110,103 @@ export default { | |||
methods: { | |||
emitData(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> | |||
<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 { | |||
.el-table { | |||
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; | |||
} | |||
height: 100%; | |||
} | |||
/* .visual-base-table-container >>> .el-table { | |||
min-width: 120%; | |||
} */ | |||
/* 清除默认样式 */ | |||
.visual-base-table-container >>> th.gutter { | |||
display: none; | |||
} | |||
.visual-base-table-container >>> table { | |||
background: transparent; | |||
} | |||
.el-table__row--striped:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
.visual-base-table-container >>> .el-table, | |||
.visual-base-table-container >>> th, | |||
.visual-base-table-container >>> tr { | |||
background: unset; | |||
} | |||
.setting { | |||
text-align: right; | |||
padding: 15px; | |||
.setting-box { | |||
width: 100px; | |||
} | |||
i { | |||
color: #aaa; | |||
@extend .pointer; | |||
} | |||
/* 设置设计稿样式 */ | |||
.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> |
@@ -1,8 +1,8 @@ | |||
<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'}"> | |||
<img src="./../../../../assets/img/cockpit/bom.png" alt="" :width="355 * beilv + 'px'" :height="280 * beilv + 'px'"> | |||
<p class="bom-name" :style="{ bottom: 10 * beilv + 'px', fontSize: 16 * beilv + 'px'}"> | |||
<img src="./../../../../assets/img/cockpit/bom.png" alt="" width="100%" height="97%"/> | |||
<p class="bom-name" :style="{ fontSize: 16 * beilv + 'px'}"> | |||
<span class="leftTriangle" /> | |||
<span>{{ item.name }}</span> | |||
<span class="rightTriangle" /> | |||
@@ -28,14 +28,19 @@ export default { | |||
<style lang="scss" scoped> | |||
.box { | |||
display: flex; | |||
flex: 1; | |||
height: 100%; | |||
width: 100%; | |||
flex-flow: row wrap; | |||
justify-content: space-between; | |||
.bom-box { | |||
position: relative; | |||
width: 48%; | |||
.bom-name { | |||
position: absolute; | |||
width: 100%; | |||
text-align: center; | |||
bottom: 6%; | |||
.leftTriangle, | |||
.rightTriangle { | |||
display: inline-block; | |||
@@ -29,41 +29,38 @@ | |||
<bom-list :beilv="beilv" :bom-msg="bomMsg" /> | |||
</base-container> | |||
</el-col> | |||
<el-col :span="14"> | |||
<el-col :span="14" :style="{ margin: 16 * beilv + 'px' + ' 0' }"> | |||
<!-- 右上 --> | |||
<el-row> | |||
<el-col :style="{ marginTop: 16 * beilv + 'px' }"> | |||
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'"> | |||
<div class="right-box"> | |||
<div class="right-top"> | |||
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'"> | |||
<div class="box-padding specil-table1"> | |||
<base-table | |||
:page="1" | |||
:limit="14" | |||
:limit="15" | |||
:show-index="false" | |||
:beilv="beilv" | |||
:table-config="originalFilm" | |||
:table-data="originalFilmList" | |||
:table-config="material" | |||
:table-data="materialList" | |||
/> | |||
</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'"> | |||
</div> | |||
<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="14" | |||
:limit="15" | |||
:show-index="false" | |||
:beilv="beilv" | |||
:table-config="material" | |||
:table-data="materialList" | |||
:table-config="originalFilm" | |||
:table-data="originalFilmList" | |||
/> | |||
</div> | |||
</base-container> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</div> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
@@ -178,14 +175,15 @@ export default { | |||
getMsg() { | |||
const arr = [] | |||
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++) { | |||
const obj = {} | |||
const sj = parseInt(Math.random() * 200) | |||
obj.time = moment().add(sj, 'days').add(sj, 'hours').add(sj, 'minute').add(sj, 'second').format('YYYY-MM-DD HH:mm:ss') | |||
obj.productLine = '产线A' | |||
obj.spec = '光伏玻璃2.0' | |||
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) | |||
obj.num = parseInt(Math.random() * 800 + 100) | |||
const sj = parseInt(Math.random() * 14 + 1) | |||
obj.time = moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYY-MM-DD HH:mm:ss') | |||
obj.productLine = sj % 2 ? 'A' : 'B' | |||
obj.spec = productList[parseInt(Math.random() * (productList.length))] | |||
obj.batch = moment().subtract(sj, 'days').format('YYYYMMDD') | |||
obj.num = parseInt(Math.random() * 800 + 100) + ' (片)' | |||
arr.push(obj) | |||
} | |||
this.originalFilmList = arr | |||
@@ -203,12 +201,12 @@ export default { | |||
} | |||
this.materialList = temp | |||
this.bomMsg = [ | |||
{ name: '隔离纸' }, | |||
{ name: '异丙醇' }, | |||
{ name: '镀膜液' }, | |||
{ name: '磨轮' }, | |||
{ name: '包装辅材' }, | |||
{ name: '网板' } | |||
{ name: '2.0-1128*1716' }, | |||
{ name: '2.0-1128*2251' }, | |||
{ name: '2.0-1128*2272' }, | |||
{ name: '3.2-1128*1716' }, | |||
{ name: '3.2-1128*1718' }, | |||
{ name: '3.2-1032*1747' } | |||
] | |||
}, | |||
change() { | |||
@@ -256,12 +254,31 @@ export default { | |||
} | |||
} | |||
.box-padding { | |||
padding: 0 16px; | |||
padding: 0 16px 16px; | |||
height: 100%; | |||
} | |||
} | |||
</style> | |||
<style lang="scss"> | |||
.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 { | |||
.el-table .cell { | |||
padding-left: 40px; | |||
@@ -24,7 +24,7 @@ | |||
</el-row> | |||
<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"> | |||
<base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'"> | |||
<work-order :beilv="beilv" :order-msg="orderList" /> | |||
@@ -46,13 +46,13 @@ | |||
</el-col> | |||
</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"> | |||
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'"> | |||
<div class="box-padding specil-table2"> | |||
<base-table | |||
:page="1" | |||
:limit="16" | |||
:limit="17" | |||
:show-index="false" | |||
:beilv="beilv" | |||
:table-config="orderMonitiring" | |||
@@ -76,17 +76,17 @@ const orderPool = [ | |||
{ | |||
prop: 'customerName', | |||
label: '客户名称', | |||
minWidth: 35.2 | |||
minWidth: 38 | |||
}, | |||
{ | |||
prop: 'orderCode', | |||
label: '订单编号', | |||
minWidth: 32 | |||
minWidth: 36 | |||
}, | |||
{ | |||
prop: 'productName', | |||
label: '产品名称', | |||
minWidth: 32 | |||
minWidth: 30 | |||
}, | |||
{ | |||
prop: 'planNum', | |||
@@ -96,31 +96,31 @@ const orderPool = [ | |||
{ | |||
prop: 'planDelivery', | |||
label: '计划交货期', | |||
minWidth: 28.8 | |||
minWidth: 25 | |||
}, | |||
{ | |||
prop: 'status', | |||
label: '订单状态', | |||
subcomponent: orderStatus, | |||
minWidth: 19 | |||
minWidth: 21 | |||
} | |||
] | |||
const orderMonitiring = [ | |||
{ | |||
prop: 'customerName', | |||
label: '客户名称', | |||
minWidth: 35.2 | |||
minWidth: 40 | |||
}, | |||
{ | |||
prop: 'orderCode', | |||
label: '订单编号', | |||
minWidth: 33.2 | |||
minWidth: 38 | |||
}, | |||
{ | |||
prop: 'status', | |||
label: '订单状态', | |||
subcomponent: orderStatus, | |||
minWidth: 27 | |||
minWidth: 28 | |||
}, | |||
{ | |||
prop: 'completion', | |||
@@ -206,40 +206,55 @@ export default { | |||
}, | |||
methods: { | |||
getMsg() { | |||
this.orderList = [ | |||
{ code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' }, | |||
{ code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' }, | |||
{ code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' }, | |||
{ code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' } | |||
] | |||
const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃'] | |||
const arr = [] | |||
const compList = ['隆基绿能科技股份有限公司', '天合光能股份有限公司', '晶澳太阳能科技股份有限公司', '晶科能源股份有限公司', '阿特斯阳光电力集团', '东方日升新能源股份有限公司', '尚德集团', '浙江正泰新能源开发有限公司', '环晟光伏(江苏)有限公司', '江苏赛拉弗光伏系统有限公司', '唐山海泰新能科技股份有限公司', '阳光能源控股有限公司', '横店集团东磁股份有限公司', '常州亿晶光电科技有限公司', '协鑫集成科技股份有限公司', '苏州中来光伏新材股份有限公司', '中节能太阳能科技(镇江)有限公司', '苏州腾晖光伏技术有限公司', '英利绿色能源控股有限公司', '湖南红太阳新能源科技有限公司'] | |||
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'] | |||
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%'}] | |||
const arr1 = [] | |||
const arr2 = [] | |||
const temp = [] | |||
for(let i = 0; i < 4; i++) { | |||
const sj = parseInt(Math.random() * 200) | |||
const obj = {} | |||
obj.code = 'WOD' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss') | |||
obj.state = '激活' | |||
obj.name = daping[i].name | |||
obj.line = sj % 2 ? 'A' : 'B' | |||
obj.workCode = 'ODFG' + moment().subtract(sj, 'days').subtract(sj, 'hours').subtract(sj, 'minute').subtract(sj, 'second').format('YYYYMMDDHHmmss') | |||
obj.percentage = daping[i].percentage | |||
arr1.push(obj) | |||
} | |||
this.orderList = arr1 | |||
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 = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10) | |||
obj.productName = '光伏玻璃2.0' | |||
obj.planNum = parseInt(Math.random() * 800 + 100) | |||
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) | |||
arr.push(obj) | |||
// obj.status = parseInt(Math.random() * 3 + 1) | |||
obj.status = 4 | |||
arr2.push(obj) | |||
} | |||
this.orderPoolList = arr | |||
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 = 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.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 ? 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 = '0' | |||
obj.energyCosts = '0' | |||
obj.equipmentCost = '0' | |||
obj.materialCost = '0' | |||
obj.totalCost = '0' | |||
temp.push(obj) | |||
} | |||
this.orderMonitiringList = temp | |||
@@ -290,9 +305,20 @@ export default { | |||
} | |||
.container-main { | |||
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 { | |||
padding: 0 16px; | |||
height: 100%; | |||
} | |||
} | |||
</style> | |||
@@ -310,11 +336,11 @@ export default { | |||
} | |||
.specil-table2 { | |||
.el-table .cell { | |||
padding-left: 50px; | |||
padding-left: 25px; | |||
} | |||
.el-table--border th:first-child .cell, | |||
.el-table--border td:first-child .cell { | |||
padding-left: 50px; | |||
padding-left: 25px; | |||
} | |||
} | |||
} | |||
@@ -7,7 +7,7 @@ | |||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue | |||
--> | |||
<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 line-vertical" /> | |||
<div class="line line-right" /> | |||
@@ -75,6 +75,7 @@ export default { | |||
.base-container { | |||
color: #fff; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba($color: #061027, $alpha: 0.15); | |||
position: relative; | |||
border: 2px solid; | |||
@@ -138,8 +139,11 @@ export default { | |||
font-size: 1.5em; | |||
padding: .67em; | |||
} | |||
// .bar-content{ | |||
// padding: 1em; | |||
// } | |||
.bar-item { | |||
height: 100%; | |||
} | |||
.bar-content{ | |||
height: calc(100% - 6em); | |||
} | |||
} | |||
</style> |
@@ -7,26 +7,29 @@ | |||
--> | |||
<template> | |||
<div class="visual-base-table-container"> | |||
<el-table | |||
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 v-loading="isLoading" class="techy-el-table" :data="renderData" border height="100%"> | |||
<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" | |||
:show-overflow-tooltip="showOverflow" | |||
v-bind="item" | |||
> | |||
<template slot-scope="scope"> | |||
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> | |||
<component | |||
: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> | |||
</template> | |||
</el-table-column> | |||
<slot name="content" /> | |||
@@ -36,7 +39,7 @@ | |||
<script> | |||
import { isObject, isString } from 'lodash' | |||
export default { | |||
name: 'BaseTable', | |||
name: 'TechyTable', | |||
filters: { | |||
commonFilter: (source, filterType = a => a) => { | |||
return filterType(source) | |||
@@ -107,70 +110,103 @@ export default { | |||
methods: { | |||
emitData(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> | |||
<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 { | |||
.el-table { | |||
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; | |||
} | |||
height: 100%; | |||
} | |||
/* .visual-base-table-container >>> .el-table { | |||
min-width: 120%; | |||
} */ | |||
/* 清除默认样式 */ | |||
.visual-base-table-container >>> th.gutter { | |||
display: none; | |||
} | |||
.visual-base-table-container >>> table { | |||
background: transparent; | |||
} | |||
.el-table__row--striped:hover > td { | |||
background-color: rgba(79,114,136,0.29) !important; | |||
} | |||
.visual-base-table-container >>> .el-table, | |||
.visual-base-table-container >>> th, | |||
.visual-base-table-container >>> tr { | |||
background: unset; | |||
} | |||
.setting { | |||
text-align: right; | |||
padding: 15px; | |||
.setting-box { | |||
width: 100px; | |||
} | |||
i { | |||
color: #aaa; | |||
@extend .pointer; | |||
} | |||
/* 设置设计稿样式 */ | |||
.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> |
@@ -1,9 +1,5 @@ | |||
<template> | |||
<div :style="{ height: 15 * beilv + 'px' }"> | |||
<span v-if="this.injectData.status === 3"> | |||
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" /> | |||
已完成 | |||
</span> | |||
<div class="state-box"> | |||
<span v-if="this.injectData.status === 1"> | |||
<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" /> | |||
已下发 | |||
</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> | |||
</template> | |||
<script> | |||
@@ -40,3 +44,8 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.state-box { | |||
height: 15px; | |||
} | |||
</style> |
@@ -5,7 +5,7 @@ | |||
v-for="(item,index) in orderMsg" | |||
:key="index" | |||
:style="{ padding: 10 * beilv + 'px ' + 20 * beilv + 'px ' + 16 * beilv + 'px ' + 16 * beilv | |||
+ 'px', height: 168 * beilv + 'px'}" | |||
+ 'px'}" | |||
class="box" | |||
> | |||
<p class="line1"> | |||
@@ -57,6 +57,8 @@ export default { | |||
<style lang='scss' scoped> | |||
.order-box { | |||
display: flex; | |||
flex: 1; | |||
height: 100%; | |||
flex-flow: row wrap; | |||
justify-content: space-between; | |||
.box { | |||