Skip to content

S
SatelliteDigital
提交 45a0bdf7 authored 作者: liujiaxing's avatar liujiaxing
浏览文件
操作

曲线最新代码

上级 107d8d1e
隐藏空白字符变更
内嵌 并排
正在显示 包含 574 行增加 和 39 行删除
src/pages/all/components/cdf/index.vue
浏览文件 @ 45a0bdf7
...@@ -8,16 +8,48 @@ ...@@ -8,16 +8,48 @@
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div> <div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge" @click="clickBig"> <div style="display: flex;align-items: center;">
<svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="setImg" @click="setclick">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" /> <img src="../../../../assets/images/right2/chilun.png" alt="">
<path class="arrow-path " </div>
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" <div class="hot-title-enlarge" @click="clickBig">
fill="white" fill-opacity="0.65" /> <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="arrow-path " <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z" <path class="arrow-path "
fill="white" fill-opacity="0.65" /> d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
</svg> fill="white" fill-opacity="0.65" />
<path class="arrow-path "
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z"
fill="white" fill-opacity="0.65" />
</svg>
</div>
</div>
</div>
<div v-if="setdia" class="setTimeClass">
<div class="selector-item">
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
</div>
</div>
<div class="selector-item">
<label class="selector-label">历史查询</label>
<div class="custom-select">
<el-switch v-model="historyS" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
</div>
</div> </div>
</div> </div>
<!-- 核心数据指标 --> <!-- 核心数据指标 -->
...@@ -123,6 +155,88 @@ onBeforeUnmount(() => { ...@@ -123,6 +155,88 @@ onBeforeUnmount(() => {
//console.log("中，zhelixieza"); //console.log("中，zhelixieza");
}); });
const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
console.log("哦口口");
setdia.value = !setdia.value
historyS.value = false
}
const timeList = ref([
{
label: '当天',
value: '1'
},
{
label: '近七天',
value: '2'
},
{
label: '近一个月',
value: '3'
},
])
const emit = defineEmits();
const timeValue = ref('1')
//点击时隐弹框调取接口
const dateClick = (e) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
const day = now.getDate();
startTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
endTime = ''
if (timeValue.value == 1) {//当天
endTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
} else if (timeValue.value == 2) {//近七天
endTime = getLast7DaysIncludingToday()
} else if (timeValue.value == 3) {//近一个月
endTime = getPreviousMonthDate()
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
}
//获取前7天和一个月的日期
function getLast7DaysIncludingToday() {
const dates = [];
const today = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
dates.push(`${year}-${month}-${day}`);
}
return dates[dates.length - 1];
}
function getPreviousMonthDate() {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // 0-11
const day = today.getDate();
// 减一个月
const prevMonthDate = new Date(year, month - 1, day);
// 如果日期溢出（例如 3月31日 -> 2月31日 -> 实际变成3月2日或3月3日？）
// 这里直接用 new Date(year, month-1, day) 会自动调整，但我们需要的是“一个月前的同一天”，若不存在则取该月最后一天
// 上述写法已经能正确处理（如 3月31日 -> 2月28/29日），因为 new Date(2026, 1, 31) -> 2026-02-28（2026非闰年）
const y = prevMonthDate.getFullYear();
const m = String(prevMonthDate.getMonth() + 1).padStart(2, '0');
const d = String(prevMonthDate.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
const bigStatus = ref(false) const bigStatus = ref(false)
//点击放大窗口详细查看曲线 //点击放大窗口详细查看曲线
const clickBig = () => { const clickBig = () => {
...@@ -154,6 +268,7 @@ const componentProps = ref({}); ...@@ -154,6 +268,7 @@ const componentProps = ref({});
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
height: 100%; height: 100%;
position: relative;
} }
/* 标题栏 */ /* 标题栏 */
...@@ -407,4 +522,59 @@ const componentProps = ref({}); ...@@ -407,4 +522,59 @@ const componentProps = ref({});
z-index: -1; z-index: -1;
/* 确保伪元素在内容之下 */ /* 确保伪元素在内容之下 */
} }
.setImg {
width: 22px;
height: 22px;
margin-right: 10px;
margin-bottom: 5px;
/* background-color: red; */
}
.setImg img {
width: 100%;
height: 100%;
}
.setTimeClass {
position: absolute;
left: 0;
top: 80px;
width: 100%;
min-height: 100px;
background-color: #272f3e;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.selector-label {
width: 80px;
}
.selector-item {
display: flex;
/* flex-direction: column; */
align-items: center;
gap: 5px;
min-width: 100px;
/* 最小宽度 */
flex: 1;
/* 弹性增长 */
/* z-index: 99999; */
}
.custom-select {
position: relative;
width: 120px;
/* 自适应宽度 */
}
:deep(.custom-select .el-select__wrapper) {
height: 12.5px;
}
:deep(.dateclass) {
width: 250px !important;
}
</style> </style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 45a0bdf7
...@@ -16,16 +16,48 @@ ...@@ -16,16 +16,48 @@
hotSelectFn() hotSelectFn()
}" /> }" />
</el-select> </el-select>
<div class="hot-title-enlarge" @click="clickBig"> <div style="display: flex;align-items: center;">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="setImg" @click="setclick">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" /> <img src="../../../../assets/images/right2/chilun.png" alt="">
<path class="arrow-path " </div>
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" <div class="hot-title-enlarge" @click="clickBig">
fill="white" fill-opacity="0.65" /> <svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="arrow-path " <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z" <path class="arrow-path "
fill="white" fill-opacity="0.65" /> d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
</svg> fill="white" fill-opacity="0.65" />
<path class="arrow-path "
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z"
fill="white" fill-opacity="0.65" />
</svg>
</div>
</div>
</div>
<div v-if="setdia" class="setTimeClass">
<div class="selector-item">
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
</div>
</div>
<div class="selector-item">
<label class="selector-label">历史查询</label>
<div class="custom-select">
<el-switch v-model="historyS" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
</div>
</div> </div>
</div> </div>
<!-- 核心数据指标 --> <!-- 核心数据指标 -->
...@@ -102,6 +134,90 @@ const props = defineProps({ ...@@ -102,6 +134,90 @@ const props = defineProps({
const hotStatus = ref(true) const hotStatus = ref(true)
const selectedValue = ref(0)//热力图下拉框 const selectedValue = ref(0)//热力图下拉框
console.log(props, '热力图数据') console.log(props, '热力图数据')
const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
setdia.value = !setdia.value
historyS.value = false
}
const timeList = ref([
{
label: '当天',
value: '1'
},
{
label: '近七天',
value: '2'
},
{
label: '近一个月',
value: '3'
},
])
const emit = defineEmits();
const timeValue = ref('1')
//点击时隐弹框调取接口
const dateClick = (e) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
const day = now.getDate();
startTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
endTime = ''
if (timeValue.value == 1) {//当天
endTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
} else if (timeValue.value == 2) {//近七天
endTime = getLast7DaysIncludingToday()
} else if (timeValue.value == 3) {//近一个月
endTime = getPreviousMonthDate()
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
}
//获取前7天和一个月的日期
function getLast7DaysIncludingToday() {
const dates = [];
const today = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
dates.push(`${year}-${month}-${day}`);
}
return dates[dates.length - 1];
}
function getPreviousMonthDate() {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // 0-11
const day = today.getDate();
// 减一个月
const prevMonthDate = new Date(year, month - 1, day);
// 如果日期溢出（例如 3月31日 -> 2月31日 -> 实际变成3月2日或3月3日？）
// 这里直接用 new Date(year, month-1, day) 会自动调整，但我们需要的是“一个月前的同一天”，若不存在则取该月最后一天
// 上述写法已经能正确处理（如 3月31日 -> 2月28/29日），因为 new Date(2026, 1, 31) -> 2026-02-28（2026非闰年）
const y = prevMonthDate.getFullYear();
const m = String(prevMonthDate.getMonth() + 1).padStart(2, '0');
const d = String(prevMonthDate.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
const bigStatus = ref(false) const bigStatus = ref(false)
const hotSelectFn = () => { const hotSelectFn = () => {
hotStatus.value = false hotStatus.value = false
...@@ -139,6 +255,7 @@ const closeDialogFn = () => { ...@@ -139,6 +255,7 @@ const closeDialogFn = () => {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
gap: 15px; gap: 15px;
position: relative;
} }
/* 标题栏 */ /* 标题栏 */
...@@ -406,4 +523,59 @@ const closeDialogFn = () => { ...@@ -406,4 +523,59 @@ const closeDialogFn = () => {
z-index: -1; z-index: -1;
/* 确保伪元素在内容之下 */ /* 确保伪元素在内容之下 */
} }
.setImg {
width: 22px;
height: 22px;
margin-right: 10px;
margin-bottom: 5px;
/* background-color: red; */
}
.setImg img {
width: 100%;
height: 100%;
}
.setTimeClass {
position: absolute;
left: 0;
top: 80px;
width: 100%;
min-height: 100px;
background-color: #272f3e;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.selector-label {
width: 80px;
}
.selector-item {
display: flex;
/* flex-direction: column; */
align-items: center;
gap: 5px;
min-width: 100px;
/* 最小宽度 */
flex: 1;
/* 弹性增长 */
/* z-index: 99999; */
}
.custom-select {
position: relative;
width: 120px;
/* 自适应宽度 */
}
:deep(.custom-select .el-select__wrapper) {
height: 12.5px;
}
:deep(.dateclass) {
width: 250px !important;
}
</style> </style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ 45a0bdf7
...@@ -8,16 +8,48 @@ ...@@ -8,16 +8,48 @@
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div> <div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge" @click="clickBig"> <div style="display: flex;align-items: center;">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <div class="setImg" @click="setclick">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" /> <img src="../../../../assets/images/right2/chilun.png" alt="">
<path class="arrow-path " </div>
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" <div class="hot-title-enlarge" @click="clickBig">
fill="white" fill-opacity="0.65" /> <svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="arrow-path " <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z" <path class="arrow-path "
fill="white" fill-opacity="0.65" /> d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
</svg> fill="white" fill-opacity="0.65" />
<path class="arrow-path "
d="M8.5 23.5592V18.5592H10.1667V20.6549L13.9883 16.8333L15.1668 18.0118L11.2861 21.8925H13.5V23.5592H8.5Z"
fill="white" fill-opacity="0.65" />
</svg>
</div>
</div>
</div>
<div v-if="setdia" class="setTimeClass">
<div class="selector-item">
<label class="selector-label">时间窗口</label>
<div class="custom-select">
<!-- 地面粒度 -->
<el-select v-model="timeValue" placeholder="" style="width: 100%;">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"
@click="dateClick()" />
</el-select>
</div>
</div>
<div class="selector-item">
<label class="selector-label">历史查询</label>
<div class="custom-select">
<el-switch v-model="historyS" />
</div>
</div>
<div class="selector-item" v-if="historyS">
<label class="selector-label">时间段</label>
<div class="custom-select">
<el-date-picker class="dateclass" v-model="dateValue" type="daterange" range-separator="~"
start-placeholder="开始时间" end-placeholder="结束时间" @change="dateClick" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
</div>
</div> </div>
</div> </div>
<!-- 核心数据指标 判断一个图表中是否有多个曲线--> <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
...@@ -124,11 +156,86 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜 ...@@ -124,11 +156,86 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜
setTimeout(() => { setTimeout(() => {
console.log('瞬时值曲线', props) console.log('瞬时值曲线', props)
}, 2000); }, 2000);
// setInterval(() => { const historyS = ref(false)//是否查询历史模式
const dateValue = ref([])//时间段
const setdia = ref(false)//弹框是否展开
//设置问题
const setclick = () => {
setdia.value = !setdia.value
historyS.value = false
}
const timeList = ref([
{
label: '当天',
value: '1'
},
{
label: '近七天',
value: '2'
},
{
label: '近一个月',
value: '3'
},
])
const emit = defineEmits();
const timeValue = ref('1')
//点击时隐弹框调取接口
const dateClick = (e) => {
var startTime, endTime
if (e && e != undefined) {
dateValue.value = []
startTime = e[0]
endTime = e[1]
} else {
const now = new Date();
const year = now.getFullYear(); // 年份，如 2026
const month = now.getMonth() + 1; // 月份，需要 +1，结果范围 1~12
const day = now.getDate();
startTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
endTime = ''
if (timeValue.value == 1) {//当天
endTime = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
} else if (timeValue.value == 2) {//近七天
endTime = getLast7DaysIncludingToday()
} else if (timeValue.value == 3) {//近一个月
endTime = getPreviousMonthDate()
}
}
emit("changeTime", [startTime, endTime]);
setdia.value = false
}
//获取前7天和一个月的日期
function getLast7DaysIncludingToday() {
const dates = [];
const today = new Date();
for (let i = 0; i < 7; i++) {
const date = new Date(today);
date.setDate(today.getDate() - i);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
dates.push(`${year}-${month}-${day}`);
}
return dates[dates.length - 1];
}
function getPreviousMonthDate() {
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // 0-11
const day = today.getDate();
// console.log(props.lineArray, '類別'); // 减一个月
const prevMonthDate = new Date(year, month - 1, day);
// }, 3000); // 如果日期溢出（例如 3月31日 -> 2月31日 -> 实际变成3月2日或3月3日？）
// 这里直接用 new Date(year, month-1, day) 会自动调整，但我们需要的是“一个月前的同一天”，若不存在则取该月最后一天
// 上述写法已经能正确处理（如 3月31日 -> 2月28/29日），因为 new Date(2026, 1, 31) -> 2026-02-28（2026非闰年）
const y = prevMonthDate.getFullYear();
const m = String(prevMonthDate.getMonth() + 1).padStart(2, '0');
const d = String(prevMonthDate.getDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
const bigStatus = ref(false) const bigStatus = ref(false)
//点击放大窗口详细查看曲线 //点击放大窗口详细查看曲线
const clickBig = () => { const clickBig = () => {
...@@ -166,6 +273,7 @@ const componentProps = ref({}) ...@@ -166,6 +273,7 @@ const componentProps = ref({})
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
height: 100%; height: 100%;
position: relative;
} }
/* 标题栏 */ /* 标题栏 */
...@@ -413,4 +521,59 @@ const componentProps = ref({}) ...@@ -413,4 +521,59 @@ const componentProps = ref({})
z-index: -1; z-index: -1;
/* 确保伪元素在内容之下 */ /* 确保伪元素在内容之下 */
} }
.setImg {
width: 22px;
height: 22px;
margin-right: 10px;
margin-bottom: 5px;
/* background-color: red; */
}
.setImg img {
width: 100%;
height: 100%;
}
.setTimeClass {
position: absolute;
left: 0;
top: 80px;
width: 100%;
min-height: 100px;
background-color: #272f3e;
z-index: 2;
border-radius: 8px;
padding: 10px;
}
.selector-label {
width: 80px;
}
.selector-item {
display: flex;
/* flex-direction: column; */
align-items: center;
gap: 5px;
min-width: 100px;
/* 最小宽度 */
flex: 1;
/* 弹性增长 */
/* z-index: 99999; */
}
.custom-select {
position: relative;
width: 120px;
/* 自适应宽度 */
}
:deep(.custom-select .el-select__wrapper) {
height: 12.5px;
}
:deep(.dateclass) {
width: 250px !important;
}
</style> </style>
\ No newline at end of file
src/pages/rights/index.vue
浏览文件 @ 45a0bdf7
...@@ -5,20 +5,21 @@ ...@@ -5,20 +5,21 @@
<!-- <allHotMap></allHotMap> --> <!-- <allHotMap></allHotMap> -->
<!-- <div>{{ component1 }}</div> --> <!-- <div>{{ component1 }}</div> -->
<component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量" <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']" :lineArray="true"></component> :legendName="['链路层容量', '用户实际流量']" :lineArray="true" @changeTime="changeTimeFn(1, $event)"></component>
</div> </div>
<!-- 卫星列表 --> <!-- 卫星列表 -->
<div class="satellite-section"> <div class="satellite-section">
<!-- <cdf></cdf> --> <!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]" <component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"></component> slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true" @changeTime="changeTimeFn(2, $event)">
</component>
</div> </div>
<!-- 地面系统 --> <!-- 地面系统 -->
<div class="ground-system-section"> <div class="ground-system-section">
<!-- <instant></instant> --> <!-- <instant></instant> -->
<component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包" <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']" :lineArray="false"></component> :legendName="['搜星时延', '丢包率']" :lineArray="false" @changeTime="changeTimeFn(3, $event)"></component>
</div> </div>
</div> </div>
</template> </template>
...@@ -32,7 +33,22 @@ import instant from '@/pages/all/components/instant/index.vue' ...@@ -32,7 +33,22 @@ import instant from '@/pages/all/components/instant/index.vue'
import useAppStore from '@/store/module/app' import useAppStore from '@/store/module/app'
import { getPanelCurve, templateConfigQuery } from '@/api/Zodiac' import { getPanelCurve, templateConfigQuery } from '@/api/Zodiac'
import Loading from '@/pages/all/components/loadingComponent/index.js' import Loading from '@/pages/all/components/loadingComponent/index.js'
const startTime = ref('')
const endTime = ref('')
//组件返回时信息根据type区分判断
const changeTimeFn = (type, times) => {
console.log(times, '对比', type);
if (type == 1) {
} else if (type == 2) {
} else if (type == 3) {
}
startTime.value = times[0]
endTime.value = times[1]
getPanelCurveData()
}
const component1 = ref(markRaw(allHotMap)) const component1 = ref(markRaw(allHotMap))
const component2 = ref(markRaw(cdf)) const component2 = ref(markRaw(cdf))
...@@ -75,13 +91,20 @@ watch(() => appStore.chartConfig, (newVal) => { ...@@ -75,13 +91,20 @@ watch(() => appStore.chartConfig, (newVal) => {
const getPanelCurveData = async (data) => { const getPanelCurveData = async (datas) => {
const res = await getPanelCurve({ var data = {
startTime: startTime.value,
endTime: endTime.value,
granularity: granularity, granularity: granularity,
regionName: granularity == 'region' ? granularityValue : null, regionName: granularity == 'region' ? granularityValue : null,
signalSiteCode: granularity == 'station' ? granularityValue : null, signalSiteCode: granularity == 'station' ? granularityValue : null,
gridCodes: granularity == 'grid' ? granularityValue : null, gridCodes: granularity == 'grid' ? granularityValue : null,
}) }
if (!data.startTime) {
delete data.startTime
delete data.endTime
}
const res = await getPanelCurve(data)
if (res.code == 200 && res.data !== null) { if (res.code == 200 && res.data !== null) {
// console.log('所有曲线数据', res.data) // console.log('所有曲线数据', res.data)
capacityData.value = res.data.capacity capacityData.value = res.data.capacity
...@@ -202,16 +225,20 @@ function errorDialoghandleClose() { ...@@ -202,16 +225,20 @@ function errorDialoghandleClose() {
flex-direction: column; flex-direction: column;
gap: 15px; gap: 15px;
min-height: 20px; min-height: 20px;
flex: 1;
} }
.satellite-section { .satellite-section {
min-height: 20px; min-height: 20px;
flex: 1;
/* background-color: #2E7DFF; */ /* background-color: #2E7DFF; */
/* overflow-y: hidden; */ /* overflow-y: hidden; */
} }
.ground-system-section { .ground-system-section {
min-height: 20px; min-height: 20px;
flex: 1;
/* background-color: #2E7DFF; */ /* background-color: #2E7DFF; */
/* overflow-y: hidden; */ /* overflow-y: hidden; */
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论