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://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://192.168.2.122:28080' # 梁超
# VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi' # 测试÷服务 # VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi' # 测试÷服务
VITE_proxyTarget = 'http://192.168.0.244:28580' # 测试服务 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> <template>
<div class="title"> <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> </div>
</template> </template>
@ -10,7 +11,15 @@ const props = defineProps({
type: String, type: String,
default: () => '', default: () => '',
}, },
showReset: {
type: Boolean,
default: () => false,
},
}) })
const emit = defineEmits(['reset'])
const reset = () => {
emit('reset')
}
</script> </script>
<style scoped> <style scoped>
@ -18,7 +27,7 @@ const props = defineProps({
/* padding: 12px 6px; */ /* padding: 12px 6px; */
height: 36px; height: 36px;
padding-left: 30px; padding-left: 30px;
line-height: 20px; line-height: 25px;
color: #ccc; color: #ccc;
/* background: linear-gradient(to right, #086c94, #0e557f, #06112c); */ /* background: linear-gradient(to right, #086c94, #0e557f, #06112c); */
background: url('@/assets/img/screen/title_bg.png') no-repeat; background: url('@/assets/img/screen/title_bg.png') no-repeat;
@ -26,5 +35,6 @@ const props = defineProps({
background-size: 100% 100%; background-size: 100% 100%;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 16px; font-size: 16px;
display: flex;
} }
</style> </style>

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

@ -3,44 +3,44 @@
<div class="item"> <div class="item">
<!-- <h2>装备上架</h2> --> <!-- <h2>装备上架</h2> -->
<div class="item-title"> <div class="item-title">
<img src="@/assets/img/screen/装备上架.png" alt=""> <img src="@/assets/img/screen/装备上架.png" style="width: 100%; height: 90%" />
</div> </div>
<div class="item-info"> <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 class="yyyy">入驻装备数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devNum }} {{ devNum || 0 }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<div></div> <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 class="yyyy">上架装备数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devUpNum }} {{ devUpNum || 0 }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<div></div> <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 class="yyyy">装备总类型数</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devTypeNum }} {{ devTypeNum || 0 }}
</span> </span>
<span class="zzzz"> 类 </span> <span class="zzzz"> 类 </span>
</div> </div>
<div></div> <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 class="yyyy">保养告警</div>
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devQcWaningNum }} {{ devQcWaningNum || 0 }}
</span> </span>
<span class="zzzz"> 条 </span> <span class="zzzz"> 条 </span>
</div> </div>
@ -50,43 +50,43 @@
</div> </div>
<div class="item"> <div class="item">
<!-- <h2>装备租赁</h2> --> <!-- <h2>装备租赁</h2> -->
<div class="item-title" style="transform: translateY(-40px)"> <div class="item-title" style="transform: translateY(-5vh)">
<img src="@/assets/img/screen/装备租赁.png" alt=""> <img src="@/assets/img/screen/装备租赁.png" style="width: 100%; height: 90%" />
</div> </div>
<div class="item-info"> <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> <div>
<span class="xxxx"> <span class="xxxx">
{{ maTypeLeasingNum }} {{ maTypeLeasingNum || 0 }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<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(-8.5vh)">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devLeasingNum }} {{ devLeasingNum || 0 }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<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(-8.5vh)">
<div> <div>
<span class="xxxx"> <span class="xxxx">
{{ devRepairingNum }} {{ devRepairingNum || 0 }}
</span> </span>
<span class="zzzz"> 台 </span> <span class="zzzz"> 台 </span>
</div> </div>
<div>在修装备数</div> <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> <div>
<span class="xxxx"> {{ devUsageRatio }}% </span> <span class="xxxx"> {{ devUsageRatio || 0 }}% </span>
<!-- <span class="zzzz"> 台 </span> --> <!-- <span class="zzzz"> 台 </span> -->
</div> </div>
<div>装备利用率</div> <div>装备利用率</div>
@ -96,45 +96,60 @@
</div> </div>
<div class="item"> <div class="item">
<!-- <h2>装备需求</h2> --> <!-- <h2>装备需求</h2> -->
<div class="item-title" style="transform: translateY(-40px)"> <div class="item-title" style="transform: translateY(-5vh)">
<img src="@/assets/img/screen/装备需求.png" alt=""> <img src="@/assets/img/screen/装备需求.png" style="width: 100%; height: 90%" />
</div> </div>
<div class="item-info"> <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> <div>
<span class="xxxx"> <span class="xxxx">
{{ leaseNum }} {{ leaseNum || 0 }}
</span> </span>
<span class="zzzz"> 项 </span> <span class="zzzz"> 项 </span>
</div> </div>
<div>需求总数</div> <div>需求总数</div>
<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> <div>
<span class="xxxx"> <span class="xxxx">
{{ leaseOrderRatio }} {{ maTypeCountFromLease || 0 }}
</span> </span>
<span class="zzzz"> 种 </span> <span class="zzzz"> 种 </span>
</div> </div>
<div>需求装备种类</div> <div>需求装备种类</div>
<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>第一</div>
<div> <div>
{{ topPopularTypeName }} {{ topPopularTypeName || '' }}
</div> </div>
<div>最需装备</div> <div>最需装备</div>
<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> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 devNum = ref<any>(0)
const devUpNum = ref<any>(0) const devUpNum = ref<any>(0)
const devTypeNum = ref<any>(0) const devTypeNum = ref<any>(0)
@ -146,6 +161,7 @@ const maTypeLeasingNum = ref<any>(0)
const devLeasingNum = ref<any>(0) const devLeasingNum = ref<any>(0)
const devRepairingNum = ref<any>(0) const devRepairingNum = ref<any>(0)
const devUsageRatio = ref<any>(0) const devUsageRatio = ref<any>(0)
const maTypeCountFromLease = ref<any>(0)
const getDevCountData = async () => { const getDevCountData = async () => {
const res: any = await getDevCountApi() const res: any = await getDevCountApi()
devNum.value = res.data.devNum devNum.value = res.data.devNum
@ -154,16 +170,28 @@ const getDevCountData = async () => {
devQcWaningNum.value = res.data.devQcWaningNum devQcWaningNum.value = res.data.devQcWaningNum
const result1: any = await getDemandCountApi() const result1: any = await getDemandCountApi()
console.log('🚀 ~ getDevCountData ~ result1:', result1)
leaseNum.value = result1.data.leaseNum leaseNum.value = result1.data.leaseNum
leaseOrderRatio.value = result1.data.leaseOrderRatio leaseOrderRatio.value = result1.data.leaseOrderRatio
maTypeCountFromLease.value = result1.data.maTypeCountFromLease
topPopularTypeName.value = result1.data.topPopularTypeName topPopularTypeName.value = result1.data.topPopularTypeName
const { data: result }: any = await getDevLeaseCountApi() const { data: result }: any = await getDevLeaseCountApi()
maTypeLeasingNum.value = result.maTypeLeasingNum maTypeLeasingNum.value = result.maTypeLeasingNum
devLeasingNum.value = result.devLeasingNum devLeasingNum.value = result.devLeasingNum
devRepairingNum.value = result.devRepairingNum // devRepairingNum.value = result.devRepairingNum
devUsageRatio.value = result.devUsageRatio devUsageRatio.value = result.devUsageRatio
console.log(result, '装备租赁') 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(() => { onMounted(() => {
@ -184,8 +212,9 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
/* height: 100vh; */
height: 100%; height: 100%;
width: 100%; /* width: 100%; */
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
@ -195,11 +224,13 @@ onMounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
.item-title { .item-title {
height: 30%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.item-info { .item-info {
height: 70%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; 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 class="item bg1">
<div> <div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px"> <span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[0]?.deviceCount }} {{ idle80 || 0 }}
</span> </span>
<span style="color: #8ba6bd">台</span> <span style="color: #8ba6bd">台</span>
</div> </div>
@ -17,7 +17,7 @@
<div class="item bg2"> <div class="item bg2">
<div> <div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px"> <span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[1]?.deviceCount }} {{ idle3080 || 0 }}
</span> </span>
<span style="color: #8ba6bd">台</span> <span style="color: #8ba6bd">台</span>
</div> </div>
@ -28,7 +28,7 @@
<div class="item bg3"> <div class="item bg3">
<div> <div>
<span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px"> <span style="font-family: DS-TITle; font-size: 16px; margin-right: 8px">
{{ leftData_1[2]?.deviceCount }} {{ idle30 || 0 }}
</span> </span>
<span style="color: #8ba6bd">台</span> <span style="color: #8ba6bd">台</span>
</div> </div>
@ -44,9 +44,16 @@
import ScreenTitle from 'components/ScreenTitle/index.vue' import ScreenTitle from 'components/ScreenTitle/index.vue'
import { getIdleDevRatioApi } from 'http/api/screen/index' import { getIdleDevRatioApi } from 'http/api/screen/index'
const leftData_1 = ref<any>([]) const leftData_1 = ref<any>([])
const idle80 = ref<any>(0)
const idle3080 = ref<any>(0)
const idle30 = ref<any>(0)
const getIdleDevRatioData = async () => { const getIdleDevRatioData = async () => {
const { data: res }: any = await getIdleDevRatioApi() 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() getIdleDevRatioData()

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

@ -1,7 +1,8 @@
<template> <template>
<!-- 装备租赁互联 --> <!-- 装备租赁互联 -->
<div class="container"> <div class="container">
<ScreenTitle :title="`装备租赁互联`" /> <ScreenTitle :title="`装备租赁互联`" @reset="reset" :showReset="false"/>
<div class="reset">重置</div>
<div class="content" ref="echartsRef"></div> <div class="content" ref="echartsRef"></div>
</div> </div>
</template> </template>
@ -13,48 +14,8 @@ import IconImg from '@/assets/img/screen/999.svg'
import * as echarts from 'echarts' import * as echarts from 'echarts'
const echartsRef = ref(null) const echartsRef = ref(null)
const secondsTimer: any = ref(null) const secondsTimer: any = ref(null)
const oneArr: any = ref([ const oneArr: any = ref([])
// { const erArr: 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 getLeaseCouplesData = async () => { const getLeaseCouplesData = async () => {
const res: any = await getLeaseCouplesApi() const res: any = await getLeaseCouplesApi()
// console.log(res, '装备租赁互联') // console.log(res, '装备租赁互联')
@ -82,6 +43,11 @@ const getLeaseCouplesData = async () => {
} }
getLeaseCouplesData() getLeaseCouplesData()
// 重置
const reset = () => {
console.log('重置')
}
onMounted(() => { onMounted(() => {
setTimeout(() => { setTimeout(() => {
const myChart = echarts.init(echartsRef.value) const myChart = echarts.init(echartsRef.value)
@ -117,13 +83,13 @@ onMounted(() => {
// 更新数据 // 更新数据
myChart.setOption({ myChart.setOption({
tooltip: { // tooltip: {
trigger: 'item', // 触发类型为数据项 // trigger: 'item', // 触发类型为数据项
formatter: function (params: any) { // formatter: function (params: any) {
// 显示完整的公司名称和订单数 // // 显示完整的公司名称和订单数
return `公司名称: ${params.name}<br>订单数: ${params.data.orderNum}` // return `公司名称: ${params.name}<br>订单数: ${params.data.orderNum}`
}, // },
}, // },
}) // true 表示合并更新 }) // true 表示合并更新
} }
}) })
@ -449,30 +415,6 @@ onUnmounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
.content { .content {
flex: 1; 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> </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) // const isAdmin = ref(userInfo.admin)
// 临时管理员权限 // 临时管理员权限
// console.log('🚀 ~ userInfo:', userInfo) // 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) // console.log('🚀 ~ isAdmin:', isAdmin.value)
import imgSrc from '@/assets/img/logo.png' import imgSrc from '@/assets/img/logo.png'