接口调试
This commit is contained in:
BianLzhaoMin
parent
85717b1ce7
commit
6556e86017
|
|
@ -17,6 +17,11 @@ export const getLeaseCouplesApi = (data: any = {}) => {
|
|||
return get('/material-mall/largeScreen/getCompanyNum', data)
|
||||
}
|
||||
|
||||
// 出租租赁数
|
||||
export const getLeaseAndRentCountApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/devLeaseAndRentCount', data)
|
||||
}
|
||||
|
||||
// 装备上架统计
|
||||
export const getDevCountApi = (data: any = {}) => {
|
||||
return get('/material-mall/largeScreen/devCount', data)
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@
|
|||
<div class="title">输电线路类</div>
|
||||
<div style="display: flex">
|
||||
<div class="value">
|
||||
{{ leftData_3[0].deviceCount || 0 }}
|
||||
{{ leftData_3[0]?.deviceCount || 0 }}
|
||||
<span class="unit">个</span>
|
||||
</div>
|
||||
<div class="percentage">{{ leftData_3[0].ratio }}%</div>
|
||||
<div class="percentage">{{ leftData_3[0]?.ratio }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,10 +31,10 @@
|
|||
<div class="title">变电安装类</div>
|
||||
<div style="display: flex">
|
||||
<div class="value">
|
||||
{{ leftData_3[1].deviceCount || 0 }}
|
||||
{{ leftData_3[1]?.deviceCount || 0 }}
|
||||
<span class="unit">个</span>
|
||||
</div>
|
||||
<div class="percentage">{{ leftData_3[1].ratio }}%</div>
|
||||
<div class="percentage">{{ leftData_3[1]?.ratio }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,10 +48,10 @@
|
|||
<div class="title">检修调试类</div>
|
||||
<div style="display: flex">
|
||||
<div class="value">
|
||||
{{ leftData_3[2].deviceCount || 0 }}
|
||||
{{ leftData_3[2]?.deviceCount || 0 }}
|
||||
<span class="unit">个</span>
|
||||
</div>
|
||||
<div class="percentage">{{ leftData_3[2].ratio }}%</div>
|
||||
<div class="percentage">{{ leftData_3[2]?.ratio }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,10 +74,11 @@ const getLeaseCountByTypeNameData = async () => {
|
|||
}
|
||||
|
||||
const leftData_3 = ref<LeaseCount[]>([])
|
||||
getLeaseCountByTypeNameData()
|
||||
// getLeaseCountByTypeNameData()
|
||||
|
||||
const getLeaseCountData = async () => {
|
||||
const { data: res }: any = await getLeaseCountApi()
|
||||
console.log(res, '---')
|
||||
leftData_3.value = res
|
||||
}
|
||||
getLeaseCountData()
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
<!-- 出租租赁数 -->
|
||||
<div class="container">
|
||||
<ScreenTitle :title="`出租租赁数`" />
|
||||
<div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999;">
|
||||
<button @click="toggleTab('lease')" :class="{ active: currentTab === 'lease' }">租赁排名</button>
|
||||
<button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">出租排名</button>
|
||||
<div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999">
|
||||
<button @click="toggleTab('lease')" :class="{ active: currentTab === 'lease' }">
|
||||
租赁排名
|
||||
</button>
|
||||
<button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">
|
||||
出租排名
|
||||
</button>
|
||||
</div>
|
||||
<div class="content" ref="echartsRef"></div>
|
||||
</div>
|
||||
|
|
@ -12,7 +16,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import ScreenTitle from 'components/ScreenTitle/index.vue'
|
||||
import { getLeaseCountByPublishCompanyApi } from 'http/api/screen/index'
|
||||
import { getLeaseCountByPublishCompanyApi, getLeaseAndRentCountApi } from 'http/api/screen/index'
|
||||
import * as echarts from 'echarts'
|
||||
const echartsRef = ref(null)
|
||||
const pieData = ref([])
|
||||
|
|
@ -35,62 +39,85 @@ const getLeaseCountByPublishCompanyData = async () => {
|
|||
})
|
||||
}
|
||||
|
||||
function formatXAxisLabel(value) {
|
||||
let formatted = '';
|
||||
const len = value.length;
|
||||
const leaseInfos = ref<any>([]) // 租赁排名
|
||||
const rentInfos = ref<any>([]) // 出租排名
|
||||
|
||||
const getLeaseAndRentCountData = async () => {
|
||||
const { data: res }: any = await getLeaseAndRentCountApi()
|
||||
leaseInfos.value = res?.leaseInfos
|
||||
rentInfos.value = res?.rentInfos
|
||||
}
|
||||
|
||||
getLeaseAndRentCountData()
|
||||
|
||||
function formatXAxisLabel(value: any) {
|
||||
let formatted = ''
|
||||
const len = value.length
|
||||
|
||||
// 每 4 个字符插入一个换行符 \n
|
||||
for (let i = 0; i < len; i++) {
|
||||
formatted += value[i];
|
||||
formatted += value[i]
|
||||
if ((i + 1) % 4 === 0 && i !== len - 1) {
|
||||
formatted += '\n';
|
||||
formatted += '\n'
|
||||
}
|
||||
}
|
||||
|
||||
// 如果总长度超过 10 字符，则截断并加 ...
|
||||
if (value.length > 10) {
|
||||
const lines = formatted.split('\n');
|
||||
let result = '';
|
||||
let count = 0;
|
||||
const lines = formatted.split('\n')
|
||||
let result = ''
|
||||
let count = 0
|
||||
for (const line of lines) {
|
||||
if (count + line.length <= 10) {
|
||||
result += line + '\n';
|
||||
count += line.length;
|
||||
result += line + '\n'
|
||||
count += line.length
|
||||
} else {
|
||||
result += line.slice(0, 10 - count) + '...';
|
||||
break;
|
||||
result += line.slice(0, 10 - count) + '...'
|
||||
break
|
||||
}
|
||||
}
|
||||
return result.trim();
|
||||
return result.trim()
|
||||
}
|
||||
|
||||
return formatted;
|
||||
return formatted
|
||||
}
|
||||
|
||||
const initCharts = () => {
|
||||
const myChart = echarts.init(echartsRef.value)
|
||||
|
||||
// 数据源：第一行为维度名，后续为数据
|
||||
const dataset = {
|
||||
source: [
|
||||
['公司', '租赁', '出租'],
|
||||
['安徽新力电业科技咨询有限公司', 85, 30],
|
||||
['安徽三环电力工程集团有限公司', 64, 45],
|
||||
['安徽明都能源建设集团有限公司', 46, 56],
|
||||
['安徽莱特实业集团有限公司', 32, 78],
|
||||
['安徽宏源电力建设投资有限公司', 18, 10]
|
||||
]
|
||||
};
|
||||
// const dataset = {
|
||||
// source: [
|
||||
// ['公司', '租赁', '出租'],
|
||||
// ['安徽新力电业科技咨询有限公司', 85, 30],
|
||||
// ['安徽三环电力工程集团有限公司', 64, 45],
|
||||
// ['安徽明都能源建设集团有限公司', 46, 56],
|
||||
// ['安徽莱特实业集团有限公司', 32, 78],
|
||||
// ['安徽宏源电力建设投资有限公司', 18, 10],
|
||||
// ],
|
||||
// }
|
||||
|
||||
let xData = []
|
||||
let yData = []
|
||||
|
||||
if (currentTab.value === 'lease') {
|
||||
xData = leaseInfos.value.map((item: any) => formatXAxisLabel(item.leaseCompanyName))
|
||||
yData = leaseInfos.value.map((item: any) => item.leaseNum)
|
||||
} else {
|
||||
xData = rentInfos.value.map((item: any) => formatXAxisLabel(item.rentCompanyName))
|
||||
yData = rentInfos.value.map((item: any) => item.rentNum)
|
||||
}
|
||||
|
||||
// 处理 x 轴文本
|
||||
const xAxisData = dataset.source.slice(1).map(item => formatXAxisLabel(item[0]));
|
||||
// const xAxisData = dataset.source.slice(1).map((item) => formatXAxisLabel(item[0]))
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' }
|
||||
axisPointer: { type: 'shadow' },
|
||||
},
|
||||
legend: {
|
||||
show: false // 隐藏图例
|
||||
show: false, // 隐藏图例
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
|
|
@ -101,35 +128,34 @@ const initCharts = () => {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#e4e6e8',
|
||||
fontSize: 10,
|
||||
formatter: function (value) {
|
||||
return value.split('@').join('\n'); // 将 @ 替换为换行符 \n
|
||||
return value.split('@').join('\n') // 将 @ 替换为换行符 \n
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffffff', // 白色实线
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '台',
|
||||
nameTextStyle: {
|
||||
color: '#e4e6e8'
|
||||
color: '#e4e6e8',
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#e4e6e8'
|
||||
color: '#e4e6e8',
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
|
|
@ -148,7 +174,7 @@ const initCharts = () => {
|
|||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff'
|
||||
color: '#fff',
|
||||
},
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
|
|
@ -162,8 +188,8 @@ const initCharts = () => {
|
|||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(58,159,174, 0.5)' }, // 带透明度
|
||||
{ offset: 1, color: 'rgba(27,131,144, 0.3)' }
|
||||
]
|
||||
{ offset: 1, color: 'rgba(27,131,144, 0.3)' },
|
||||
],
|
||||
},
|
||||
// 第二个柱子
|
||||
{
|
||||
|
|
@ -174,8 +200,8 @@ const initCharts = () => {
|
|||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(58, 170, 169, 0.5)' },
|
||||
{ offset: 1, color: 'rgba(24, 133, 141, 0.3)' }
|
||||
]
|
||||
{ offset: 1, color: 'rgba(24, 133, 141, 0.3)' },
|
||||
],
|
||||
},
|
||||
// 第三个柱子
|
||||
{
|
||||
|
|
@ -186,8 +212,8 @@ const initCharts = () => {
|
|||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(229,239,145, 0.9)' },
|
||||
{ offset: 1, color: 'rgba(61,139,119, 0.3)' }
|
||||
]
|
||||
{ offset: 1, color: 'rgba(61,139,119, 0.3)' },
|
||||
],
|
||||
},
|
||||
// 第四个柱子（默认）
|
||||
{
|
||||
|
|
@ -198,11 +224,11 @@ const initCharts = () => {
|
|||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(120, 171, 177, 0.5)' },
|
||||
{ offset: 1, color: 'rgba(55, 134, 145, 0.3)' }
|
||||
{ offset: 1, color: 'rgba(55, 134, 145, 0.3)' },
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
return colorArray[params.dataIndex < 3 ? params.dataIndex : 3];
|
||||
return colorArray[params.dataIndex < 3 ? params.dataIndex : 3]
|
||||
},
|
||||
borderWidth: 2,
|
||||
shadowBlur: 1,
|
||||
|
|
@ -210,25 +236,28 @@ const initCharts = () => {
|
|||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 0,
|
||||
opacity: 1,
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#64BDCB'
|
||||
}, {
|
||||
color: '#64BDCB',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#48A1AF'
|
||||
}]),
|
||||
color: '#48A1AF',
|
||||
},
|
||||
]),
|
||||
},
|
||||
barWidth: '40%',
|
||||
data: dataset.source.slice(1).map(item => item[currentTab.value === 'lease' ? 1 : 2])
|
||||
}
|
||||
]
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option)
|
||||
// 图例点击事件：切换租赁/出租
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
Promise.all([getLeaseCountByPublishCompanyData()]).then(() => {
|
||||
Promise.all([getLeaseAndRentCountData()]).then(() => {
|
||||
initCharts()
|
||||
})
|
||||
})
|
||||
|
|
@ -255,7 +284,7 @@ onMounted(() => {
|
|||
button {
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
background-color: #09403F;
|
||||
background-color: #09403f;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Loading…
Reference in New Issue