Compare commits
2 Commits
f01052d96f
...
a0b70cbd59
| Author | SHA1 | Date | |
|---|---|---|---|
| a0b70cbd59 | |||
| d39bb981ec |
27
src/icons/svg/orange_dot.svg
Normal file
27
src/icons/svg/orange_dot.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@ -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;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -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,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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user