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

测试大屏

This commit is contained in:
binbin_pan 2024-03-15 16:37:36 +08:00
parent 8d2b007ad0
commit 0b8c38a691
11 changed files with 152 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
env/.env.dev vendored
View File

@ -3,9 +3,11 @@ VITE_ENV = 'development'
VITE_BUILD_MODE = 'dev' VITE_BUILD_MODE = 'dev'
# 开发环境接口地址 # 开发环境接口地址
VITE_API_URL = '/proxyApi' VITE_API_URL = '/proxy'
# 代理地址 # 代理地址
VITE_proxyTarget = "http://10.40.92.64:8080/zlpt-bigscreen/" # VITE_proxyTarget = "http://10.40.92.64:8080/zlpt-bigscreen/"
# 代理至 https://test-rental.zhgkxt.com/
VITE_proxyTarget = "https://test-rental.zhgkxt.com/proxy"

4
env/.env.production vendored
View File

@ -3,7 +3,9 @@ VITE_ENV = 'production'
VITE_BUILD_MODE = 'prod' VITE_BUILD_MODE = 'prod'
# 线上环境接口地址 # 线上环境接口地址
VITE_API_URL = 'https://production.com' # VITE_API_URL = 'https://production.com'
VITE_API_URL = 'https://test-rental.zhgkxt.com/proxy'
# VITE_API_URL = 'http://localhost:8080/proxy'
# 百度地图key # 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL" VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本 # 百度地图版本

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <!-- <link rel="icon" href="/favicon.ico"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机具租赁共享平台</title> <title>机具租赁共享平台</title>
<link rel="icon" href="//test-hzdg-1259451974.cos.ap-guangzhou.myqcloud.com/d133bcbb33438a196a8ccd4eda65934f1742495961134923776354.png" /> <link rel="icon" href="//test-hzdg-1259451974.cos.ap-guangzhou.myqcloud.com/d133bcbb33438a196a8ccd4eda65934f1742495961134923776354.png" />

2
package.json
View File

@ -7,7 +7,7 @@
"build": "npm run build:pro", "build": "npm run build:pro",
"build:sit": "vite build --mode sit", "build:sit": "vite build --mode sit",
"build:uat": "vite build --mode uat", "build:uat": "vite build --mode uat",
"build:pro": "&& vite build --mode production", "build:pro": "vite build --mode production",
"preview": "vite preview", "preview": "vite preview",
"build-only": "vite build", "build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false" "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"

74
src/components/customCom/equipmentLeasing.vue
View File

@ -162,7 +162,7 @@ const mapProps = reactive({
return "" return ""
} }
let fromatStr = let fromatStr =
`<div style="background:url(${getImg('/src/assets/img/mapHoverBg.png')});width:324px;height:225px;background-size:contain;background-repeat:no-repeat;"> `<div style="background-image: url(${new URL('/src/assets/img/mapHoverBg.png', import.meta.url).href});width:324px;height:225px;background-size:contain;background-repeat:no-repeat;">
<div style="width: 100px;height: 90px;padding-top:4px;position:relative;"> <div style="width: 100px;height: 90px;padding-top:4px;position:relative;">
<div style="position:absolute;left:20px;top:10px;font-weight:bold;color:#fff;"> <div style="position:absolute;left:20px;top:10px;font-weight:bold;color:#fff;">
${params.name} ${params.name}
@ -194,43 +194,47 @@ const mapProps = reactive({
console.log("equipmentDialogRef999", params.data.name) console.log("equipmentDialogRef999", params.data.name)
equipmentDialogRef.value.open(params.data.name) equipmentDialogRef.value.open(params.data.name)
}, },
seriesData:[] // seriesData:[]
// [{ name: '肇庆市', value: [112.48461, 23.05196, 1] }, seriesData: [
// { name: '佛山市', value: [110.130214, 23.018978, 1] }, //地图上的点
// { name: '广州', value: [115.261081, 23.139856, 1] }, { name: '肇庆市', value: [112.48461, 23.05196, 1] },
// { name: '南宁', value: [107.45, 22.139856, 1] }, { name: '佛山市', value: [110.130214, 23.018978, 1] },
// { name: '贵阳', value: [106.7, 26.36, 1] }, { name: '广州', value: [115.261081, 23.139856, 1] },
// { name: '昆明', value: [102.33, 24.23, 1] } , { name: '南宁', value: [107.45, 22.139856, 1] },
// { name: '海口', value: [110.33,19.823, 1] }] { name: '贵阳', value: [106.7, 26.36, 1] },
{ name: '昆明', value: [102.33, 24.23, 1] },
{ name: '海口', value: [110.33,19.823, 1] }
]
}) })
let listData: any = [] let listData: any = []
const mapDataByProvice = (provinceName: String) => { const mapDataByProvice = (provinceName: String) => {
// let listData = [ let listData = [
// { // 设备租赁分布图的数据
// name: "广东省", {
// selfCount: 123, name: "广东省",
// toCount: 300, selfCount: 123,
// inCount: 987 toCount: 300,
// }, inCount: 987
// { },
// name: "广西壮族自治区", {
// selfCount: 23, name: "广西壮族自治区",
// toCount: 55, selfCount: 23,
// inCount: 278 toCount: 55,
// }, inCount: 278
// { },
// name: "云南省", {
// selfCount: 256, name: "云南省",
// toCount: 2456, selfCount: 256,
// inCount: 745 toCount: 2456,
// }, inCount: 745
// { },
// name: "贵州省", {
// selfCount: 963, name: "贵州省",
// toCount: 4521, selfCount: 963,
// inCount: 963 toCount: 4521,
// } inCount: 963
// ] }
]
const curItem: any = listData.find((ele: any) => ele.name.slice(0, 2) == provinceName) const curItem: any = listData.find((ele: any) => ele.name.slice(0, 2) == provinceName)
return curItem return curItem
} }

