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=""> <img src="@/assets/img/screen/装备上架.png" alt="">
</div> </div>
<div class="item-info"> <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 class="yyyy">入驻装备数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
@ -16,7 +16,7 @@
</div> </div>
<div></div> <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 class="yyyy">上架装备数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
@ -26,7 +26,7 @@
</div> </div>
<div></div> <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 class="yyyy">装备总类型数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
@ -36,7 +36,7 @@
</div> </div>
<div></div> <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 class="yyyy">保养告警</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
@ -50,11 +50,11 @@
</div> </div>
<div class="item"> <div class="item">
<!-- <h2>装备租赁</h2> --> <!-- <h2>装备租赁</h2> -->
<div class="item-title"> <div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备租赁.png" alt=""> <img src="@/assets/img/screen/装备租赁.png" alt="">
</div> </div>
<div class="item-info"> <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> <div>
<span class="xxxx"> <span class="xxxx">
{{ maTypeLeasingNum }} {{ maTypeLeasingNum }}
@ -64,7 +64,7 @@
<div>在租赁种类</div> <div>在租赁种类</div>
<div></div> <div></div>
</div> </div>
<div class="info-box info-box_2"> <div class="info-box info-box_2" style="transform: translateY(-30px)">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devLeasingNum }} {{ devLeasingNum }}
@ -74,7 +74,7 @@
<div>在租装备数</div> <div>在租装备数</div>
<div></div> <div></div>
</div> </div>
<div class="info-box info-box_2"> <div class="info-box info-box_2" style="transform: translateY(-30px)">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devRepairingNum }} {{ devRepairingNum }}
@ -84,7 +84,7 @@
<div>在修装备数</div> <div>在修装备数</div>
<div></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> <div>
<span class="xxxx"> {{ devUsageRatio }}% </span> <span class="xxxx"> {{ devUsageRatio }}% </span>
<!-- <span class="zzzz"> 台 </span> --> <!-- <span class="zzzz"> 台 </span> -->
@ -96,11 +96,11 @@
</div> </div>
<div class="item"> <div class="item">
<!-- <h2>装备需求</h2> --> <!-- <h2>装备需求</h2> -->
<div class="item-title"> <div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备需求.png" alt=""> <img src="@/assets/img/screen/装备需求.png" alt="">
</div> </div>
<div class="item-info"> <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> <div>
<span class="xxxx"> <span class="xxxx">
{{ leaseNum }} {{ leaseNum }}
@ -120,7 +120,7 @@
<div>需求装备种类</div> <div>需求装备种类</div>
<div></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>第一</div>
<div> <div>
{{ topPopularTypeName }} {{ 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 getDeviceShareRankingData = async () => {
const { data: res }: any = await getDeviceShareRankingApi() const { data: res }: any = await getDeviceShareRankingApi()
console.log('🚀 ~ getDeviceShareRankingData ~ res:', res)
chartData.value = res.map((e: any) => chartData.value = res.map((e: any) =>
e.comName.length > 6 ? e.comName.slice(0, 6) + '...' : e.comName, e.comName.length > 6 ? e.comName.slice(0, 6) + '...' : e.comName,
) )
chartDataNew.value = res.map((e: any) => 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() getDeviceShareRankingData()
const chartData = ref<any>([]) const chartData = ref<any>([])
const chartDataNew = ref<any>([]) const chartDataNew = ref<any>([])
const state = ref<any>([])
const echartsRef = ref(null) const echartsRef = ref(null)
const initEChart = () => { const initEChart = () => {
console.log('🚀 ~ initEChart ~ state.value:', state.value)
const chart = echarts.init(echartsRef.value) const chart = echarts.init(echartsRef.value)
const opt = { const opt = {
index: 0, index: 0,
} }
var data = [50, 60, 70, 20, 30, 30] var data: any = state.value
var className = chartData.value var className = chartData.value
var colorArray = [ 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) => { pieData.value = res.map((e: any) => {
return { return {
value: e.leaseCount, value: e.leaseCount,
name: name: e.publishCompany,
e.publishCompany.length > 6 // e.publishCompany.length > 6
? e.publishCompany.slice(0, 6) + '..' // ? e.publishCompany.slice(0, 6) + '..'
: e.publishCompany, // : e.publishCompany,
} }
}) })
} }
@ -58,6 +58,9 @@ const initCharts = () => {
formatter: (name: any) => { formatter: (name: any) => {
if (pieData.value.length) { if (pieData.value.length) {
const item: any = pieData.value.filter((item: any) => item.name === name)[0] 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| 台}` return `{name|${name}}{value| ${item.value}} {rate| 台}`
} }
}, },
@ -185,7 +188,7 @@ const initCharts = () => {
position: 'center', position: 'center',
}, },
emphasis: { emphasis: {
show: true, show: false,
textStyle: { textStyle: {
fontSize: '14', fontSize: '14',
// fontWeight: 'bold', // fontWeight: 'bold',
@ -197,7 +200,10 @@ const initCharts = () => {
show: false, 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; flex: 1;
background: url('@/assets/img/screen/bg_1.png') no-repeat; background: url('@/assets/img/screen/bg_1.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
z-index: 100;
// background-color: orange; // background-color: orange;
} }
@ -265,7 +271,7 @@ onMounted(() => {
left: 20%; left: 20%;
width: 80px; width: 80px;
height: 80px; height: 80px;
// z-index: 10; z-index: 1;
background: url('@/assets/img/screen/right_3.png') no-repeat; background: url('@/assets/img/screen/right_3.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }