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-14 18:02:22 +08:00
parent c3263d3d5f
commit d4fffd66bd
7 changed files with 104 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
env/.env.dev vendored
View File

@ -7,7 +7,7 @@ VITE_API_URL = '/proxyApi'
# 开发环境接口地址
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
# VITE_proxyTarget = 'http://192.168.0.234:28080' # 马帅
# VITE_proxyTarget = 'http://192.168.0.60:28080' # 福
# VITE_proxyTarget = 'http://192.168.2.122:28080' # 梁超
# VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi' # 测试÷服务
VITE_proxyTarget = 'http://192.168.0.244:28580' # 测试服务

BIN
src/assets/img/reset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

14
src/components/ScreenTitle/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="title">
{{ title }}
<span>{{ title }}</span>
<img v-if="showReset" src="@/assets/img/reset.png" alt="" style="width: 20px;height: 20px;cursor: pointer;" @click="reset">
</div>
</template>
@ -10,7 +11,15 @@ const props = defineProps({
type: String,
default: () => '',
},
showReset: {
type: Boolean,
default: () => false,
},
})
const emit = defineEmits(['reset'])
const reset = () => {
emit('reset')
}
</script>
<style scoped>
@ -18,7 +27,7 @@ const props = defineProps({
/* padding: 12px 6px; */
height: 36px;
padding-left: 30px;
line-height: 20px;
line-height: 25px;
color: #ccc;
/* background: linear-gradient(to right, #086c94, #0e557f, #06112c); */
background: url('@/assets/img/screen/title_bg.png') no-repeat;
@ -26,5 +35,6 @@ const props = defineProps({
background-size: 100% 100%;
letter-spacing: 4px;
font-size: 16px;
display: flex;
}
</style>

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

@ -3,44 +3,44 @@
<div class="item">
<!-- <h2>装备上架</h2> -->
<div class="item-title">
<img src="@/assets/img/screen/装备上架.png" alt="">
<img src="@/assets/img/screen/装备上架.png" style="width: 100%; height: 90%" />
</div>
<div class="item-info">
<div class="info-box info-box_1" style="transform: translateY(-99px)">
<div class="info-box info-box_1" style="transform: translateY(-14.5vh)">
<div class="yyyy">入驻装备数</div>
<div>
<span class="xxxx">
{{ devNum }}
{{ devNum || 0 }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div></div>
</div>
<div class="info-box info-box_1" style="transform: translateY(-40px)">
<div class="info-box info-box_1" style="transform: translateY(-9vh)">
<div class="yyyy">上架装备数</div>
<div>
<span class="xxxx">
{{ devUpNum }}
{{ devUpNum || 0 }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div></div>
</div>
<div class="info-box info-box_1" style="transform: translateY(-40px)">
<div class="info-box info-box_1" style="transform: translateY(-9vh)">
<div class="yyyy">装备总类型数</div>
<div>
<span class="xxxx">
{{ devTypeNum }}
{{ devTypeNum || 0 }}
</span>
<span class="zzzz"> 类 </span>
</div>
<div></div>
</div>
<div class="info-box info-box_1" style="transform: translateY(-99px)">
<div class="info-box info-box_1" style="transform: translateY(-14.5vh)">
<div class="yyyy">保养告警</div>
<div>
<span class="xxxx">
{{ devQcWaningNum }}
{{ devQcWaningNum || 0 }}
</span>
<span class="zzzz"> 条 </span>
</div>
@ -50,43 +50,43 @@
</div>
<div class="item">
<!-- <h2>装备租赁</h2> -->
<div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备租赁.png" alt="">
<div class="item-title" style="transform: translateY(-5vh)">
<img src="@/assets/img/screen/装备租赁.png" style="width: 100%; height: 90%" />
</div>
<div class="item-info">
<div class="info-box info-box_2" style="transform: translateY(-90px)">
<div class="info-box info-box_2" style="transform: translateY(-14vh)">
<div>
<span class="xxxx">
{{ maTypeLeasingNum }}
{{ maTypeLeasingNum || 0 }}
</span>
<span class="zzzz"> 台 </span>
</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(-8.5vh)">
<div>
<span class="xxxx">
{{ devLeasingNum }}
{{ devLeasingNum || 0 }}
</span>
<span class="zzzz"> 台 </span>
</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(-8.5vh)">
<div>
<span class="xxxx">
{{ devRepairingNum }}
{{ devRepairingNum || 0 }}
</span>
<span class="zzzz"> 台 </span>
</div>
<div>在修装备数</div>
<div>退租装备数</div>
<div></div>
</div>
<div class="info-box info-box_2" style="transform: translateY(-90px)">
<div class="info-box info-box_2" style="transform: translateY(-14vh)">
<div>
<span class="xxxx"> {{ devUsageRatio }}% </span>
<span class="xxxx"> {{ devUsageRatio || 0 }}% </span>
<!-- <span class="zzzz"> 台 </span> -->
</div>
<div>装备利用率</div>
@ -96,45 +96,60 @@
</div>
<div class="item">
<!-- <h2>装备需求</h2> -->
<div class="item-title" style="transform: translateY(-40px)">
<img src="@/assets/img/screen/装备需求.png" alt="">
<div class="item-title" style="transform: translateY(-5vh)">
<img src="@/assets/img/screen/装备需求.png" style="width: 100%; height: 90%" />
</div>
<div class="item-info">
<div class="info-box info-box_3" style="transform: translateY(-80px)">
<div class="info-box info-box_3" style="transform: translateY(-12.5vh)">
<div>
<span class="xxxx">
{{ leaseNum }}
{{ leaseNum || 0 }}
</span>
<span class="zzzz"> 项 </span>
</div>
<div>需求总数</div>
<div></div>
</div>
<div class="info-box info-box_3">
<div class="info-box info-box_3" style="transform: translateY(-7.5vh)">
<div>
<span class="xxxx">
{{ leaseOrderRatio }}
{{ maTypeCountFromLease || 0 }}
</span>
<span class="zzzz"> 种 </span>
</div>
<div>需求装备种类</div>
<div></div>
</div>
<div class="info-box info-box_3 info-box_4" style="transform: translateY(-80px)">
<div class="info-box info-box_3 info-box_4" style="transform: translateY(-7.5vh)">
<div>第一</div>
<div>
{{ topPopularTypeName }}
{{ topPopularTypeName || '' }}
</div>
<div>最需装备</div>
<div></div>
</div>
<div class="info-box info-box_3" style="transform: translateY(-12.5vh)">
<div>
<span class="xxxx">
{{ leaseOrderRatio || 0 }}
</span>
<span class="zzzz"> % </span>
</div>
<div>需求应答率</div>
<div></div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { getDevCountApi, getDevLeaseCountApi, getDemandCountApi } from 'http/api/screen/index'
import {
getDevCountApi,
getDevLeaseCountApi,
getDemandCountApi,
getOrderTrackingApi,
} from 'http/api/screen/index'
const devNum = ref<any>(0)
const devUpNum = ref<any>(0)
const devTypeNum = ref<any>(0)
@ -146,6 +161,7 @@ const maTypeLeasingNum = ref<any>(0)
const devLeasingNum = ref<any>(0)
const devRepairingNum = ref<any>(0)
const devUsageRatio = ref<any>(0)
const maTypeCountFromLease = ref<any>(0)
const getDevCountData = async () => {
const res: any = await getDevCountApi()
devNum.value = res.data.devNum
@ -154,16 +170,28 @@ const getDevCountData = async () => {
devQcWaningNum.value = res.data.devQcWaningNum
const result1: any = await getDemandCountApi()
console.log('🚀 ~ getDevCountData ~ result1:', result1)
leaseNum.value = result1.data.leaseNum
leaseOrderRatio.value = result1.data.leaseOrderRatio
maTypeCountFromLease.value = result1.data.maTypeCountFromLease
topPopularTypeName.value = result1.data.topPopularTypeName
const { data: result }: any = await getDevLeaseCountApi()
maTypeLeasingNum.value = result.maTypeLeasingNum
devLeasingNum.value = result.devLeasingNum
devRepairingNum.value = result.devRepairingNum
// devRepairingNum.value = result.devRepairingNum
devUsageRatio.value = result.devUsageRatio
console.log(result, '装备租赁')
const res3: any = await getOrderTrackingApi()
console.log('🚀 ~ getDevCountData ~ res3:', res3)
if (res3.data) {
res3.data.forEach((e: any) => {
if (e.orderStatus == 5) {
devRepairingNum.value = e.orderCount
}
})
}
}
onMounted(() => {
@ -184,8 +212,9 @@ onMounted(() => {
display: flex;
flex-direction: column;
justify-content: space-around;
/* height: 100vh; */
height: 100%;
width: 100%;
/* width: 100%; */
color: #fff;
font-size: 16px;
@ -195,11 +224,13 @@ onMounted(() => {
background-size: 100% 100%;
.item-title {
height: 30%;
display: flex;
align-items: center;
justify-content: center;
}
.item-info {
height: 70%;
display: flex;
align-items: center;
justify-content: space-around;

15
src/views/big-screen/model-components/left-one-model.vue
View File

@ -6,7 +6,7 @@
<div class="item bg1">
<div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[0]?.deviceCount }}
{{ idle80 || 0 }}
</span>
<span style="color: #8ba6bd">台</span>
</div>
@ -17,7 +17,7 @@
<div class="item bg2">
<div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[1]?.deviceCount }}
{{ idle3080 || 0 }}
</span>
<span style="color: #8ba6bd">台</span>
</div>
@ -28,7 +28,7 @@
<div class="item bg3">
<div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[2]?.deviceCount }}
{{ idle30 || 0 }}
</span>
<span style="color: #8ba6bd">台</span>
</div>
@ -44,9 +44,16 @@
import ScreenTitle from 'components/ScreenTitle/index.vue'
import { getIdleDevRatioApi } from 'http/api/screen/index'
const leftData_1 = ref<any>([])
const idle80 = ref<any>(0)
const idle3080 = ref<any>(0)
const idle30 = ref<any>(0)
const getIdleDevRatioData = async () => {
const { data: res }: any = await getIdleDevRatioApi()
leftData_1.value = res
console.log('🚀 ~ getIdleDevRatioData ~ 左上:', res)
// leftData_1.value = res
idle80.value = res.idle80
idle3080.value = res.idle3080
idle30.value = res.idle30
}
getIdleDevRatioData()

90
src/views/big-screen/model-components/left-three-model.vue
View File

@ -1,7 +1,8 @@
<template>
<!-- 装备租赁互联 -->
<div class="container">
<ScreenTitle :title="`装备租赁互联`" />
<ScreenTitle :title="`装备租赁互联`" @reset="reset" :showReset="false"/>
<div class="reset">重置</div>
<div class="content" ref="echartsRef"></div>
</div>
</template>
@ -13,48 +14,8 @@ import IconImg from '@/assets/img/screen/999.svg'
import * as echarts from 'echarts'
const echartsRef = ref(null)
const secondsTimer: any = ref(null)
const oneArr: any = ref([
// {
// name: '亳州分公司',
// type: 0,
// symbol: 'image://' + IconImg,
// symbolSize: 45,
// },
])
const erArr: any = ref([
// {
// name: '安徽送变电1',
// type: 1,
// },
// {
// name: '安徽送变电2',
// type: 1,
// },
// {
// name: '安徽送变电3',
// type: 1,
// },
// {
// name: '安徽送变电4',
// type: 1,
// },
// {
// name: '安徽送变电5',
// type: 1,
// },
// {
// name: '安徽送变电6',
// type: 1,
// },
// {
// name: '安徽送变电7',
// type: 1,
// },
// {
// name: '安徽送变电8',
// type: 1,
// },
])
const oneArr: any = ref([])
const erArr: any = ref([])
const getLeaseCouplesData = async () => {
const res: any = await getLeaseCouplesApi()
// console.log(res, '装备租赁互联')
@ -82,6 +43,11 @@ const getLeaseCouplesData = async () => {
}
getLeaseCouplesData()
// 重置
const reset = () => {
console.log('重置')
}
onMounted(() => {
setTimeout(() => {
const myChart = echarts.init(echartsRef.value)
@ -117,13 +83,13 @@ onMounted(() => {
// 更新数据
myChart.setOption({
tooltip: {
trigger: 'item', // 触发类型为数据项
formatter: function (params: any) {
// 显示完整的公司名称和订单数
return `公司名称: ${params.name}<br>订单数: ${params.data.orderNum}`
},
},
// tooltip: {
// trigger: 'item', // 触发类型为数据项
// formatter: function (params: any) {
// // 显示完整的公司名称和订单数
// return `公司名称: ${params.name}<br>订单数: ${params.data.orderNum}`
// },
// },
}) // true 表示合并更新
}
})
@ -449,30 +415,6 @@ onUnmounted(() => {
background-size: 100% 100%;
.content {
flex: 1;
// background: url('@/assets/img/screen/left3_1.png') no-repeat;
// background-size: 100% 100%;
// .item {
// width: 30%;
// height: 100%;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// color: #fff;
// font-size: 18px;
// background-color: #072949;
// }
// .bg1 {
// background: linear-gradient(to bottom, #05112a, #04223c, #0d3a60);
// }
// .bg2 {
// background: linear-gradient(to bottom, #071426, #03322f, #133945);
// }
// .bg3 {
// background: linear-gradient(to bottom, #131824, #1a2933, #203e47);
// }
}
}
</style>

3
src/views/user/index.vue
View File

@ -11,7 +11,8 @@ const userInfo = JSON.parse(localStorage.getItem('main')).userInfo
// const isAdmin = ref(userInfo.admin)
// 临时管理员权限
// console.log('🚀 ~ userInfo:', userInfo)
const isAdmin = ref(userInfo.userId == 226 || userInfo.userId == 225 || userInfo.admin)
// const isAdmin = ref(userInfo.userId == 226 || userInfo.userId == 225 || userInfo.admin)
const isAdmin = ref(true) // 临时放开权限
// console.log('🚀 ~ isAdmin:', isAdmin.value)
import imgSrc from '@/assets/img/logo.png'