@@ -2,7 +2,7 @@ | |||||
* @Author: zwq | * @Author: zwq | ||||
* @Date: 2022-01-21 14:43:06 | * @Date: 2022-01-21 14:43:06 | ||||
* @LastEditors: zwq | * @LastEditors: zwq | ||||
* @LastEditTime: 2022-11-11 15:27:23 | |||||
* @LastEditTime: 2022-11-17 16:35:33 | |||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<template> | <template> | ||||
@@ -93,6 +93,7 @@ export default { | |||||
// 默认的legend配置 | // 默认的legend配置 | ||||
legend: { | legend: { | ||||
orient: 'vertical', | orient: 'vertical', | ||||
show: false, | |||||
bottom: 0, | bottom: 0, | ||||
itemHeight: 10, | itemHeight: 10, | ||||
itemWidth: 10, | itemWidth: 10, | ||||
@@ -112,16 +113,16 @@ export default { | |||||
rich: { | rich: { | ||||
a: { | a: { | ||||
align: 'center', | align: 'center', | ||||
fontSize: 13, | |||||
fontSize: 12, | |||||
fontWeight: 400, | fontWeight: 400, | ||||
color: 'rgba(255, 255, 255, 0.7)', | color: 'rgba(255, 255, 255, 0.7)', | ||||
padding: [0, 4], | |||||
padding: [0, 1], | |||||
lineHeight: 16 | lineHeight: 16 | ||||
}, | }, | ||||
b: { | b: { | ||||
// verticalAlign: 'top', | // verticalAlign: 'top', | ||||
align: 'center', | align: 'center', | ||||
fontSize: 13, | |||||
fontSize: 12, | |||||
fontWeight: 400, | fontWeight: 400, | ||||
color: 'rgba(255, 255, 255)' | color: 'rgba(255, 255, 255)' | ||||
}, | }, | ||||
@@ -170,7 +171,7 @@ export default { | |||||
}, | }, | ||||
// 默认的series配置 | // 默认的series配置 | ||||
series: { | series: { | ||||
center: ['60%', '55%'], | |||||
center: ['50%', '55%'], | |||||
radius: ['50%', '70%'], | radius: ['50%', '70%'], | ||||
silent: true, | silent: true, | ||||
avoidLabelOverlap: false, | avoidLabelOverlap: false, | ||||
@@ -215,19 +216,19 @@ export default { | |||||
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0), | text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0), | ||||
subtext: '总共', | subtext: '总共', | ||||
top: '48%', | top: '48%', | ||||
left: '59%', | |||||
left: '49%', | |||||
textAlign: 'center', | textAlign: 'center', | ||||
itemGap: 5, | itemGap: 5, | ||||
textStyle: { | textStyle: { | ||||
color: '#fff', | color: '#fff', | ||||
fontSize: 26, | |||||
fontSize: 26 * this.beilv, | |||||
fontWeight: 400, | fontWeight: 400, | ||||
lineHeight: 15 | lineHeight: 15 | ||||
}, | }, | ||||
subtextStyle: { | subtextStyle: { | ||||
color: 'rgba(255, 255, 255, 0.7)', | color: 'rgba(255, 255, 255, 0.7)', | ||||
fontWeight: 400, | fontWeight: 400, | ||||
fontSize: 14, | |||||
fontSize: 14 * this.beilv, | |||||
lineHeight: 20 | lineHeight: 20 | ||||
} | } | ||||
} | } | ||||
@@ -259,6 +260,17 @@ export default { | |||||
...this.seriesConfig, | ...this.seriesConfig, | ||||
itemStyle: { | itemStyle: { | ||||
normal: { | normal: { | ||||
label: { | |||||
show: true, | |||||
fontSize: 14 * this.beilv, | |||||
formatter: '{d}%\n{name|{b}}', | |||||
rich: { | |||||
name: { | |||||
color: 1, | |||||
fontSize: 10 * this.beilv | |||||
} | |||||
} | |||||
}, | |||||
color: (list) => { | color: (list) => { | ||||
var colorList = [ | 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) => { | data: this.seriesData.map((item, index) => { | ||||
item.label = { | item.label = { | ||||
@@ -2,42 +2,107 @@ | |||||
* @Author: zwq | * @Author: zwq | ||||
* @Date: 2020-12-29 16:37:56 | * @Date: 2020-12-29 16:37:56 | ||||
* @LastEditors: zwq | * @LastEditors: zwq | ||||
* @LastEditTime: 2022-11-08 16:06:39 | |||||
* @LastEditTime: 2022-11-17 16:39:20 | |||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<template> | <template> | ||||
<div class="container"> | <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 | <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> | ||||
<div>{{ l }}</div> | |||||
</div> | </div> | ||||
</el-col> | |||||
</el-row> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -55,38 +120,123 @@ export default { | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | 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> | </script> | ||||
<style scoped> | <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%; | background-size: 100% 100%; | ||||
padding: 5px 0; | |||||
padding-left: 15px; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: left; | |||||
} | |||||
.box-name { | |||||
text-align: center; | text-align: center; | ||||
border-radius: 4px; | |||||
border: 1px dotted #5ec3d8; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | } | ||||
.areaName { | |||||
.title { | |||||
font-weight: 600; | 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 { | .locationFlex { | ||||
margin-left: 25px; | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
align-content: space-between; | |||||
width: 100%; | |||||
margin-left: 10px; | |||||
text-align: center; | |||||
} | } | ||||
.location { | .location { | ||||
display: inline-block; | |||||
background: #63cf74; | background: #63cf74; | ||||
width: 4.5%; | |||||
width: 4.7%; | |||||
border-radius: 4px; | border-radius: 4px; | ||||
} | } | ||||
.waring { | .waring { | ||||
background: #ff5d6b; | 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> | </style> |
@@ -2,7 +2,7 @@ | |||||
* @Author: zwq | * @Author: zwq | ||||
* @Date: 2021-07-19 15:18:30 | * @Date: 2021-07-19 15:18:30 | ||||
* @LastEditors: zwq | * @LastEditors: zwq | ||||
* @LastEditTime: 2022-11-11 15:14:51 | |||||
* @LastEditTime: 2022-11-17 16:04:14 | |||||
* @Description: | * @Description: | ||||
--> | --> | ||||
<template> | <template> | ||||
@@ -57,6 +57,7 @@ | |||||
<base-table | <base-table | ||||
:limit="10" | :limit="10" | ||||
:beilv="beilv" | :beilv="beilv" | ||||
:show-index="false" | |||||
:table-config="inAndOutOfEachLine.tableProps" | :table-config="inAndOutOfEachLine.tableProps" | ||||
:table-data="inAndOutOfEachLine.list" | :table-data="inAndOutOfEachLine.list" | ||||
/> | /> | ||||
@@ -86,14 +87,15 @@ | |||||
</base-container> | </base-container> | ||||
</el-col> | </el-col> | ||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> | <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> | ||||
<!-- 成品入库列队 --> | |||||
<!-- 成品出库列队 --> | |||||
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'"> | <base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'"> | ||||
<div style="background:rgba(14, 32, 62, 1);border-radius:5px"> | <div style="background:rgba(14, 32, 62, 1);border-radius:5px"> | ||||
<base-table | <base-table | ||||
:limit="10" | :limit="10" | ||||
:beilv="beilv" | :beilv="beilv" | ||||
:table-config="inAndOutOfEachLine.tableProps" | |||||
:table-data="inAndOutOfEachLine.list" | |||||
:show-index="false" | |||||
:table-config="OutOfEachLine.tableProps" | |||||
:table-data="OutOfEachLine.list" | |||||
/> | /> | ||||
</div> | </div> | ||||
</base-container> | </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'}"> | <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}"> | ||||
<span v-html="titleLeftSVG" /> | <span v-html="titleLeftSVG" /> | ||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | ||||
成品库存一览1 | |||||
成品库存一览 | |||||
</span> | </span> | ||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | ||||
<new-pie | <new-pie | ||||
:id="'pie-chart1'" | :id="'pie-chart1'" | ||||
:show-center-title="true" | :show-center-title="true" | ||||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" | |||||
:series-data="legendData1" | :series-data="legendData1" | ||||
:beilv="beilv" | :beilv="beilv" | ||||
:height="226" | :height="226" | ||||
/> | /> | ||||
</div> | </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 v-html="titleLeftSVG" /> | ||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | ||||
成品库存一览2 | |||||
辅材库存一览 | |||||
</span> | </span> | ||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | <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" | :name-list="clNameList" | ||||
:data-list="clDataList" | :data-list="clDataList" | ||||
:height="226" | :height="226" | ||||
:beilv="beilv" | :beilv="beilv" | ||||
/> | /> | ||||
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> | |||||
<div class="barDiv" :style="{width: 355* beilv + 'px'}" /> --> | |||||
</div> | </div> | ||||
<div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}"> | <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}"> | ||||
<span v-html="titleLeftSVG" /> | <span v-html="titleLeftSVG" /> | ||||
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> | ||||
成品库存一览3 | |||||
备件库存一览 | |||||
</span> | </span> | ||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> | ||||
<new-pie | <new-pie | ||||
:id="'pie-chart3'" | :id="'pie-chart3'" | ||||
:show-center-title="true" | :show-center-title="true" | ||||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||||
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" | |||||
:series-data="legendData3" | :series-data="legendData3" | ||||
:beilv="beilv" | :beilv="beilv" | ||||
:height="226" | :height="226" | ||||
@@ -174,7 +184,7 @@ | |||||
import baseContainer from './components/baseContainer' | import baseContainer from './components/baseContainer' | ||||
import baseTable from './components/baseTable' | import baseTable from './components/baseTable' | ||||
import newPie from './components/newPie' | import newPie from './components/newPie' | ||||
import newBar from './components/newBar' | |||||
// import newBar from './components/newBar' | |||||
import storageCockpitArea from './components/storageCockpitArea' | import storageCockpitArea from './components/storageCockpitArea' | ||||
// import LineChart1 from './components/LineChart' | // import LineChart1 from './components/LineChart' | ||||
// import LineChart2 from './components/LineChart' | // import LineChart2 from './components/LineChart' | ||||
@@ -185,58 +195,85 @@ import screenfull from 'screenfull' | |||||
import axios from '@/utils/request' | import axios from '@/utils/request' | ||||
import moment from 'moment' | import moment from 'moment' | ||||
const legendData3 = [ | |||||
const legendData1 = [ | |||||
{ | { | ||||
name: 'A', | |||||
name: '2.0-1128*1716', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 196 | |||||
value: 128 | |||||
}, | }, | ||||
{ | { | ||||
name: 'B', | |||||
name: '2.0-1128*2251', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 111 | |||||
value: 225 | |||||
}, | }, | ||||
{ | { | ||||
name: 'C', | |||||
name: '2.0-1128*2272', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 89 | |||||
value: 24 | |||||
}, | }, | ||||
{ | { | ||||
name: 'D', | |||||
name: '3.2-1128*1716', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 77 | 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', | icon: 'circle', | ||||
value: 77 | value: 77 | ||||
}, | |||||
{ | |||||
name: '3.2-1128*1716', | |||||
icon: 'circle', | |||||
value: 93 | |||||
} | } | ||||
] | ] | ||||
const legendData1 = [ | |||||
const legendData3 = [ | |||||
{ | { | ||||
name: 'A', | |||||
name: '2.0-1128*1716', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 134 | |||||
value: 128 | |||||
}, | }, | ||||
{ | { | ||||
name: 'B', | |||||
name: '2.0-1128*2251', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 125 | |||||
value: 96 | |||||
}, | }, | ||||
{ | { | ||||
name: 'C', | |||||
name: '2.0-1128*2272', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 107 | |||||
value: 201 | |||||
}, | }, | ||||
{ | { | ||||
name: 'D', | |||||
name: '3.2-1128*1716', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 61 | |||||
value: 77 | |||||
}, | }, | ||||
{ | { | ||||
name: 'E', | |||||
name: '3.2-1128*1716', | |||||
icon: 'circle', | icon: 'circle', | ||||
value: 153 | |||||
value: 66 | |||||
} | } | ||||
] | ] | ||||
const clDataList = [ | const clDataList = [ | ||||
@@ -303,8 +340,8 @@ export default { | |||||
baseContainer, | baseContainer, | ||||
baseTable, | baseTable, | ||||
storageCockpitArea, | storageCockpitArea, | ||||
newPie, | |||||
newBar | |||||
newPie | |||||
// newBar | |||||
// LineChart1, | // LineChart1, | ||||
// LineChart2, | // LineChart2, | ||||
// LinearBarChart | // LinearBarChart | ||||
@@ -313,6 +350,7 @@ export default { | |||||
data() { | data() { | ||||
return { | return { | ||||
legendData1, | legendData1, | ||||
legendData2, | |||||
legendData3, | legendData3, | ||||
clNameList, | clNameList, | ||||
clDataList, | clDataList, | ||||
@@ -327,25 +365,58 @@ export default { | |||||
total: 0, | total: 0, | ||||
list: [ | 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 { | .div-box { | ||||
background: transparent; | 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; | display: inline-block; | ||||
width: 100%; | width: 100%; | ||||
border-radius: 4px; | border-radius: 4px; | ||||