Skip to content

S
SatelliteDigital
提交 b548a9ad authored 作者: 汪雄's avatar 汪雄
浏览文件
操作

完成曲线模板配置流程

上级 3b22b605
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 590 行增加 和 369 行删除
src/api/Zodiac.js
浏览文件 @ b548a9ad
...@@ -118,9 +118,56 @@ export function getCapacityAndTraffic(data) { ...@@ -118,9 +118,56 @@ export function getCapacityAndTraffic(data) {
granularity: data.granularity, granularity: data.granularity,
startTime: data.startTime, startTime: data.startTime,
endTime: data.endTime, endTime: data.endTime,
regionName:data.regionName || null, regionName: data.regionName || null,
signalSiteCode: data.signalSiteCode || null, signalSiteCode: data.signalSiteCode || null,
},
});
}
//规划可用性
export function getAvailability(data) {
return request({
url: "/commPanel/getAvailability",
method: "get",
params: {
gridCodes: data.gridCodes || null,
granularity: data.granularity,
startTime: data.startTime,
endTime: data.endTime,
regionName: data.regionName || null,
signalSiteCode: data.signalSiteCode || null,
},
});
}
//接入时延(搜星)
export function getDelay(data) {
return request({
url: "/commPanel/getDelay",
method: "get",
params: {
gridCodes: data.gridCodes || null,
granularity: data.granularity,
startTime: data.startTime,
endTime: data.endTime,
regionName: data.regionName || null,
signalSiteCode: data.signalSiteCode || null,
},
});
}
//丢包率获取
export function getLossRate(data) {
return request({
url: "/commPanel/getLossRate",
method: "get",
params: {
gridCodes: data.gridCodes || null,
granularity: data.granularity,
startTime: data.startTime,
endTime: data.endTime,
regionName: data.regionName || null,
signalSiteCode: data.signalSiteCode || null,
}, },
}); });
} }
...@@ -131,4 +178,51 @@ export function getGridInfoList() { ...@@ -131,4 +178,51 @@ export function getGridInfoList() {
url: "/GridInfo/list", url: "/GridInfo/list",
method: "get", method: "get",
}); });
} }
\ No newline at end of file
//模板配置列表
export function getTemplateList() {
return request({
url: "/templateApi/list",
method: "get",
});
}
//模板配置新增
export function templateAdd(data) {
return request({
url: "/templateApi/add",
method: "post",
data,
});
}
//模板配置删除
export function templateDel({ data }) {
return request({
url: "/templateApi/delete",
method: "get",
params: {
templateId: data.templateId,
},
});
}
//模板配置详情
export function templateDetail({ data }) {
return request({
url: "/templateApi/detail",
method: "get",
params: {
templateId: data.templateId,
},
});
}
//模板配置修改
export function templateuUpdate({ data }) {
return request({
url: "/templateApi/update",
method: "POST",
data,
});
}
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ b548a9ad
<template> <template>
<!-- CDF曲线图 --> <!-- PDF曲线图 -->
<div class="container"> <div class="container">
<div class="main"> <div class="main">
<div :id="idName" class="cdfCurve"></div> <div :id="idName" class="cdfCurve"></div>
<div class="showDetial" @click="showViewClick" v-if="isShowDetial"> <div class="showDetial" @click="showViewClick" v-if="isShowDetial">
<el-icon v-if="showView" class="icon"><View /></el-icon> <el-icon v-if="showView" class="icon">
<el-icon v-else class="icon"><Hide /></el-icon> <View />
</el-icon>
<el-icon v-else class="icon">
<Hide />
</el-icon>
<span>详情</span> <span>详情</span>
</div> </div>
<div class="showValue"> <div class="showValue">
<div v-for="(item, index) in markLineData" :key="index"> <div v-for="(item, index) in markLineData" :key="index">
<span style="font-weight: 700;font-size: 10px; padding: 0 5.5px;" :style="{ color: item.color }">--</span>{{ item.descript }} <span style="font-weight: 700;font-size: 10px; padding: 0 5.5px;" :style="{ color: item.color }">--</span>{{
item.descript }}
</div> </div>
</div> </div>
</div> </div>
<el-dialog <el-dialog v-model="isDetialDialogVisible" :show-close="false" :modal="false" custom-class="custom-cdf-dialog"
v-model="isDetialDialogVisible" width="200" height="100" :destroy-on-close="false" :before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);">
:show-close="false" <childrenCdfCurve ref="childrenCdfRef" :propsDate="propsDate"
:modal="false" @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
custom-class="custom-cdf-dialog" </el-dialog>
width="200"
height="100"
:destroy-on-close="true"
:before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);"
>
<childrenCdfCurve ref="childrenCdfRef" :propsDate="propsDate" @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
</el-dialog>
</div> </div>
</template> </template>
...@@ -41,15 +38,11 @@ export default { ...@@ -41,15 +38,11 @@ export default {
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import childrenCdfCurve from './childrenCdfCurve.vue' import childrenCdfCurve from './childrenCdfCurve.vue'
import { onMounted, onUnmounted, ref } from 'vue'; import { onMounted, onUnmounted, ref, nextTick } from 'vue';
const idName = ref(Math.random().toString(30).slice(2, 8))
const props = defineProps({ const props = defineProps({
idName: {
type: String,
default: 'main'
},
propsDate: { propsDate: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
...@@ -83,30 +76,32 @@ function showViewClick() { ...@@ -83,30 +76,32 @@ function showViewClick() {
// //console.log("时间"); // //console.log("时间");
isDetialDialogVisible.value = !isDetialDialogVisible.value; isDetialDialogVisible.value = !isDetialDialogVisible.value;
showView.value = true; showView.value = true;
if (window.ue5) { if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({ window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"CDFCurveDetailDialog", type: "CDFCurveDetailDialog",
status:"open" status: "open"
}))); })));
} }
// //console.log("当前的值:",showView.value); // //console.log("当前的值:",showView.value);
} }
function isDetialDialogVisibleHandleClose() { function isDetialDialogVisibleHandleClose() {
isDetialDialogVisible.value = false; isDetialDialogVisible.value = false;
showView.value = false; showView.value = false;
if (window.ue5) { if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({ window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"CDFCurveDetailDialog", type: "CDFCurveDetailDialog",
status:"close" status: "close"
}))); })));
} }
} }
onMounted(() => { onMounted(() => {
initChart(); nextTick(() => {
initChart();
})
//console.log("-------cdfCurve-------",props.idName); //console.log("-------cdfCurve-------",props.idName);
document.getElementById(props.idName).style.height = '240px'; // document.getElementById(props.idName).style.height = '240px';
}); });
onUnmounted(() => { onUnmounted(() => {
...@@ -117,7 +112,7 @@ onUnmounted(() => { ...@@ -117,7 +112,7 @@ onUnmounted(() => {
}); });
function initChart() { function initChart() {
const chartDom = document.getElementById(props.idName); const chartDom = document.getElementById(idName.value);
chartDom.style.height = '180px'; chartDom.style.height = '180px';
chartDom.style.width = '170px'; chartDom.style.width = '170px';
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
...@@ -125,7 +120,7 @@ function initChart() { ...@@ -125,7 +120,7 @@ function initChart() {
const option = { const option = {
legend: { legend: {
show: true, show: true,
data: ['CDF曲线图'], data: ['PDF曲线图'],
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
...@@ -139,7 +134,7 @@ function initChart() { ...@@ -139,7 +134,7 @@ function initChart() {
icon: 'rect', // 使用矩形图标 icon: 'rect', // 使用矩形图标
itemWidth: 15, // 图例宽度 itemWidth: 15, // 图例宽度
itemHeight: 5, // 图例高度，设为较小值形成线条效果 itemHeight: 5, // 图例高度，设为较小值形成线条效果
}, },
grid: { grid: {
top: '23%', top: '23%',
...@@ -180,7 +175,7 @@ function initChart() { ...@@ -180,7 +175,7 @@ function initChart() {
}, },
series: [ series: [
{ {
name: 'CDF曲线图', name: 'PDF曲线图',
data: [12, 13, 5, 103, 19, 3, 18], data: [12, 13, 5, 103, 19, 3, 18],
type: 'line', type: 'line',
smooth: 0.6, smooth: 0.6,
...@@ -214,24 +209,24 @@ function initChart() { ...@@ -214,24 +209,24 @@ function initChart() {
label: { label: {
show: false show: false
}, },
data: [ // data: [
{ // {
yAxis: 45, // yAxis: 45,
lineStyle: { // lineStyle: {
color: '#ff0000', // color: '#ff0000',
width: 2, // width: 2,
type: 'dashed' // type: 'dashed'
}, // },
}, // },
{ // {
yAxis: 70, // yAxis: 70,
lineStyle: { // lineStyle: {
color: '#ff55f5', // color: '#ff55f5',
width: 2, // width: 2,
type: 'dashed' // type: 'dashed'
}, // },
} // }
] // ]
} }
} }
], ],
...@@ -292,11 +287,13 @@ function resizeChart() { ...@@ -292,11 +287,13 @@ function resizeChart() {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.cdfCurve div{
.cdfCurve div {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.showDetial{
.showDetial {
position: absolute; position: absolute;
/* flex-direction: row; */ /* flex-direction: row; */
font: 12px "微软雅黑"; font: 12px "微软雅黑";
...@@ -308,19 +305,23 @@ function resizeChart() { ...@@ -308,19 +305,23 @@ function resizeChart() {
/* justify-content: center; /* justify-content: center;
align-items: center; */ align-items: center; */
} }
.showDetial .icon{
.showDetial .icon {
margin: 0; margin: 0;
padding: 0; padding: 0;
top: 2px; top: 2px;
} }
.showDetial span{
.showDetial span {
padding-left: 5px; padding-left: 5px;
} }
.showDetial:hover{
.showDetial:hover {
/* background-color: rgba(255, 255, 255, 0.91); */ /* background-color: rgba(255, 255, 255, 0.91); */
color: #607FB0; color: #607FB0;
} }
/* .custom-cdf-dialog{ /* .custom-cdf-dialog{
position: absolute; position: absolute;
left: 100px; left: 100px;
......
src/pages/all/components/cdf/childrenCdfCurve.vue
浏览文件 @ b548a9ad
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<button class="close-btn" @click="closePanel">×</button> <button class="close-btn" @click="closePanel">×</button>
</div> </div>
<!-- 设备列表内容区 --> <!-- 设备列表内容区 -->
<div class="content"> <div class="content">
<div class="content_header"> <div class="content_header">
...@@ -17,28 +17,12 @@ ...@@ -17,28 +17,12 @@
type="datetimerange" type="datetimerange"
/> --> /> -->
<el-date-picker <el-date-picker popper-class="custom-date-popper" v-model="dateRange" type="daterange" size="small"
popper-class="custom-date-popper" unlink-panels range-separator="->" start-placeholder="开始时间" end-placeholder="结束时间"
v-model="dateRange" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
type="daterange" :default-time="defaultDateTimeRange" :disabled-date="disabledDate" :disabled-hours="disabledHours"
size="small" :cell-class-name="(date) => 'date-picker-custom'" />
unlink-panels <el-button @click="handleDateRangeChange" size="small">查询</el-button>
range-separator="->"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
:default-time="defaultDateTimeRange"
:disabled-date="disabledDate"
:disabled-hours="disabledHours"
:cell-class-name="(date) => 'date-picker-custom'"
/>
<el-button @click="handleDateRangeChange" size="small">查询</el-button>
</div> </div>
<div id="ghCurve" class="cdfCurve"></div> <div id="ghCurve" class="cdfCurve"></div>
<div id="sjCurve" class="cdfCurve"></div> <div id="sjCurve" class="cdfCurve"></div>
...@@ -54,8 +38,8 @@ import * as echarts from 'echarts'; ...@@ -54,8 +38,8 @@ import * as echarts from 'echarts';
const props = defineProps(['devices','isDetialDialogVisible']) const props = defineProps(['devices', 'isDetialDialogVisible'])
const emits = defineEmits(['errorDialoghandleClose','isDetialDialogVisibleHandleClose']) const emits = defineEmits(['errorDialoghandleClose', 'isDetialDialogVisibleHandleClose'])
let myCharts = []; // 存储多个图表实例 let myCharts = []; // 存储多个图表实例
const lineColor = ['#2e7dff', '#6FFCBA', '#7590bc', '#ff95c7']; const lineColor = ['#2e7dff', '#6FFCBA', '#7590bc', '#ff95c7'];
...@@ -68,7 +52,7 @@ const chartConfigs = ref([ ...@@ -68,7 +52,7 @@ const chartConfigs = ref([
{ {
name: '空口链路丢包率', name: '空口链路丢包率',
data: [12, 13, 85, 53, 19, 23, 18], data: [12, 13, 85, 53, 19, 23, 18],
Xdata: [1,2,3,4,5,6,7], Xdata: [1, 2, 3, 4, 5, 6, 7],
colorIndex: 0 colorIndex: 0
} }
] ]
...@@ -79,7 +63,7 @@ const chartConfigs = ref([ ...@@ -79,7 +63,7 @@ const chartConfigs = ref([
{ {
name: '网络延迟', name: '网络延迟',
data: [25, 35, 65, 45, 30, 40, 28], data: [25, 35, 65, 45, 30, 40, 28],
Xdata: [1,2,3,4,5,6,7], Xdata: [1, 2, 3, 4, 5, 6, 7],
colorIndex: 1 colorIndex: 1
} }
] ]
...@@ -104,7 +88,7 @@ const chartConfigs = ref([ ...@@ -104,7 +88,7 @@ const chartConfigs = ref([
]); ]);
const defaultDateTimeRange = ref([ const defaultDateTimeRange = ref([
new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0), new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0),
new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0), new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate(), 0, 0, 0),
...@@ -121,74 +105,74 @@ function formatDate(date) { ...@@ -121,74 +105,74 @@ function formatDate(date) {
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} }
const dateRange = ref([]); const dateRange = ref([]);
function handleDateRangeChange() { function handleDateRangeChange() {
const submitData = { const submitData = {
startTime: formatDate(dateRange.value[0]), startTime: formatDate(dateRange.value[0]),
endTime: formatDate(dateRange.value[1]) endTime: formatDate(dateRange.value[1])
} }
//console.log("提交：",submitData); //console.log("提交：",submitData);
if (submitData.startTime && submitData.endTime) { if (submitData.startTime && submitData.endTime) {
chartConfigs.value = [ chartConfigs.value = [
{
id: 'ghCurve',
series: [
{ {
name: '空口链路450Mbps-丢包率', id: 'ghCurve',
data: [12, 3, 5, 93, 19, 23, 18], series: [
Xdata: [1,2,3,4,5,6,7], {
colorIndex: 0 name: '空口链路450Mbps-丢包率',
} data: [12, 3, 5, 93, 19, 23, 18],
] Xdata: [1, 2, 3, 4, 5, 6, 7],
}, colorIndex: 0
{ }
id: 'sjCurve', ]
series: [ },
{
name: '网络cxcz延迟',
data: [25, 95, 15, 5, 30, 40, 28],
Xdata: [1,2,3,4,5,6,7],
colorIndex: 1
}
]
},
{
id: 'dblCurve',
series: [
{ {
name: '发送速率size', id: 'sjCurve',
data: [20, 70, 60, 25, 90, 22, 60, 18, 12, 28, 12, 56], series: [
Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], {
colorIndex: 2 name: '网络cxcz延迟',
data: [25, 95, 15, 5, 30, 40, 28],
Xdata: [1, 2, 3, 4, 5, 6, 7],
colorIndex: 1
}
]
}, },
{ {
name: '接收速率size', id: 'dblCurve',
data: [110, 18, 60, 18, 12, 28, 12, 56, 89, 21, 7, 25], series: [
Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], {
colorIndex: 3 name: '发送速率size',
data: [20, 70, 60, 25, 90, 22, 60, 18, 12, 28, 12, 56],
Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
colorIndex: 2
},
{
name: '接收速率size',
data: [110, 18, 60, 18, 12, 28, 12, 56, 89, 21, 7, 25],
Xdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
colorIndex: 3
}
]
} }
] ];
} myCharts.forEach(chart => {
]; if (chart) {
myCharts.forEach(chart => { chart.dispose();
if (chart) { }
chart.dispose(); });
} chartConfigs.value.forEach(config => {
}); const chartDom = document.getElementById(config.id);
chartConfigs.value.forEach(config => { if (chartDom) {
const chartDom = document.getElementById(config.id); initChart(chartDom, config);
if (chartDom) { // resizeChart()
initChart(chartDom, config); }
// resizeChart() });
} } else {
});
}else {
ElMessage({ ElMessage({
type: 'warning', type: 'warning',
message: '完善开始时间和结束时间的选择', message: '完善开始时间和结束时间的选择',
}); });
} }
} }
// 禁用未来日期 // 禁用未来日期
const disabledDate = (time) => { const disabledDate = (time) => {
...@@ -197,6 +181,8 @@ const disabledDate = (time) => { ...@@ -197,6 +181,8 @@ const disabledDate = (time) => {
onMounted(() => { onMounted(() => {
// 初始化所有图表 // 初始化所有图表
chartConfigs.value.forEach(config => { chartConfigs.value.forEach(config => {
alert(config)
console.log('初始化config', config)
const chartDom = document.getElementById(config.id); const chartDom = document.getElementById(config.id);
if (chartDom) { if (chartDom) {
initChart(chartDom, config); initChart(chartDom, config);
...@@ -217,10 +203,10 @@ onUnmounted(() => { ...@@ -217,10 +203,10 @@ onUnmounted(() => {
function initChart(chartDom, config) { function initChart(chartDom, config) {
const myChart = echarts.init(chartDom); const myChart = echarts.init(chartDom);
myCharts.push(myChart); // 存储图表实例 myCharts.push(myChart); // 存储图表实例
// 根据series配置动态构建legend数据 // 根据series配置动态构建legend数据
const legendData = config.series.map(series => series.name); const legendData = config.series.map(series => series.name);
// 动态构建series配置 // 动态构建series配置
const seriesOptions = config.series.map((seriesItem) => { const seriesOptions = config.series.map((seriesItem) => {
const color = lineColor[seriesItem.colorIndex]; const color = lineColor[seriesItem.colorIndex];
...@@ -327,11 +313,11 @@ function initChart(chartDom, config) { ...@@ -327,11 +313,11 @@ function initChart(chartDom, config) {
}; };
myChart.setOption(option); myChart.setOption(option);
// 添加resize处理 // 添加resize处理
const handleResize = () => myChart.resize(); const handleResize = () => myChart.resize();
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
// 保存resize处理函数以便后续可能需要移除 // 保存resize处理函数以便后续可能需要移除
myChart._resizeHandler = handleResize; myChart._resizeHandler = handleResize;
} }
...@@ -364,7 +350,7 @@ const closePanel = () => { ...@@ -364,7 +350,7 @@ const closePanel = () => {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.header { .header {
...@@ -407,7 +393,7 @@ const closePanel = () => { ...@@ -407,7 +393,7 @@ const closePanel = () => {
.close-btn { .close-btn {
width: 15px; width: 15px;
height: 15px; height: 15px;
background: #1E1E2D; background: #1E1E2D;
border: none; border: none;
color: #aaa; color: #aaa;
font-size: 24px; font-size: 24px;
...@@ -433,10 +419,11 @@ const closePanel = () => { ...@@ -433,10 +419,11 @@ const closePanel = () => {
background: #000000; background: #000000;
} }
.cdfCurve{ .cdfCurve {
width: 900px; width: 900px;
height: 220px; height: 220px;
} }
.content_header { .content_header {
width: 55%; width: 55%;
display: flex; display: flex;
...@@ -445,41 +432,50 @@ const closePanel = () => { ...@@ -445,41 +432,50 @@ const closePanel = () => {
gap: 10px; gap: 10px;
/* background-color: #2a2a3a; */ /* background-color: #2a2a3a; */
} }
.content_header span { .content_header span {
width: 60px; width: 60px;
font-size: 11px; font-size: 11px;
color: #e0e0e0; color: #e0e0e0;
} }
:deep(.el-date-editor) { :deep(.el-date-editor) {
background-color: #000000; background-color: #000000;
box-shadow: 0 0 2px rgba(131, 131, 131, 0.95); box-shadow: 0 0 2px rgba(131, 131, 131, 0.95);
} }
:deep(.el-button) { :deep(.el-button) {
background: #000000; background: #000000;
border: none; border: none;
color: #e0e0e0; color: #e0e0e0;
width: 70px; width: 70px;
} }
:deep(.el-range-input){
:deep(.el-range-input) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-range-separator){
:deep(.el-range-separator) {
color: #ffffff; color: #ffffff;
} }
:deep(.el-button:hover) { :deep(.el-button:hover) {
background: linear-gradient(to bottom, #2C76F1, #000000); background: linear-gradient(to bottom, #2C76F1, #000000);
border: none; border: none;
box-shadow: none; box-shadow: none;
} }
:deep(.custom-date-popper) { :deep(.custom-date-popper) {
background-color: #1e1e2d; background-color: #1e1e2d;
border: 1px solid #383850; border: 1px solid #383850;
} }
:deep(.date-picker-custom) { :deep(.date-picker-custom) {
background-color: #000000; background-color: #000000;
box-shadow: none; box-shadow: none;
} }
/* .date-picker-custom :deep(.el-range-editor) { /* .date-picker-custom :deep(.el-range-editor) {
width: 10%; width: 10%;
height: 100%; height: 100%;
......
src/pages/all/components/cdf/index.vue
浏览文件 @ b548a9ad
...@@ -7,33 +7,27 @@ ...@@ -7,33 +7,27 @@
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">巴西-最小值(CDF曲线图)</div> <div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge"> <div class="hot-title-enlarge">
<svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65"/> <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path <path class="arrow-path "
class="arrow-path " d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" fill="white" fill-opacity="0.65" />
fill="white" <path class="arrow-path "
fill-opacity="0.65" 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" />
<path </svg>
class="arrow-path " </div>
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 class="container"> <div class="container">
<div class="flex-box flex-left" > <div class="flex-box flex-left">
<cdfCurve :idName="`${cdfCurveLeft}+${allIdName[0]}`" :propsDate="componentProps"></cdfCurve> <cdfCurve :propsDate="componentProps"></cdfCurve>
</div> </div>
<div class="flex-box flex-right"> <div class="flex-box flex-right">
<cdfCurve :idName="`${cdfCurveRight}+${allIdName[1]}`" :propsDate="componentProps" :isShowDetial="true"></cdfCurve> <cdfCurve :propsDate="componentProps" :isShowDetial="true"></cdfCurve>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -41,23 +35,21 @@ ...@@ -41,23 +35,21 @@
<script setup> <script setup>
import { onBeforeUnmount } from 'vue'; import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue' import cdfCurve from './cdfCurve.vue'
const cdfCurveRight = ref('chart-right');
const cdfCurveLeft = ref('chart-left');
const props = defineProps({ const props = defineProps({
allIdName: { title: {
type: Array, type: String,
default: () => ['allIdName1','allIdName2'], default: '位置默认'
}, }
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
//console.log("中，zhelixieza"); //console.log("中，zhelixieza");
}); });
const componentProps = ref({}); const componentProps = ref({});
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */ /* 基础样式 */
.header-container { .header-container {
display: flex; display: flex;
...@@ -91,14 +83,17 @@ const componentProps = ref({}); ...@@ -91,14 +83,17 @@ const componentProps = ref({});
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hot-title {
.hot-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.hot-title-text{
font-weight: 700; .hot-title-text {
font-size: 13px; font-weight: 700;
font-size: 13px;
} }
.hot-title-enlarge { .hot-title-enlarge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
...@@ -108,11 +103,12 @@ const componentProps = ref({}); ...@@ -108,11 +103,12 @@ const componentProps = ref({});
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.hot-title-enlarge:hover .rect { .hot-title-enlarge:hover .rect {
/* transform: scale(1.51); */ /* transform: scale(1.51); */
transform-origin: center; transform-origin: center;
} }
.hot-title-enlarge:hover .arrow-path {
.hot-title-enlarge:hover .arrow-path {
transform: scale(1.2) skew(-10deg, -10deg); transform: scale(1.2) skew(-10deg, -10deg);
transform-origin: center; transform-origin: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
...@@ -132,12 +128,13 @@ const componentProps = ref({}); ...@@ -132,12 +128,13 @@ const componentProps = ref({});
.flex-box { .flex-box {
flex: 1; flex: 1;
/* display: flex; /* display: flex;
align-items: center; align-items: center;
justify-content: center; */ justify-content: center; */
} }
.flex-left{
.flex-left {
/* background-color: rgb(180, 180, 180); */ /* background-color: rgb(180, 180, 180); */
} }
</style> </style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ b548a9ad
...@@ -7,28 +7,22 @@ ...@@ -7,28 +7,22 @@
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">巴西-最小值(热力图)</div> <div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge"> <div class="hot-title-enlarge">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65"/> <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path <path class="arrow-path "
class="arrow-path " d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" fill="white" fill-opacity="0.65" />
fill="white" <path class="arrow-path "
fill-opacity="0.65" 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" />
<path </svg>
class="arrow-path " </div>
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 class="container"> <div class="container">
<div class="flex-box flex-left" > <div class="flex-box flex-left">
<hotMap :propsDate="componentProps"></hotMap> <hotMap :propsDate="componentProps"></hotMap>
</div> </div>
<div class="flex-box flex-right"> <div class="flex-box flex-right">
...@@ -44,11 +38,17 @@ import { ref } from 'vue'; ...@@ -44,11 +38,17 @@ import { ref } from 'vue';
import hotMap from './hotMap.vue' import hotMap from './hotMap.vue'
import testMap from './testMap.vue' import testMap from './testMap.vue'
const props = defineProps({
title: {
type: String,
default: '默认未知'
}
})
const componentProps = ref({}) const componentProps = ref({})
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */ /* 基础样式 */
.header-container { .header-container {
display: flex; display: flex;
...@@ -82,14 +82,17 @@ const componentProps = ref({}) ...@@ -82,14 +82,17 @@ const componentProps = ref({})
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hot-title {
.hot-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.hot-title-text{
font-weight: 700; .hot-title-text {
font-size: 13px; font-weight: 700;
font-size: 13px;
} }
.hot-title-enlarge { .hot-title-enlarge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
...@@ -99,11 +102,12 @@ const componentProps = ref({}) ...@@ -99,11 +102,12 @@ const componentProps = ref({})
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.hot-title-enlarge:hover .rect { .hot-title-enlarge:hover .rect {
/* transform: scaleX(1.1); */ /* transform: scaleX(1.1); */
transform-origin: center; transform-origin: center;
} }
.hot-title-enlarge:hover .arrow-path {
.hot-title-enlarge:hover .arrow-path {
transform: scale(1.2) skew(-10deg, -10deg); transform: scale(1.2) skew(-10deg, -10deg);
transform-origin: center; transform-origin: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
...@@ -126,7 +130,8 @@ const componentProps = ref({}) ...@@ -126,7 +130,8 @@ const componentProps = ref({})
align-items: center; align-items: center;
justify-content: center; */ justify-content: center; */
} }
.flex-left{
.flex-left {
background-color: rgb(180, 180, 180); background-color: rgb(180, 180, 180);
} }
</style> </style>
\ No newline at end of file
src/pages/all/components/hotMapComponents/testMap.vue
浏览文件 @ b548a9ad
<template> <template>
<!--热力图--> <!--热力图-->
<div style="height: 100%; background-color: blueviolet;"> <div style="height: 100%; background-color: #000;">
<div style="width: 100%; height: 100%;"> <div style="width: 100%; height: 100%;">
<div id="main" class="main"> <div :id="chartId" class="main"></div>
我是hotMap </div>
</div>
</div> </div>
</div>
</template> </template>
<script>
export default {
name: "hotMap_chart"
}
</script>
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { onMounted } from 'vue'; import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { getGridInfoList } from '@/api/Zodiac';
import { cs } from 'element-plus/es/locales.mjs';
onMounted(() => { // 生成唯一的图表ID
initChart(); const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
}); let myChart = null;
function initChart() { // 生成六边形热力图数据
var ROOT_PATH = 'https://echarts.apache.org/examples'; function generateHexagonData() {
var CDN_PATH = 'https://echarts.apache.org/zh/js/vendors/'; // 模拟巴西地图形状的六边形网格数据
const data = [];
const centerX = 0;
const centerY = 0;
var chartDom = document.getElementById('main'); // 六边形排列参数
if (!chartDom) return; const radius = 15;
const startRadius = 10;
const endRadius = 40;
const angleStep = Math.PI / 3; // 60度
var myChart = echarts.init(chartDom); // 生成类似巴西地图轮廓的六边形点
for (let r = startRadius; r < endRadius; r += radius * 0.85) {
// 根据半径调整角度数量，形成不规则形状
const angleCount = Math.round(8 - r / 10) + Math.floor(Math.random() * 2);
myChart.showLoading(); for (let i = 0; i < angleCount; i++) {
// 基础角度，添加偏移使形状更接近巴西地图
const baseAngle = angleStep * i;
let angleOffset = 0;
Promise.all([ // 根据位置添加偏移，形成不规则形状
fetch(ROOT_PATH + '/data/asset/geo/USA.json').then(res => res.json()), if (r < startRadius + 15) angleOffset = 0.3;
loadScript(CDN_PATH + 'd3-array@2.8.0/dist/d3-array.js'), else if (r > endRadius - 15) angleOffset = -0.2;
loadScript(CDN_PATH + 'd3-geo@2.0.1/dist/d3-geo.js') else if (i > angleCount / 2) angleOffset = 0.1;
]).then(([usaJson]) => {
const projection = d3.geoAlbersUsa(); const angle = baseAngle + angleOffset;
myChart.hideLoading();
echarts.registerMap('USA', usaJson); // 计算坐标
//console.log("获得地图数据",usaJson); const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
const option = {
title: { // 根据位置生成不同的值（模拟容量）
text: 'USA Population Estimates (2012)', let value;
subtext: 'Data from www.census.gov', // 左侧区域值较低（蓝色）
left: 'right' if (x < -10) {
}, value = Math.random() * 30;
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: 'right',
min: 500000,
max: 38000000,
inRange: {
color: [
'#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8',
'#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'
]
},
text: ['High', 'Low'],
calculable: true
},
toolbox: {
show: true,
left: 'left',
top: 'top',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: 'USA PopEstimates',
type: 'map',
map: 'USA',
projection: {
project: function (point) {
return projection(point);
},
unproject: function (point) {
return projection.invert(point);
} }
}, // 右侧区域值较高（红色）
emphasis: { else if (x > 20) {
label: { value = 70 + Math.random() * 30;
show: true
} }
}, // 中间区域值中等（黄、绿）
data: [ else {
{ name: 'Alabama', value: 4822023 }, value = 30 + Math.random() * 40;
{ name: 'Alaska', value: 731449 }, }
{ name: 'Arizona', value: 6553255 },
// ...其他数据保持不变... data.push({
] value: [x, y, value],
itemStyle: {
opacity: 0.9
}
});
} }
] }
};
// 添加东南部突出部分（类似巴西东南角）
for (let i = 0; i < 5; i++) {
const angle = -Math.PI / 4 + i * angleStep / 2;
const r = endRadius - 5 + i * 3;
const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
data.push({
value: [x, y, 80 + Math.random() * 20],
itemStyle: {
opacity: 0.9
}
});
}
return data;
}
// 初始化图表
function initChart() {
const chartDom = document.getElementById(chartId.value);
chartDom.style.width = '100%';
chartDom.style.height = '150px';
if (!chartDom) return;
myChart = echarts.init(chartDom);
// 生成热力图数据
const data = generateHexagonData();
// const option = {
// backgroundColor: '#000',
// title: {
// text: '链路层容量',
// left: 'center',
// // top: 10,
// left: 10,
// textStyle: {
// color: '#fff',
// fontSize: 10,
// fontWeight: 'normal'
// }
// },
// tooltip: {
// // formatter: function(params) {
// // return `容量: ${params.data[2].toFixed(1)}`;
// // },
// backgroundColor: 'rgba(0, 0, 0, 0.7)',
// borderColor: '#444',
// textStyle: {
// color: '#fff'
// }
// },
// visualMap: {
// min: 0,
// max: 100,
// calculable: true,
// orient: 'horizontal',
// left: 'center',
// // bottom: 30,
// inRange: {
// color: ['#0050b3', '#1890ff', '#7cb305', '#ffd500', '#ff4d4f']
// },
// textStyle: {
// color: '#fff'
// },
// // itemWidth: 40,
// // itemHeight: 10,
// borderWidth: 0
// },
// xAxis: {
// type: 'value',
// show: false,
// min: -50,
// max: 50
// },
// yAxis: {
// type: 'value',
// show: false,
// min: -50,
// max: 50
// },
// series: [{
// name: '链路容量',
// type: 'scatter',
// coordinateSystem: 'cartesian2d',
// symbol: 'path://M0,-10 L10,5 L10,15 L0,20 L-10,15 L-10,5 Z', // 六边形路径
// symbolSize: [15, 15], // 六边形大小
// data: data,
// label: {
// show: false
// },
// emphasis: {
// itemStyle: {
// shadowBlur: 10,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// },
// ],
// tooltip: {
// trigger: 'axis',
// // 确保tooltip显示在最上层
// extraCssText: 'z-index: 999999 !important;',
// backgroundColor: 'rgba(50,50,50,0.8)',
// borderColor: '#333',
// borderWidth: 1,
// padding: 10,
// textStyle: {
// color: '#fff',
// fontSize: 12
// },
// // 固定tooltip位置在顶部
// position: function (pos, params, dom, rect, size) {
// return ['5%', pos[1]];
// }
// }
// };
myChart.setOption(option); myChart.setOption(option);
resizeChart();
}
window.addEventListener('resize', function () { // 响应式调整图表大小
myChart.resize(); function resizeChart() {
}); if (myChart) {
}); myChart.resize();
}
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
} }
onMounted(async () => {
const ret = await getGridInfoList()
console.log('ret', ret)
// 确保DOM渲染完成后初始化图表
nextTick(() => {
initChart();
window.addEventListener('resize', resizeChart);
});
// setTimeout(() => {
// initChart();
// window.addEventListener('resize', resizeChart);
// }, 0);
});
onUnmounted(() => {
if (myChart) {
window.removeEventListener('resize', resizeChart);
myChart.dispose();
myChart = null;
}
});
</script> </script>
<style scoped> <style scoped>
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; /* min-height: 400px; */
border: 1px solid #3A4C5B; /* overflow: hidden; */
} }
</style> </style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ b548a9ad
...@@ -3,32 +3,26 @@ ...@@ -3,32 +3,26 @@
<!-- 标题栏 --> <!-- 标题栏 -->
<div class="section-divider"> <div class="section-divider">
<div class="divider-line"></div> <div class="divider-line"></div>
<h3 class="section-title">可用性</h3> <h3 class="section-title">网络时延/丢包</h3>
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
<div class="hot-title"> <div class="hot-title">
<div class="hot-title-text">巴西-最小值(CDF曲线图)</div> <div class="hot-title-text">巴西-最小值(PDF曲线图)</div>
<div class="hot-title-enlarge"> <div class="hot-title-enlarge">
<svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="rect" width="20" height="20" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65"/> <rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
<path <path class="arrow-path "
class="arrow-path " d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z"
d="M23.5002 8.5V13.5H21.8335V11.4043L18.0119 15.2259L16.8334 14.0474L20.7141 10.1667H18.5002V8.5H23.5002Z" fill="white" fill-opacity="0.65" />
fill="white" <path class="arrow-path "
fill-opacity="0.65" 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" />
<path </svg>
class="arrow-path " </div>
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 class="container"> <div class="container">
<div class="flex-box flex-left" > <div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :propsDate="componentProps"></instantCurve> <instantCurve :idName="`instant-left-${props.allIdName}`" :propsDate="componentProps"></instantCurve>
</div> </div>
<div class="flex-box flex-right"> <div class="flex-box flex-right">
...@@ -40,20 +34,25 @@ ...@@ -40,20 +34,25 @@
<script setup> <script setup>
import instantCurve from './instantCurve.vue' import instantCurve from './instantCurve.vue'
const instantCurveRight = ref('instantCurve_chart-right'); const instantCurveRight = ref('instantCurve_chart-right');
const instantCurveLeft = ref('instantCurve_chart-left'); const instantCurveLeft = ref('instantCurve_chart-left');
const props = defineProps({ const props = defineProps({
allIdName: { allIdName: {
type: String, type: String,
default: 'allIdName', default: 'allIdName',
}, },
title: {
type: String,
default: '巴西-最小值(PDF曲线图)'
}
}); });
console.log('props.allIdName', props.allIdName)
const componentProps = ref({}) const componentProps = ref({})
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */ /* 基础样式 */
.header-container { .header-container {
display: flex; display: flex;
...@@ -87,14 +86,17 @@ const componentProps = ref({}) ...@@ -87,14 +86,17 @@ const componentProps = ref({})
display: flex; display: flex;
align-items: center; align-items: center;
} }
.hot-title {
.hot-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.hot-title-text{
font-weight: 700; .hot-title-text {
font-size: 13px; font-weight: 700;
font-size: 13px;
} }
.hot-title-enlarge { .hot-title-enlarge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
...@@ -105,8 +107,8 @@ const componentProps = ref({}) ...@@ -105,8 +107,8 @@ const componentProps = ref({})
} }
.hot-title-enlarge:hover .arrow-path { .hot-title-enlarge:hover .arrow-path {
transform: scale(1.2) skew(-10deg, -10deg); transform: scale(1.2) skew(-10deg, -10deg);
transform-origin: center; transform-origin: center;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
...@@ -128,7 +130,8 @@ const componentProps = ref({}) ...@@ -128,7 +130,8 @@ const componentProps = ref({})
align-items: center; align-items: center;
justify-content: center; */ justify-content: center; */
} }
.flex-left{
.flex-left {
/* background-color: rgb(180, 180, 180); */ /* background-color: rgb(180, 180, 180); */
} }
</style> </style>
\ No newline at end of file
src/pages/footer/component/timers.vue
浏览文件 @ b548a9ad
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
}" /> }" />
<div class="right_block"> <div class="right_block">
<!--限制 :disabled="!is_flag_confirmAndPauseAndSpeed" --> <!--限制 :disabled="!is_flag_confirmAndPauseAndSpeed" -->
<el-button class="right_block_confirm_btn" size="mini" <el-button class="right_block_confirm_btn" size="small"
@click="handleDateRangeChange(pick_select_date)">确认</el-button> @click="handleDateRangeChange(pick_select_date)">确认</el-button>
<div class="right_block_center"> <div class="right_block_center">
<!-- <el-button circle class="right_block_conter_btn" @click="playBackward"> <!-- <el-button circle class="right_block_conter_btn" @click="playBackward">
......
src/pages/header/index.vue
浏览文件 @ b548a9ad
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
</div> </div>
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="true" :modal="false" width="100" <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" :modal="false" width="100"
:show-close="false" :before-close="handleScreenConfigeClose" :show-close="false" :before-close="handleScreenConfigeClose"
style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;"> style=" background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige> <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论