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

Compare commits

base: bonus:main
Branches Tags
bonus:main
bonus:master
bonus:dev-sjf-2023-12-3-一期大屏
..
compare: bonus:master
Branches Tags
bonus:master
bonus:dev-sjf-2023-12-3-一期大屏
bonus:main

21 Commits
main ... master

Author SHA1 Message Date
BianLzhaoMin 300f749dee 代码优化 2024-10-08 13:42:33 +08:00
BianLzhaoMin be300522e2 漏洞问题修复 2024-10-08 13:32:24 +08:00
binbin_pan 6065429c25 大屏左下角空白解决 2024-05-22 17:50:12 +08:00
binbin_pan c77594bf9b 大屏问题修复 2024-05-20 15:39:56 +08:00
binbin_pan 22601a7274 修改地图为默认就展示 2024-05-16 17:39:18 +08:00
binbin_pan 3853a6e5e6 接口联调 2024-03-27 16:19:35 +08:00
binbin_pan b8e64b7d8d 接口联调 2024-03-27 12:02:15 +08:00
binbin_pan 2582d721f3 接口联调 2024-03-27 10:10:34 +08:00
binbin_pan 88b4f8f016 接口联调 2024-03-22 15:59:49 +08:00
binbin_pan 9e23127ce3 接口联调 2024-03-21 17:33:54 +08:00
binbin_pan 5cb95b07ed 接口联调 2024-03-20 17:59:21 +08:00
binbin_pan a9bd1b60ca 接口联调 2024-03-20 17:45:15 +08:00
binbin_pan 5fd4428129 接口联调 2024-03-20 11:16:34 +08:00
binbin_pan e19eddb1f9 接口联调 2024-03-19 18:07:19 +08:00
binbin_pan 9279653332 接口联调 2024-03-18 18:08:23 +08:00
binbin_pan d3e7abbaff 接口联调 2024-03-18 15:24:40 +08:00
binbin_pan 0b8c38a691 测试大屏 2024-03-15 16:37:36 +08:00
binbin_pan 8d2b007ad0 样式调整 2024-03-14 17:04:37 +08:00
binbin_pan 69c02a0d82 更换图标 2024-03-14 16:12:05 +08:00
binbin_pan f6bf1da300 样式调整 2024-03-14 16:08:24 +08:00
binbin_pan 0c62a7c904 更换图标+实时显示时间 2024-03-14 15:40:59 +08:00
24 changed files with 14065 additions and 37695 deletions
Show Stats 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"

5
env/.env.production vendored
View File

@ -3,7 +3,10 @@ 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 = 'https://test-rental.zhgkxt.com/proxy'
# VITE_API_URL = 'http://localhost:8080/proxy'
# 百度地图key # 百度地图key
VITE_AK = "cClgLBaLgGUdQDilX9dGvieL" VITE_AK = "cClgLBaLgGUdQDilX9dGvieL"
# 百度地图版本 # 百度地图版本

3
env/.env.sit vendored
View File

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

12
index.html
View File

@ -2,16 +2,16 @@
<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>Vite App</title> <title>机具租赁共享平台</title>
<link rel="icon" href="//test-hzdg-1259451974.cos.ap-guangzhou.myqcloud.com/d133bcbb33438a196a8ccd4eda65934f1742495961134923776354.png" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script> <script async type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
<script src="http://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script> <script src="https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<script src="http://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script> <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
</html> </html>

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"

3226
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

107
src/components/customCom/equipmentDialog.vue
View File

