接口对接
This commit is contained in:
parent
8c648a3707
commit
cf45657679
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -1,78 +1,123 @@
|
||||||
<template>
|
<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="equipment_content" @click.stop.prevent="">
|
||||||
<div class="equip_title">
|
<div class="equip_title">
|
||||||
装备信息
|
装备信息
|
||||||
</div>
|
</div>
|
||||||
<div class="sub_title">
|
<div class="sub_title">
|
||||||
<span class="title_text">XF986F轮胎式挖掘机</span>
|
<span class="title_text">{{detailsInfo.maName}}</span>
|
||||||
<span class="sub_status">(在租)</span>
|
<span class="sub_status">({{detailsInfo.maStatus}})</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>
|
||||||
|
租赁方：{{detailsInfo.needCompany}}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
租赁方：XXXXXXXXXX有限公司
|
租赁日期：{{ detailsInfo.planStartTime }} {{ detailsInfo.duration }}
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
租赁日期：2023.09.12-2024.09.12
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="time_select">
|
<div class="time_select">
|
||||||
<el-date-picker v-model="timeRange" size="media" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
|
<el-date-picker v-model="timeRange" size="media" type="datetimerange"
|
||||||
start-placeholder="Start date" end-placeholder="End date" />
|
range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
|
||||||
<el-button type="primary" style="margin-left: 12px;" size="media" >查询</el-button>
|
<el-button type="primary" style="margin-left: 12px;" size="media" @click="searchByTimeFn">查询</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="map_line_out">
|
<div class="map_line_out">
|
||||||
<mapLine></mapLine>
|
<mapLine ref="mapLineRef"></mapLine>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import mapLine from "components/mapBaidu/mapLine.vue"
|
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]>([
|
const timeRange = ref<[Date, Date]>([
|
||||||
new Date(2000, 10, 10, 10, 10),
|
new Date(2023, 11, 10, 10, 10),
|
||||||
new Date(2000, 10, 11, 10, 10),
|
new Date(2023, 12, 19, 10, 10),
|
||||||
])
|
])
|
||||||
const shortcuts = [
|
const detailsInfo = reactive({
|
||||||
{
|
duration: '',
|
||||||
text: 'Last week',
|
maName: '',
|
||||||
value: () => {
|
maStatus: '',
|
||||||
const end = new Date()
|
needCompany: '',
|
||||||
const start = new Date()
|
planStartTime: ''
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
})
|
||||||
return [start, end]
|
// const shortcuts = [
|
||||||
},
|
// {
|
||||||
},
|
// text: 'Last week',
|
||||||
{
|
// value: () => {
|
||||||
text: 'Last month',
|
// const end = new Date()
|
||||||
value: () => {
|
// const start = new Date()
|
||||||
const end = new Date()
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||||
const start = new Date()
|
// return [start, end]
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
// },
|
||||||
return [start, end]
|
// },
|
||||||
},
|
// {
|
||||||
},
|
// text: 'Last month',
|
||||||
{
|
// value: () => {
|
||||||
text: 'Last 3 months',
|
// const end = new Date()
|
||||||
value: () => {
|
// const start = new Date()
|
||||||
const end = new Date()
|
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||||
const start = new Date()
|
// return [start, end]
|
||||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
// },
|
||||||
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({
|
defineExpose({
|
||||||
open
|
open
|
||||||
})
|
})
|
||||||
|
|
@ -88,6 +133,7 @@ defineExpose({
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
z-index: 99;
|
||||||
}
|
}
|
||||||
|
|
||||||
.equipment_content {
|
.equipment_content {
|
||||||
|
|
@ -114,6 +160,7 @@ defineExpose({
|
||||||
.sub_title {
|
.sub_title {
|
||||||
height: 41px;
|
height: 41px;
|
||||||
padding-top: 35px;
|
padding-top: 35px;
|
||||||
|
|
||||||
.title_text {
|
.title_text {
|
||||||
font-size: 27px;
|
font-size: 27px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
@ -137,7 +184,8 @@ defineExpose({
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.map_line_out{
|
|
||||||
|
.map_line_out {
|
||||||
width: 1030px;
|
width: 1030px;
|
||||||
height: 374px;
|
height: 374px;
|
||||||
padding-top: 25px;
|
padding-top: 25px;
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,15 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="e_content">
|
<div class="e_content">
|
||||||
<div class="left_nav_list">
|
<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 }}
|
{{ item.text }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <h1>{{ mapProps.seriesData }}</h1> -->
|
||||||
<div class="right_map_container">
|
<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"
|
:emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
|
||||||
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
|
:rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
|
||||||
:tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
|
:tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
|
||||||
|
|
@ -44,11 +47,11 @@
|
||||||
在租
|
在租
|
||||||
</div>
|
</div>
|
||||||
</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="">
|
<img src="/src/assets/img/nanhai_dao.png" alt="">
|
||||||
</div>
|
</div>
|
||||||
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
|
<equipmentDialog ref="equipmentDialogRef"></equipmentDialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -56,46 +59,47 @@ import { getImg } from "utils/index"
|
||||||
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
import mapEcharts from "../echartsCom/mapEcharts.vue"
|
||||||
import equipmentDialog from "./equipmentDialog.vue"
|
import equipmentDialog from "./equipmentDialog.vue"
|
||||||
import xnallJSON from './mapData/xnall.json'
|
import xnallJSON from './mapData/xnall.json'
|
||||||
|
// import xnallJSON from '../echartsCom/jsonData/china.json'
|
||||||
import gxJSON from './mapData/gx.json'
|
import gxJSON from './mapData/gx.json'
|
||||||
import gdJSON from './mapData/gd.json'
|
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 {apibmCompanyInfoColtdList} from "http/api/echartApi"
|
import { apiBmCompanyInfoColtdList } from "http/api/echartApi"
|
||||||
const mapEchartsRef = ref()
|
const mapEchartsRef = ref()
|
||||||
const equipmentDialogRef=ref()
|
const equipmentDialogRef = ref()
|
||||||
|
|
||||||
const navInfo = reactive({
|
const navInfo = reactive({
|
||||||
list: [
|
list: [
|
||||||
{
|
{
|
||||||
text: "全部",
|
text: "全部",
|
||||||
navId: "0",
|
navId: "0",
|
||||||
jsonData:xnallJSON
|
jsonData: xnallJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "广西电网",
|
text: "广西电网",
|
||||||
navId: "1",
|
navId: "1",
|
||||||
jsonData:gxJSON
|
jsonData: gxJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "广东电网",
|
text: "广东电网",
|
||||||
navId: "2",
|
navId: "2",
|
||||||
jsonData:gdJSON
|
jsonData: gdJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "贵州电网",
|
text: "贵州电网",
|
||||||
navId: "3",
|
navId: "3",
|
||||||
jsonData:gzJSON
|
jsonData: gzJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "云南电网",
|
text: "云南电网",
|
||||||
navId: "4",
|
navId: "4",
|
||||||
jsonData:ynJSON
|
jsonData: ynJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "海南电网",
|
text: "海南电网",
|
||||||
navId: "5",
|
navId: "5",
|
||||||
jsonData:hnJSON
|
jsonData: hnJSON
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "储能公司",
|
text: "储能公司",
|
||||||
|
|
@ -114,9 +118,9 @@ const navInfo = reactive({
|
||||||
|
|
||||||
|
|
||||||
const mapProps = reactive({
|
const mapProps = reactive({
|
||||||
idType:"0",
|
idType: "0",
|
||||||
jsonData:{
|
jsonData: {
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
areaColor: '#186894',//区域颜色
|
areaColor: '#186894',//区域颜色
|
||||||
shadowColor: '#2894c9',//边缘阴影颜色
|
shadowColor: '#2894c9',//边缘阴影颜色
|
||||||
|
|
@ -138,9 +142,9 @@ const mapProps = reactive({
|
||||||
rotate: 0,
|
rotate: 0,
|
||||||
},
|
},
|
||||||
rippleEffect: {
|
rippleEffect: {
|
||||||
number: 4,
|
number: 3,
|
||||||
period: 4,
|
period: 3,
|
||||||
scale: 4.5,
|
scale: 3,
|
||||||
brushType: 'fill'
|
brushType: 'fill'
|
||||||
},
|
},
|
||||||
tooltipProps: {
|
tooltipProps: {
|
||||||
|
|
@ -152,8 +156,9 @@ const mapProps = reactive({
|
||||||
},
|
},
|
||||||
tooltipFormat: (params: any) => {
|
tooltipFormat: (params: any) => {
|
||||||
console.log("params11", params)
|
console.log("params11", params)
|
||||||
const curItem = mapDataByProvice(params.name)
|
const curItem = mapDataByProvice(params.name.slice(0, 2))
|
||||||
if(!curItem||!curItem.selfCount){
|
console.log("curitemcuritem", curItem)
|
||||||
|
if (!curItem) {
|
||||||
return ""
|
return ""
|
||||||
}
|
}
|
||||||
let fromatStr =
|
let fromatStr =
|
||||||
|
|
@ -187,70 +192,128 @@ const mapProps = reactive({
|
||||||
return '#ff0';
|
return '#ff0';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
effectScatterCallBack:(params:any)=>{
|
effectScatterCallBack: (params: any) => {
|
||||||
console.log("equipmentDialogRef",params)
|
console.log("equipmentDialogRef", params.data.name)
|
||||||
equipmentDialogRef.value.open()
|
equipmentDialogRef.value.open(params.data.name)
|
||||||
},
|
},
|
||||||
seriesData: [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
|
seriesData: []
|
||||||
{ name: '佛山市', value: [110.130214, 23.018978, 200] },
|
// [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
|
||||||
{ name: '广州', value: [115.261081, 23.139856, 300] },
|
// { name: '佛山市', value: [110.130214, 23.018978, 200] },
|
||||||
{ name: '南宁', value: [107.45, 22.139856, 400] },
|
// { name: '广州', value: [115.261081, 23.139856, 300] },
|
||||||
{ name: '贵阳', value: [106.7, 26.36, 200] },
|
// { name: '南宁', value: [107.45, 22.139856, 400] },
|
||||||
{ name: '昆明', value: [102.33, 24.23, 300] } ,
|
// { name: '贵阳', value: [106.7, 26.36, 200] },
|
||||||
{ name: '海口', value: [110.33,19.823, 10] }]
|
// { name: '昆明', value: [102.33, 24.23, 300] } ,
|
||||||
|
// { name: '海口', value: [110.33,19.823, 10] }]
|
||||||
})
|
})
|
||||||
let listData:any= []
|
let listData: any = []
|
||||||
const mapDataByProvice = (provinceName: String) => {
|
const mapDataByProvice = (provinceName: String) => {
|
||||||
let listData = [
|
// let listData = [
|
||||||
{
|
// {
|
||||||
name: "广东省",
|
// name: "广东省",
|
||||||
selfCount: 123,
|
// selfCount: 123,
|
||||||
toCount: 300,
|
// toCount: 300,
|
||||||
inCount: 987
|
// inCount: 987
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "广西壮族自治区",
|
// name: "广西壮族自治区",
|
||||||
selfCount: 23,
|
// selfCount: 23,
|
||||||
toCount: 55,
|
// toCount: 55,
|
||||||
inCount: 278
|
// inCount: 278
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "云南省",
|
// name: "云南省",
|
||||||
selfCount: 256,
|
// selfCount: 256,
|
||||||
toCount: 2456,
|
// toCount: 2456,
|
||||||
inCount: 745
|
// inCount: 745
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "贵州省",
|
// name: "贵州省",
|
||||||
selfCount: 963,
|
// selfCount: 963,
|
||||||
toCount: 4521,
|
// toCount: 4521,
|
||||||
inCount: 963
|
// inCount: 963
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
const curItem: any = listData.find(ele => ele.name == provinceName)
|
const curItem: any = listData.find((ele: any) => ele.name.slice(0, 2) == provinceName)
|
||||||
return curItem
|
return curItem
|
||||||
}
|
}
|
||||||
|
|
||||||
const toNavItem=(item:any)=>{
|
const toNavItem = (item: any) => {
|
||||||
console.log("item",item)
|
console.log("item", item)
|
||||||
mapProps.jsonData= item.jsonData
|
mapProps.jsonData = item.jsonData
|
||||||
mapProps.idType=item.navId
|
mapProps.idType = item.navId
|
||||||
mapEchartsRef.value.chagneJSON(item)
|
mapEchartsRef.value.chagneJSON(item)
|
||||||
}
|
}
|
||||||
|
|
||||||
onBeforeMount(()=>{
|
onBeforeMount(() => {
|
||||||
mapProps.jsonData= xnallJSON
|
mapProps.jsonData = xnallJSON
|
||||||
})
|
})
|
||||||
onMounted(()=>{
|
onMounted(() => {
|
||||||
iniTapibmCompanyInfoColtdList()
|
iniTapibmCompanyInfoColtdList()
|
||||||
})
|
})
|
||||||
|
|
||||||
const iniTapibmCompanyInfoColtdList = async () => {
|
const iniTapibmCompanyInfoColtdList = async () => {
|
||||||
//设备租赁分布图
|
//设备租赁分布图
|
||||||
try {
|
try {
|
||||||
const res: any = await apibmCompanyInfoColtdList()
|
listData = []
|
||||||
// console.log("apibmCompanyInfoColtdList", res)
|
let seriresData: any = []
|
||||||
// listData = res
|
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) {
|
} catch (error) {
|
||||||
console.log(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%);
|
background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.haiNanDao{
|
|
||||||
|
.haiNanDao {
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 59px;
|
height: 59px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 280px;
|
right: 280px;
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
img{
|
|
||||||
|
img {
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 59px;
|
height: 59px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_title {
|
.top_title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
padding-top: 42px;
|
padding-top: 42px;
|
||||||
|
|
@ -321,6 +387,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100px;
|
left: 100px;
|
||||||
bottom: 16px;
|
bottom: 16px;
|
||||||
|
|
||||||
.out_dot1,
|
.out_dot1,
|
||||||
.out_dot2,
|
.out_dot2,
|
||||||
.out_dot3 {
|
.out_dot3 {
|
||||||
|
|
@ -332,6 +399,7 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-right: 3px;
|
margin-right: 3px;
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
|
|
@ -389,15 +457,17 @@ const iniTapibmCompanyInfoColtdList = async () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.type_list_item{
|
|
||||||
|
.type_list_item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
.activeNav{
|
|
||||||
color: #fff!important;
|
.activeNav {
|
||||||
|
color: #fff !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -103,7 +103,7 @@ const initEcharts = () => {
|
||||||
geo: {
|
geo: {
|
||||||
map: 'guangdong',
|
map: 'guangdong',
|
||||||
zoom: 1,
|
zoom: 1,
|
||||||
roam: '',
|
roam: true,
|
||||||
label: propsVal.labelInfo,
|
label: propsVal.labelInfo,
|
||||||
// 所有地图的区域颜色
|
// 所有地图的区域颜色
|
||||||
itemStyle: propsVal.itemStyle,
|
itemStyle: propsVal.itemStyle,
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getImg } from "@/utils/index"
|
import { getImg } from "@/utils/index"
|
||||||
|
import { apiBmCompanyInfoTimeListTime } from "http/api/echartApi"
|
||||||
let map: any = null
|
let map: any = null
|
||||||
let point: any = null
|
let point: any = null
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -16,11 +17,10 @@ onMounted(() => {
|
||||||
const initMap = () => {
|
const initMap = () => {
|
||||||
map = new BMap.Map("equipmentIdMap");
|
map = new BMap.Map("equipmentIdMap");
|
||||||
point = new BMap.Point(116.3964, 39.9093)
|
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)
|
console.log("map", map)
|
||||||
map.enableScrollWheelZoom();
|
map.enableScrollWheelZoom();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|
||||||
initCustomDot()
|
initCustomDot()
|
||||||
const startIcon ={
|
const startIcon ={
|
||||||
imgUrl:'/src/assets/img/mapStart.png',
|
imgUrl:'/src/assets/img/mapStart.png',
|
||||||
|
|
@ -32,7 +32,8 @@ const initMap = () => {
|
||||||
|
|
||||||
|
|
||||||
initPolyline()
|
initPolyline()
|
||||||
})
|
setViewPortFn()
|
||||||
|
},200)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -82,6 +83,9 @@ const initPolyline = () => {
|
||||||
new BMap.Point(116.3954, 39.9123),
|
new BMap.Point(116.3954, 39.9123),
|
||||||
], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
|
], { strokeColor: "blue", strokeWeight: 8, strokeOpacity: 1. });
|
||||||
map.addOverlay(polyline);
|
map.addOverlay(polyline);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const initIcon=(imgUrl:any,position:any,size:any)=>{
|
const initIcon=(imgUrl:any,position:any,size:any)=>{
|
||||||
|
|
@ -95,6 +99,33 @@ const initIcon=(imgUrl:any,position:any,size:any)=>{
|
||||||
map.addOverlay(marker);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -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/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
|
||||||
|
|
@ -33,10 +33,7 @@ export function apiBmMachinistInfoList() {
|
||||||
export function apiBmCompanyInfoTypeList() {
|
export function apiBmCompanyInfoTypeList() {
|
||||||
return get('bmCompanyInfo/type-list', {})
|
return get('bmCompanyInfo/type-list', {})
|
||||||
}
|
}
|
||||||
// 设备租赁分布图
|
|
||||||
export function apibmCompanyInfoColtdList() {
|
|
||||||
return get('bmCompanyInfo/coltd-list', {})
|
|
||||||
}
|
|
||||||
|
|
||||||
export function apiMaDevInfoMaList() {
|
export function apiMaDevInfoMaList() {
|
||||||
return get('maDevInfo/ma-list', {})
|
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,{})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue