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

接口对接

This commit is contained in:
13218645326 2023-12-03 19:03:32 +08:00
parent 8c648a3707
commit cf45657679
7 changed files with 453 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/customCom/1.json Normal file
View File

@ -0,0 +1,143 @@
{
"msg": "操作成功",
"code": 200,
"data": [
{
"companyName": "贵州电网",
"coltdVo": [
{
"status": "在租",
"count": 0,
"list": []
},
{
"status": "待租",
"count": 0,
"list": []
},
{
"status": "自有",
"count": 2,
"list": [
{
"maId": 1,
"lon": "112.1",
"lat": "23"
},
{
"maId": 4,
"lon": "122",
"lat": "23"
}
]
},
{
"status": "自有",
"count": 2,
"list": [
{
"maId": 1,
"lon": "112.1",
"lat": "23"
},
{
"maId": 4,
"lon": "122",
"lat": "23"
}
]
},
{
"status": "自有",
"count": 2,
"list": [
{
"maId": 1,
"lon": "112.1",
"lat": "23"
},
{
"maId": 4,
"lon": "122",
"lat": "23"
}
]
}
]
},
{
"companyName": "广东电网",
"coltdVo": [
{
"status": "在租",
"count": 0,
"list": []
},
{
"status": "待租",
"count": 1,
"list": [
{
"maId": 2,
"lon": "115",
"lat": "28"
}
]
},
{
"status": "自有",
"count": 0,
"list": []
},
{
"status": "待租",
"count": 1,
"list": [
{
"maId": 2,
"lon": "115",
"lat": "28"
}
]
}
]
},
{
"companyName": "广西电网",
"coltdVo": [
{
"status": "在租",
"count": 1,
"list": [
{
"maId": 3,
"lon": "118",
"lat": "35"
}
]
},
{
"status": "待租",
"count": 0,
"list": []
},
{
"status": "自有",
"count": 0,
"list": []
},
{
"status": "在租",
"count": 1,
"list": [
{
"maId": 3,
"lon": "118",
"lat": "35"
}
]
}
]
}
]
}

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

@ -1,78 +1,123 @@
<template>
<div class="equipment_dialog" v-show="mapLineShow" @click="mapLineShow=false">
<div class="equipment_dialog" v-if="mapLineShow" @click="mapLineShow = false">
<div class="equipment_content" @click.stop.prevent="">
<div class="equip_title">
装备信息
</div>
<div class="sub_title">
<span class="title_text">XF986F轮胎式挖掘机</span>
<span class="sub_status">(在租)</span>
<span class="title_text">{{detailsInfo.maName}}</span>
<span class="sub_status">({{detailsInfo.maStatus}})</span>
</div>
<div class="more_info">
<span style="padding-left: 0;">操作重量：7吨 </span>
<span>
<!-- <span style="padding-left: 0;">操作重量：7吨 </span> -->
<!-- <span>
铲斗容量：2立方米
</span> -->
<span>
租赁方：{{detailsInfo.needCompany}}
</span>
<span>
租赁方：XXXXXXXXXX有限公司
</span>
<span>
租赁日期：2023.09.12-2024.09.12
租赁日期：{{ detailsInfo.planStartTime }}&nbsp;{{ detailsInfo.duration }}
</span>
</div>
<div class="time_select">
<el-date-picker v-model="timeRange" size="media" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
start-placeholder="Start date" end-placeholder="End date" />
<el-button type="primary" style="margin-left: 12px;" size="media" >查询</el-button>
<el-date-picker v-model="timeRange" size="media" type="datetimerange"
range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
<el-button type="primary" style="margin-left: 12px;" size="media" @click="searchByTimeFn">查询</el-button>
</div>
<div class="map_line_out">
<mapLine></mapLine>
<mapLine ref="mapLineRef"></mapLine>
</div>
</div>
</div>
</template>
<script setup lang="ts">
<script setup lang="ts">
import mapLine from "components/mapBaidu/mapLine.vue"
const mapLineShow=ref(false)
import { apiBmaDevInfoList } from "http/api/echartApi"
import moment from "moment";
const mapLineShow = ref(false)
const mapLineRef = ref()
const timeRange = ref<[Date, Date]>([
new Date(2000, 10, 10, 10, 10),
new Date(2000, 10, 11, 10, 10),
new Date(2023, 11, 10, 10, 10),
new Date(2023, 12, 19, 10, 10),
])
const shortcuts = [
{
text: 'Last week',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
},
{
text: 'Last month',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
},
{
text: 'Last 3 months',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
},
]
const detailsInfo = reactive({
duration: '',
maName: '',
maStatus: '',
needCompany: '',
planStartTime: ''
})
// const shortcuts = [
// {
// text: 'Last week',
// value: () => {
// const end = new Date()
// const start = new Date()
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
// return [start, end]
// },
// },
// {
// text: 'Last month',
// value: () => {
// const end = new Date()
// const start = new Date()
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
// return [start, end]
// },
// },
// {
// text: 'Last 3 months',
// value: () => {
// const end = new Date()
// const start = new Date()
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
// return [start, end]
// },
// },
// ]
const initApiBmaDevInfoList = async (maId:any) => {
try {
const res:any = await apiBmaDevInfoList(maId)
console.log("apiBmaDevInfoList", res)
detailsInfo.duration = res.duration
detailsInfo.maName = res.maName
detailsInfo.maStatus = res.maStatus
detailsInfo.needCompany = res.needCompany
detailsInfo.planStartTime = res.planStartTime
} catch (error) {
}
const open=()=>{
mapLineShow.value = true
console.log("mapLineShow",mapLineShow.value)
}
let maId = ""
const searchByTimeFn=()=>{
let params={
startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'),
endTime:moment(timeRange.value[1]).format('YYYY.MM.DD'),
id:maId
}
mapLineRef.value.initMapLine(params)
}
const open = (maId:any) => {
console.log("maIdmaId",maId)
mapLineShow.value = true
maId=maId
initApiBmaDevInfoList(maId)
let params={
startTime:moment(timeRange.value[0]).format('YYYY.MM.DD'),
endTime:moment(timeRange.value[1]).format('YYYY.MM.DD'),
id:maId
}
setTimeout(()=>{
mapLineRef.value.initMapLine(params)
})
}
defineExpose({
open
})
@ -88,6 +133,7 @@ defineExpose({
display: flex;
justify-content: center;
align-items: center;
z-index: 99;
}
.equipment_content {
@ -114,6 +160,7 @@ defineExpose({
.sub_title {
height: 41px;
padding-top: 35px;
.title_text {
font-size: 27px;
color: #fff;
@ -137,7 +184,8 @@ defineExpose({
padding-left: 20px;
}
}
.map_line_out{
.map_line_out {
width: 1030px;
height: 374px;
padding-top: 25px;

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

@ -5,12 +5,15 @@
</div>
<div class="e_content">
<div class="left_nav_list">
<div class="nav_item" v-for="(item, index) in navInfo.list" :key="index" :class="{'activeNav':mapProps.idType==item.navId}" @click="toNavItem(item)">
<div class="nav_item" v-for="(item, index) in navInfo.list" :key="index"
:class="{ 'activeNav': mapProps.idType == item.navId }" @click="toNavItem(item)">
{{ item.text }}
</div>
</div>
<!-- <h1>{{ mapProps.seriesData }}</h1> -->
<div class="right_map_container">
<mapEcharts ref="mapEchartsRef" :jsonData="mapProps.jsonData" :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
<mapEcharts v-if="mapProps.seriesData.length > 0" ref="mapEchartsRef" :jsonData="mapProps.jsonData"
:itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
:emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
:tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
@ -44,11 +47,11 @@
在租
</div>
</div>
<div class="haiNanDao" v-if="mapProps.idType=='0'||mapProps.idType=='5' ">
<div class="haiNanDao" v-if="mapProps.idType == '0' || mapProps.idType == '5'">
<img src="/src/assets/img/nanhai_dao.png" alt="">
</div>
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
</div>
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
</div>
</template>
<script setup lang="ts">
@ -56,46 +59,47 @@ import { getImg } from "utils/index"
import mapEcharts from "../echartsCom/mapEcharts.vue"
import equipmentDialog from "./equipmentDialog.vue"
import xnallJSON from './mapData/xnall.json'
// import xnallJSON from '../echartsCom/jsonData/china.json'
import gxJSON from './mapData/gx.json'
import gdJSON from './mapData/gd.json'
import gzJSON from './mapData/gz.json'
import ynJSON from './mapData/yn.json'
import hnJSON from './mapData/hn.json'
import {apibmCompanyInfoColtdList} from "http/api/echartApi"
import { apiBmCompanyInfoColtdList } from "http/api/echartApi"
const mapEchartsRef = ref()
const equipmentDialogRef=ref()
const equipmentDialogRef = ref()
const navInfo = reactive({
list: [
{
text: "全部",
navId: "0",
jsonData:xnallJSON
jsonData: xnallJSON
},
{
text: "广西电网",
navId: "1",
jsonData:gxJSON
jsonData: gxJSON
},
{
text: "广东电网",
navId: "2",
jsonData:gdJSON
jsonData: gdJSON
},
{
text: "贵州电网",
navId: "3",
jsonData:gzJSON
jsonData: gzJSON
},
{
text: "云南电网",
navId: "4",
jsonData:ynJSON
jsonData: ynJSON
},
{
text: "海南电网",
navId: "5",
jsonData:hnJSON
jsonData: hnJSON
},
{
text: "储能公司",
@ -114,9 +118,9 @@ const navInfo = reactive({
const mapProps = reactive({
idType:"0",
jsonData:{
},
idType: "0",
jsonData: {
},
itemStyle: {
areaColor: '#186894',//区域颜色
shadowColor: '#2894c9',//边缘阴影颜色
@ -138,9 +142,9 @@ const mapProps = reactive({
rotate: 0,
},
rippleEffect: {
number: 4,
period: 4,
scale: 4.5,
number: 3,
period: 3,
scale: 3,
brushType: 'fill'
},
tooltipProps: {
@ -152,8 +156,9 @@ const mapProps = reactive({
},
tooltipFormat: (params: any) => {
console.log("params11", params)
const curItem = mapDataByProvice(params.name)
if(!curItem||!curItem.selfCount){
const curItem = mapDataByProvice(params.name.slice(0, 2))
console.log("curitemcuritem", curItem)
if (!curItem) {
return ""
}
let fromatStr =
@ -187,70 +192,128 @@ const mapProps = reactive({
return '#ff0';
}
},
effectScatterCallBack:(params:any)=>{
console.log("equipmentDialogRef",params)
equipmentDialogRef.value.open()
effectScatterCallBack: (params: any) => {
console.log("equipmentDialogRef", params.data.name)
equipmentDialogRef.value.open(params.data.name)
},
seriesData: [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
{ name: '佛山市', value: [110.130214, 23.018978, 200] },
{ name: '广州', value: [115.261081, 23.139856, 300] },
{ name: '南宁', value: [107.45, 22.139856, 400] },
{ name: '贵阳', value: [106.7, 26.36, 200] },
{ name: '昆明', value: [102.33, 24.23, 300] } ,
{ name: '海口', value: [110.33,19.823, 10] }]
seriesData: []
// [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
// { name: '佛山市', value: [110.130214, 23.018978, 200] },
// { name: '广州', value: [115.261081, 23.139856, 300] },
// { name: '南宁', value: [107.45, 22.139856, 400] },
// { name: '贵阳', value: [106.7, 26.36, 200] },
// { name: '昆明', value: [102.33, 24.23, 300] } ,
// { name: '海口', value: [110.33,19.823, 10] }]
})
let listData:any= []
let listData: any = []
const mapDataByProvice = (provinceName: String) => {
let listData = [
{
name: "广东省",
selfCount: 123,
toCount: 300,
inCount: 987
},
{
name: "广西壮族自治区",
selfCount: 23,
toCount: 55,
inCount: 278
},
{
name: "云南省",
selfCount: 256,
toCount: 2456,
inCount: 745
},
{
name: "贵州省",
selfCount: 963,
toCount: 4521,
inCount: 963
}
]
const curItem: any = listData.find(ele => ele.name == provinceName)
// let listData = [
// {
// name: "广东省",
// selfCount: 123,
// toCount: 300,
// inCount: 987
// },
// {
// name: "广西壮族自治区",
// selfCount: 23,
// toCount: 55,
// inCount: 278
// },
// {
// name: "云南省",
// selfCount: 256,
// toCount: 2456,
// inCount: 745
// },
// {
// name: "贵州省",
// selfCount: 963,
// toCount: 4521,
// inCount: 963
// }
// ]
const curItem: any = listData.find((ele: any) => ele.name.slice(0, 2) == provinceName)
return curItem
}
}
const toNavItem=(item:any)=>{
console.log("item",item)
mapProps.jsonData= item.jsonData
mapProps.idType=item.navId
const toNavItem = (item: any) => {
console.log("item", item)
mapProps.jsonData = item.jsonData
mapProps.idType = item.navId
mapEchartsRef.value.chagneJSON(item)
}
onBeforeMount(()=>{
mapProps.jsonData= xnallJSON
onBeforeMount(() => {
mapProps.jsonData = xnallJSON
})
onMounted(()=>{
onMounted(() => {
iniTapibmCompanyInfoColtdList()
})
const iniTapibmCompanyInfoColtdList = async () => {
//设备租赁分布图
try {
const res: any = await apibmCompanyInfoColtdList()
// console.log("apibmCompanyInfoColtdList", res)
// listData = res
listData = []
let seriresData: any = []
const res: any = await apiBmCompanyInfoColtdList()
console.log("apiBmCompanyInfoColtdList", res)
const uniqueInfo: any = {}
res.forEach((ele: any, index: any) => {
let item: any = {}
item.name = ele.companyName
ele.coltdVo.forEach((eleS: any) => {
console.log()
if (eleS.status == "在租") {
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),eleS.count]
})
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]
})
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]
})
uniqueInfo[subEle.maId] = true
}
})
})
console.log("itemitem", item)
listData.push(item)
})
mapProps.seriesData = seriresData
console.log("listData", res, listData, seriresData)
} catch (error) {
console.log(error)
}
@ -266,17 +329,20 @@ const iniTapibmCompanyInfoColtdList = async () => {
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
position: relative;
}
.haiNanDao{
.haiNanDao {
width: 46px;
height: 59px;
position: absolute;
right: 280px;
bottom: 6px;
img{
img {
width: 46px;
height: 59px;
height: 59px;
}
}
.top_title {
font-size: 20px;
padding-top: 42px;
@ -321,6 +387,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
position: absolute;
left: 100px;
bottom: 16px;
.out_dot1,
.out_dot2,
.out_dot3 {
@ -332,6 +399,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
align-items: center;
border-radius: 50%;
margin-right: 3px;
.dot {
width: 7px;
height: 7px;
@ -389,15 +457,17 @@ const iniTapibmCompanyInfoColtdList = async () => {
}
}
}
.type_list_item{
.type_list_item {
display: flex;
justify-content: flex-start;
font-size: 13px;
color: #fff;
padding-right: 10px;
}
.activeNav{
color: #fff!important;
.activeNav {
color: #fff !important;
font-weight: bold;
}
</style>

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

@ -103,7 +103,7 @@ const initEcharts = () => {
geo: {
map: 'guangdong',
zoom: 1,
roam: '',
roam: true,
label: propsVal.labelInfo,
// 所有地图的区域颜色
itemStyle: propsVal.itemStyle,

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

@ -6,6 +6,7 @@
<script setup lang="ts">
import { getImg } from "@/utils/index"
import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
let map: any = null
let point: any = null
onMounted(() => {
@ -16,11 +17,10 @@ onMounted(() => {
const initMap = () => {
map = new BMap.Map("equipmentIdMap");
point = new BMap.Point(116.3964, 39.9093)
map.centerAndZoom(new BMap.Point(116.3964, 39.9093), 18);
map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
console.log("map", map)
map.enableScrollWheelZoom();
setTimeout(() => {
initCustomDot()
const startIcon ={
imgUrl:'/src/assets/img/mapStart.png',
@ -32,7 +32,8 @@ const initMap = () => {
initPolyline()
})
setViewPortFn()
},200)
}
@ -82,6 +83,9 @@ const initPolyline = () => {
new BMap.Point(116.3954, 39.9123),
], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
map.addOverlay(polyline);
}
const initIcon=(imgUrl:any,position:any,size:any)=>{
@ -95,6 +99,33 @@ const initIcon=(imgUrl:any,position:any,size:any)=>{
map.addOverlay(marker);
}
const setViewPortFn=()=>{
const boundList =[
new BMap.Point(116.3964, 39.9093),
new BMap.Point(116.3944, 39.9063),
new BMap.Point(116.3954, 39.9123),
]
map.setViewport(boundList)
}
const initMapLine=(params:any)=>{
initApiBmCompanyInfoTimeListTime(params)
}
const initApiBmCompanyInfoTimeListTime = async (val:any) => {
try {
const res:any = await apiBmCompanyInfoTimeListTime(val)
console.log("apiBmCompanyInfoTimeListTime", res)
} catch (error) {
}
}
defineExpose({
initMapLine
})
</script>
<style scoped lang="scss">

10
src/http/api.md
View File

@ -36,4 +36,14 @@ http://10.40.92.64:9501/maLeaseInfo/type-list
http://10.40.92.64:9501/maDevInfo/hot-list
=====
设备租赁分布图
http://10.40.92.64:9501/bmCompanyInfo/coltd-list
根据设备id查询设备详情相关信息
http://10.40.92.64:9501/maDevInfo/list/{maId}
//根据时间查询设备历史经纬度
http://10.40.92.64:9501/bmCompanyInfo/time-list/time
示例
http://10.40.92.64:9501/bmCompanyInfo/time-list/2023.12.1

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

@ -33,10 +33,7 @@ export function apiBmMachinistInfoList() {
export function apiBmCompanyInfoTypeList() {
return get('bmCompanyInfo/type-list', {})
}
// 设备租赁分布图
export function apibmCompanyInfoColtdList() {
return get('bmCompanyInfo/coltd-list', {})
}
export function apiMaDevInfoMaList() {
return get('maDevInfo/ma-list', {})
@ -52,3 +49,22 @@ export function apiMaDevInfoHotList() {
}
// ===
// 设备租赁分布图
export function apiBmCompanyInfoColtdList() {
return get('bmCompanyInfo/coltd-list', {})
}
// 根据设备id查询设备详情相关信息
export function apiBmaDevInfoList(maId:any) {
return get(`maDevInfo/list/${maId}`,{})
}
// 根据时间查询设备历史经纬度
export function apiBmCompanyInfoTimeListTime(params:any) {
const urlStr= `bmCompanyInfo/time-list/${params.startTime}/${params.endTime}`
return get(urlStr,{})
}