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

工单&物料

Browse Source
This commit is contained in:
朱菊兰 2022-11-17 08:55:51 +08:00
parent f01052d96f
commit d39bb981ec
10 changed files with 400 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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
-->
<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>

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

@ -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;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
height: 100%;
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
/* .visual-base-table-container >>> .el-table {
min-width: 120%;
} */
/* 清除默认样式 */
.visual-base-table-container >>> th.gutter {
display: none;
}
.visual-base-table-container >>> table {
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>

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

@ -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;

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

@ -29,32 +29,15 @@
<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="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' }">
<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="material"
@ -62,8 +45,22 @@
/>
</div>
</base-container>
</el-col>
</el-row>
</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="15"
:show-index="false"
:beilv="beilv"
:table-config="originalFilm"
:table-data="originalFilmList"
/>
</div>
</base-container>
</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;

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

@ -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 < 20; i++) {
const obj = {}
for(let i = 0; i < 4; i++) {
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.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
obj.status = parseInt(Math.random() * 3 + 1)
arr.push(obj)
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.orderPoolList = arr
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.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.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;
}
}
}

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
-->
<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>

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

@ -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;
}
.el-table__row--striped:hover > td {
background-color: rgba(79,114,136,0.29) !important;
}
height: 100%;
}
.setting {
text-align: right;
padding: 15px;
.setting-box {
width: 100px;
}
i {
color: #aaa;
@extend .pointer;
}
/* .visual-base-table-container >>> .el-table {
min-width: 120%;
} */
/* 清除默认样式 */
.visual-base-table-container >>> th.gutter {
display: none;
}
.visual-base-table-container >>> table {
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>

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

@ -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>

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

@ -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 {