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

Compare commits

base: mt-fe-group:c3127d406698f80b43650725fdbd63149ca09f53
Branches Tags
mt-fe-group:master
mt-fe-group:11-wms-zjl
mt-fe-group:zwq
..
compare: mt-fe-group:dfa7206e419001408fe39685ba3228b9e32f4dae
Branches Tags
mt-fe-group:master
mt-fe-group:11-wms-zjl
mt-fe-group:zwq

No commits in common. "c3127d406698f80b43650725fdbd63149ca09f53" and "dfa7206e419001408fe39685ba3228b9e32f4dae" have entirely different histories.
c3127d4066 ... dfa7206e41

4 changed files with 167 additions and 327 deletions
Show Stats Expand all files Collapse all files

18
src/App.vue
View File

@ -1,10 +1,3 @@
<!--
* @Author: zwq
* @Date: 2022-10-20 09:22:39
* @LastEditors: zwq
* @LastEditTime: 2022-11-24 10:37:57
* @Description:
-->
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view />
@ -14,18 +7,7 @@
<script> <script>
export default { export default {
name: 'App', name: 'App',
data() {
return {
beilv: 1
}
},
mounted() { mounted() {
this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
window.addEventListener('resize', () => {
this.beilv = document.body.offsetWidth / 1920
document.documentElement.style.setProperty('--beilv', this.beilv)
})
} }
} }
</script> </script>

41
src/views/OperationalOverview/components/newPie.vue
View File

@ -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-24 16:17:09 * @LastEditTime: 2022-11-17 16:35:33
* @Description: * @Description:
--> -->
<template> <template>
@ -171,6 +171,7 @@ export default {
}, },
// 默认的series配置 // 默认的series配置
series: { series: {
center: ['50%', '55%'],
radius: ['50%', '70%'], radius: ['50%', '70%'],
silent: true, silent: true,
avoidLabelOverlap: false, avoidLabelOverlap: false,
@ -195,18 +196,8 @@ export default {
} }
}, },
mounted() { mounted() {
window.addEventListener('resize', () => {
if (this.chart) {
this.chart.resize()
this.$nextTick(() => {
// 重新绘制文本大小
this.initChart()
})
}
})
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart()
this.chart.resize()
}) })
}, },
beforeDestroy() { beforeDestroy() {
@ -222,24 +213,23 @@ export default {
this.chart.setOption({ this.chart.setOption({
title: this.showCenterTitle title: this.showCenterTitle
? { ? {
text: `${this.seriesData.reduce((pre, cur) => pre + cur.value, 0)}\n{name|总共}`, text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
top: 'center', subtext: '总共',
left: '48%', top: '48%',
left: '49%',
textAlign: 'center', textAlign: 'center',
itemGap: 5,
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 26 * this.beilv, fontSize: 26 * this.beilv,
fontWeight: 400, fontWeight: 400,
lineHeight: 15 * this.beilv, lineHeight: 15
rich: { },
name: { subtextStyle: {
color: 'rgba(255, 255, 255, 0.7)', color: 'rgba(255, 255, 255, 0.7)',
fontWeight: 400, fontWeight: 400,
textAlign: 'center', fontSize: 14 * this.beilv,
fontSize: 14 * this.beilv, lineHeight: 20
lineHeight: 20 * this.beilv
}
}
} }
} }
: {}, : {},
@ -272,8 +262,7 @@ export default {
normal: { normal: {
label: { label: {
show: true, show: true,
fontSize: 15 * this.beilv, fontSize: 14 * this.beilv,
lineHeight: 18,
formatter: '{d}%\n{name|{b}}', formatter: '{d}%\n{name|{b}}',
rich: { rich: {
name: { name: {

67
src/views/OperationalOverview/components/storageCockpitArea.vue
View File

@ -2,18 +2,13 @@
* @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-24 15:47:14 * @LastEditTime: 2022-11-17 16:39:20
* @Description: * @Description:
--> -->
<template> <template>
<div class="container"> <div class="container">
<div> <div>
<div <div v-for="i in areaArr" :key="i.title" :style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }" class="box">
v-for="i in areaArr"
:key="i.title"
:style="{ height: 145 * beilv + 'px', width: 730 * beilv + 'px' }"
class="box"
>
<div <div
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }" :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px' }"
class="box-name title" class="box-name title"
@ -30,10 +25,10 @@
{{ i.subtitle }} {{ i.subtitle }}
</div> </div>
<div class="locationFlex"> <div class="locationFlex">
<div v-for="j in 4" :key="j + 'div1'" class="finished"> <div v-for="j in 4" :key="j+'div1'" class="finished">
<div <div
v-for="(l, index) in 19" v-for="(l,index) in 19"
:key="l + 'box1'" :key="l+'box1'"
:class="l > Math.round(Math.random() * 80) ? 'waring' : ''" :class="l > Math.round(Math.random() * 80) ? 'waring' : ''"
:style="{ :style="{
marginRight: 2 * beilv + 'px', marginRight: 2 * beilv + 'px',
@ -45,7 +40,7 @@
}" }"
class="location" class="location"
> >
{{ j + 4 * index }} {{ j + 4*index }}
</div> </div>
</div> </div>
</div> </div>
@ -55,19 +50,22 @@
<!-- 辅材库 --> <!-- 辅材库 -->
<div <div
v-for="i in areaArr1" v-for="i in areaArr1"
:key="i + 'div2'" :key="i+'div2'"
:style="{ width: 730 * beilv + 'px', padding: 9 * beilv + 'px' + ' 0' }" :style="{ height: 135 * beilv + 'px', width: 730 * beilv + 'px',marginTop: 13 * beilv + 'px', }"
class="box2" class="box2"
> >
<div :style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px', color: '#fff' }" class="box-name title"> <div
:style="{ fontSize: 22 * beilv + 'px', width: 40 * beilv + 'px',color: '#fff' }"
class="box-name title"
>
{{ i }} {{ i }}
</div> </div>
<div v-if="i === '辅材库'" class="locationFlex" style="margin-left:0"> <div v-if="i==='辅材库'" class="locationFlex" style="margin-left:0">
<div v-for="j in 4" :key="j + 'div3'" class="Auxiliary"> <div v-for="j in 4" :key="j+'div3'" class="Auxiliary">
<div <div
v-for="(l, index) in 19" v-for="(l,index) in 19"
:key="l + 'box5'" :key="l+'box5'"
:class="[num.indexOf(j + 4 * index) > 0 ? 'waring' : '', l === 10 ? 'interlayer' : '']" :class="[num.indexOf(j + 4*index)>0 ? 'waring' : '',l===10? 'interlayer' : '']"
:style="{ :style="{
marginRight: 2 * beilv + 'px', marginRight: 2 * beilv + 'px',
marginTop: 2 * beilv + 'px', marginTop: 2 * beilv + 'px',
@ -77,16 +75,16 @@
}" }"
class="location" class="location"
> >
{{ j + 4 * index }} {{ j + 4*index }}
</div> </div>
</div> </div>
</div> </div>
<div v-else class="locationFlex" style="margin-left:0"> <div v-else class="locationFlex" style="margin-left:0">
<div v-for="j in [3, 2, 1]" :key="j + 'div4'"> <div v-for="j in [3,2,1]" :key="j+'div4'">
<div <div
v-for="l in 20" v-for="l in 20"
:key="l + 'box9'" :key="l+'box9'"
:class="num.indexOf(l + 4 * j) > 0 ? 'waring' : ''" :class="num.indexOf(l + 4*j)>0 ? 'waring' : ''"
:style="{ :style="{
marginRight: 2 * beilv + 'px', marginRight: 2 * beilv + 'px',
marginTop: 2 * beilv + 'px', marginTop: 2 * beilv + 'px',
@ -154,23 +152,12 @@ export default {
} }
} }
}, },
methods: {} methods: {
}
} }
</script> </script>
<style scoped> <style scoped>
.container {
display: flex;
flex-flow: row wrap;
align-content: space-between;
margin: calc(16px * var(--beilv));
gap: calc(16px * var(--beilv));
position: absolute;
height: 95%;
top: 0;
left: 0;
overflow:hidden;
}
.box { .box {
border: 1px dotted rgba(94, 195, 216, 0.6); border: 1px dotted rgba(94, 195, 216, 0.6);
display: flex; display: flex;
@ -234,7 +221,7 @@ export default {
.waring { .waring {
background: #ff5d6b; background: #ff5d6b;
} }
.box2 { .box2{
background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent); background-image: linear-gradient(to right, rgba(48, 112, 125, 0.6), transparent);
background-size: 100% 100%; background-size: 100% 100%;
border: 1px dotted rgba(94, 195, 216, 0.6); border: 1px dotted rgba(94, 195, 216, 0.6);
@ -243,13 +230,13 @@ export default {
align-items: center; align-items: center;
justify-content: left; justify-content: left;
} }
.finished:nth-child(2) { .finished:nth-child(2){
margin-bottom: 8px; margin-bottom: 8px;
} }
.Auxiliary:nth-child(2) { .Auxiliary:nth-child(2){
margin-bottom: 8px; margin-bottom: 8px;
} }
.interlayer { .interlayer{
margin-left: 8px; margin-left: 8px;
} }
</style> </style>

368
src/views/OperationalOverview/storageCockpit.vue
View File

@ -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-24 16:01:46 * @LastEditTime: 2022-11-17 16:04:14
* @Description: * @Description:
--> -->
<template> <template>
@ -20,7 +20,7 @@
<el-button <el-button
type="text" type="text"
class="title-button" class="title-button"
:style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px', fontSize: 35 * beilv + 'px' }" :style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px',fontSize: 35 * beilv + 'px' }"
@click="changeFullScreen" @click="changeFullScreen"
> >
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
@ -29,150 +29,77 @@
</el-row> </el-row>
<el-row class="container-main"> <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="9 * beilv">
<el-col :span="8"> <el-col :span="8">
<el-row type="flex" class="h-full flex-col"> <el-row type="flex" class="h-full flex-col">
<div class="div-box-left"> <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="'入库管理'">
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'"> <div :style="{ fontSize: 13 * beilv + 'px' }">
<div :style="{ fontSize: 13 * beilv + 'px' }"> <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
<el-row :style="{ marginBottom: 15 * beilv + 'px' }"> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
<el-col :span="12"> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP5651696250</span></div></el-col>
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> </el-row>
<span class="leftText">时间:</span> <el-row :style="{ marginBottom: 15 * beilv + 'px'}">
<span class="rightText">2022.12.12 13:12:45</span> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">入库作业号:</span><span class="rightText">RQ5055348160</span></div></el-col>
</div> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1033*2089</span></div></el-col>
</el-col> </el-row>
<el-col :span="12"> <el-row>
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
<span class="leftText">成品编码:</span> <el-col :span="12"><div class="inTest" :style="{ padding: 9 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库D-D区-14</span></div></el-col>
<span class="rightText">CP5651696250</span> </el-row>
</div> </div>
</el-col> </base-container>
</el-row> </el-col>
<el-row :style="{ marginBottom: 15 * beilv + 'px' }"> <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<el-col :span="12"> <!-- 成品入库列队 -->
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> <base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
<span class="leftText">入库作业号:</span> <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
<span class="rightText">RQ5055348160</span> <base-table
</div> :limit="10"
</el-col> :beilv="beilv"
<el-col :span="12"> :show-index="false"
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> :table-config="inAndOutOfEachLine.tableProps"
<span class="leftText">成品规格:</span> :table-data="inAndOutOfEachLine.list"
<span class="rightText">3.2-1033*2089</span> />
</div> </div>
</el-col> </base-container>
</el-row> </el-col>
<el-row> <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<el-col :span="12"> <base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> <div :style="{ fontSize: 13 * beilv + 'px' }">
<span class="leftText">执行叉车:</span> <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
<span class="rightText">叉车</span> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">时间:</span><span class="rightText">2022.12.12 13:12:45</span></div></el-col>
</div> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">ERP订单:</span><span class="rightText">TCP203</span></div></el-col>
</el-col> </el-row>
<el-col :span="12"> <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
<div class="inTest" :style="{ padding: 9 * beilv + 'px' }"> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品编码:</span><span class="rightText">CP3212128221</span></div></el-col>
<span class="leftText">库位:</span> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">出库作业号:</span><span class="rightText">CQ3727367699</span></div></el-col>
<span class="rightText">成品库D-D区-14</span> </el-row>
</div> <el-row :style="{ marginBottom: 10 * beilv + 'px'}">
</el-col> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">成品规格:</span><span class="rightText">3.2-1128*1716</span></div></el-col>
</el-row> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">执行叉车:</span><span class="rightText">叉车</span></div></el-col>
</div> </el-row>
</base-container> <el-row>
</el-col> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位:</span><span class="rightText">成品库C-C区-1</span></div></el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> <el-col :span="12"><div class="outTest" :style="{ padding: 7 * beilv + 'px'}"><span class="leftText">库位前置区:</span><span class="rightText">A区34货位3层</span></div></el-col>
<!-- 成品入库列队 --> </el-row>
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'"> </div>
<div style="background:rgba(14, 32, 62, 1);border-radius:5px;opacity: 0.8;"> </base-container>
<base-table </el-col>
:limit="10" <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
:beilv="beilv" <!-- 成品出库列队 -->
:show-index="false" <base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
:table-config="inAndOutOfEachLine.tableProps" <div style="background:rgba(14, 32, 62, 1);border-radius:5px">
:table-data="inAndOutOfEachLine.list" <base-table
/> :limit="10"
</div> :beilv="beilv"
</base-container> :show-index="false"
</el-col> :table-config="OutOfEachLine.tableProps"
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24"> :table-data="OutOfEachLine.list"
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'"> />
<div :style="{ fontSize: 13 * beilv + 'px' }"> </div>
<el-row :style="{ marginBottom: 10 * beilv + 'px' }"> </base-container>
<el-col :span="12"> </el-col>
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">时间:</span>
<span class="rightText">2022.12.12 13:12:45</span>
</div>
</el-col>
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">ERP订单:</span>
<span class="rightText">TCP203</span>
</div>
</el-col>
</el-row>
<el-row :style="{ marginBottom: 10 * beilv + 'px' }">
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">成品编码:</span>
<span class="rightText">CP3212128221</span>
</div>
</el-col>
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">出库作业号:</span>
<span class="rightText">CQ3727367699</span>
</div>
</el-col>
</el-row>
<el-row :style="{ marginBottom: 10 * beilv + 'px' }">
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">成品规格:</span>
<span class="rightText">3.2-1128*1716</span>
</div>
</el-col>
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">执行叉车:</span>
<span class="rightText">叉车</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">库位:</span>
<span class="rightText">成品库C-C区-1</span>
</div>
</el-col>
<el-col :span="12">
<div class="outTest" :style="{ padding: 7 * beilv + 'px' }">
<span class="leftText">库位前置区:</span>
<span class="rightText">A区34货位3层</span>
</div>
</el-col>
</el-row>
</div>
</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;opacity: 0.8;">
<base-table
:limit="10"
:beilv="beilv"
:show-index="false"
:table-config="OutOfEachLine.tableProps"
:table-data="OutOfEachLine.list"
/>
</div>
</base-container>
</el-col>
</div>
</el-row> </el-row>
</el-col> </el-col>
@ -180,7 +107,7 @@
<!-- 中间栏 --> <!-- 中间栏 -->
<el-row type="flex" class="h-full flex-col"> <el-row type="flex" class="h-full flex-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="958"> <base-container :beilv="beilv">
<storage-cockpit-area :beilv="beilv" /> <storage-cockpit-area :beilv="beilv" />
</base-container> </base-container>
</el-col> </el-col>
@ -191,77 +118,58 @@
<!-- 右边栏 设备工单管理 --> <!-- 右边栏 设备工单管理 -->
<el-row type="flex" class="h-full flex-col"> <el-row type="flex" class="h-full flex-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" :title="'库存总览'" :title-icon="'编组(1)'"> <base-container :beilv="beilv" :title="'设备工单管理'" :title-icon="'编组(1)'">
<div class="div-box-main"> <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px',marginBottom: 12 * beilv + 'px'}">
<div <span v-html="titleLeftSVG" />
class="div-box" <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
:style="{ 成品库存一览
textAlign: 'center', </span>
padding: 8 * beilv + 'px', <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
paddingTop: 15 * beilv + 'px', <new-pie
}" :id="'pie-chart1'"
> :show-center-title="true"
<span v-html="titleLeftSVG" /> :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> :series-data="legendData1"
成品库存一览 :beilv="beilv"
</span> :height="226"
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> />
<new-pie </div>
:id="'pie-chart1'" <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px', marginBottom: 12 * beilv + 'px'}">
:show-center-title="true" <span v-html="titleLeftSVG" />
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
:series-data="legendData1" 辅材库存一览
:beilv="beilv" </span>
:height="226" <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
/> <new-pie
</div> :id="'pie-chart2'"
<div :show-center-title="true"
class="div-box" :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
:style="{ :series-data="legendData2"
textAlign: 'center', :beilv="beilv"
padding: 8 * beilv + 'px', :height="226"
paddingTop: 15 * beilv + 'px', />
}" <!-- <new-bar
>
<span v-html="titleLeftSVG" />
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
辅材库存一览
</span>
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
<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 <div class="div-box" :style="{textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px'}">
class="div-box" <span v-html="titleLeftSVG" />
:style="{ textAlign: 'center', padding: 8 * beilv + 'px', paddingTop: 15 * beilv + 'px' }" <span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }">
> 备件库存一览
<span v-html="titleLeftSVG" /> </span>
<span style="color: #01CFCC; line-height: 18px;" :style="{ fontSize: 15 * beilv + 'px' }"> <div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
备件库存一览 <new-pie
</span> :id="'pie-chart3'"
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" /> :show-center-title="true"
<new-pie :legend-config="{ left: '0%', top: '30%', itemGap: 5 }"
:id="'pie-chart3'" :series-data="legendData3"
:show-center-title="true" :beilv="beilv"
:legend-config="{ left: '0%', top: '30%', itemGap: 5 }" :height="226"
:series-data="legendData3" />
:beilv="beilv"
:height="226"
/>
</div>
</div> </div>
</base-container> </base-container>
</el-col> </el-col>
@ -783,7 +691,7 @@ export default {
} }
} }
.container-main { .container-main {
padding: 16px 8px; padding: 16px;
} }
} }
.inTest { .inTest {
@ -794,44 +702,18 @@ export default {
background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat; background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.leftText { .leftText{
display: inline-block; display: inline-block;
width: 40%; width: 40%;
text-align: right; text-align: right;
} }
.rightText { .rightText{
color: rgba(255, 255, 255, 0.6); color:rgba(255, 255, 255, 0.6)
}
.div-box-left{
display: flex;
flex-flow: row wrap;
align-content: space-between;
position: absolute;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
}
.div-box-main {
display: flex;
flex-flow: row wrap;
align-content: space-between;
margin: calc(16px * var(--beilv));
gap: calc(16px * var(--beilv));
padding-top: 4em;
position: absolute;
height: 95%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow:hidden;
} }
.div-box { .div-box {
background: transparent; background: transparent;
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.2);
display: inline-block;
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
} }
@ -840,7 +722,7 @@ export default {
opacity: 0.5; opacity: 0.5;
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 55px; left:55px;
transform: skewX(-30deg); transform: skewX(-30deg);
background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%); background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%);
} }
@ -915,7 +797,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.h-full { .h-full {
height: calc(100vh - 110px * var(--beilv)); height: calc(100vh - 150px);
} }
.flex-col { .flex-col {