@ -6,24 +6,30 @@
</div> </div>
<div class="sub_title"> <div class="sub_title">
<span class="title_text">{{detailsInfo.maName}}</span> <span class="title_text">{{detailsInfo.maName}}</span>
<span class="sub_status">({{detailsInfo.maStatus}})</span> <!-- <span class="sub_status">({{detailsInfo.maStatus}})</span> -->
<span class="sub_status" v-if="detailsInfo.maStatus === '20'">(待租)</span>
<span class="sub_status" v-else-if="detailsInfo.maStatus === '110'">(在租)</span>
<span class="sub_status" v-else-if="detailsInfo.maStatus === '10'">(自有)</span>
</div> </div>
<div class="more_info"> <div class="more_info">
<!-- <span style="padding-left: 0;">操作重量：7吨 </span> --> <!-- <span style="padding-left: 0;">操作重量：7吨 </span> -->
<!-- <span> <!-- <span>
铲斗容量：2立方米 铲斗容量：2立方米
</span> --> </span> -->
<span> <span v-if="detailsInfo.maStatus === '110'">
租赁方：{{detailsInfo.needCompany}} 租赁方：{{detailsInfo.receiverName || '暂无'}}
</span> </span>
<span> <span v-if="detailsInfo.maStatus === '110'">
租赁日期：{{ detailsInfo.planStartTime }}&nbsp;{{ detailsInfo.duration }} 租赁日期：{{ detailsInfo.planStartTime || '暂无' }}
</span> </span>
<span v-if="detailsInfo.maStatus === '110'">租赁时长：{{ detailsInfo.duration }}{{
detailsInfo.leasingMethod === null ? '暂无' : detailsInfo.leasingMethod === 0 ? '天' : '月'
}}</span>
</div> </div>
<div class="time_select"> <div class="time_select">
<el-date-picker v-model="timeRange" size="media" type="datetimerange" <el-date-picker v-model="timeRange" size="default" type="datetimerange" :unlink-panels="true"
range-separator="To" start-placeholder="Start date" end-placeholder="End date" /> range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="primary" style="margin-left: 12px;" size="media" @click="searchByTimeFn">查询</el-button> <el-button type="primary" style="margin-left: 12px;" size="default" @click="searchByTimeFn">查询</el-button>
</div> </div>
<div class="map_line_out"> <div class="map_line_out">
<mapLine ref="mapLineRef"></mapLine> <mapLine ref="mapLineRef"></mapLine>
@ -40,15 +46,16 @@ import moment from "moment";
const mapLineShow = ref(false) const mapLineShow = ref(false)
const mapLineRef = ref() const mapLineRef = ref()
const timeRange = ref<[Date, Date]>([ const timeRange = ref<[Date, Date]>([
new Date(2022, 11, 10, 10, 10), moment().subtract(3, 'month').toDate(),
new Date(2023, 12, 19, 10, 10), new Date(),
]) ])
const detailsInfo = reactive({ const detailsInfo = reactive({
duration: '', duration: '',
maName: '', maName: '',
maStatus: '', maStatus: '',
needCompany: '', receiverName: '',
planStartTime: '' planStartTime: '',
leasingMethod: null
}) })
// const shortcuts = [ // const shortcuts = [
// { // {
@ -84,11 +91,10 @@ const initApiBmaDevInfoList = async (maId:any) => {
try { try {
const res:any = await apiBmaDevInfoList(maId) const res:any = await apiBmaDevInfoList(maId)
console.log("apiBmaDevInfoList", res)
detailsInfo.duration = res.duration detailsInfo.duration = res.duration
detailsInfo.maName = res.maName detailsInfo.maName = res.maName
detailsInfo.maStatus = res.maStatus detailsInfo.maStatus = res.maStatus
detailsInfo.needCompany = res.needCompany detailsInfo.receiverName = res.receiverName
detailsInfo.planStartTime = res.planStartTime detailsInfo.planStartTime = res.planStartTime
} catch (error) { } catch (error) {
@ -106,10 +112,22 @@ const searchByTimeFn=()=>{
// mapLineRef.value.initMapLine(params) // mapLineRef.value.initMapLine(params)
initApiBmCompanyInfoTimeListTime(params) initApiBmCompanyInfoTimeListTime(params)
} }
const open = (maId:any) => {
console.log("maIdmaId",maId) let startLonLat: any = reactive([
{
lon: null,
lat: null,
}
])
const open = (data:any) => {
// console.log("data",data)
if (!data) return
// 从data.value中获取初始经纬度
startLonLat[0].lon = data.value[0]
startLonLat[0].lat = data.value[1]
mapLineShow.value = true mapLineShow.value = true
maId=maId maId = data.name
initApiBmaDevInfoList(maId) initApiBmaDevInfoList(maId)
let params={ let params={
startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'), startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'),
@ -123,27 +141,46 @@ const open = (maId:any) => {
}) })
} }
const initApiBmCompanyInfoTimeListTime = async (val: any) => { const initApiBmCompanyInfoTimeListTime = async (val: any) => {
try {
const res: any = await apiBmCompanyInfoTimeListTime(val)
// 假数据
// const res = [
// {
// "id": 1,
// "lat": 31.22,
// "lon": 121.48,
// "time": "2022-12-10 10:10:10"
// },
// // {
// // "id": 2,
// // "lat": 29.588885,
// // "lon": 106.621131,
// // "time": "2023-12-19 10:10:10"
// // },
// // {
// // "id": 3,
// // "lat": 39.904989,
// // "lon": 116.405285,
// // "time": "2023-12-19 10:10:10"
// // },
// {
// "id": 4,
// "lat": 31.820587,
// "lon": 117.227219,
// "time": "2023-12-19 10:10:10"
// }
// ]
try { let startLonLatObj = JSON.parse(JSON.stringify(startLonLat[0]))
const res: any = await apiBmCompanyInfoTimeListTime(val)
console.log("res-apiBmCompanyInfoTimeListTime",res)
// domShow.value = true
// console.log("apiBmCompanyInfoTimeListTime", res)
// res.forEach((ele: any) => {
// linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
// })
mapLineRef.value.initMapLine(res,val.id)
// nextTick(() => {
// initMap()
// centerPoint = getcenterpoiont(res[0], res[res.length - 1])
// console.log("centerPoint", centerPoint)
// initCustomDot(centerPoint)
// })
} catch (error) { res.unshift(startLonLatObj)
} // console.log("经纬度res-->>>",res)
mapLineRef.value.initMapLine(res, val.id)
} catch (error) {
console.log('err-->>>', error)
}
} }
defineExpose({ defineExpose({

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

@ -12,7 +12,8 @@
</div> </div>
<!-- <h1>{{ mapProps.seriesData }}</h1> --> <!-- <h1>{{ mapProps.seriesData }}</h1> -->
<div class="right_map_container"> <div class="right_map_container">
<mapEcharts v-if="mapProps.seriesData.length > 0" ref="mapEchartsRef" :jsonData="mapProps.jsonData" <mapEcharts ref="mapEchartsRef"
:idType="mapProps.idType" :jsonData="mapProps.jsonData"
:itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle" :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
:emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo" :emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps" :rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
@ -65,6 +66,7 @@ import gdJSON from './mapData/gd.json'
import gzJSON from './mapData/gz.json' import gzJSON from './mapData/gz.json'
import ynJSON from './mapData/yn.json' import ynJSON from './mapData/yn.json'
import hnJSON from './mapData/hn.json' import hnJSON from './mapData/hn.json'
import szJSON from './mapData/sz.json'
import { apiBmCompanyInfoColtdList } from "http/api/echartApi" import { apiBmCompanyInfoColtdList } from "http/api/echartApi"
const mapEchartsRef = ref() const mapEchartsRef = ref()
const equipmentDialogRef = ref() const equipmentDialogRef = ref()
@ -74,12 +76,7 @@ const navInfo = reactive({
{ {
text: "全部", text: "全部",
navId: "0", navId: "0",
jsonData: xnallJSON jsonData: xnallJSON,
},
{
text: "广西电网",
navId: "1",
jsonData: gxJSON
}, },
{ {
text: "广东电网", text: "广东电网",
@ -87,32 +84,39 @@ const navInfo = reactive({
jsonData: gdJSON jsonData: gdJSON
}, },
{ {
text: "贵州电网", text: "广西电网",
navId: "3", navId: "1",
jsonData: gzJSON jsonData: gxJSON
}, },
{ {
text: "云南电网", text: "云南电网",
navId: "4", navId: "4",
jsonData: ynJSON jsonData: ynJSON
}, },
{
text: "贵州电网",
navId: "3",
jsonData: gzJSON
},
{ {
text: "海南电网", text: "海南电网",
navId: "5", navId: "5",
jsonData: hnJSON jsonData: hnJSON
}, },
{ // {
text: "储能公司", // text: "储能公司",
navId: "6", // navId: "6",
}, // },
{ {
text: "深圳供电局", text: "深圳供电局",
navId: "7" navId: "7",
jsonData: szJSON
}, },
{ // {
text: "超高压公司", // text: "超高压公司",
navId: "8" // navId: "8"
} // }
] ]
}) })
@ -155,14 +159,12 @@ const mapProps = reactive({
borderColor: "rgba(21, 29, 56,0)" borderColor: "rgba(21, 29, 56,0)"
}, },
tooltipFormat: (params: any) => { tooltipFormat: (params: any) => {
console.log("params11", params)
const curItem = mapDataByProvice(params.name.slice(0, 2)) const curItem = mapDataByProvice(params.name.slice(0, 2))
console.log("curitemcuritem", curItem)
if (!curItem) { if (!curItem) {
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}
@ -181,7 +183,7 @@ const mapProps = reactive({
return fromatStr return fromatStr
}, },
itemColorFormat: (params: any) => { itemColorFormat: (params: any) => {
console.log("params001", params) // console.log("params001", params)
if (params.value[2] ==2) { if (params.value[2] ==2) {
return '#00ff31'; return '#00ff31';
} else if (params.value[2] ==1) { } else if (params.value[2] ==1) {
@ -191,21 +193,25 @@ const mapProps = reactive({
} }
}, },
effectScatterCallBack: (params: any) => { effectScatterCallBack: (params: any) => {
console.log("equipmentDialogRef999", params.data.name) console.log("equipmentDialogRef999", params)
equipmentDialogRef.value.open(params.data.name) equipmentDialogRef.value.open(params.data)
}, },
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: 240314000002, value: [112.48461, 23.05196, 1] },
// { name: '南宁', value: [107.45, 22.139856, 1] }, // { name: 240314000003, value: [110.130214, 23.018978, 1] },
// { name: '贵阳', value: [106.7, 26.36, 1] }, // { name: 240314000004, value: [115.261081, 23.139856, 1] },
// { name: '昆明', value: [102.33, 24.23, 1] } , // { name: 240314000005, value: [107.45, 22.139856, 1] },
// { name: '海口', value: [110.33,19.823, 1] }] // { name: 240314000006, value: [106.7, 26.36, 1] },
// { name: 240314000007, value: [102.33, 24.23, 1] },
// { name: 240314000001, 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: "广东省", // name: "广东省",
// selfCount: 123, // selfCount: 123,
@ -229,6 +235,12 @@ const mapDataByProvice = (provinceName: String) => {
// selfCount: 963, // selfCount: 963,
// toCount: 4521, // toCount: 4521,
// inCount: 963 // inCount: 963
// },
// {
// name: "海南省",
// selfCount: 123,
// toCount: 300,
// inCount: 987
// } // }
// ] // ]
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)
@ -250,67 +262,57 @@ onMounted(() => {
}) })
const iniTapibmCompanyInfoColtdList = async () => { const iniTapibmCompanyInfoColtdList = async () => {
//设备租赁分布图 //设备租赁分布图 10: 自有, 20: 待租, 110: 在租
try { try {
listData = [] listData = []
let seriresData: any = [] let seriresData: any = []
const res: any = await apiBmCompanyInfoColtdList() const res: any = await apiBmCompanyInfoColtdList()
console.log("apiBmCompanyInfoColtdList", res) // console.log('🚀 ~ iniTapibmCompanyInfoColtdList ~ res:', res);
const uniqueInfo: any = {} const uniqueInfo: any = {}
res.forEach((ele: any, index: any) => { res.forEach((ele: any, index: any) => {
let item: any = {} let item: any = {}
item.name = ele.companyName item.name = ele.companyName
ele.coltdVo.forEach((eleS: any) => { ele.coltdVo.forEach((eleS: any) => {
console.log() if (eleS.status === "110") {
if (eleS.status == "在租") { item.inCount = eleS.count
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat), 3]
})
uniqueInfo[subEle.maId] = true
}
})
} else if (eleS.status === "20") {
item.toCount = eleS.count
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat), 2]
})
uniqueInfo[subEle.maId] = true
}
})
} else if (eleS.status === "10") {
item.selfCount = eleS.count item.selfCount = eleS.count
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat), 1]
})
uniqueInfo[subEle.maId] = true
}
})
} }
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,3]
})
uniqueInfo[subEle.maId] = true
}
})
}) })
item.toCount = ele.coltdVo.forEach((eleS: any) => {
if (eleS.status == "待租") {
item.toCount = ele.count
}
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,2]
})
uniqueInfo[subEle.maId] = true
}
})
})
item.inCount = ele.coltdVo.forEach((eleS: any) => {
if (eleS.status == "自有") {
item.inCount = ele.count
}
eleS.list.forEach((subEle: any) => {
if (!uniqueInfo[subEle.maId]) {
seriresData.push({
name: subEle.maId,
value: [Number(subEle.lon), Number(subEle.lat),eleS.count,1]
})
uniqueInfo[subEle.maId] = true
}
})
})
console.log("itemitem", item)
listData.push(item) listData.push(item)
}) })
mapProps.seriesData = seriresData mapProps.seriesData = seriresData
console.log("listData", res, listData, seriresData)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
@ -371,6 +373,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
line-height: 28px; line-height: 28px;
cursor: pointer;
} }
} }

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