38
src/components/customCom/hotProvider.vue
View File

@ -16,8 +16,11 @@
<div class="provider_item" v-for="(item, index) in providerInfo.list" :key="index"> <div class="provider_item" v-for="(item, index) in providerInfo.list" :key="index">
<div class="provider_item_left"> <div class="provider_item_left">
<div class="pro_item_icon" :class="{ 'inThree': index + 1 <= 3, 'afterThree': index + 1 > 3 }"> <div class="pro_item_icon" :class="{ 'inThree': index + 1 <= 3, 'afterThree': index + 1 > 3 }">
<img :src="`/src/assets/img/index${index + 1 <= 3 ? index + 1 : 4}.png`" alt="" <!-- <img :src="`/src/assets/img/index${index + 1 <= 3 ? index + 1 : 4}.png`" alt="" -->
class="pro_item_icon_img"> <img v-if="index == 0" src="/src/assets/img/index1.png" alt="" class="pro_item_icon_img">
<img v-else-if="index == 1" src="/src/assets/img/index2.png" alt="" class="pro_item_icon_img">
<img v-else-if="index == 2" src="/src/assets/img/index3.png" alt="" class="pro_item_icon_img">
<img v-else src="/src/assets/img/index4.png" alt="" class="pro_item_icon_img">
</div> </div>
<div class="pro_item_title overflow"> <div class="pro_item_title overflow">
{{ item.ownCo }} {{ item.ownCo }}
@ -40,7 +43,36 @@ import { apiMaDevInfoHotList } from "http/api/echartApi"
const providerInfo: any = reactive({ const providerInfo: any = reactive({
list: [] list: [
{
ownCo: "中铁一局",
count: 1
},
{
ownCo: "中铁二局",
count: 2
},
{
ownCo: "中铁三局",
count: 3
},
{
ownCo: "中铁四局",
count: 4
},
{
ownCo: "中铁五局",
count: 5
},
{
ownCo: "中铁十一局",
count: 10
},
{
ownCo: "中铁十一局",
count: 10
},
]
}) })
const subActive = ref("provider") const subActive = ref("provider")

4
src/components/echartsCom/Pie3dCom.vue
View File

@ -15,7 +15,7 @@ onMounted(() => {
Highcharts.chart('container', options) Highcharts.chart('container', options)
}) })
const options = { const options:any = {
chart: { chart: {
type: 'pie', type: 'pie',
backgroundColor: 'rgba(0, 0, 0, 0.32)', backgroundColor: 'rgba(0, 0, 0, 0.32)',
@ -50,7 +50,7 @@ const options = {
}, },
series: [{ series: [{
name: '设备数量', name: '设备数量',
data:props.list data:props.list
}] }]
} }

4
src/http/api/echartApi.ts
View File

@ -18,11 +18,11 @@ export function apiMaDevInfoMatypeList() {
} }
// 查询今日订单额以及订单数量: // 查询今日订单额以及订单数量:
export function apiMaOrderInfoTodayList() { export function apiMaOrderInfoTodayList() {
return get('maOrderInfo/today-list', {}) return get('order/maOrderInfo/today-list', {})
} }
// 租赁订单月统计: // 租赁订单月统计:
export function apiMaOrderInfoList() { export function apiMaOrderInfoList() {
return get('maOrderInfo/list', {}) return get('order/maOrderInfo/list', {})
} }
// -- // --
// 获取企业所属对应的机手数量以及机手总人数: // 获取企业所属对应的机手数量以及机手总人数:

4
src/http/index.ts
View File

