大屏接口调试

This commit is contained in:
13218645326 2023-12-02 17:14:56 +08:00
parent 6352984afd
commit 261a15df49
7 changed files with 199 additions and 50 deletions

View File

@ -4,7 +4,14 @@
<script setup lang="ts">
import Highcharts from "highcharts"
import highcharts3d from 'highcharts/highcharts-3d'
const props = defineProps({
list:{
type:Array,
default:[]
}
})
onMounted(() => {
console.log("props-list",props.list)
Highcharts.chart('container', options)
})
@ -43,15 +50,7 @@ const options = {
},
series: [{
name: '设备数量',
data: [
['广东电网', 8],
['广西电网', 3],
['云南电网', 1],
['贵州电网', 6],
['海南电网', 8],
['深圳供电局', 4],
['超高压公司', 4]
]
data:props.list
}]
}

View File

@ -130,7 +130,7 @@ const propsVal = defineProps({
onMounted(() => {
const BarEchartDomEl = document.getElementById("BarEchartDom" + propsVal.domId);
myChart = echarts.init(BarEchartDomEl);
console.log("mychart-bar-003", option)
console.log("mychart-bar-003", propsVal)
myChart.setOption(option);
})

17
src/http/api.md Normal file
View File

@ -0,0 +1,17 @@
平台入驻设备总数: http://10.40.92.64:9501/maDevInfo/list 已经对接
查询自有以及上架可租设备数量:已经对接
http://10.40.92.64:9501/maDevInfo/type-list
获取企业所属设备状态为自有的设备数量: 已经对接
http://10.40.92.64:9501/maDevInfo/company-list
查询在租以及待租设备数量: 已经对接
http://10.40.92.64:9501/maDevInfo/matype-list
查询今日订单额以及订单数量: 已经对接
http://10.40.92.64:9501/maOrderInfo/today-list
租赁订单月统计: 已经对接
http://10.40.92.64:9501/maOrderInfo/list

38
src/http/api/echartApi.ts Normal file
View File

@ -0,0 +1,38 @@
import { get, post } from '../index'
// 平台入驻设备总数
export function apiMaDevInfoList() {
return get('maDevInfo/list', {})
}
// 查询自有以及上架可租设备数量
export function apiMaDevInfoTypeList() {
return get('maDevInfo/type-list', {})
}
// 获取企业所属设备状态为自有的设备数量:
export function apiMaDevInfoCompanyList() {
return get('maDevInfo/company-list', {})
}
// 查询在租以及待租设备数量:
export function apiMaDevInfoMatypeList() {
return get('maDevInfo/matype-list', {})
}
// 查询今日订单额以及订单数量:
export function apiMaOrderInfoTodayList() {
return get('maOrderInfo/today-list', {})
}
// 租赁订单月统计:
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', {})
// }

View File

@ -40,7 +40,8 @@ export function get(url: string, params: any) {
.get(url, { params })
.then((res: any) => {
NProgress.done()
if (res.code == '0000') {
console.log("res-get",res)
if (res.code == '200') {
resolve(res.data)
} else {
reject(res.data)
@ -62,10 +63,10 @@ export function post(url: string, params: any) {
.then((res: any) => {
NProgress.done()
console.log('---------------------------', res)
if (res.code == '0000') {
if (res.code == '200') {
resolve(res.data)
} else {
reject(res)
reject(res.data)
}
})
.catch((err) => {
@ -89,7 +90,7 @@ export function upload(url: string, params: any) {
})
.then((res: any) => {
NProgress.done()
if (res.code == '0000') {
if (res.code == '200') {
resolve(res.data)
} else {
reject(res.data)

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" :key="index">
<div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount.slice(0,4)" :key="index">
{{ item }}
</div>
<div class="count_item">
<div class="count_item" v-if="equipmentCountInfo.listCount.length>4">
+
</div>
</div>
@ -96,7 +96,7 @@
</div>
</div>
<div class="enterprise_device">
<Pie3dCom></Pie3dCom>
<Pie3dCom :list="pie3DList.list" v-if="pie3DList.list.length>0"></Pie3dCom>
</div>
@ -119,7 +119,7 @@
:barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom>
</div>
<div class="bottom_row_center_bar_right">
<barCom :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"
@ -153,15 +153,14 @@
</template>
<script lang="ts" setup>
// import lineCom from "../../components/echartsCom/lineCom.vue"
import mapEcharts from "../../components/echartsCom/mapEcharts.vue"
import barCom from "../../components/echartsCom/barCom.vue"
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"
const equipmentCountInfo: any = reactive({
listCount: ['9', '9', '9', '9'],
listCount: [],
selfCount: "999",
shelfCount: "999"
})
@ -170,22 +169,22 @@ const middleCountList = reactive({
list: [
{
icon: getImg("/src/assets/img/money1.png"),
count: "546465",
count: "",
title: "今日订单"
},
{
icon: getImg("/src/assets/img/money2.png"),
count: "5645646",
count: "",
title: "累计金额"
},
{
icon: getImg("/src/assets/img/money3.png"),
count: "546465",
count: "",
title: "在用设备"
},
{
icon: getImg("/src/assets/img/money2.png"),
count: "5645646",
count: "",
title: "待租设备"
}
]
@ -246,13 +245,13 @@ const barComProps = reactive({
}
})
const barComPropsSimple = reactive({
const barComPropsSimple:any = reactive({
title: "租赁订单月统计",
titleStyle: {
color: "#0099FF",
paddingTop: 20
},
xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
xAxisData:[], //["123213","werwe","ewrwer"],
yAxisProps: {
type: "value",
splitLine: {// y线
@ -265,7 +264,7 @@ const barComPropsSimple = reactive({
},
show: true
},
seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//
seriseData:[],// [12,22,33],//
itemStyle: [//
{ offset: 0, color: '#10A1B8' },
{ offset: 1, color: '#5BE3FF' }
@ -348,6 +347,101 @@ const barComPropsHorizontal = reactive({
return fromatStr
}
})
const pie3DList = reactive({
list:[]
})
onMounted(()=>{
iniTapiMaDevInfoList()
iniTapiMaDevInfoTypeList()
iniTapiMaDevInfoCompanyList()
iniTapiMaDevInfoMatypeList()
iniTapiMaOrderInfoTodayList()
iniTapiMaOrderInfoList()
})
const iniTapiMaDevInfoList = async()=>{
//
try {
const res:any = await apiMaDevInfoList()
console.log("apiMaDevInfoList",res)
equipmentCountInfo.listCount=(res+'').split("")
} catch (error) {
console.log(error)
}
}
const iniTapiMaDevInfoTypeList = async()=>{
//
try {
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()=>{
// :
try {
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
} catch (error) {
console.log(error)
}
}
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
} catch (error) {
console.log(error)
}
}
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
} catch (error) {
console.log(error)
}
}
const barSimpleRef = ref()
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)
} catch (error) {
console.log(error)
}
}
</script>

View File

@ -86,36 +86,36 @@ export default ({ mode }: any) => {
rewrite: (path) => path.replace(/^\/proxyApi/, ''),
configure: (proxy, _options) => {
proxy.on('error', (err, _req, _res) => {
console.log('proxy error', err)
// console.log('proxy error', err)
})
proxy.on('start', (req, res, target) => {
console.log(
'Proxy Start:',
req.method,
req.url,
req.headers,
_options
)
// console.log(
// 'Proxy Start:',
// req.method,
// req.url,
// req.headers,
// _options
// )
})
proxy.on('proxyReq', (proxyReq, req, _res) => {
console.log(
'Sending Request to the Target:',
req.method,
req.url,
req.headers,
_options
)
// console.log(
// 'Sending Request to the Target:',
// req.method,
// req.url,
// req.headers,
// _options
// )
proxyReq.removeHeader('origin')
// 跨域解决
})
proxy.on('proxyRes', (proxyRes, req, _res) => {
console.log(
'Received Response from the Target:',
proxyRes.statusCode,
proxyRes.headers,
req.url
)
// console.log(
// 'Received Response from the Target:',
// proxyRes.statusCode,
// proxyRes.headers,
// req.url
// )
})
}
}