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

接口调试优化

This commit is contained in:
13218645326 2023-12-02 17:50:50 +08:00
parent 261a15df49
commit 033230b2fe
5 changed files with 183 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,6 +61,7 @@ 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"
const mapEchartsRef = ref()
const equipmentDialogRef=ref()
@ -198,7 +199,7 @@ const mapProps = reactive({
{ name: '昆明', value: [102.33, 24.23, 300] } ,
{ name: '海口', value: [110.33,19.823, 10] }]
})
let listData:any= []
const mapDataByProvice = (provinceName: String) => {
let listData = [
{
@ -240,6 +241,21 @@ const toNavItem=(item:any)=>{
onBeforeMount(()=>{
mapProps.jsonData= xnallJSON
})
onMounted(()=>{
iniTapibmCompanyInfoColtdList()
})
const iniTapibmCompanyInfoColtdList = async () => {
//设备租赁分布图
try {
const res: any = await apibmCompanyInfoColtdList()
// console.log("apibmCompanyInfoColtdList", res)
// listData = res
} catch (error) {
console.log(error)
}
}
</script>
<style lang="scss" scoped>

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

@ -112,11 +112,11 @@ const propsVal = defineProps({
type: Number,
default: 0
},
itemBackgroundStyle:{
itemBackgroundStyle: {
type: String,
default: ""
},
tooltipProps:{
tooltipProps: {
type: Object,
default: {
@ -158,16 +158,16 @@ const handleSeriesData = () => {
color: resultEmphasisColor
}
},
backgroundStyle:{},
backgroundStyle: {},
data: propsVal.seriseData
}
item.label = propsVal.stackLabel
if (propsVal.barWidth) {
item.barWidth = propsVal.barWidth
}
if(propsVal.itemBackgroundStyle){
item.showBackground=true
item.backgroundStyle.color = propsVal.itemBackgroundStyle
if (propsVal.itemBackgroundStyle) {
item.showBackground = true
item.backgroundStyle.color = propsVal.itemBackgroundStyle
}
seriesData.push(item)
return seriesData
@ -175,8 +175,8 @@ const handleSeriesData = () => {
const option = {
tooltip: {
trigger: "axis",
backgroundColor:"rgba(255,255,255,0)",
borderColor:'rgba(255,255,255,0)',
backgroundColor: "rgba(255,255,255,0)",
borderColor: 'rgba(255,255,255,0)',
shadowBlur: 0,
shadowColor: 'rgba(0, 0, 0, 0)'
},

14
src/http/api.md
View File

@ -13,5 +13,19 @@
获取企业所属对应的机手数量以及机手总人数:
http://10.40.92.64:9501/bmMachinistInfo/list
返回数据结构:Map<String, Object> map = new HashMap<>();
{"msg":"操作成功","code":200,"data":{"total":4,"type":[{"ownCo":"贵州电网","count":1},{"ownCo":"广东电网","count":1},{"ownCo":"广西电网","count":1},{"ownCo":"储能公司","count":1}]}}
根据企业类型查询对应数量以及总数量:
http://10.40.92.64:9501/bmCompanyInfo/type-list
设备租赁分布图
http://10.40.92.64:9501/bmCompanyInfo/coltd-list
查询设备状态为在租的设备名称及数量;租赁在用装备排名
http://10.40.92.64:9501/maDevInfo/ma-list

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

@ -24,15 +24,20 @@ export function apiMaOrderInfoTodayList() {
export function apiMaOrderInfoList() {
return get('maOrderInfo/list', {})
}
// export function apiMaDevInfoList() {
// return get('maDevInfo/list', {})
// }
// export function apiMaDevInfoList() {
// return get('maDevInfo/list', {})
// }
// export function apiMaDevInfoList() {
// return get('maDevInfo/list', {})
// }
// export function apiMaDevInfoList() {
// return get('maDevInfo/list', {})
// }
// --
// 获取企业所属对应的机手数量以及机手总人数:
export function apiBmMachinistInfoList() {
return get('bmMachinistInfo/list', {})
}
// 根据企业类型查询对应数量以及总数量:
export function apiBmCompanyInfoTypeList() {
return get('bmCompanyInfo/type-list', {})
}
// 设备租赁分布图
export function apibmCompanyInfoColtdList() {
return get('bmCompanyInfo/coltd-list', {})
}
export function apiMaDevInfoMaList() {
return get('maDevInfo/ma-list', {})
}

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

@ -14,10 +14,10 @@
<div class="equipment_count">
<div class="sub_title">平台入驻装备总数</div>
<div class="count_list">
<div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount.slice(0,4)" :key="index">
<div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount.slice(0, 4)" :key="index">
{{ item }}
</div>
<div class="count_item" v-if="equipmentCountInfo.listCount.length>4">
<div class="count_item" v-if="equipmentCountInfo.listCount.length > 4">
+
</div>
</div>
@ -73,7 +73,7 @@
<div class="plat_company">
<div class="rent_title sub_title">平台入驻单位</div>
<div class="rent_list">
<div class="count_item" v-for="(item, index) in platFormInfo.listCount" :key="index">
<div class="count_item" v-for="(item, index) in platFormInfo.listCount.slice(0, 4)" :key="index">
{{ item }}
</div>
<div class="count_item">
@ -96,7 +96,7 @@
</div>
</div>
<div class="enterprise_device">
<Pie3dCom :list="pie3DList.list" v-if="pie3DList.list.length>0"></Pie3dCom>
<Pie3dCom :list="pie3DList.list" v-if="pie3DList.list.length > 0"></Pie3dCom>
</div>
@ -108,25 +108,26 @@
<div class="bottom_row_center_bar">
<div class="bottom_row_center_bar_left">
<div class="total_count">
总人数：3188
总人数：{{ totalCount }}
</div>
<barCom :domId="1" :title="barComProps.title" :titleStyle="barComProps.titleStyle"
:xAxisData="barComProps.xAxisData" :yAxisProps="barComProps.yAxisProps"
:seriseData="barComProps.seriseData" :emphasisItemStyle="barComProps.emphasisItemStyle"
:itemStyle="barComProps.itemStyle" :stackFlag="barComProps.stackFlag"
:stackLabel="barComProps.stackLabel" :borderRadius="barComProps.borderRadius"
:tooltipProps="barComProps.tooltipProps"
<barCom v-if="barComProps.xAxisData.length > 0" :domId="1" :title="barComProps.title"
:titleStyle="barComProps.titleStyle" :xAxisData="barComProps.xAxisData"
:yAxisProps="barComProps.yAxisProps" :seriseData="barComProps.seriseData"
:emphasisItemStyle="barComProps.emphasisItemStyle" :itemStyle="barComProps.itemStyle"
:stackFlag="barComProps.stackFlag" :stackLabel="barComProps.stackLabel"
:borderRadius="barComProps.borderRadius" :tooltipProps="barComProps.tooltipProps"
:barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom>
</div>
<div class="bottom_row_center_bar_right">
<barCom v-if="barComPropsSimple.xAxisData.length>0" ref="barSimpleRef" :domId="2" :title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
<barCom v-if="barComPropsSimple.xAxisData.length > 0" ref="barSimpleRef" :domId="2"
:title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
:titleStyle="barComProps.titleStyle" :yAxisProps="barComPropsSimple.yAxisProps"
:seriseData="barComPropsSimple.seriseData"
:emphasisItemStyle="barComPropsSimple.emphasisItemStyle"
:itemStyle="barComPropsSimple.itemStyle" :stackFlag="barComPropsSimple.stackFlag"
:stackLabel="barComPropsSimple.stackLabel" :borderRadius="barComPropsSimple.borderRadius"
:tooltipProps="barComPropsSimple.tooltipProps"
:barWidth="barComPropsSimple.barWidth" :formatCallBack="barComPropsSimple.formatCallBack"></barCom>
:tooltipProps="barComPropsSimple.tooltipProps" :barWidth="barComPropsSimple.barWidth"
:formatCallBack="barComPropsSimple.formatCallBack"></barCom>
</div>
</div>
</div>
@ -135,7 +136,7 @@
<hotProvider></hotProvider>
</div>
<div class="bottom_row_right_bottom">
<barCom :domId="3" :title="barComPropsHorizontal.title" :titleStyle="barComProps.titleStyle"
<barCom v-if="barComPropsHorizontal.xAxisData.length > 0" :domId="3" :title="barComPropsHorizontal.title" :titleStyle="barComProps.titleStyle"
:xAxisProps="barComPropsHorizontal.xAxisProps" :xAxisData="barComPropsHorizontal.xAxisData"
:yAxisData="barComPropsHorizontal.yAxisData" :yAxisProps="barComPropsHorizontal.yAxisProps"
:seriseData="barComPropsHorizontal.seriseData"
@ -143,6 +144,7 @@
:itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
:stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
:itemBackgroundStyle="barComPropsHorizontal.itemBackgroundStyle"
:barWidth="barComPropsSimple.barWidth"
:tooltipProps="barComPropsHorizontal.tooltipProps"
:formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
</div>
@ -158,11 +160,15 @@ import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
import hotProvider from "../../components/customCom/hotProvider.vue"
import equipmentLeasing from "../../components/customCom/equipmentLeasing.vue"
import { getImg } from "utils/index"
import {apiMaDevInfoList,apiMaDevInfoTypeList,apiMaDevInfoCompanyList,apiMaDevInfoMatypeList,apiMaOrderInfoTodayList,apiMaOrderInfoList} from "http/api/echartApi"
import {
apiMaDevInfoList, apiMaDevInfoTypeList,
apiMaDevInfoCompanyList, apiMaDevInfoMatypeList,
apiMaOrderInfoTodayList, apiMaOrderInfoList, apiBmMachinistInfoList, apiBmCompanyInfoTypeList, apiMaDevInfoMaList
} from "http/api/echartApi"
const equipmentCountInfo: any = reactive({
listCount: [],
selfCount: "999",
shelfCount: "999"
selfCount: "",
shelfCount: ""
})
const middleCountList = reactive({
@ -191,10 +197,10 @@ const middleCountList = reactive({
})
const platFormInfo: any = reactive({
listCount: ['9', '9', '9', '9'],
socailCount: "999",
enterpriseCount: "999",
holdingCount: '999'
listCount: [],
socailCount: "",
enterpriseCount: "",
holdingCount: ''
})
const barComProps = reactive({
@ -203,7 +209,7 @@ const barComProps = reactive({
color: "#0099FF",
paddingTop: 20
},
xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
xAxisData: [],
yAxisProps: {
type: "value",
splitLine: {//是否显示 y轴横线
@ -211,7 +217,7 @@ const barComProps = reactive({
},
show: false
},
seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
seriseData: [],//数据
itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#91FFBE' },
{ offset: 1, color: '#077FBA' }
@ -230,8 +236,8 @@ const barComProps = reactive({
barWidth: 14,
tooltipProps: {
trigger: "axis",
backgroundColor:"rgba(255,255,255,0)",
borderColor:'rgba(255,255,255,0)',
backgroundColor: "rgba(255,255,255,0)",
borderColor: 'rgba(255,255,255,0)',
shadowBlur: 0,
shadowColor: 'rgba(0, 0, 0, 0)'
},
@ -239,19 +245,19 @@ const barComProps = reactive({
if (!params || params.length == 0 || !Array.isArray(params)) return
let fromatStr = ""
params.forEach((ele: any) => {
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">'+ele.data+'</span>' + "</div>"
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</div>"
})
return fromatStr
}
})
const barComPropsSimple:any = reactive({
const barComPropsSimple: any = reactive({
title: "租赁订单月统计",
titleStyle: {
color: "#0099FF",
paddingTop: 20
},
xAxisData:[], //["123213","werwe","ewrwer"],
xAxisData: [], //["123213","werwe","ewrwer"],
yAxisProps: {
type: "value",
splitLine: {//是否显示 y轴横线
@ -264,7 +270,7 @@ const barComPropsSimple:any = reactive({
},
show: true
},
seriseData:[],// [12,22,33],//数据
seriseData: [],// [12,22,33],//数据
itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#10A1B8' },
{ offset: 1, color: '#5BE3FF' }
@ -281,8 +287,8 @@ const barComPropsSimple:any = reactive({
barWidth: 14,
tooltipProps: {
trigger: "axis",
backgroundColor:"rgba(255,255,255,0)",
borderColor:'rgba(255,255,255,0)',
backgroundColor: "rgba(255,255,255,0)",
borderColor: 'rgba(255,255,255,0)',
shadowBlur: 0,
shadowColor: 'rgba(0, 0, 0, 0)'
},
@ -290,7 +296,7 @@ const barComPropsSimple:any = reactive({
if (!params || params.length == 0 || !Array.isArray(params)) return
let fromatStr = ""
params.forEach((ele: any) => {
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">'+ele.data+'</span>' + "</div>"
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</div>"
})
return fromatStr
}
@ -314,8 +320,8 @@ const barComPropsHorizontal = reactive({
type: "category",
// boundaryGap: false,
},
yAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
yAxisData: [],
seriseData: [],//数据
itemStyle: [//柱状图的默认颜色 渐变
{ offset: 0, color: '#077FBA' },
{ offset: 1, color: '#91FFBE' }
@ -330,11 +336,11 @@ const barComPropsHorizontal = reactive({
},
borderRadius: 0,
barWidth: 14,
itemBackgroundStyle:"rgba(255,255,255,0.05)",
itemBackgroundStyle: "rgba(255,255,255,0.05)",
tooltipProps: {
trigger: "axis",
backgroundColor:"rgba(255,255,255,0)",
borderColor:'rgba(255,255,255,0)',
backgroundColor: "rgba(255,255,255,0)",
borderColor: 'rgba(255,255,255,0)',
shadowBlur: 0,
shadowColor: 'rgba(0, 0, 0, 0)'
},
@ -342,108 +348,153 @@ const barComPropsHorizontal = reactive({
if (!params || params.length == 0 || !Array.isArray(params)) return
let fromatStr = ""
params.forEach((ele: any) => {
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">'+ele.data+'</span>' + "</div>"
fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</div>"
})
return fromatStr
}
})
const pie3DList = reactive({
list:[]
list: []
})
onMounted(()=>{
onMounted(() => {
iniTapiMaDevInfoList()
iniTapiMaDevInfoTypeList()
iniTapiMaDevInfoCompanyList()
iniTapiMaDevInfoMatypeList()
iniTapiMaOrderInfoTodayList()
iniTapiMaOrderInfoList()
// ==
iniTapiBmMachinistInfoList()
iniTapiBmCompanyInfoTypeLis()
iniTapiMaDevInfoMaList()
})
const iniTapiMaDevInfoList = async()=>{
const iniTapiMaDevInfoList = async () => {
// 平台入驻设备总数
try {
const res:any = await apiMaDevInfoList()
console.log("apiMaDevInfoList",res)
equipmentCountInfo.listCount=(res+'').split("")
const res: any = await apiMaDevInfoList()
console.log("apiMaDevInfoList", res)
equipmentCountInfo.listCount = (res + '').split("")
} catch (error) {
console.log(error)
}
}
const iniTapiMaDevInfoTypeList = async()=>{
const iniTapiMaDevInfoTypeList = async () => {
// 查询自有以及上架可租设备数量
try {
const res:any = await apiMaDevInfoTypeList()
console.log("apiMaDevInfoTypeList",res)
equipmentCountInfo.selfCount =res.self.count
equipmentCountInfo.shelfCount =res.rent.count
const res: any = await apiMaDevInfoTypeList()
console.log("apiMaDevInfoTypeList", res)
equipmentCountInfo.selfCount = res.self.count
equipmentCountInfo.shelfCount = res.rent.count
} catch (error) {
console.log(error)
}
}
const iniTapiMaDevInfoCompanyList = async()=>{
const iniTapiMaDevInfoCompanyList = async () => {
// 获取企业所属设备状态为自有的设备数量:
try {
const res:any = await apiMaDevInfoCompanyList()
console.log("apiMaDevInfoCompanyList",res)
let resultList:any = []
res.forEach((ele:any)=>{
const res: any = await apiMaDevInfoCompanyList()
console.log("apiMaDevInfoCompanyList", res)
let resultList: any = []
res.forEach((ele: any) => {
const item = [
ele.coType,
ele.count
]
resultList.push(item)
})
pie3DList.list =resultList
pie3DList.list = resultList
} catch (error) {
console.log(error)
}
}
const iniTapiMaDevInfoMatypeList = async()=>{
const iniTapiMaDevInfoMatypeList = async () => {
// 查询在租以及待租设备数量:
try {
const res:any = await apiMaDevInfoMatypeList()
console.log("apiMaDevInfoMatypeList",res)
middleCountList.list[2].count=res.rent.count
middleCountList.list[3].count=res.use.count
const res: any = await apiMaDevInfoMatypeList()
console.log("apiMaDevInfoMatypeList", res)
middleCountList.list[2].count = res.rent.count
middleCountList.list[3].count = res.use.count
} catch (error) {
console.log(error)
}
}
const iniTapiMaOrderInfoTodayList = async()=>{
const iniTapiMaOrderInfoTodayList = async () => {
//查询今日订单额以及订单数量:
try {
const res:any = await apiMaOrderInfoTodayList()
console.log("apiMaOrderInfoTodayList",res)
middleCountList.list[0].count=res[0].count
middleCountList.list[1].count=res[0].money
const res: any = await apiMaOrderInfoTodayList()
console.log("apiMaOrderInfoTodayList", res)
middleCountList.list[0].count = res[0].count
middleCountList.list[1].count = res[0].money
} catch (error) {
console.log(error)
}
}
const barSimpleRef = ref()
const iniTapiMaOrderInfoList = async()=>{
const iniTapiMaOrderInfoList = async () => {
//租赁订单月统计:
try {
const res:any = await apiMaOrderInfoList()
barComPropsSimple.xAxisData=res.map((ele:any)=>ele.month)
barComPropsSimple.seriseData=res.map((ele:any)=>ele.count)
const res: any = await apiMaOrderInfoList()
barComPropsSimple.xAxisData = res.map((ele: any) => ele.month)
barComPropsSimple.seriseData = res.map((ele: any) => ele.count)
} catch (error) {
console.log(error)
}
}
// -----
const totalCount = ref("")
const iniTapiBmMachinistInfoList = async () => {
//获取企业所属对应的机手数量以及机手总人数:
try {
const res: any = await apiBmMachinistInfoList()
console.log("apiBmMachinistInfoList", res)
totalCount.value = res.total
barComProps.xAxisData = res.type.map((ele: any) => ele.ownCo)
barComProps.seriseData = res.type.map((ele: any) => ele.count)
} catch (error) {
console.log(error)
}
}
const iniTapiBmCompanyInfoTypeLis = async () => {
//根据企业类型查询对应数量以及总数量:
try {
const res: any = await apiBmCompanyInfoTypeList()
console.log("apiBmCompanyInfoTypeList", res)
platFormInfo.listCount = (res.total + '').split("")
platFormInfo.socailCount = res.social.count
platFormInfo.enterpriseCount = res.grid.count
platFormInfo.holdingCount = res.corporation.count
} catch (error) {
console.log(error)
}
}
const iniTapiMaDevInfoMaList = async () => {
//查询设备状态为在租的设备名称及数量;租赁在用装备排名
try {
const res: any = await apiMaDevInfoMaList()
console.log("apiMaDevInfoMaList", res)
barComPropsHorizontal.xAxisData = res.map((ele: any) => ele.ownCo)
barComPropsHorizontal.seriseData = res.map((ele: any) => ele.count)
} catch (error) {
console.log(error)
}
}
</script>
<style lang="scss" scoped>
@ -713,12 +764,13 @@ const iniTapiMaOrderInfoList = async()=>{
.bottom_row_center_bar_left {
width: 580px;
position: relative;
.total_count{
.total_count {
position: absolute;
right: 26px;
top: 23px;
font-size: 14px;
color: rgba(255,255,255,0.86);
color: rgba(255, 255, 255, 0.86);
}
}
@ -759,5 +811,4 @@ const iniTapiMaOrderInfoList = async()=>{
flex: 1;
border: 2px solid black;
}
</style>
}</style>