Reviewed-on: http://git.picaiba.com/mt-fe-group/11-wms/pulls/10pull/11/head
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Date: 2020-12-14 09:07:03 | |||
* @LastEditors: gtz | |||
* @LastEditTime: 2022-06-14 11:12:39 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-08 15:30:44 | |||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue | |||
* @Description: | |||
--> | |||
@@ -9,7 +9,7 @@ | |||
<div class="visual-base-table-container"> | |||
<el-table | |||
v-loading="isLoading" | |||
:header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}" | |||
:header-cell-style="{background:'rgba(32, 55, 96, 0.5)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}" | |||
:row-style="setRowStyle" | |||
:data="renderData" | |||
border | |||
@@ -111,7 +111,7 @@ export default { | |||
setRowStyle(v) { | |||
if (v.rowIndex % 2 === 0) { | |||
return { | |||
background: 'rgba(76,97,123,0.2)', | |||
background: 'rgba(14, 32, 62, 0.5)', | |||
color: 'rgba(255,255,255,0.5)', | |||
height: 26 * this.beilv + 'px', | |||
lineHeight: 26 * this.beilv + 'px', | |||
@@ -120,7 +120,7 @@ export default { | |||
} | |||
} else { | |||
return { | |||
background: 'rgba(79,114,136,0.29)', | |||
background: 'rgba(32, 55, 96, 0.5)', | |||
color: 'rgba(255,255,255,0.5)', | |||
height: 26 * this.beilv + 'px', | |||
lineHeight: 26 * this.beilv + 'px', | |||
@@ -175,7 +175,6 @@ export default { | |||
] | |||
} | |||
this.$nextTick(() => { | |||
console.log(this.series) | |||
this.initChart() | |||
}) | |||
}, | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2022-01-21 14:43:06 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-02 16:52:34 | |||
* @LastEditTime: 2022-11-08 15:09:11 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -112,14 +112,16 @@ export default { | |||
rich: { | |||
a: { | |||
align: 'center', | |||
fontSize: 10, | |||
fontSize: 13, | |||
color: 'rgba(255, 255, 255, 0.7)', | |||
padding: [0, 4], | |||
lineHeight: 16 | |||
}, | |||
b: { | |||
// verticalAlign: 'top', | |||
align: 'center', | |||
fontSize: 10, | |||
padding: [0, 4], | |||
fontSize: 13, | |||
color: 'rgba(255, 255, 255)' | |||
}, | |||
c: { | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2020-12-29 16:37:56 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-03 08:58:07 | |||
* @LastEditTime: 2022-11-08 16:06:39 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -10,20 +10,31 @@ | |||
<div | |||
v-for="i in areaArr" | |||
:key="i" | |||
:style="{ height: 135 * beilv + 'px', marginTop: 11 * beilv + 'px' }" | |||
:style="{ height: 135 * beilv + 'px',width: 730 * beilv + 'px', marginTop: 11 * beilv + 'px' }" | |||
class="area" | |||
> | |||
<el-row> | |||
<el-col :span="1"><div class="areaName">{{ i }}</div></el-col> | |||
<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',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}" | |||
: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> | |||
> | |||
{{ l }} | |||
</div> | |||
</div> | |||
</el-col> | |||
</el-row> | |||
@@ -53,33 +64,29 @@ export default { | |||
<style scoped> | |||
.area { | |||
background-image: linear-gradient(to right, rgba(59, 76, 118,0.6), transparent); | |||
background-image: linear-gradient(to right, rgba(59, 76, 118, 0.6), transparent); | |||
background-size: 100% 100%; | |||
padding: 5px 0; | |||
padding-left: 15px; | |||
text-align: center; | |||
border-radius: 4px; | |||
border: 1px dotted #5EC3D8; | |||
border: 1px dotted #5ec3d8; | |||
} | |||
.areaName { | |||
margin-top: 100%; | |||
font-weight: 600; | |||
font-size: 24px; | |||
line-height: 30px; | |||
} | |||
.locationFlex{ | |||
.locationFlex { | |||
margin-left: 25px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-content: space-between; | |||
} | |||
.location{ | |||
.location { | |||
background: #63cf74; | |||
width: 4.5%; | |||
border-radius: 4px; | |||
font-size: 12px; | |||
line-height: 25px; | |||
} | |||
.waring{ | |||
background: #FF5D6B; | |||
.waring { | |||
background: #ff5d6b; | |||
} | |||
</style> |
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zwq | |||
* @LastEditTime: 2022-11-03 16:03:03 | |||
* @LastEditTime: 2022-11-08 15:50:35 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -20,7 +20,7 @@ | |||
<el-button | |||
type="text" | |||
class="title-button" | |||
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }" | |||
:style="{ right: 9 * beilv + 'px', top: 37 * beilv + 'px',fontSize: 35 * beilv + 'px' }" | |||
@click="changeFullScreen" | |||
> | |||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | |||
@@ -126,7 +126,7 @@ | |||
<new-pie | |||
:id="'pie-chart1'" | |||
:show-center-title="true" | |||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||
:legend-config="{ left: '2%', top: '30%', itemGap: 10 }" | |||
:series-data="legendData1" | |||
:beilv="beilv" | |||
:height="226" | |||
@@ -144,7 +144,7 @@ | |||
:height="226" | |||
:beilv="beilv" | |||
/> | |||
<div class="barDiv" :style="{width: 345* 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" /> | |||
@@ -155,7 +155,7 @@ | |||
<new-pie | |||
:id="'pie-chart3'" | |||
:show-center-title="true" | |||
:legend-config="{ left: '1%', top: '30%', itemGap: 5 }" | |||
:legend-config="{ left: '2%', top: '30%', itemGap: 10 }" | |||
:series-data="legendData3" | |||
:beilv="beilv" | |||
:height="226" | |||
@@ -616,7 +616,6 @@ export default { | |||
text-align: center; | |||
.title-button { | |||
color: #00fff0; | |||
font-size: 32px; | |||
position: absolute; | |||
} | |||
} | |||
@@ -634,7 +633,7 @@ export default { | |||
} | |||
.leftText{ | |||
display: inline-block; | |||
width: 100px; | |||
width: 40%; | |||
text-align: right; | |||
} | |||
.rightText{ | |||
@@ -648,14 +647,13 @@ export default { | |||
border-radius: 4px; | |||
} | |||
.barDiv { | |||
height: 46px; | |||
height: 40px; | |||
opacity: 0.5; | |||
position: absolute; | |||
bottom: 40px; | |||
left:55px; | |||
transform: skewX(-30deg); | |||
background: linear-gradient(180deg, rgba(59, 76, 118, 0) 0%, #49fbd6 100%); | |||
border: 1px solid #3c7080; | |||
} | |||
.now-team-title { | |||
margin: 0; | |||