@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2022-01-21 14:43:06 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-11 15:27:23 | |||
* @LastEditTime: 2022-11-17 16:35:33 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -93,6 +93,7 @@ export default { | |||
// 默认的legend配置 | |||
legend: { | |||
orient: 'vertical', | |||
show: false, | |||
bottom: 0, | |||
itemHeight: 10, | |||
itemWidth: 10, | |||
@@ -112,16 +113,16 @@ export default { | |||
rich: { | |||
a: { | |||
align: 'center', | |||
fontSize: 13, | |||
fontSize: 12, | |||
fontWeight: 400, | |||
color: 'rgba(255, 255, 255, 0.7)', | |||
padding: [0, 4], | |||
padding: [0, 1], | |||
lineHeight: 16 | |||
}, | |||
b: { | |||
// verticalAlign: 'top', | |||
align: 'center', | |||
fontSize: 13, | |||
fontSize: 12, | |||
fontWeight: 400, | |||
color: 'rgba(255, 255, 255)' | |||
}, | |||
@@ -170,7 +171,7 @@ export default { | |||
}, | |||
// 默认的series配置 | |||
series: { | |||
center: ['60%', '55%'], | |||
center: ['50%', '55%'], | |||
radius: ['50%', '70%'], | |||
silent: true, | |||
avoidLabelOverlap: false, | |||
@@ -215,19 +216,19 @@ export default { | |||
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0), | |||
subtext: '总共', | |||
top: '48%', | |||
left: '59%', | |||
left: '49%', | |||
textAlign: 'center', | |||
itemGap: 5, | |||
textStyle: { | |||
color: '#fff', | |||
fontSize: 26, | |||
fontSize: 26 * this.beilv, | |||
fontWeight: 400, | |||
lineHeight: 15 | |||
}, | |||
subtextStyle: { | |||
color: 'rgba(255, 255, 255, 0.7)', | |||
fontWeight: 400, | |||
fontSize: 14, | |||
fontSize: 14 * this.beilv, | |||
lineHeight: 20 | |||
} | |||
} | |||
@@ -259,6 +260,17 @@ export default { | |||
...this.seriesConfig, | |||
itemStyle: { | |||
normal: { | |||
label: { | |||
show: true, | |||
fontSize: 14 * this.beilv, | |||
formatter: '{d}%\n{name|{b}}', | |||
rich: { | |||
name: { | |||
color: 1, | |||
fontSize: 10 * this.beilv | |||
} | |||
} | |||
}, | |||
color: (list) => { | |||
var colorList = [ | |||
{ | |||
@@ -292,10 +304,10 @@ export default { | |||
} | |||
} | |||
}, | |||
label: { | |||
formatter: [ | |||
'{d}%' | |||
].join('\n') | |||
labelLine: { | |||
length: 8, | |||
length2: 15, | |||
maxSurfaceAngle: 80 | |||
}, | |||
data: this.seriesData.map((item, index) => { | |||
item.label = { | |||
@@ -2,42 +2,107 @@ | |||
* @Author: zwq | |||
* @Date: 2020-12-29 16:37:56 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-08 16:06:39 | |||
* @LastEditTime: 2022-11-17 16:39:20 | |||
* @Description: | |||
--> | |||
<template> | |||
<div class="container"> | |||
<div> | |||
<div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box"> | |||
<div | |||
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }" | |||
class="box-name title" | |||
:class="titleClick === i.title ? 'title-click' : ''" | |||
@click="titleClick = i.title" | |||
> | |||
{{ i.title }} | |||
</div> | |||
<div class="bg" :style="{ height: 145 * beilv + 'px', width: 685 * beilv + 'px' }"> | |||
<div | |||
:style="{ fontSize: 22 * beilv + 'px', height: 116 * beilv + 'px', width: 26 * beilv + 'px' }" | |||
class="box-name subtitle" | |||
> | |||
{{ i.subtitle }} | |||
</div> | |||
<div class="locationFlex"> | |||
<div v-for="j in 4" :key="j+'div1'" class="finished"> | |||
<div | |||
v-for="(l,index) in 19" | |||
:key="l+'box1'" | |||
:class="l > Math.round(Math.random() * 80) ? 'waring' : ''" | |||
:style="{ | |||
marginRight: 2 * beilv + 'px', | |||
marginTop: 2 * beilv + 'px', | |||
marginBottom: 1 * beilv + 'px', | |||
height: 26 * beilv + 'px', | |||
lineHeight: 28 * beilv + 'px', | |||
fontSize: 12 * beilv + 'px' | |||
}" | |||
class="location" | |||
> | |||
{{ j + 4*index }} | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 辅材库 --> | |||
<div | |||
v-for="i in areaArr" | |||
:key="i" | |||
:style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }" | |||
class="area" | |||
v-for="i in areaArr1" | |||
:key="i+'div2'" | |||
:style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }" | |||
class="box2" | |||
> | |||
<el-row> | |||
<el-col :span="1"> | |||
<div class="areaName" :style="{ fontSize: 24 * beilv + 'px',lineHeight: 40 * beilv + 'px', marginTop: 20 * beilv + 'px' }">{{ i }}</div> | |||
</el-col> | |||
<el-col :span="23"> | |||
<div class="locationFlex"> | |||
<div | |||
v-for="l in 72" | |||
:key="l" | |||
:class="l > Math.round(Math.random() * 100) ? 'waring' : ''" | |||
:style="{ | |||
marginRight: 6 * beilv + 'px', | |||
marginTop: 2 * beilv + 'px', | |||
marginBottom: 1 * beilv + 'px', | |||
height: 28 * beilv + 'px', | |||
lineHeight: 28 * beilv + 'px', | |||
fontSize: 12 * beilv + 'px' | |||
}" | |||
class="location" | |||
> | |||
{{ l }} | |||
<div | |||
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }" | |||
class="box-name title" | |||
> | |||
{{ i }} | |||
</div> | |||
<div v-if="i==='辅材库'" class="locationFlex" style="margin-left:0"> | |||
<div v-for="j in 4" :key="j+'div3'" class="Auxiliary"> | |||
<div | |||
v-for="(l,index) in 19" | |||
:key="l+'box5'" | |||
:class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']" | |||
:style="{ | |||
marginRight: 2 * beilv + 'px', | |||
marginTop: 2 * beilv + 'px', | |||
height: 26 * beilv + 'px', | |||
lineHeight: 28 * beilv + 'px', | |||
fontSize: 12 * beilv + 'px' | |||
}" | |||
class="location" | |||
> | |||
{{ j + 4*index }} | |||
</div> | |||
</div> | |||
</div> | |||
<div v-else class="locationFlex" style="margin-left:0"> | |||
<div v-for="j in [3,2,1]" :key="j+'div4'"> | |||
<div | |||
v-for="l in 20" | |||
:key="l+'box9'" | |||
:class="num.indexOf(l + 4*j)>0 ? 'waring' : ''" | |||
:style="{ | |||
marginRight: 2 * beilv + 'px', | |||
marginTop: 2 * beilv + 'px', | |||
marginBottom: 1 * beilv + 'px', | |||
height: 38 * beilv + 'px', | |||
width: '4.5%', | |||
lineHeight: 19 * beilv + 'px', | |||
fontSize: 12 * beilv + 'px' | |||
}" | |||
class="location" | |||
> | |||
<div style="border-bottom:1px dotted rgba(255,255,255,0.5);"> | |||
{{ j }} | |||
</div> | |||
<div>{{ l }}</div> | |||
</div> | |||
</el-col> | |||
</el-row> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -55,38 +120,123 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区'] | |||
areaArr: [ | |||
{ | |||
title: '成品库 A', | |||
subtitle: 'A 区' | |||
}, | |||
{ | |||
title: '成品库 B', | |||
subtitle: 'B 区' | |||
}, | |||
{ | |||
title: '成品库 C', | |||
subtitle: 'C 区' | |||
}, | |||
{ | |||
title: '成品库 D', | |||
subtitle: 'D 区' | |||
} | |||
], | |||
titleClick: '成品库 A', | |||
locationArr: [1, 5, 9], | |||
areaArr1: ['辅材库', '备件库'], | |||
num: [] | |||
} | |||
}, | |||
methods: {} | |||
created() { | |||
for (let i = 0; i <= 30; i++) { | |||
this.num.push(Math.round(Math.random() * 90)) | |||
if (i === 30) { | |||
console.log(this.num) | |||
} | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.area { | |||
background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent); | |||
.box { | |||
border: 1px dotted rgba(94, 195, 216, 0.6); | |||
display: flex; | |||
align-items: center; | |||
justify-content: left; | |||
} | |||
.box::after { | |||
width: 95%; | |||
height: 10px; | |||
display: block; | |||
margin: 0 auto; | |||
border-bottom: 1px solid red; | |||
} | |||
.box:first-child { | |||
border-radius: 4px 4px 0 0; | |||
} | |||
.box:last-child { | |||
border-radius: 0 0 4px 4px; | |||
} | |||
.bg { | |||
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent); | |||
background-size: 100% 100%; | |||
padding: 5px 0; | |||
padding-left: 15px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: left; | |||
} | |||
.box-name { | |||
text-align: center; | |||
border-radius: 4px; | |||
border: 1px dotted #5ec3d8; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.areaName { | |||
.title { | |||
font-weight: 600; | |||
height: 100%; | |||
cursor: pointer; | |||
color: #afb8c5; | |||
background-color: transparent; | |||
} | |||
.title-click { | |||
color: #fff; | |||
background-color: rgba(48, 112, 125, 0.6); | |||
} | |||
.subtitle { | |||
font-weight: 400; | |||
margin-left: 8px; | |||
border-radius: 4px; | |||
border: 1px dotted rgba(94, 195, 216, 0.6); | |||
} | |||
.locationFlex { | |||
margin-left: 25px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: space-between; | |||
width: 100%; | |||
margin-left: 10px; | |||
text-align: center; | |||
} | |||
.location { | |||
display: inline-block; | |||
background: #63cf74; | |||
width: 4.5%; | |||
width: 4.7%; | |||
border-radius: 4px; | |||
} | |||
.waring { | |||
background: #ff5d6b; | |||
} | |||
.box2{ | |||
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent); | |||
background-size: 100% 100%; | |||
border: 1px dotted rgba(94, 195, 216, 0.6); | |||
border-radius: 4px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: left; | |||
} | |||
.finished:nth-child(2){ | |||
margin-bottom: 8px; | |||
} | |||
.Auxiliary:nth-child(2){ | |||
margin-bottom: 8px; | |||
} | |||
.interlayer{ | |||
margin-left: 8px; | |||
} | |||
</style> |
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-11 15:14:51 | |||
* @LastEditTime: 2022-11-17 16:04:14 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -57,6 +57,7 @@ | |||
<base-table | |||
:limit="10" | |||
:beilv="beilv" | |||
:show-index="false" | |||
:table-config="inAndOutOfEachLine.tableProps" | |||
:table-data="inAndOutOfEachLine.list" | |||
/> | |||
@@ -86,14 +87,15 @@ | |||
</base-container> | |||
</el-col> | |||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> | |||
<!-- 成品入库列队 --> | |||
<!-- 成品出库列队 --> | |||
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'"> | |||
<div style="background:rgba(14, 32, 62, 1);border-radius:5px"> | |||
<base-table | |||
:limit="10" | |||
:beilv="beilv" | |||
:table-config="inAndOutOfEachLine.tableProps" | |||
:table-data="inAndOutOfEachLine.list" | |||
:show-index="false" | |||
:table-config="OutOfEachLine.tableProps" | |||
:table-data="OutOfEachLine.list" | |||
/> | |||
</div> | |||
</base-container> | |||
@@ -120,42 +122,50 @@ | |||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}"> | |||
<span v-html="titleLeftSVG" /> | |||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | |||
成品库存一览1 | |||
成品库存一览 | |||
</span> | |||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | |||
<new-pie | |||
:id="'pie-chart1'" | |||
:show-center-title="true" | |||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" | |||
:series-data="legendData1" | |||
:beilv="beilv" | |||
:height="226" | |||
/> | |||
</div> | |||
<div class="div-box" :style="{textAlign: 'center', position: 'relative', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}"> | |||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}"> | |||
<span v-html="titleLeftSVG" /> | |||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | |||
成品库存一览2 | |||
辅材库存一览 | |||
</span> | |||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | |||
<new-bar | |||
<new-pie | |||
:id="'pie-chart2'" | |||
:show-center-title="true" | |||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" | |||
:series-data="legendData2" | |||
:beilv="beilv" | |||
:height="226" | |||
/> | |||
<!-- <new-bar | |||
:name-list="clNameList" | |||
:data-list="clDataList" | |||
:height="226" | |||
:beilv="beilv" | |||
/> | |||
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> | |||
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> --> | |||
</div> | |||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}"> | |||
<span v-html="titleLeftSVG" /> | |||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | |||
成品库存一览3 | |||
备件库存一览 | |||
</span> | |||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | |||
<new-pie | |||
:id="'pie-chart3'" | |||
:show-center-title="true" | |||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" | |||
:series-data="legendData3" | |||
:beilv="beilv" | |||
:height="226" | |||
@@ -174,7 +184,7 @@ | |||
import baseContainer from './components/baseContainer' | |||
import baseTable from './components/baseTable' | |||
import newPie from './components/newPie' | |||
import newBar from './components/newBar' | |||
// import newBar from './components/newBar' | |||
import storageCockpitArea from './components/storageCockpitArea' | |||
// import LineChart1 from './components/LineChart' | |||
// import LineChart2 from './components/LineChart' | |||
@@ -185,58 +195,85 @@ import screenfull from 'screenfull' | |||
import axios from '@/utils/request' | |||
import moment from 'moment' | |||
const legendData3 = [ | |||
const legendData1 = [ | |||
{ | |||
name: 'A', | |||
name: '2.0-1128*1716', | |||
icon: 'circle', | |||
value: 196 | |||
value: 128 | |||
}, | |||
{ | |||
name: 'B', | |||
name: '2.0-1128*2251', | |||
icon: 'circle', | |||
value: 111 | |||
value: 225 | |||
}, | |||
{ | |||
name: 'C', | |||
name: '2.0-1128*2272', | |||
icon: 'circle', | |||
value: 89 | |||
value: 24 | |||
}, | |||
{ | |||
name: 'D', | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 77 | |||
}, | |||
{ | |||
name: 'E', | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 93 | |||
} | |||
] | |||
const legendData2 = [ | |||
{ | |||
name: '2.0-1128*1716', | |||
icon: 'circle', | |||
value: 128 | |||
}, | |||
{ | |||
name: '2.0-1128*2251', | |||
icon: 'circle', | |||
value: 104 | |||
}, | |||
{ | |||
name: '2.0-1128*2272', | |||
icon: 'circle', | |||
value: 24 | |||
}, | |||
{ | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 77 | |||
}, | |||
{ | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 93 | |||
} | |||
] | |||
const legendData1 = [ | |||
const legendData3 = [ | |||
{ | |||
name: 'A', | |||
name: '2.0-1128*1716', | |||
icon: 'circle', | |||
value: 134 | |||
value: 128 | |||
}, | |||
{ | |||
name: 'B', | |||
name: '2.0-1128*2251', | |||
icon: 'circle', | |||
value: 125 | |||
value: 96 | |||
}, | |||
{ | |||
name: 'C', | |||
name: '2.0-1128*2272', | |||
icon: 'circle', | |||
value: 107 | |||
value: 201 | |||
}, | |||
{ | |||
name: 'D', | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 61 | |||
value: 77 | |||
}, | |||
{ | |||
name: 'E', | |||
name: '3.2-1128*1716', | |||
icon: 'circle', | |||
value: 153 | |||
value: 66 | |||
} | |||
] | |||
const clDataList = [ | |||
@@ -303,8 +340,8 @@ export default { | |||
baseContainer, | |||
baseTable, | |||
storageCockpitArea, | |||
newPie, | |||
newBar | |||
newPie | |||
// newBar | |||
// LineChart1, | |||
// LineChart2, | |||
// LinearBarChart | |||
@@ -313,6 +350,7 @@ export default { | |||
data() { | |||
return { | |||
legendData1, | |||
legendData2, | |||
legendData3, | |||
clNameList, | |||
clDataList, | |||
@@ -327,25 +365,58 @@ export default { | |||
total: 0, | |||
list: [ | |||
{ | |||
test1: '392849829', | |||
test2: '叉车1', | |||
test3: '392849829', | |||
test4: '322*234*12', | |||
test5: '库位1' | |||
test1: 'RQ5055348178', | |||
test2: 'D4288603319', | |||
test3: 'CP5651696263', | |||
test4: '100*50mm', | |||
test5: 'A区' | |||
}, | |||
{ | |||
test1: 'RQ3722771932', | |||
test2: 'D3732827773', | |||
test3: 'CP4140258231', | |||
test4: '100*100mm', | |||
test5: 'K区' | |||
}, | |||
{ | |||
test1: 'RQ1342208728', | |||
test2: 'D6178738555', | |||
test3: 'CP5284407553', | |||
test4: '70*50mm', | |||
test5: 'G区' | |||
} | |||
] | |||
}, | |||
OutOfEachLine: { | |||
tableProps: [ | |||
{ prop: 'test1', label: '作业号', align: 'center' }, | |||
{ prop: 'test2', label: 'ERP订单', align: 'center' }, | |||
{ prop: 'test3', label: '成品编码', align: 'center' }, | |||
{ prop: 'test4', label: '成品规格', align: 'center' }, | |||
{ prop: 'test5', label: '库位', align: 'center' } | |||
], | |||
total: 0, | |||
list: [ | |||
{ | |||
test1: 'CQ3727367714', | |||
test2: 'TCP231', | |||
test3: 'CP3212128336', | |||
test4: '50*50mm', | |||
test5: 'H区' | |||
}, | |||
{ | |||
test1: '392849829', | |||
test2: '叉车2', | |||
test3: '392849829', | |||
test4: '322*234*12', | |||
test5: '库位2' | |||
test1: 'CQ7080508785', | |||
test2: 'TCP186', | |||
test3: 'CP2760242729', | |||
test4: '100*120mm', | |||
test5: 'B区' | |||
}, | |||
{ | |||
test1: '392849829', | |||
test2: '叉车3', | |||
test3: '392849829', | |||
test4: '322*234*12', | |||
test5: '库位3' | |||
test1: 'CQ8843212447', | |||
test2: 'TCP67', | |||
test3: 'CP1569191519', | |||
test4: '120*120mm', | |||
test5: 'A区' | |||
} | |||
] | |||
}, | |||
@@ -641,7 +712,7 @@ export default { | |||
} | |||
.div-box { | |||
background: transparent; | |||
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5); | |||
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2); | |||
display: inline-block; | |||
width: 100%; | |||
border-radius: 4px; | |||