TRKJ/profitManage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

图形分析接口联调、拓扑和收益修改字段和接口调试

Browse Source
This commit is contained in:
康冉冉
2025-09-03 10:43:09 +08:00
parent 8451b074f6
commit 7467bf2f5a
14 changed files with 530 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/echartsList/bar.vue
+12 -12
View File
@@ -1,6 +1,6 @@
<template>
<div>
<dateTimeSelect v-if="!(barData && barData.hiddenTime)" @dataChange="dataChangeValue"></dateTimeSelect>
<dateTimeSelect v-if="!(barData && barData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></dateTimeSelect>
<div :id="`barChart` + num" style="width:100%;height: 100%;" />
</div>
</template>
@@ -20,6 +20,10 @@
type: String,
default: null
},
dateShowType: {
type: String,
default: null
},
chartData: {
type: Function,
default: () => {
@@ -44,20 +48,16 @@
methods: {
getList(title, dataXY) {
const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
let titleSet = {};
if (dataXY && dataXY.titleVal) {
titleSet = {
let option = {
title: [{
text: title,
x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
textStyle: {
fontSize: 14
fontSize: dataXY && dataXY.titleVal && dataXY.titleVal.fontSize || 16
},
};
}
let option = {
title: [titleSet],
}],
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -83,7 +83,7 @@
splitLine: { show: false },
// x轴标签样式（保留标签便于阅读）
axisLabel: {
show: false
show: dataXY && dataXY.hidAxisLabel ? false : true
}
}
],
@@ -97,7 +97,7 @@
// 去掉y轴刻度线
axisTick: { show: false },
// 去掉y轴网格线（横向网格）
splitLine: { show: false },
splitLine: { show: dataXY && dataXY.hidSplitLine ? false : true },
// Y轴标签样式（保留标签便于阅读）
axisLabel: {
show: true
@@ -128,7 +128,7 @@
// console.log(props.chartData(val));
// this.getList(this.title, {data: this.barData.data, lineData: days, yAxis: this.barData && this.barData.yAxis});
let newbarData = {...this.barData};
newbarData['lineData'] = days;
newbarData['lineData'] = days && days.length > 0 ? days: this.barData.lineXData;
this.getList(this.title, newbarData);
}
}
src/components/echartsList/dateTimeSelect.vue
+79 -12
View File
@@ -2,18 +2,25 @@
<div class="ultabs">
<el-date-picker
v-model="dateRange"
type="daterange"
start-placeholder="开始时间"
end-placeholder="结束时间"
:type="dateShowType === 'day' ? 'daterange' : 'monthrange'"
:start-placeholder="dateShowType === 'day' ? '开始时间' : '开始日期'"
:end-placeholder="dateShowType === 'day' ? '结束时间' : '结束日期'"
range-separator="至"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
:value-format="dateShowType === 'day' ? 'yyyy-MM-dd' : 'yyyy-MM'"
style="display: inline-block!important;width: 45%!important;vertical-align: middle;"
@change="dateChange"/>
<ul style="display: inline-block;padding-left: 10px;vertical-align: middle;">
<template v-if="dateShowType === 'day'">
<li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
<li :class="{ 'activesbgs' : isActive == 'WEEK' }" @click="toggle('WEEK',15)">前15天</li>
<li :class="{ 'activesbgs' : isActive == 'MONTH' }" @click="toggle('MONTH')">前一个月</li>
</template>
<template v-else>
<li :class="{ 'activesbgs' : isActive == 'THREEMONTH' }" @click="toggle('THREEMONTH')">前三个月</li>
<li :class="{ 'activesbgs' : isActive == 'HALFYEAR' }" @click="toggle('HALFYEAR')">前半年</li>
<li :class="{ 'activesbgs' : isActive == 'YEAR' }" @click="toggle('YEAR')">前一年</li>
</template>
</ul>
</div>
</template>
@@ -22,27 +29,38 @@
import {onMounted} from "vue";
export default {
name: 'dateTimeSelect',
props: {},
props: {
dateShowType: {
type: String,
default: null
}
},
data() {
return {
dateRange: [],
isActive: 'DAY'
isActive: ''
}
},
// DOM 挂载完成后
mounted() {
// 可以访问 DOM 元素
setTimeout(() => {
this.getLastDays(6);
// this.getLastDays(6);
// this.getDaysOfPreviousMonth();
this.$emit("dataChange", this.isActive, []);
}, 500);
},
methods: {
toggle(val, num) {
this.isActive = val;
if (val && val !== 'MONTH') {
this.getLastDays(num - 1);
} else {
if (val && val === 'MONTH') {
this.getDaysOfPreviousMonth();
} else if (val && val === 'THREEMONTH') {
this.getLastThreeMonths();
} else if (val && val === 'HALFYEAR') {
this.getLastSixMonths();
} else {
this.getLastDays(num - 1);
}
},
dateChange() {
@@ -66,6 +84,7 @@
}
this.$emit("dataChange", this.isActive, dayList);
},
// 获取前一个月的所有日期
getDaysOfPreviousMonth(star, end) {
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
@@ -91,7 +110,55 @@
currentDay.setDate(currentDay.getDate() + 1);
}
this.$emit("dataChange", this.isActive, oneMonthDays);
}
},
// 获取前三个月的月
getLastThreeMonths() {
const threeMonths = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
// 循环获取前3个月（i=0: 前1个月，i=1: 前2个月，i=2: 前3个月）
for (let i = 1; i <= 3; i++) {
// 计算目标月份（当前月 - i）
let targetMonth = currentMonth - i;
let targetYear = currentYear;
// 处理月份溢出（如1月-1=12月，年份减1）
if (targetMonth < 0) {
targetMonth += 12;
targetYear -= 1;
}
// 格式化月份为两位数（如5月→'05'）
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1是因为月份从0开始
threeMonths.push(`${targetYear}-${monthStr}`);
}
console.log('threeMonths===',threeMonths);
this.$emit("dataChange", this.isActive, threeMonths);
},
// 前半年
getLastSixMonths() {
const result = [];
const today = new Date(); // 当前日期
const currentYear = today.getFullYear();
const currentMonth = today.getMonth(); // 月份从0开始（0=1月，11=12月）
// 循环获取前6个月（i=1: 前1个月，i=6: 前6个月）
for (let i = 1; i <= 6; i++) {
let targetMonth = currentMonth - i;
let targetYear = currentYear;
// 处理月份跨年份（如1月-1=12月，年份减1）
if (targetMonth < 0) {
targetMonth += 12;
targetYear -= 1;
}
// 格式化月份为两位数（如5月→'05'）
const monthStr = String(targetMonth + 1).padStart(2, '0'); // 加1转为实际月份（1-12）
result.push(`${targetYear}-${monthStr}`);
}
return result;
},
}
}
</script>
src/components/echartsList/line.vue
+8 -4
View File
@@ -1,6 +1,6 @@
<template>
<div>
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" @dataChange="dataChangeValue"></DateTimeSelect>
<DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
<div :id="`lineChart` + num" style="width:100%;height: 100%;" />
</div>
</template>
@@ -20,6 +20,10 @@
type: String,
default: null
},
dateShowType: {
type: String,
default: null
},
chartData: {
type: Function,
default: () => {
@@ -81,7 +85,7 @@
type: 'value',
name: '单位Mbps',
splitLine: {
show: false,
show: true,
},
},
series: [
@@ -100,8 +104,8 @@
// })
},
dataChangeValue(val, days) {
// console.log(props.chartData(val));
this.getList(this.title, {data: this.lineData.data, lineXData: days});
let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
}
}
}
src/components/form/index.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" class="demo-ruleForm">
<el-row v-for="(formItem,index) of formList">
<h4 class="form-header h4">{{formItem.config.title}}</h4>
<el-col v-for="(formVal,key,index) of formItem['controls']" :span="formVal.span" v-if="!formVal.hidden" :style="formVal.style">