@ -4,7 +4,7 @@
<div class="sub_title" @click="subTab('provider')" :class="{ <div class="sub_title" @click="subTab('provider')" :class="{
'activeSub': subActive == 'provider' 'activeSub': subActive == 'provider'
}"> }">
热门供应商 热门出租方
</div> </div>
<div class="sub_title" @click="subTab('hotEquipment')" :class="{ <div class="sub_title" @click="subTab('hotEquipment')" :class="{
'activeSub': subActive == 'hotEquipment' 'activeSub': subActive == 'hotEquipment'
@ -16,11 +16,14 @@
<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="">
<img v-else-if="index == 1" src="/src/assets/img/index2.png" alt="">
<img v-else-if="index == 2" src="/src/assets/img/index3.png" alt="">
<img v-else src="/src/assets/img/index4.png" alt="">
</div> </div>
<div class="pro_item_title overflow"> <div class="pro_item_title overflow">
{{ item.ownCo }} {{ item.organizeName }}
</div> </div>
</div> </div>
<div class="device_count"> <div class="device_count">
@ -29,7 +32,7 @@
</div> </div>
</div> </div>
<div class="cloud_words_out" v-else> <div class="cloud_words_out" v-else>
<CloudWords></CloudWords> <CloudWords :data="data"></CloudWords>
</div> </div>
</div> </div>
</template> </template>
@ -38,9 +41,38 @@ import CloudWords from "components/echartsCom/CloudWords.vue"
import { apiMaDevInfoHotList } from "http/api/echartApi" import { apiMaDevInfoHotList } from "http/api/echartApi"
const data: any = ref([])
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")
@ -55,6 +87,12 @@ const InitApiMaDevInfoHotList = async () => {
const res: any = await apiMaDevInfoHotList() const res: any = await apiMaDevInfoHotList()
console.log("apiMaDevInfoHotList", res) console.log("apiMaDevInfoHotList", res)
providerInfo.list = res providerInfo.list = res
res[0].itemNames.map((item: any) => {
data.value.push({
name: item,
value: Math.floor(Math.random() * (519 - 199 + 1) + 169)
})
})
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@ -87,7 +125,7 @@ onBeforeMount(() => {
color: $main-color; color: $main-color;
padding-top: 24px; padding-top: 24px;
padding-left: 26px; padding-left: 26px;
cursor: pointer;
} }
.activeSub { .activeSub {

1194
src/components/customCom/mapData/sz.json Normal file
View File

File diff suppressed because it is too large Load Diff

46424
src/components/customCom/mapData/xnall.json
View File

File diff suppressed because it is too large Load Diff

100
src/components/echartsCom/CloudWords.vue
View File

@ -5,10 +5,20 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts' import * as echarts from 'echarts'
import jsonData from "./jsonData/china.json" import jsonData from "./jsonData/china.json"
import { defineProps } from 'vue'
// 接收父组件传递的参数
const props = defineProps({
data: {
type: Array,
default: () => []
}
})
console.log("props--->", props.data)
let myChart: any = null let myChart: any = null
const randomData = () => { const randomData = () => {
var a = Math.random(); let a = Math.random();
if (a > 0 && a <= 0.333) if (a > 0 && a <= 0.333)
return 0; return 0;
if (a > 0.333 && a <= 0.666) if (a > 0.333 && a <= 0.666)
@ -39,42 +49,70 @@ const colorData = (value: any) => {
} }
//110 35 14/18 //110 35 14/18
var geoCoordMap: any = { // let geoCoordMap: any = {
"挖掘机": [108.99, 36.04], // "挖掘机": [108.99, 36.04],
"洒水车": [113.53, 44.3], // "洒水车": [113.53, 44.3],
"牵引车": [106.21, 27.35], // "牵引车": [106.21, 27.35],
"平地机": [95.61, 44.57], // "平地机": [95.61, 44.57],
"应用支撑": [104.58, 39.69], // "应用支撑": [104.58, 39.69],
"掘地机": [101.39, 47.5], // "掘地机": [101.39, 47.5],
"自卸车": [97.53, 31.89], // "自卸车": [97.53, 31.89],
"叉车": [112.46, 31.65], // "叉车": [112.46, 31.65],
"开钩机": [92.65, 36.0], // "开钩机": [92.65, 36.0],
"数据基础": [122.15, 32.99], // "数据基础": [122.15, 32.99],
"其他设备": [123.89, 40.34], // "其他设备": [123.89, 40.34],
}; // };
//0-500 //0-500
var data = [ // let data = [
{ name: "挖掘机", value: 501 }, // { name: "挖掘机", value: 501 },
{ name: "洒水车", value: 400 }, // { name: "洒水车", value: 400 },
{ name: "牵引车", value: 460 }, // { name: "牵引车", value: 460 },
{ name: "平地机", value: 300 }, // { name: "平地机", value: 300 },
{ name: "应用支撑", value: 360 }, // { name: "应用支撑", value: 360 },
{ name: "掘地机", value: 460 }, // { name: "掘地机", value: 460 },
{ name: "自卸车", value: 330 }, // { name: "自卸车", value: 330 },
{ name: "叉车", value: 210 }, // { name: "叉车", value: 210 },
{ name: "开钩机", value: 200 }, // { name: "开钩机", value: 200 },
{ name: "数据基础", value: 440 }, // { name: "数据基础", value: 440 },
{ name: "其他设备", value: 240 }, // { name: "其他设备", value: 240 },
// ];
// 先过滤name相同的, 然后再截取11个
const data: any = props.data.filter((item: any, index: any, self: any) => {
return self.findIndex((s: any) => s.name === item.name) === index
}).slice(0, 11)
// console.log("data--->", data)
const coordinates = [
[108.99, 36.04],
[113.53, 44.3],
[106.21, 27.35],
[95.61, 44.57],
[104.58, 39.69],
[101.39, 47.5],
[97.53, 31.89],
[112.46, 31.65],
[92.65, 36.0],
[122.15, 32.99],
[123.89, 40.34],
]; ];
const geoCoordMap: any = {}
for (let i = 0; i < data.length; i++) {
geoCoordMap[data[i].name] = coordinates[i]
}
// console.log("geoCoordMap--->", geoCoordMap)
var convertData = function (data: any) {
var res = []; const convertData = function (data: any) {
for (var i = 0; i < data.length; i++) { let res = [];
var geoCoord = geoCoordMap[data[i].name]; for (let i = 0; i < data.length; i++) {
let geoCoord = geoCoordMap[data[i].name];
if (geoCoord) { if (geoCoord) {
res.push({ res.push({
label: { label: {
@ -110,7 +148,7 @@ const option: any = {
min: 0, min: 0,
max: 500, max: 500,
inRange: { inRange: {
color: ['#0e2a3f'], color: ['#3773FF', '#FF8F00', '#FB6716']
} }
}, },

23
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)',
@ -32,7 +32,7 @@ const options = {
text: '施工单位自有设备详情', text: '施工单位自有设备详情',
margin: 50, margin: 50,
style: { style: {
color: "#0099FF", color: "#66E0FF",
}, },
align: 'left', align: 'left',
x: 0, x: 0,
@ -48,10 +48,27 @@ const options = {
} }
} }
}, },
legend: {
itemStyle: {
color: '#f0f0f0',
},
itemHoverStyle: {
color: '#66E0FF',
},
itemHiddenStyle: {
color: '#999',
},
},
series: [{ series: [{
name: '设备数量', name: '设备数量',
data:props.list data:props.list
}] }],
accessibility:{
enabled: false
},
credits: {
enabled: false
},
} }

2
src/components/echartsCom/barCom.vue
View File

@ -196,7 +196,7 @@ const option = {
}, },
series: handleSeriesData(), series: handleSeriesData(),
formatter: function (params: any) { formatter: function (params: any) {
console.log("parmas", params) // console.log("parmas", params)
return propsVal.formatCallBack(params) return propsVal.formatCallBack(params)
} }
}; };

23
src/components/echartsCom/mapEcharts.vue
View File

@ -88,10 +88,15 @@ const propsVal: any = defineProps({
}, },
}) })
const initEcharts = () => { const initEcharts = () => {
echarts.registerMap('guangdong', propsVal.jsonData) // console.log("propsval__>>>", propsVal.idType, propsVal)
const name = propsVal.jsonData.features[0].properties.name
echarts.registerMap(name, propsVal.jsonData)
nextTick(() => { nextTick(() => {
const domitem = document.getElementById("mapEcharts" + propsVal.idType) const domitem: any = document.getElementById("mapEcharts" + propsVal.idType)
const map = echarts.init(domitem, null, { if (echarts.getInstanceByDom(domitem)) {// 销毁之前的echarts实例
echarts.dispose(domitem);
}
const map = echarts.init(domitem, null, {// 初始化echarts实例
renderer: 'canvas', renderer: 'canvas',
}) })
const option = { const option = {
@ -101,9 +106,14 @@ const initEcharts = () => {
trigger: 'item',//触发条件 trigger: 'item',//触发条件
}, },
geo: { geo: {
map: 'guangdong', map: name,
zoom: 1, zoom: 1,
roam: true, roam: true,
// 缩放限制
scaleLimit: {
min: 0.5,
max: 99
},
label: propsVal.labelInfo, label: propsVal.labelInfo,
// 所有地图的区域颜色 // 所有地图的区域颜色
itemStyle: propsVal.itemStyle, itemStyle: propsVal.itemStyle,
@ -120,7 +130,7 @@ const initEcharts = () => {
}, },
series: [ series: [
{ {
name: 'Top 5', name,
type: 'effectScatter', type: 'effectScatter',
colorBy: 'series', colorBy: 'series',
effectType: 'ripple', effectType: 'ripple',
@ -164,8 +174,7 @@ const chartClickEventListener = (mychart: any) => {
const chagneJSON = (item: any) => { const chagneJSON = (item: any) => {
console.log("propsval", propsVal) // propsVal.idType = item.navId
propsVal.idType = item.navId
setTimeout(() => { setTimeout(() => {
initEcharts() initEcharts()
}) })

43
src/components/mapBaidu/mapLine.vue
View File

@ -9,41 +9,39 @@
let map: any = null let map: any = null
let centerPoint: any = null let centerPoint: any = null
let domId = ref("0") let domId = ref(0)
let domShow = ref(false) let domShow = ref(false)
let animiationLineList = [] let animiationLineList = []
let props = defineProps({ const state = reactive({
lineStyle: { lineStyle: {
type: Object, strokeColor: "#0e83ed",
default: { strokeWeight: 3,
strokeColor: "#0e83ed", strokeOpacity: 0.6,
strokeWeight: 4
}
} }
}) })
onMounted(() => { onMounted(() => {
console.log("map", "map") // console.log("map", "map")
}) })
let linePointList: any = [] let linePointList: any = []
const initMap = () => { const initMap = () => {
map = new BMapGL.Map("equipmentIdMap" + domId.value); map = new BMapGL.Map("equipmentIdMap" + domId.value);
map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18); map.centerAndZoom(new BMapGL.Point(), 18);
console.log("map", map) console.log("map", map)
map.enableScrollWheelZoom(); map.enableScrollWheelZoom();
setTimeout(() => { setTimeout(() => {
// initCustomDot() // initCustomDot()
const startIcon = { const startIcon = {
imgUrl: '/src/assets/img/mapStart.png', imgUrl: new URL('/src/assets/img/mapStart.png', import.meta.url).href,
position: [116.3964, 39.9093], position: [linePointList[0].lng, linePointList[0].lat],
size: [60, 60] size: [50, 50]
} }
const endIcon = { const endIcon = {
imgUrl: '/src/assets/img/mapStart.png', imgUrl: new URL('/src/assets/img/mapEnd.png', import.meta.url).href,
position: [116.3964, 39.9093], position: [linePointList[linePointList.length - 1].lng, linePointList[linePointList.length - 1].lat],
size: [60, 60] size: [50, 50]
} }
initIcon(startIcon.imgUrl, startIcon.position, startIcon.size) initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
@ -56,10 +54,10 @@ const initMap = () => {
const initCustomDot = (centerPoint: any) => { const initCustomDot = (centerPoint: any) => {
function ComplexCustomOverlay(centerPoint) { function ComplexCustomOverlay(centerPoint: any) {
} }
ComplexCustomOverlay.prototype = new BMapGL.Overlay(); ComplexCustomOverlay.prototype = new BMapGL.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) { ComplexCustomOverlay.prototype.initialize = function (map: any) {
const div = this._div = document.createElement("div"); const div = this._div = document.createElement("div");
div.style.position = "absolute"; div.style.position = "absolute";
div.style.width = "30px"; div.style.width = "30px";
@ -93,12 +91,12 @@ const initCustomDot = (centerPoint: any) => {
const initPolylineAnimation = () => { const initPolylineAnimation = () => {
var pl = new BMapGL.Polyline(linePointList, props.lineStyle); var pl = new BMapGL.Polyline(linePointList, state.lineStyle);
// setTimeout('start()', 3000); // setTimeout('start()', 3000);
const trackAni = new BMapGLLib.TrackAnimation(map, pl, { const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
overallView: true, overallView: true,
tilt: 30, tilt: 30,
duration: 2000, duration: 4000,
delay: 300, delay: 300,
}); });
start() start()
@ -110,7 +108,8 @@ const initPolylineAnimation = () => {
} }
const initIcon = (imgUrl: any, position: any, size: any) => { const initIcon = (imgUrl: any, position: any, size: any) => {
var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(60, 60)); // var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(50, 50));
var myIcon = new BMapGL.Icon(imgUrl, new BMapGL.Size(50, 50));
// 创建Marker标注，使用小车图标 // 创建Marker标注，使用小车图标
var pt = new BMapGL.Point(...position); var pt = new BMapGL.Point(...position);
var marker = new BMapGL.Marker(pt, { var marker = new BMapGL.Marker(pt, {
@ -143,11 +142,11 @@ const getcenterpoiont = (pointStart: any, pointEnd: any) => {
const pointcenter = new BMapGL.Point(lngcenter, latcenter); const pointcenter = new BMapGL.Point(lngcenter, latcenter);
return pointcenter; return pointcenter;
} }
const initMapLine = (res: any, id: any) => { const initMapLine = (res: any, id: any) => {
domId.value = id domId.value = id
domShow.value = false domShow.value = false
linePointList = []
res.forEach((ele: any) => { res.forEach((ele: any) => {
linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat))) linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
}) })
@ -156,7 +155,7 @@ const initMapLine = (res: any, id: any) => {
setTimeout(() => { setTimeout(() => {
initMap() initMap()
centerPoint = getcenterpoiont(res[0], res[res.length - 1]) centerPoint = getcenterpoiont(res[0], res[res.length - 1])
console.log("centerPoint", centerPoint)
initCustomDot(centerPoint) initCustomDot(centerPoint)
}) })
}) })

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

@ -2,15 +2,15 @@ import { get, post } from '../index'
// 平台入驻设备总数 // 平台入驻设备总数
export function apiMaDevInfoList() { export function apiMaDevInfoList() {
return get('maDevInfo/list', {}) return get('item-center/maDevInfo/list', {})
} }
// 查询自有以及上架可租设备数量 // 查询自有以及上架可租设备数量
export function apiMaDevInfoTypeList() { export function apiMaDevInfoTypeList() {
return get('maDevInfo/type-list', {}) return get('item-center/maDevInfo/type-list', {})
} }
// 获取企业所属设备状态为自有的设备数量: // 获取企业所属设备状态为自有的设备数量:
export function apiMaDevInfoCompanyList() { export function apiMaDevInfoCompanyList() {
return get('maDevInfo/company-list', {}) return get('item-center/maDevInfo/company-list', {})
} }
// 查询在租以及待租设备数量: // 查询在租以及待租设备数量:
export function apiMaDevInfoMatypeList() { export function apiMaDevInfoMatypeList() {
@ -18,34 +18,34 @@ 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', {})
} }
// -- // --
// 获取企业所属对应的机手数量以及机手总人数: // 获取企业所属对应的机手数量以及机手总人数:
export function apiBmMachinistInfoList() { export function apiBmMachinistInfoList() {
return get('bmMachinistInfo/list', {}) return get('item-center/maDevInfo/enterprise-list', {})
} }
// 根据企业类型查询对应数量以及总数量: // 根据企业类型查询对应数量以及总数量:
export function apiBmCompanyInfoTypeList() { export function apiBmCompanyInfoTypeList() {
return get('bmCompanyInfo/type-list', {}) return get('user-service/bmCompanyInfo/type-list', {})
} }
export function apiMaDevInfoMaList() { export function apiMaDevInfoMaList() {
return get('maDevInfo/ma-list', {}) return get('item-center/maDevInfo/ma-list', {})
} }
// ====== // ======
// 根据求出租信息查询对应的数量: // 根据求出租信息查询对应的数量:
export function apiMaLeaseInfoInfoTypeList() { export function apiMaLeaseInfoInfoTypeList() {
return get('maLeaseInfo/type-list', {}) return get('order/maOrderInfo/type-list', {})
} }
// 查询公司对应的热门设备数量: // 查询公司对应的热门设备数量:
export function apiMaDevInfoHotList() { export function apiMaDevInfoHotList() {
return get('maDevInfo/hot-list', {}) return get('order/maOrderInfo/hot-list', {})
} }
@ -53,18 +53,14 @@ export function apiMaDevInfoHotList() {
// === // ===
// 设备租赁分布图 // 设备租赁分布图
export function apiBmCompanyInfoColtdList() { export function apiBmCompanyInfoColtdList() {
return get('bmCompanyInfo/coltd-list', {}) return get('user-service/bmCompanyInfo/coltd-list', {})
} }
// 根据设备id查询设备详情相关信息 // 根据设备id查询设备详情相关信息
export function apiBmaDevInfoList(maId:any) { export function apiBmaDevInfoList(maId:any) {
return get(`maDevInfo/list/${maId}`,{}) return get(`item-center/maDevInfo/ma-list/${maId}`,{})
} }
// 根据时间查询设备历史经纬度 // 根据时间查询设备历史经纬度
export function apiBmCompanyInfoTimeListTime(params:any) { export function apiBmCompanyInfoTimeListTime(params:any) {
const urlStr= `bmCompanyInfo/time-list/${params.startTime}/${params.endTime}/${params.id}` const urlStr= `user-service/bmCompanyInfo/time-list/${params.startTime}/${params.endTime}/${params.id}`
return get(urlStr,{}) return get(urlStr,{})
} }

31
src/http/index.ts
View File

@ -3,6 +3,7 @@
import axios from 'axios' import axios from 'axios'
import NProgress from 'nprogress' import NProgress from 'nprogress'
import { useStore } from 'store/main' import { useStore } from 'store/main'
import { ElMessage } from 'element-plus'
const store = useStore() const store = useStore()
// const CancelToken = axios.CancelToken // const CancelToken = axios.CancelToken
// const source = CancelToken.source() // const source = CancelToken.source()
@ -15,8 +16,12 @@ const service = axios.create({
service.interceptors.request.use( service.interceptors.request.use(
(config) => { (config) => {
config.headers['Authorization'] = store.token const jdCloud = JSON.parse(localStorage.getItem('jdcloud')).token || null
return config if (jdCloud) {
config.headers['Authorization'] = jdCloud
}
return config
}, },
(error) => { (error) => {
return error return error
@ -25,23 +30,37 @@ service.interceptors.request.use(
// 响应拦截 // 响应拦截
service.interceptors.response.use( service.interceptors.response.use(
(res) => { (res) => {
return res.data const code = res.data.code || 200
if (code === 401) {
ElMessage({
showClose: false,
message: '登录状态已过期请重新登录',
type: 'error',
})
window.location.href = 'https://test-rental.zhgkxt.com/mall-view/'
} else {
return res.data
}
}, },
(error) => { (error) => {
console.log('error-异常', error) console.log('error-异常', error)
} }
) )
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
.get(url, { params }) .get(url, { params })
.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)

6
src/main.ts
View File

@ -2,6 +2,9 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import locale from 'element-plus/dist/locale/zh-cn.mjs'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
@ -11,10 +14,11 @@ import highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d'; import highcharts3d from 'highcharts/highcharts-3d';
// 调用3d图表 // 调用3d图表
highcharts3d(highcharts); highcharts3d(highcharts);
const app = createApp(App) const app = createApp(App)
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.use(ElementPlus, { locale })
app.mount('#app') app.mount('#app')

100
src/router/index.ts
View File

@ -1,50 +1,70 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { ElMessage } from 'element-plus'
import test from './module/test' import test from './module/test'
import myInfo from './module/myInfo' import myInfo from './module/myInfo'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
path: '/echarts', path: '/echarts',
name: 'echartsScreen', name: 'echartsScreen',
meta: { meta: {
title: '', title: '',
icon: '', icon: '',
}, },
component: () => import('views/echarts/index.vue'), component: () => import('views/echarts/index.vue'),
},{ }, {
path: '/', path: '/',
name: 'index', name: 'index',
redirect:"/screen/sharePlatform", redirect: "/screen/sharePlatform",
meta: { meta: {
title: '', title: '',
icon: '', icon: '',
}, },
component: () => import('views/Index.vue'), component: () => import('views/Index.vue'),
}, children: []
{ },
path: '/screen/sharePlatform', {
name: 'sharePlatform', path: '/screen/sharePlatform',
meta: { name: 'sharePlatform',
title: '', meta: {
icon: '', title: '',
}, icon: '',
component: () => import('views/screen/sharePlatform.vue'), },
}, component: () => import('views/screen/sharePlatform.vue'),
{ },
path: '/login', {
name: 'login', path: '/login',
meta: { name: 'login',
title: '', meta: {
icon: '', title: '',
}, icon: '',
component: () => import('views/login/index.vue'), },
} component: () => import('views/login/index.vue'),
}
] ]
const router = createRouter({ const router = createRouter({
// 路由模式 // 路由模式
history: createWebHashHistory(), history: createWebHashHistory(),
routes routes
}) })
router.beforeEach((to, from, next) => {
const jdCloud = JSON.parse(localStorage.getItem('jdcloud')).token
// console.log('jdCloud', jdCloud)
if (jdCloud) {
next()
} else {
ElMessage({
showClose: false,
message: '当前未登录，请登录..',
type: 'error',
})
setTimeout(() => {
window.location.href = 'https://test-rental.zhgkxt.com/mall-view/'
}, 1500)
}
})
export default router export default router

2
src/store/main.ts
View File

@ -2,7 +2,7 @@ export const useStore = defineStore('main', {
state: () => { state: () => {
return { return {
loadingFlag: false, //loading控制, loadingFlag: false, //loading控制,
token: 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjVkNjVlMDI1LWVlY2MtNDBiOS1hNGNjLTQ3OTc4ZDQwMzExMiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.npryPWEmJwBaGgfyZ-oQW8oDxDzitAf8v5XUvsokRvu6f1vSOGTer89C9GJ-ER2bZuvO9iAOYCieDV4INVQCvA' token: ''
} }
}, },
getters: {}, getters: {},

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

@ -6,8 +6,8 @@
<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">2023.11.16 星期四 09:56:12</span> <span class="time">{{ nowTime }}</span>
</div> </div>
</div> </div>
<div class="count_info_row2"> <div class="count_info_row2">
@ -89,10 +89,10 @@
<div class="self_img">{{ platFormInfo.enterpriseCount }}</div> <div class="self_img">{{ platFormInfo.enterpriseCount }}</div>
<div class="third_title">南网集体企业</div> <div class="third_title">南网集体企业</div>
</div> </div>
<div class="self_shelf_count"> <!-- <div class="self_shelf_count">
<div class="self_img">{{ platFormInfo.holdingCount }}</div> <div class="self_img">{{ platFormInfo.holdingCount }}</div>
<div class="third_title">南网控股企业</div> <div class="third_title">南网控股企业</div>
</div> </div> -->
</div> </div>
</div> </div>
<div class="enterprise_device"> <div class="enterprise_device">
@ -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"
@ -159,7 +161,6 @@ import barCom from "../../components/echartsCom/barCom.vue"
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue" import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
import hotProvider from "../../components/customCom/hotProvider.vue" import hotProvider from "../../components/customCom/hotProvider.vue"
import equipmentLeasing from "../../components/customCom/equipmentLeasing.vue" import equipmentLeasing from "../../components/customCom/equipmentLeasing.vue"
import { getImg } from "utils/index"
import { import {
apiMaDevInfoList, apiMaDevInfoTypeList, apiMaDevInfoList, apiMaDevInfoTypeList,
apiMaDevInfoCompanyList, apiMaDevInfoMatypeList, apiMaDevInfoCompanyList, apiMaDevInfoMatypeList,
@ -167,44 +168,56 @@ 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: new URL("/src/assets/img/money1.png", import.meta.url).href,
count: "", count: 0,
title: "今日订单" title: "今日订单"
}, },
{ {
icon: getImg("/src/assets/img/money2.png"), icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
count: "", count: 0,
title: "累计金额" title: "累计金额"
}, },
{ {
icon: getImg("/src/assets/img/money3.png"), icon: new URL("/src/assets/img/money3.png", import.meta.url).href,
count: "", count: 0,
title: "在用设备" title: "在租设备"
}, },
{ {
icon: getImg("/src/assets/img/money2.png"), icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
count: "", count: 0,
title: "待租设备" title: "待租设备"
} }
] ]
}) })
const rentWantRent:any=reactive({ const rentWantRent:any=reactive({
rent:[], // 出租信息
wantRent:[] rent:[
"0", "0", "0", "0"
],
// 求租信息
wantRent:[
"0", "0", "0", "0"
]
}) })
const platFormInfo: any = reactive({ const platFormInfo: any = reactive({
listCount: [], // 平台入驻单位
socailCount: "", listCount: [
enterpriseCount: "", "0", "0", "0", "0"
holdingCount: '' ],
socailCount: "0",
enterpriseCount: "0",
// holdingCount: '0'
}) })
const barComProps = reactive({ const barComProps = reactive({
@ -213,7 +226,9 @@ const barComProps = reactive({
color: "#0099FF", color: "#0099FF",
paddingTop: 20 paddingTop: 20
}, },
xAxisData: [], xAxisData: [
// "机手1","机手2","机手3","机手4","机手5","机手6","机手7","机手8","机手9"
],
yAxisProps: { yAxisProps: {
type: "value", type: "value",
splitLine: {//是否显示 y轴横线 splitLine: {//是否显示 y轴横线
@ -221,7 +236,9 @@ const barComProps = reactive({
}, },
show: false show: false
}, },
seriseData: [],//数据 seriseData: [
// 120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290
],//数据
itemStyle: [//柱状图的默认颜色 渐变 itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#91FFBE' }, { offset: 0, color: '#91FFBE' },
{ offset: 1, color: '#077FBA' } { offset: 1, color: '#077FBA' }
@ -325,7 +342,9 @@ const barComPropsHorizontal = reactive({
// boundaryGap: false, // boundaryGap: false,
}, },
yAxisData: [], yAxisData: [],
seriseData: [],//数据 seriseData: [
// 120, 132, 101, 134, 90
],//数据
itemStyle: [//柱状图的默认颜色 渐变 itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#077FBA' }, { offset: 0, color: '#077FBA' },
{ offset: 1, color: '#91FFBE' } { offset: 1, color: '#91FFBE' }
@ -357,14 +376,21 @@ const barComPropsHorizontal = reactive({
return fromatStr return fromatStr
} }
}) })
const pie3DList = reactive({ const pie3DList: any = reactive({
list: [] list: [
// 假数据
// ['Chrome', 1],
// ['Internet Explorer', 2],
// ['Firefox', 3],
// ['Edge', 4],
// ['Safari', 5]
]
}) })
onMounted(() => { onMounted(() => {
iniTapiMaDevInfoList() iniTapiMaDevInfoList()
iniTapiMaDevInfoTypeList() iniTapiMaDevInfoTypeList()
iniTapiMaDevInfoCompanyList() iniTapiMaDevInfoCompanyList()
iniTapiMaDevInfoMatypeList() // iniTapiMaDevInfoMatypeList()
iniTapiMaOrderInfoTodayList() iniTapiMaOrderInfoTodayList()
iniTapiMaOrderInfoList() iniTapiMaOrderInfoList()
// == // ==
@ -372,6 +398,7 @@ onMounted(() => {
iniTapiBmCompanyInfoTypeLis() iniTapiBmCompanyInfoTypeLis()
iniTapiMaDevInfoMaList() iniTapiMaDevInfoMaList()
InitApiMaLeaseInfoInfoTypeList()
}) })
@ -392,8 +419,11 @@ const iniTapiMaDevInfoTypeList = async () => {
try { try {
const res: any = await apiMaDevInfoTypeList() const res: any = await apiMaDevInfoTypeList()
console.log("apiMaDevInfoTypeList", res) console.log("apiMaDevInfoTypeList", res)
equipmentCountInfo.selfCount = res.self.count equipmentCountInfo.selfCount = res.self.count || 0
equipmentCountInfo.shelfCount = res.rent.count equipmentCountInfo.shelfCount = res.rent.count || 0
// 查询在租以及待租设备数量
middleCountList.list[2].count = res.use.count || 0
middleCountList.list[3].count = res.rent.count || 0
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
@ -412,33 +442,43 @@ const iniTapiMaDevInfoCompanyList = async () => {
] ]
resultList.push(item) resultList.push(item)
}) })
pie3DList.list = resultList if (resultList.length > 0) {
pie3DList.list = resultList
} else {
pie3DList.list = [
['暂无数据', 0]
]
}
// console.log("pie3DList", pie3DList.list)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
pie3DList.list = [
['暂无数据', 0]
]
} }
} }
const iniTapiMaDevInfoMatypeList = async () => { // const iniTapiMaDevInfoMatypeList = async () => {
// 查询在租以及待租设备数量: // // 查询在租以及待租设备数量:
try { // try {
const res: any = await apiMaDevInfoMatypeList() // const res: any = await apiMaDevInfoTypeList()
console.log("apiMaDevInfoMatypeList", res) // console.log("apiMaDevInfoMatypeList", res)
middleCountList.list[2].count = res.rent.count // middleCountList.list[2].count = res.use.count || 0
middleCountList.list[3].count = res.use.count // middleCountList.list[3].count = res.rent.count || 0
} catch (error) { // } catch (error) {
console.log(error) // console.log(error)
} // }
} // }
const iniTapiMaOrderInfoTodayList = async () => { 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)
} }
} }
@ -447,7 +487,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) {
@ -478,7 +518,7 @@ const iniTapiBmCompanyInfoTypeLis = async () => {
platFormInfo.listCount = (res.total + '').padStart(4,'0').split("") platFormInfo.listCount = (res.total + '').padStart(4,'0').split("")
platFormInfo.socailCount = res.social.count platFormInfo.socailCount = res.social.count
platFormInfo.enterpriseCount = res.grid.count platFormInfo.enterpriseCount = res.grid.count
platFormInfo.holdingCount = res.corporation.count // platFormInfo.holdingCount = res.corporation.count
} catch (error) { } catch (error) {
console.log(error) console.log(error)
@ -492,6 +532,7 @@ const iniTapiMaDevInfoMaList = async () => {
const res: any = await apiMaDevInfoMaList() const res: any = await apiMaDevInfoMaList()
console.log("apiMaDevInfoMaList", res) console.log("apiMaDevInfoMaList", res)
barComPropsHorizontal.xAxisData = res.map((ele: any) => ele.ownCo) barComPropsHorizontal.xAxisData = res.map((ele: any) => ele.ownCo)
barComPropsHorizontal.yAxisData = res.map((ele: any) => ele.ownCo)
barComPropsHorizontal.seriseData = res.map((ele: any) => ele.count) barComPropsHorizontal.seriseData = res.map((ele: any) => ele.count)
} catch (error) { } catch (error) {
@ -513,17 +554,36 @@ const InitApiMaLeaseInfoInfoTypeList= async()=>{
} }
} }
onMounted(()=>{ const nowTime = ref("")
InitApiMaLeaseInfoInfoTypeList()
}) // 实时获取当前时间, 格式为 2023.11.16 星期四 09:56:12
const getCurrentTime = () => {
const date = new Date()
const year = date.getFullYear()
const month = (date.getMonth() + 1 + '').padStart(2, '0')
const day = (date.getDate() + '').padStart(2, '0')
const week = date.getDay()
const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const hour = (date.getHours() + '').padStart(2, '0')
const minute = (date.getMinutes() + '').padStart(2, '0')
const second = (date.getSeconds() + '').padStart(2, '0')
return `${year}.${month}.${day} ${weekArr[week]} ${hour}:${minute}:${second}`
}
setInterval(() => {
nowTime.value = getCurrentTime()
}, 1000)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.out_echart { .out_echart {
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100vw; height: 100%;
height: 100vh; min-width: 1920px;
min-height: 1080px;
background-image: url("../../assets/img/background-bg.png"); background-image: url("../../assets/img/background-bg.png");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -534,7 +594,7 @@ onMounted(()=>{
width: 100%; width: 100%;
height: 108px; height: 108px;
background-image: url("../../assets/img/top_title.png"); background-image: url("../../assets/img/top_title.png");
background-size: contain; background-size: 100% 109px;
background-repeat: no-repeat; background-repeat: no-repeat;
font-size: 40px; font-size: 40px;
padding-top: 29px; padding-top: 29px;
@ -554,12 +614,16 @@ onMounted(()=>{
top: 24px; top: 24px;
color: #42B3FF; color: #42B3FF;
font-size: 16px; font-size: 16px;
display: flex;
.weather {
.wheather {
padding-right: 34px; padding-right: 34px;
} }
.time {
display: flex;
white-space: nowrap;
width: 205px;
}
} }
} }
@ -575,6 +639,7 @@ onMounted(()=>{
height: 252px; height: 252px;
position: relative; position: relative;
background-color: rgba($color: #011B37, $alpha: 0.6); background-color: rgba($color: #011B37, $alpha: 0.6);
margin: 0 auto;
margin-left: 23px; margin-left: 23px;
.sub_title { .sub_title {
@ -653,10 +718,11 @@ onMounted(()=>{
.middle_list_com { .middle_list_com {
height: 100px; height: 100px;
width: 1208px; width: 1190px;
padding-top: 60px; padding-top: 60px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin: 0 auto;
margin-left: 28px; margin-left: 28px;
.middle_list_com_item { .middle_list_com_item {
@ -737,15 +803,25 @@ onMounted(()=>{
} }
.more_count { .more_count {
margin-left: -13px; margin: 30px auto;
display: flex;
justify-content: center;
.self_shelf_count { .self_shelf_count {
width: 100px; width: 138px;
height: 61px;
.self_img { .self_img {
font-size: 33px; width: 92px;
width: 75px; height: 61px;
height: 50px; background-image: url("../../assets/img/compnay_bg.png");
background-size: cover;
background-repeat: no-repeat;
margin: 0px auto;
line-height: 66px;
text-align: center;
color: #66E0FF;
font-size: 38px;
} }
} }

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)