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

接口调试

This commit is contained in:
BianLzhaoMin 2025-07-03 15:47:06 +08:00
parent 85717b1ce7
commit 6556e86017
3 changed files with 110 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/http/api/screen/index.ts
View File

@ -17,6 +17,11 @@ export const getLeaseCouplesApi = (data: any = {}) => {
return get('/material-mall/largeScreen/getCompanyNum', data) return get('/material-mall/largeScreen/getCompanyNum', data)
} }
// 出租租赁数
export const getLeaseAndRentCountApi = (data: any = {}) => {
return get('/material-mall/largeScreen/devLeaseAndRentCount', data)
}
// 装备上架统计 // 装备上架统计
export const getDevCountApi = (data: any = {}) => { export const getDevCountApi = (data: any = {}) => {
return get('/material-mall/largeScreen/devCount', data) return get('/material-mall/largeScreen/devCount', data)

15
src/views/big-screen/model-components/left-two-model-new.vue
View File

@ -14,10 +14,10 @@
<div class="title">输电线路类</div> <div class="title">输电线路类</div>
<div style="display: flex"> <div style="display: flex">
<div class="value"> <div class="value">
{{ leftData_3[0].deviceCount || 0 }} {{ leftData_3[0]?.deviceCount || 0 }}
<span class="unit">个</span> <span class="unit">个</span>
</div> </div>
<div class="percentage">{{ leftData_3[0].ratio }}%</div> <div class="percentage">{{ leftData_3[0]?.ratio }}%</div>
</div> </div>
</div> </div>
</div> </div>
@ -31,10 +31,10 @@
<div class="title">变电安装类</div> <div class="title">变电安装类</div>
<div style="display: flex"> <div style="display: flex">
<div class="value"> <div class="value">
{{ leftData_3[1].deviceCount || 0 }} {{ leftData_3[1]?.deviceCount || 0 }}
<span class="unit">个</span> <span class="unit">个</span>
</div> </div>
<div class="percentage">{{ leftData_3[1].ratio }}%</div> <div class="percentage">{{ leftData_3[1]?.ratio }}%</div>
</div> </div>
</div> </div>
</div> </div>
@ -48,10 +48,10 @@
<div class="title">检修调试类</div> <div class="title">检修调试类</div>
<div style="display: flex"> <div style="display: flex">
<div class="value"> <div class="value">
{{ leftData_3[2].deviceCount || 0 }} {{ leftData_3[2]?.deviceCount || 0 }}
<span class="unit">个</span> <span class="unit">个</span>
</div> </div>
<div class="percentage">{{ leftData_3[2].ratio }}%</div> <div class="percentage">{{ leftData_3[2]?.ratio }}%</div>
</div> </div>
</div> </div>
</div> </div>
@ -74,10 +74,11 @@ const getLeaseCountByTypeNameData = async () => {
} }
const leftData_3 = ref<LeaseCount[]>([]) const leftData_3 = ref<LeaseCount[]>([])
getLeaseCountByTypeNameData() // getLeaseCountByTypeNameData()
const getLeaseCountData = async () => { const getLeaseCountData = async () => {
const { data: res }: any = await getLeaseCountApi() const { data: res }: any = await getLeaseCountApi()
console.log(res, '---')
leftData_3.value = res leftData_3.value = res
} }
getLeaseCountData() getLeaseCountData()

165
src/views/big-screen/model-components/right-three-model-new.vue
View File

@ -2,9 +2,13 @@
<!-- 出租租赁数 --> <!-- 出租租赁数 -->
<div class="container"> <div class="container">
<ScreenTitle :title="`出租租赁数`" /> <ScreenTitle :title="`出租租赁数`" />
<div class="tab-buttons" style="position: absolute; top: 15%; left: 30%; z-index: 9999;"> <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('lease')" :class="{ active: currentTab === 'lease' }">
<button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">出租排名</button> 租赁排名
</button>
<button @click="toggleTab('rent')" :class="{ active: currentTab === 'rent' }">
出租排名
</button>
</div> </div>
<div class="content" ref="echartsRef"></div> <div class="content" ref="echartsRef"></div>
</div> </div>
@ -12,7 +16,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import ScreenTitle from 'components/ScreenTitle/index.vue' 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' import * as echarts from 'echarts'
const echartsRef = ref(null) const echartsRef = ref(null)
const pieData = ref([]) const pieData = ref([])
@ -28,69 +32,92 @@ const getLeaseCountByPublishCompanyData = async () => {
return { return {
value: e.leaseCount, value: e.leaseCount,
name: e.publishCompany, name: e.publishCompany,
// e.publishCompany.length > 6 // e.publishCompany.length > 6
// ? e.publishCompany.slice(0, 6) + '..' // ? e.publishCompany.slice(0, 6) + '..'
// : e.publishCompany, // : e.publishCompany,
} }
}) })
} }
function formatXAxisLabel(value) { const leaseInfos = ref<any>([]) // 租赁排名
let formatted = ''; const rentInfos = ref<any>([]) // 出租排名
const len = value.length;
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 // 每 4 个字符插入一个换行符 \n
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
formatted += value[i]; formatted += value[i]
if ((i + 1) % 4 === 0 && i !== len - 1) { if ((i + 1) % 4 === 0 && i !== len - 1) {
formatted += '\n'; formatted += '\n'
} }
} }
// 如果总长度超过 10 字符，则截断并加 ... // 如果总长度超过 10 字符，则截断并加 ...
if (value.length > 10) { if (value.length > 10) {
const lines = formatted.split('\n'); const lines = formatted.split('\n')
let result = ''; let result = ''
let count = 0; let count = 0
for (const line of lines) { for (const line of lines) {
if (count + line.length <= 10) { if (count + line.length <= 10) {
result += line + '\n'; result += line + '\n'
count += line.length; count += line.length
} else { } else {
result += line.slice(0, 10 - count) + '...'; result += line.slice(0, 10 - count) + '...'
break; break
} }
} }
return result.trim(); return result.trim()
} }
return formatted; return formatted
} }
const initCharts = () => { const initCharts = () => {
const myChart = echarts.init(echartsRef.value) const myChart = echarts.init(echartsRef.value)
// 数据源：第一行为维度名，后续为数据 // 数据源：第一行为维度名，后续为数据
const dataset = { // const dataset = {
source: [ // source: [
['公司', '租赁', '出租'], // ['公司', '租赁', '出租'],
['安徽新力电业科技咨询有限公司', 85, 30], // ['安徽新力电业科技咨询有限公司', 85, 30],
['安徽三环电力工程集团有限公司', 64, 45], // ['安徽三环电力工程集团有限公司', 64, 45],
['安徽明都能源建设集团有限公司', 46, 56], // ['安徽明都能源建设集团有限公司', 46, 56],
['安徽莱特实业集团有限公司', 32, 78], // ['安徽莱特实业集团有限公司', 32, 78],
['安徽宏源电力建设投资有限公司', 18, 10] // ['安徽宏源电力建设投资有限公司', 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 轴文本 // 处理 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 = { const option = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { type: 'shadow' } axisPointer: { type: 'shadow' },
}, },
legend: { legend: {
show: false // 隐藏图例 show: false, // 隐藏图例
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -101,35 +128,34 @@ const initCharts = () => {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xAxisData, data: xData,
axisLabel: { axisLabel: {
color: '#e4e6e8', color: '#e4e6e8',
fontSize: 10, fontSize: 10,
formatter: function (value) { formatter: function (value) {
return value.split('@').join('\n'); // 将 @ 替换为换行符 \n return value.split('@').join('\n') // 将 @ 替换为换行符 \n
}, },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffffff', // 白色实线 color: '#ffffff', // 白色实线
width: 1, width: 1,
type: 'solid' type: 'solid',
} },
}, },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
name: '台', name: '台',
nameTextStyle: { nameTextStyle: {
color: '#e4e6e8' color: '#e4e6e8',
}, },
axisLabel: { axisLabel: {
color: '#e4e6e8' color: '#e4e6e8',
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -148,7 +174,7 @@ const initCharts = () => {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color: '#fff' color: '#fff',
}, },
itemStyle: { itemStyle: {
color: function (params) { color: function (params) {
@ -161,9 +187,9 @@ const initCharts = () => {
x2: 0, x2: 0,
y2: 1, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(58,159,174, 0.5)' }, // 带透明度 { 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, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(58, 170, 169, 0.5)' }, { 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, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(229,239,145, 0.9)' }, { 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, y2: 1,
colorStops: [ colorStops: [
{ offset: 0, color: 'rgba(120, 171, 177, 0.5)' }, { 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, borderWidth: 2,
shadowBlur: 1, shadowBlur: 1,
@ -210,25 +236,28 @@ const initCharts = () => {
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
opacity: 1, opacity: 1,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
offset: 0, {
color: '#64BDCB' offset: 0,
}, { color: '#64BDCB',
offset: 1, },
color: '#48A1AF' {
}]), offset: 1,
color: '#48A1AF',
},
]),
}, },
barWidth: '40%', barWidth: '40%',
data: dataset.source.slice(1).map(item => item[currentTab.value === 'lease' ? 1 : 2]) data: yData,
} },
] ],
} }
myChart.setOption(option) myChart.setOption(option)
// 图例点击事件：切换租赁/出租 // 图例点击事件：切换租赁/出租
} }
onMounted(() => { onMounted(() => {
Promise.all([getLeaseCountByPublishCompanyData()]).then(() => { Promise.all([getLeaseAndRentCountData()]).then(() => {
initCharts() initCharts()
}) })
}) })
@ -255,7 +284,7 @@ onMounted(() => {
button { button {
padding: 5px 10px; padding: 5px 10px;
margin-right: 5px; margin-right: 5px;
background-color: #09403F; background-color: #09403f;
color: #fff; color: #fff;
border: none; border: none;
cursor: pointer; cursor: pointer;