@ -34,6 +34,8 @@ service.interceptors.response.use(
) )
export function get(url: string, params: any) { export function get(url: string, params: any) {
// 拼接查询字符串 ?platformId=20
url += '?platformId=20'
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
NProgress.start() NProgress.start()
service service
@ -41,7 +43,7 @@ export function get(url: string, params: any) {
.then((res: any) => { .then((res: any) => {
NProgress.done() NProgress.done()
console.log("res-get",res) console.log("res-get",res)
if (res.code == '200') { if (res.code == '0') {
resolve(res.data) resolve(res.data)
} else { } else {
reject(res.data) reject(res.data)

84
src/views/screen/sharePlatform.vue
View File

@ -6,7 +6,7 @@
<img src="@/assets/img/setting.png" /> <img src="@/assets/img/setting.png" />
</div> </div>
<div class="right_title_more_info"> <div class="right_title_more_info">
<span class="wheather">晴转多云 16℃ </span> <span class="weather">晴转多云 16℃ </span>
<span class="time">{{ nowTime }}</span> <span class="time">{{ nowTime }}</span>
</div> </div>
</div> </div>
@ -108,8 +108,9 @@
<div class="bottom_row_center_bar"> <div class="bottom_row_center_bar">
<div class="bottom_row_center_bar_left"> <div class="bottom_row_center_bar_left">
<div class="total_count"> <div class="total_count">
总人数：{{ totalCount }} 总人数：{{ totalCount || "0" }}
</div> </div>
<!-- 机手人数 -->
<barCom v-if="barComProps.xAxisData.length > 0" :domId="1" :title="barComProps.title" <barCom v-if="barComProps.xAxisData.length > 0" :domId="1" :title="barComProps.title"
:titleStyle="barComProps.titleStyle" :xAxisData="barComProps.xAxisData" :titleStyle="barComProps.titleStyle" :xAxisData="barComProps.xAxisData"
:yAxisProps="barComProps.yAxisProps" :seriseData="barComProps.seriseData" :yAxisProps="barComProps.yAxisProps" :seriseData="barComProps.seriseData"
@ -119,6 +120,7 @@
:barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom> :barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom>
</div> </div>
<div class="bottom_row_center_bar_right"> <div class="bottom_row_center_bar_right">
<!-- 租赁订单月统计 -->
<barCom v-if="barComPropsSimple.xAxisData.length > 0" ref="barSimpleRef" :domId="2" <barCom v-if="barComPropsSimple.xAxisData.length > 0" ref="barSimpleRef" :domId="2"
:title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData" :title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
:titleStyle="barComProps.titleStyle" :yAxisProps="barComPropsSimple.yAxisProps" :titleStyle="barComProps.titleStyle" :yAxisProps="barComPropsSimple.yAxisProps"
@ -167,41 +169,55 @@ import {
apiMaLeaseInfoInfoTypeList apiMaLeaseInfoInfoTypeList
} from "http/api/echartApi" } from "http/api/echartApi"
const equipmentCountInfo: any = reactive({ const equipmentCountInfo: any = reactive({
listCount: [], // 平台入驻设备总数
selfCount: "", listCount: [
shelfCount: "" "0", "0", "0", "0" // 默认假数据
],
selfCount: "0",
shelfCount: "0"
}) })
const middleCountList = reactive({ const middleCountList = reactive({
list: [ list: [
{ {
icon: getImg("/src/assets/img/money1.png"), // icon: getImg("/src/assets/img/money1.png"),
icon: new URL("/src/assets/img/money1.png", import.meta.url).href,
count: "", count: "",
title: "今日订单" title: "今日订单"
}, },
{ {
icon: getImg("/src/assets/img/money2.png"), // icon: getImg("/src/assets/img/money2.png"),
icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
count: "", count: "",
title: "累计金额" title: "累计金额"
}, },
{ {
icon: getImg("/src/assets/img/money3.png"), // icon: getImg("/src/assets/img/money3.png"),
icon: new URL("/src/assets/img/money3.png", import.meta.url).href,
count: "", count: "",
title: "在用设备" title: "在用设备"
}, },
{ {
icon: getImg("/src/assets/img/money2.png"), // icon: getImg("/src/assets/img/money2.png"),
icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
count: "", count: "",
title: "待租设备" title: "待租设备"
} }
] ]
}) })
const rentWantRent:any=reactive({ const rentWantRent:any=reactive({
rent:[], rent:[
wantRent:[] "0", "0", "0", "0" // 默认假数据
],
wantRent:[
"0", "0", "0", "0" // 默认假数据
]
}) })
const platFormInfo: any = reactive({ const platFormInfo: any = reactive({
listCount: [], // 平台入驻设备总数
listCount: [
"0", "0", "0", "0" // 默认假数据
],
socailCount: "", socailCount: "",
enterpriseCount: "", enterpriseCount: "",
holdingCount: '' holdingCount: ''
@ -213,7 +229,9 @@ const barComProps = reactive({
color: "#0099FF", color: "#0099FF",
paddingTop: 20 paddingTop: 20
}, },
xAxisData: [], xAxisData: [
"1月","2月","3月"
],
yAxisProps: { yAxisProps: {
type: "value", type: "value",
splitLine: {//是否显示 y轴横线 splitLine: {//是否显示 y轴横线
@ -319,13 +337,23 @@ const barComPropsHorizontal = reactive({
show: false show: false
}, },
}, },
xAxisData: [], xAxisData: [
20, 40, 60, 80, 100
],
yAxisProps: { yAxisProps: {
type: "category", type: "category",
// boundaryGap: false, // boundaryGap: false,
}, },
yAxisData: [], yAxisData: [
seriseData: [],//数据 "装备1", "装备2", "装备3", "装备4", "装备5"
],
seriseData: [
{ value: 120, name: '装备1' },
{ value: 132, name: '装备2' },
{ value: 101, name: '装备3' },
{ value: 134, name: '装备4' },
{ value: 90, name: '装备5' }
],//数据
itemStyle: [//柱状图的默认颜色 渐变 itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#077FBA' }, { offset: 0, color: '#077FBA' },
{ offset: 1, color: '#91FFBE' } { offset: 1, color: '#91FFBE' }
@ -358,7 +386,14 @@ const barComPropsHorizontal = reactive({
} }
}) })
const pie3DList = reactive({ const pie3DList = reactive({
list: [] list: [
// 假数据
{name: 'Chrome', y: 61.41},
{name: 'Internet Explorer', y: 11.84},
{name: 'Firefox', y: 10.85},
{name: 'Edge', y: 4.67},
{name: 'Safari', y: 4.18},
]
}) })
onMounted(() => { onMounted(() => {
iniTapiMaDevInfoList() iniTapiMaDevInfoList()
@ -424,8 +459,8 @@ const iniTapiMaDevInfoMatypeList = async () => {
try { try {
const res: any = await apiMaDevInfoMatypeList() const res: any = await apiMaDevInfoMatypeList()
console.log("apiMaDevInfoMatypeList", res) console.log("apiMaDevInfoMatypeList", res)
middleCountList.list[2].count = res.rent.count middleCountList.list[2].count = res.rent.count || 0
middleCountList.list[3].count = res.use.count middleCountList.list[3].count = res.use.count || 0
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@ -436,10 +471,10 @@ const iniTapiMaOrderInfoTodayList = async () => {
try { try {
const res: any = await apiMaOrderInfoTodayList() const res: any = await apiMaOrderInfoTodayList()
console.log("apiMaOrderInfoTodayList", res) console.log("apiMaOrderInfoTodayList", res)
middleCountList.list[0].count = res[0].count middleCountList.list[0].count = res.count || 0
middleCountList.list[1].count = res[0].money middleCountList.list[1].count = res.money || 0
} catch (error) { } catch (error) {
console.log(error) console.log('err-->', error)
} }
} }
@ -448,7 +483,7 @@ const iniTapiMaOrderInfoList = async () => {
//租赁订单月统计: //租赁订单月统计:
try { try {
const res: any = await apiMaOrderInfoList() const res: any = await apiMaOrderInfoList()
console.log("租赁订单-->", res)
barComPropsSimple.xAxisData = res.map((ele: any) => ele.month) barComPropsSimple.xAxisData = res.map((ele: any) => ele.month)
barComPropsSimple.seriseData = res.map((ele: any) => ele.count) barComPropsSimple.seriseData = res.map((ele: any) => ele.count)
} catch (error) { } catch (error) {
@ -575,11 +610,12 @@ setInterval(() => {
font-size: 16px; font-size: 16px;
display: flex; display: flex;
.wheather { .weather {
padding-right: 34px; padding-right: 34px;
} }
.time { .time {
display: flex; display: flex;
white-space: nowrap;
width: 205px; width: 205px;
} }
} }

4
vite.config.ts
View File

@ -79,11 +79,11 @@ export default ({ mode }: any) => {
// port: Number(envInfo.VITE_PORT), // port: Number(envInfo.VITE_PORT),
// open: envInfo.VITE_OPEN, // open: envInfo.VITE_OPEN,
proxy: { proxy: {
'/proxyApi': { '/proxy': {
target: envInfo.VITE_proxyTarget, target: envInfo.VITE_proxyTarget,
secure: false, secure: false,
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(/^\/proxyApi/, ''), rewrite: (path) => path.replace(/^\/proxy/, '/'),
configure: (proxy, _options) => { configure: (proxy, _options) => {
proxy.on('error', (err, _req, _res) => { proxy.on('error', (err, _req, _res) => {
// console.log('proxy error', err) // console.log('proxy error', err)