bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏样式数据调整

This commit is contained in:
bb_pan 2025-03-13 17:11:39 +08:00
parent ac889372c1
commit e78c1ed113
3 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/big-screen/model-components/center-model.vue
View File

@ -6,7 +6,7 @@
<img src="@/assets/img/screen/装备上架.png" alt="">
</div>
<div class="item-info">
<div class="info-box info-box_1" style="transform: translateY(-30px)">
<div class="info-box info-box_1" style="transform: translateY(-99px)">
<div class="yyyy">入驻装备数</div>
<div>
<span class="xxxx">
@ -16,7 +16,7 @@
</div>
<div></div>
</div>
<div class="info-box info-box_1">
<div class="info-box info-box_1" style="transform: translateY(-40px)">
<div class="yyyy">上架装备数</div>
<div>
<span class="xxxx">
@ -26,7 +26,7 @@
</div>
<div></div>
</div>
<div class="info-box info-box_1">
<div class="info-box info-box_1" style="transform: translateY(-40px)">
<div class="yyyy">装备总类型数</div>
<div>
<span class="xxxx">
@ -36,7 +36,7 @@
</div>
<div></div>
</div>
<div class="info-box info-box_1" style="transform: translateY(-30px)">
<div class="info-box info-box_1" style="transform: translateY(-99px)">
<div class="yyyy">保养告警</div>
<div>
<span class="xxxx">
@ -50,11 +50,11 @@
</div>
<div class="item">
<!-- <h2>装备租赁</h2> -->
<div class="item-title">
<div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备租赁.png" alt="">
</div>
<div class="item-info">
<div class="info-box info-box_2" style="transform: translateY(-30px)">
<div class="info-box info-box_2" style="transform: translateY(-90px)">
<div>
<span class="xxxx">
{{ maTypeLeasingNum }}
@ -64,7 +64,7 @@
<div>在租赁种类</div>
<div></div>
</div>
<div class="info-box info-box_2">
<div class="info-box info-box_2" style="transform: translateY(-30px)">
<div>
<span class="xxxx">
{{ devLeasingNum }}
@ -74,7 +74,7 @@
<div>在租装备数</div>
<div></div>
</div>
<div class="info-box info-box_2">
<div class="info-box info-box_2" style="transform: translateY(-30px)">
<div>
<span class="xxxx">
{{ devRepairingNum }}
@ -84,7 +84,7 @@
<div>在修装备数</div>
<div></div>
</div>
<div class="info-box info-box_2" style="transform: translateY(-30px)">
<div class="info-box info-box_2" style="transform: translateY(-90px)">
<div>
<span class="xxxx"> {{ devUsageRatio }}% </span>
<!-- <span class="zzzz"> 台 </span> -->
@ -96,11 +96,11 @@
</div>
<div class="item">
<!-- <h2>装备需求</h2> -->
<div class="item-title">
<div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备需求.png" alt="">
</div>
<div class="item-info">
<div class="info-box info-box_3" style="transform: translateY(-30px)">
<div class="info-box info-box_3" style="transform: translateY(-80px)">
<div>
<span class="xxxx">
{{ leaseNum }}
@ -120,7 +120,7 @@
<div>需求装备种类</div>
<div></div>
</div>
<div class="info-box info-box_3 info-box_4" style="transform: translateY(-30px)">
<div class="info-box info-box_3 info-box_4" style="transform: translateY(-80px)">
<div>第一</div>
<div>
{{ topPopularTypeName }}

7
src/views/big-screen/model-components/right-one-model.vue
View File

@ -13,23 +13,28 @@ import * as echarts from 'echarts'
const getDeviceShareRankingData = async () => {
const { data: res }: any = await getDeviceShareRankingApi()
console.log('🚀 ~ getDeviceShareRankingData ~ res:', res)
chartData.value = res.map((e: any) =>
e.comName.length > 6 ? e.comName.slice(0, 6) + '...' : e.comName,
)
chartDataNew.value = res.map((e: any) => e.comName)
state.value = res.map((e: any) => e.deviceCount)
console.log('🚀 ~ getDeviceShareRankingData ~ state.value:', state.value)
}
getDeviceShareRankingData()
const chartData = ref<any>([])
const chartDataNew = ref<any>([])
const state = ref<any>([])
const echartsRef = ref(null)
const initEChart = () => {
console.log('🚀 ~ initEChart ~ state.value:', state.value)
const chart = echarts.init(echartsRef.value)
const opt = {
index: 0,
}
var data = [50, 60, 70, 20, 30, 30]
var data: any = state.value
var className = chartData.value
var colorArray = [
{

22
src/views/big-screen/model-components/right-three-model.vue
View File

@ -18,10 +18,10 @@ const getLeaseCountByPublishCompanyData = async () => {
pieData.value = res.map((e: any) => {
return {
value: e.leaseCount,
name:
e.publishCompany.length > 6
? e.publishCompany.slice(0, 6) + '..'
: e.publishCompany,
name: e.publishCompany,
// e.publishCompany.length > 6
// ? e.publishCompany.slice(0, 6) + '..'
// : e.publishCompany,
}
})
}
@ -58,6 +58,9 @@ const initCharts = () => {
formatter: (name: any) => {
if (pieData.value.length) {
const item: any = pieData.value.filter((item: any) => item.name === name)[0]
if (name.length > 6) {
name = name.slice(0, 6) + '..'
}
return `{name|${name}}{value| ${item.value}} {rate| 台}`
}
},
@ -185,7 +188,7 @@ const initCharts = () => {
position: 'center',
},
emphasis: {
show: true,
show: false,
textStyle: {
fontSize: '14',
// fontWeight: 'bold',
@ -197,7 +200,10 @@ const initCharts = () => {
show: false,
},
},
data: [25, 25, 25, 25, 25, 25],
data: [0, 0, 0, 0, 0, 0, 0, 0],
tooltip: {
show: false,
}
},
],
}
@ -255,7 +261,7 @@ onMounted(() => {
flex: 1;
background: url('@/assets/img/screen/bg_1.png') no-repeat;
background-size: 100% 100%;
z-index: 100;
// background-color: orange;
}
@ -265,7 +271,7 @@ onMounted(() => {
left: 20%;
width: 80px;
height: 80px;
// z-index: 10;
z-index: 1;
background: url('@/assets/img/screen/right_3.png') no-repeat;
background-size: 100% 100%;
}