Skip to content

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

曲线配置样式大改

上级 b548a9ad
显示空白字符变更
内嵌 并排
正在显示 包含 472 行增加 和 265 行删除
src/api/Zodiac.js
浏览文件 @ 243c186e
......@@ -197,7 +197,7 @@ export function templateAdd(data) {
});
}
//模板配置删除
export function templateDel({ data }) {
export function templateDel(data) {
return request({
url: "/templateApi/delete",
method: "get",
......@@ -208,7 +208,7 @@ export function templateDel({ data }) {
}
//模板配置详情
export function templateDetail({ data }) {
export function templateDetail(data) {
return request({
url: "/templateApi/detail",
method: "get",
......@@ -219,7 +219,7 @@ export function templateDetail({ data }) {
}
//模板配置修改
export function templateuUpdate({ data }) {
export function templateuUpdate(data) {
return request({
url: "/templateApi/update",
method: "POST",
......
src/assets/json/chineseWorldName.json 0 → 100644
浏览文件 @ 243c186e
{
"Siachen Glacier": "锡亚琴冰川",
"Afghanistan": "阿富汗",
"Albania": "阿尔巴尼亚",
"Algeria": "阿尔及利亚",
"Angola": "安哥拉",
"Argentina": "阿根廷",
"Armenia": "亚美尼亚",
"Australia": "澳大利亚",
"Austria": "奥地利",
"Azerbaijan": "阿塞拜疆",
"Bahamas": "巴哈马",
"Bahrain": "巴林",
"Bangladesh": "孟加拉国",
"Belarus": "白俄罗斯",
"Belgium": "比利时",
"Belize": "伯利兹",
"Benin": "贝宁",
"Bhutan": "不丹",
"Bolivia": "玻利维亚",
"Bosnia and Herz.": "波斯尼亚和黑塞哥维那",
"Botswana": "博茨瓦纳",
"Brazil": "巴西",
"British Virgin Islands": "英属维京群岛",
"Brunei": "文莱",
"Bulgaria": "保加利亚",
"Burkina Faso": "布基纳法索",
"Burundi": "布隆迪",
"Cambodia": "柬埔寨",
"Cameroon": "喀麦隆",
"Canada": "加拿大",
"Cape Verde": "佛得角",
"Cayman Islands": "开曼群岛",
"Central African Rep.": "中非共和国",
"Chad": "乍得",
"Chile": "智利",
"China": "中国",
"Colombia": "哥伦比亚",
"Comoros": "科摩罗",
"Congo": "刚果",
"Costa Rica": "哥斯达黎加",
"Croatia": "克罗地亚",
"Cuba": "古巴",
"Cyprus": "塞浦路斯",
"Czech Rep.": "捷克共和国",
"Côte d'Ivoire": "科特迪瓦",
"Dem. Rep. Congo": "刚果民主共和国",
"Dem. Rep. Korea": "朝鲜",
"Denmark": "丹麦",
"Djibouti": "吉布提",
"Dominican Rep.": "多米尼加共和国",
"Ecuador": "厄瓜多尔",
"Egypt": "埃及",
"El Salvador": "萨尔瓦多",
"Equatorial Guinea": "赤道几内亚",
"Eritrea": "厄立特里亚",
"Estonia": "爱沙尼亚",
"Ethiopia": "埃塞俄比亚",
"Falkland Is.": "福克兰群岛",
"Fiji": "斐济",
"Finland": "芬兰",
"Fr. S. Antarctic Lands": "所罗门群岛",
"France": "法国",
"Gabon": "加蓬",
"Gambia": "冈比亚",
"Georgia": "格鲁吉亚",
"Germany": "德国",
"Ghana": "加纳",
"Greece": "希腊",
"Greenland": "格陵兰",
"Guatemala": "危地马拉",
"Guinea": "几内亚",
"Guinea-Bissau": "几内亚比绍",
"Guyana": "圭亚那",
"Haiti": "海地",
"Honduras": "洪都拉斯",
"Hungary": "匈牙利",
"Iceland": "冰岛",
"India": "印度",
"Indonesia": "印度尼西亚",
"Iran": "伊朗",
"Iraq": "伊拉克",
"Ireland": "爱尔兰",
"Isle of Man": "马恩岛",
"Israel": "以色列",
"Italy": "意大利",
"Jamaica": "牙买加",
"Japan": "日本",
"Jordan": "约旦",
"Kazakhstan": "哈萨克斯坦",
"Kenya": "肯尼亚",
"Korea": "韩国",
"Kuwait": "科威特",
"Kyrgyzstan": "吉尔吉斯斯坦",
"Lao PDR": "老挝",
"Latvia": "拉脱维亚",
"Lebanon": "黎巴嫩",
"Lesotho": "莱索托",
"Liberia": "利比里亚",
"Libya": "利比亚",
"Lithuania": "立陶宛",
"Luxembourg": "卢森堡",
"Macedonia": "马其顿",
"Madagascar": "马达加斯加",
"Malawi": "马拉维",
"Malaysia": "马来西亚",
"Maldives": "马尔代夫",
"Mali": "马里",
"Malta": "马耳他",
"Mauritania": "毛利塔尼亚",
"Mauritius": "毛里求斯",
"Mexico": "墨西哥",
"Moldova": "摩尔多瓦",
"Monaco": "摩纳哥",
"Mongolia": "蒙古",
"Montenegro": "黑山共和国",
"Morocco": "摩洛哥",
"Mozambique": "莫桑比克",
"Myanmar": "缅甸",
"Namibia": "纳米比亚",
"Nepal": "尼泊尔",
"Netherlands": "荷兰",
"New Caledonia": "新喀里多尼亚",
"New Zealand": "新西兰",
"Nicaragua": "尼加拉瓜",
"Niger": "尼日尔",
"Nigeria": "尼日利亚",
"Norway": "挪威",
"Oman": "阿曼",
"Pakistan": "巴基斯坦",
"Panama": "巴拿马",
"Papua New Guinea": "巴布亚新几内亚",
"Paraguay": "巴拉圭",
"Peru": "秘鲁",
"Philippines": "菲律宾",
"Poland": "波兰",
"Portugal": "葡萄牙",
"Puerto Rico": "波多黎各",
"Qatar": "卡塔尔",
"Reunion": "留尼旺",
"Romania": "罗马尼亚",
"Russia": "俄罗斯",
"Rwanda": "卢旺达",
"S. Geo. and S. Sandw. Is.": "南乔治亚和南桑威奇群岛",
"S. Sudan": "南苏丹",
"San Marino": "圣马力诺",
"Saudi Arabia": "沙特阿拉伯",
"Senegal": "塞内加尔",
"Serbia": "塞尔维亚",
"Sierra Leone": "塞拉利昂",
"Singapore": "新加坡",
"Slovakia": "斯洛伐克",
"Slovenia": "斯洛文尼亚",
"Solomon Is.": "所罗门群岛",
"Somalia": "索马里",
"South Africa": "南非",
"Spain": "西班牙",
"Sri Lanka": "斯里兰卡",
"Sudan": "苏丹",
"Suriname": "苏里南",
"Swaziland": "斯威士兰",
"Sweden": "瑞典",
"Switzerland": "瑞士",
"Syria": "叙利亚",
"Tajikistan": "塔吉克斯坦",
"Tanzania": "坦桑尼亚",
"Thailand": "泰国",
"Togo": "多哥",
"Tonga": "汤加",
"Trinidad and Tobago": "特立尼达和多巴哥",
"Tunisia": "突尼斯",
"Turkey": "土耳其",
"Turkmenistan": "土库曼斯坦",
"U.S. Virgin Islands": "美属维尔京群岛",
"Uganda": "乌干达",
"Ukraine": "乌克兰",
"United Arab Emirates": "阿拉伯联合酋长国",
"United Kingdom": "英国",
"United States": "美国",
"Uruguay": "乌拉圭",
"Uzbekistan": "乌兹别克斯坦",
"Vanuatu": "瓦努阿图",
"Vatican City": "梵蒂冈城",
"Venezuela": "委内瑞拉",
"Vietnam": "越南",
"W. Sahara": "西撒哈拉",
"Yemen": "也门",
"Yugoslavia": "南斯拉夫",
"Zaire": "扎伊尔",
"Zambia": "赞比亚",
"Zimbabwe": "津巴布韦"
}
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 243c186e
......@@ -50,12 +50,20 @@ const props = defineProps({
isShowDetial: {
type: Boolean,
default: false
},
color: {
type: String,
default: '#5470C6'
},
legendName: {
type: String,
default: 'PDF曲线图'
}
})
const showView = ref(false);
var lineColor = '#5470C6';
var lineColor = props.color;
const markLineData = ref([
{
color: '#89dac4',
......@@ -113,14 +121,14 @@ onUnmounted(() => {
function initChart() {
const chartDom = document.getElementById(idName.value);
chartDom.style.height = '180px';
chartDom.style.width = '170px';
chartDom.style.height = '100%';
chartDom.style.width = '100%';
myChart = echarts.init(chartDom);
//console.log("初始化图表propsDate:",chartDom,myChart);
const option = {
legend: {
show: true,
data: ['PDF曲线图'],
data: [props.legendName],
textStyle: {
color: '#fff',
fontSize: 12
......@@ -175,7 +183,8 @@ function initChart() {
},
series: [
{
name: 'PDF曲线图',
name: props.legendName,
color: props.color,
data: [12, 13, 5, 103, 19, 3, 18],
type: 'line',
smooth: 0.6,
......@@ -271,7 +280,7 @@ function resizeChart() {
.main {
width: 100%;
height: 95%;
height: 100%;
/* border: 1px solid #3A4C5B; */
display: flex;
flex-direction: column;
......@@ -283,6 +292,7 @@ function resizeChart() {
width: 100%;
/* flex: 1; */
min-height: 180px;
height: 100%;
/* 改为min-height确保足够空间 */
position: relative;
z-index: 1;
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 243c186e
......@@ -3,7 +3,7 @@
<!-- 标题栏 -->
<div class="section-divider">
<div class="divider-line"></div>
<h3 class="section-title">可用性</h3>
<h3 class="section-title">{{ props.slogan }}</h3>
<div class="divider-line"></div>
</div>
<div class="hot-title">
......@@ -23,10 +23,10 @@
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box flex-left">
<cdfCurve :propsDate="componentProps"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :propsDate="componentProps" :isShowDetial="true"></cdfCurve>
<cdfCurve :legendName="props.legendName[1]" color="#6ffcba" :isShowDetial="true"></cdfCurve>
</div>
</div>
</div>
......@@ -40,7 +40,15 @@ const props = defineProps({
title: {
type: String,
default: '位置默认'
}
},
slogan: {
type: String,
default: '可用性'
},
legendName: {
type: Array,
default: () => ['默认曲线图1', '默认曲线图2']
},
});
onBeforeUnmount(() => {
//console.log("中，zhelixieza");
......@@ -120,7 +128,7 @@ const componentProps = ref({});
.container {
display: flex;
width: 100%;
height: 200px;
height: 100%;
/* overflow: hidden; */
/* background-color: rgb(75, 75, 75); */
}
......
src/pages/all/components/hotMapComponents/hotMap.vue
浏览文件 @ 243c186e
<template>
<!--热力图-->
<div style="height: 100%; background-color: #000;">
<div style="width: 100%; height: 100%;">
<div :id="chartId" class="main"></div>
</div>
</div>
</template>
<script>
......@@ -16,195 +14,179 @@ export default {
<script setup>
import * as echarts from 'echarts';
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { getGridInfoList } from '@/api/Zodiac';
import { cs } from 'element-plus/es/locales.mjs';
// 生成唯一的图表ID
const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
let myChart = null;
import worldJson from '@/assets/json/world.json';
import chineseWorldName from '@/assets/json/chineseWorldName.json';
import testJson from '@/assets/json/test.json'
// 生成六边形热力图数据
function generateHexagonData() {
// 模拟巴西地图形状的六边形网格数据
const data = [];
const centerX = 0;
const centerY = 0;
// 六边形排列参数
const radius = 15;
const startRadius = 10;
const endRadius = 40;
const angleStep = Math.PI / 3; // 60度
// 生成类似巴西地图轮廓的六边形点
for (let r = startRadius; r < endRadius; r += radius * 0.85) {
// 根据半径调整角度数量，形成不规则形状
const angleCount = Math.round(8 - r / 10) + Math.floor(Math.random() * 2);
for (let i = 0; i < angleCount; i++) {
// 基础角度，添加偏移使形状更接近巴西地图
const baseAngle = angleStep * i;
let angleOffset = 0;
// 根据位置添加偏移，形成不规则形状
if (r < startRadius + 15) angleOffset = 0.3;
else if (r > endRadius - 15) angleOffset = -0.2;
else if (i > angleCount / 2) angleOffset = 0.1;
const angle = baseAngle + angleOffset;
// 计算坐标
const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
// 根据位置生成不同的值（模拟容量）
let value;
// 左侧区域值较低（蓝色）
if (x < -10) {
value = Math.random() * 30;
}
// 右侧区域值较高（红色）
else if (x > 20) {
value = 70 + Math.random() * 30;
}
// 中间区域值中等（黄、绿）
else {
value = 30 + Math.random() * 40;
}
let data = null
data.push({
value: [x, y, value],
itemStyle: {
opacity: 0.9
}
});
}
}
const props = defineProps({
title: {
type: String,
default: '默认未知'
}
})
const transformData = () => {
data = testJson.data.map((item) => ({
name: item.gridName,
value: [
item.vertex1Lon,
item.vertex1Lat,
item.vertex2Lon,
item.vertex2Lat,
item.vertex3Lon,
item.vertex3Lat,
item.vertex4Lon,
item.vertex4Lat,
item.vertex5Lon,
item.vertex5Lat,
item.vertex6Lon,
item.vertex6Lat,
Math.random() * 100,
],
}));
console.log('data', data)
}
// 添加东南部突出部分（类似巴西东南角）
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);
transformData()
data.push({
value: [x, y, 80 + Math.random() * 20],
itemStyle: {
opacity: 0.9
}
});
}
return data;
}
// 生成唯一的图表ID
const chartId = ref('hexagonHeatMap_' + Math.random().toString(36).substr(2, 9));
let myChart = null;
// 初始化图表
function initChart() {
const chartDom = document.getElementById(chartId.value);
chartDom.style.width = '100%';
chartDom.style.height = '150px';
chartDom.style.height = '100%';
if (!chartDom) return;
echarts.registerMap("world", worldJson);
myChart = echarts.init(chartDom);
// 生成热力图数据
const data = generateHexagonData();
const option = {
backgroundColor: '#000',
// legend: {
// show: true,
// data: ['默认'],
// textStyle: {
// color: '#fff',
// fontSize: 12
// },
// top: 0,
// left: '-5px',
// backgroundColor: 'transparent',
// borderColor: 'transparent',
// padding: [5, 10],
// // 添加图标样式控制
// icon: 'rect', // 使用矩形图标
// itemWidth: 15, // 图例宽度
// itemHeight: 5, // 图例高度，设为较小值形成线条效果
// },
title: {
text: '链路层容量',
left: 'center',
text: props.title,
// left: 'center',
// top: 10,
left: 10,
left: 6,
textStyle: {
color: '#fff',
fontSize: 10,
fontWeight: 'normal'
fontSize: 12,
fontWeight: 'bold'
}
},
tooltip: {
// formatter: function(params) {
// return `容量: ${params.data[2].toFixed(1)}`;
// },
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#444',
textStyle: {
color: '#fff'
}
geo: {
map: "world",
roam: true,
center: [104, 35], // 中国中心
zoom: 10, // 放大倍数
// aspectScale: Math.cos((chRoughLatitude * Math.PI) / 180),
// nameProperty: 'name_en', // If using en name.
label: {
show: true,
textBorderColor: "#f7f7f7",
textBorderWidth: 1,
},
visualMap: {
min: 0,
max: 100,
calculable: true,
orient: 'horizontal',
left: 'center',
// bottom: 30,
inRange: {
color: ['#0050b3', '#1890ff', '#7cb305', '#ffd500', '#ff4d4f']
itemStyle: {
areaColor: "#163C7A", // 地图底色
borderColor: "#2a6ea6", // 国界线
borderWidth: 1,
},
textStyle: {
color: '#fff'
emphasis: {
itemStyle: {
areaColor: "#1f4e79", // 鼠标hover颜色
},
// itemWidth: 40,
// itemHeight: 10,
borderWidth: 0
},
xAxis: {
type: 'value',
show: false,
min: -50,
max: 50
nameMap: chineseWorldName
},
yAxis: {
type: 'value',
show: false,
min: -50,
max: 50
visualMap: {
text: ["100", "10"],
textStyle: {
color: "#fff"
},
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
dimension: 12,
itemWidth: 12,
itemHeight: 68,
left: "center", // 水平居中
bottom: 1, // 距离底部 20px
range: [1, 100],
min: 1,
max: 100,
orient: "horizontal",
inRange: {
color: [
"#6ffcba",
"#409eff",
"#2e7dff",
"#97D5E4",
// "#f46d43",
// "#BF1C05",
],
},
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
series: [
{
type: "custom",
// name:'moren',
coordinateSystem: "geo",
// emphasis: {
// style: {
// fill: "#ffcc00", // 高亮颜色
// opacity: 1,
// },
// },
emphasis: {
focus: "self",
},
renderItem(params, api) {
// console.log("params", api.value(0));
const point1 = api.coord([api.value(0), api.value(1)]);
const point2 = api.coord([api.value(2), api.value(3)]);
const point3 = api.coord([api.value(4), api.value(5)]);
const point4 = api.coord([api.value(6), api.value(7)]);
const point5 = api.coord([api.value(8), api.value(9)]);
const point6 = api.coord([api.value(10), api.value(11)]);
const hex = [point1, point2, point3, point4, point5, point6];
return {
type: "polygon",
shape: {
points: hex,
},
// 固定tooltip位置在顶部
position: function (pos, params, dom, rect, size) {
return ['5%', pos[1]];
style: {
fill: api.visual("color"),
},
};
},
data: data,
}
]
}
};
myChart.setOption(option);
resizeChart();
......@@ -218,18 +200,11 @@ function resizeChart() {
}
onMounted(async () => {
const ret = await getGridInfoList()
console.log('rethotMAP', ret)
// 确保DOM渲染完成后初始化图表
nextTick(() => {
initChart();
window.addEventListener('resize', resizeChart);
});
// setTimeout(() => {
// initChart();
// window.addEventListener('resize', resizeChart);
// }, 0);
});
onUnmounted(() => {
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 243c186e
......@@ -3,7 +3,7 @@
<!-- 标题栏 -->
<div class="section-divider">
<div class="divider-line"></div>
<h3 class="section-title">容量/流量</h3>
<h3 class="section-title">{{ props.slogan }}</h3>
<div class="divider-line"></div>
</div>
<div class="hot-title">
......@@ -23,11 +23,10 @@
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box flex-left">
<hotMap :propsDate="componentProps"></hotMap>
<hotMap :title="props.legendName[0]"></hotMap>
</div>
<div class="flex-box flex-right">
<hotMap :propsDate="componentProps"></hotMap>
<!-- <testMap :propsDate="componentProps"></testMap> -->
<hotMap :title="props.legendName[1]"></hotMap>
</div>
</div>
</div>
......@@ -39,11 +38,21 @@ import hotMap from './hotMap.vue'
import testMap from './testMap.vue'
const props = defineProps({
slogan: {
type: String,
default: '容量/流量'
},
legendName: {
type: Array,
default: () => ['默认曲线图1', '默认曲线图2']
},
title: {
type: String,
default: '默认未知'
default: '默认热力图'
}
})
console.log(props.legendName[0], 'props.legendName')
const componentProps = ref({})
</script>
......@@ -53,6 +62,7 @@ const componentProps = ref({})
.header-container {
display: flex;
flex-direction: column;
height: 100%;
gap: 15px;
}
......@@ -119,19 +129,17 @@ const componentProps = ref({})
.container {
display: flex;
width: 100%;
height: 160px;
height: 100%;
/* height: 185px; */
gap: 14px;
/* background-color: rgb(245, 16, 16); */
}
.flex-box {
flex: 1;
/* background-color: blue; */
/* display: flex;
align-items: center;
justify-content: center; */
}
.flex-left {
/* .flex-left {
background-color: rgb(180, 180, 180);
}
} */
</style>
\ No newline at end of file
src/pages/all/components/instant/index.vue
浏览文件 @ 243c186e
......@@ -3,11 +3,11 @@
<!-- 标题栏 -->
<div class="section-divider">
<div class="divider-line"></div>
<h3 class="section-title">网络时延/丢包</h3>
<h3 class="section-title">{{props.slogan}}</h3>
<div class="divider-line"></div>
</div>
<div class="hot-title">
<div class="hot-title-text">巴西-最小值(PDF曲线图)</div>
<div class="hot-title-text">{{props.title}}</div>
<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">
<rect x="0.5" y="0.5" width="31" height="31" rx="3.5" stroke="white" stroke-opacity="0.65" />
......@@ -23,10 +23,10 @@
<!-- 核心数据指标 -->
<div class="container">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :propsDate="componentProps"></instantCurve>
<instantCurve :idName="`instant-left-${props.allIdName}`" :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :isShowDetail="true"></instantCurve>
<instantCurve :idName="`instant-right-${props.allIdName}`" color="#6ffcba" :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
</div>
</div>
</div>
......@@ -37,13 +37,17 @@ import instantCurve from './instantCurve.vue'
const instantCurveRight = ref('instantCurve_chart-right');
const instantCurveLeft = ref('instantCurve_chart-left');
const props = defineProps({
allIdName: {
type: String,
default: 'allIdName',
legendName: {
type: Array,
default: ()=>['默认曲线图1', '默认曲线图2']
},
title: {
type: String,
default: '巴西-最小值(PDF曲线图)'
},
slogan: {
type: String,
default: '网络延时/丢包'
}
});
......@@ -119,7 +123,7 @@ const componentProps = ref({})
.container {
display: flex;
width: 100%;
height: 240px;
height: 100%;
/* overflow: hidden; */
/* background-color: rgb(75, 75, 75); */
}
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 243c186e
......@@ -4,30 +4,28 @@
<div class="main">
<div :id="idName" class="cdfCurve"></div>
<div class="showDetial" @click="showViewClick" v-if="isShowDetail">
<el-icon v-if="showView" class="icon"><View /></el-icon>
<el-icon v-else class="icon"><Hide /></el-icon>
<el-icon v-if="showView" class="icon">
<View />
</el-icon>
<el-icon v-else class="icon">
<Hide />
</el-icon>
<span>详情</span>
</div>
<div class="showValue">
<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>
<el-dialog
v-model="isDetialDialogVisible"
:modal='false'
:show-close="false"
:modal-penetrable='true'
width="200"
height="100"
:before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);"
>
<childrenInstantCurveDetail ref="childrenInstantRef" :propsDate="propsDate" @isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
<el-dialog v-model="isDetialDialogVisible" :modal='false' :show-close="false" :modal-penetrable='true' width="200"
height="100" :before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);">
<childrenInstantCurveDetail ref="childrenInstantRef" :propsDate="propsDate"
@isDetialDialogVisibleHandleClose="isDetialDialogVisibleHandleClose" />
</el-dialog>
</div>
</template>
......@@ -41,16 +39,12 @@ export default {
<script setup>
import * as echarts from 'echarts';
import childrenInstantCurveDetail from './childrenInstantCurve.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({
idName: {
type: String,
default: 'main'
},
propsDate: {
type: Object,
default: () => ({})
......@@ -58,13 +52,21 @@ const props = defineProps({
isShowDetail: {
type: Boolean,
default: false
},
legendName: {
type: String,
default: '默认曲线图'
},
color: {
type: String,
default: '#5470C6'
}
})
var lineColor = '#6FFCBA';
var lineColor = props.color;
const markLineData = ref([
{
color: '#89dac4',
......@@ -88,8 +90,8 @@ function showViewClick() {
isDetialDialogVisible.value = true;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"InstantaneousCurveDetailsDialog",
status:"open"
type: "InstantaneousCurveDetailsDialog",
status: "open"
})));
}
// //console.log("当前的值:",showView.value);
......@@ -102,8 +104,8 @@ const isDetialDialogVisibleHandleClose = () => {
showView.value = false;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type:"InstantaneousCurveDetailsDialog",
status:"close"
type: "InstantaneousCurveDetailsDialog",
status: "close"
})));
}
}
......@@ -111,7 +113,9 @@ const isDetialDialogVisibleHandleClose = () => {
let myChart = null;
onMounted(() => {
nextTick(() => {
initChart();
})
});
onUnmounted(() => {
......@@ -122,14 +126,14 @@ onUnmounted(() => {
});
function initChart() {
const chartDom = document.getElementById(props.idName);
const chartDom = document.getElementById(idName.value);
myChart = echarts.init(chartDom);
chartDom.style.height = '180px';
chartDom.style.width = '170px';
chartDom.style.height = '100%';
chartDom.style.width = '100%';
const option = {
legend: {
show: true,
data: ['CDF曲线图'],
data: [props.legendName],
textStyle: {
color: '#fff',
fontSize: 12
......@@ -184,7 +188,8 @@ chartDom.style.width = '170px';
},
series: [
{
name: 'CDF曲线图',
color: props.color,
name: props.legendName,
data: [12, 13, 85, 53, 19, 23, 18],
type: 'line',
smooth: 0.6,
......@@ -280,7 +285,7 @@ function resizeChart() {
.main {
width: 100%;
height: 95%;
height: 100%;
/* border: 1px solid #3A4C5B; */
display: flex;
flex-direction: column;
......@@ -292,13 +297,14 @@ function resizeChart() {
width: 100%;
/* flex: 1; */
min-height: 180px;
height: 100%;
/* 改为min-height确保足够空间 */
position: relative;
z-index: 1;
}
.showDetial{
.showDetial {
position: absolute;
/* flex-direction: row; */
font: 12px "微软雅黑";
......@@ -310,16 +316,19 @@ function resizeChart() {
/* justify-content: center;
align-items: center; */
}
.showDetial .icon{
.showDetial .icon {
margin: 0;
padding: 0;
top: 2px;
}
.showDetial span{
}
.showDetial span {
padding-left: 5px;
}
.showDetial:hover{
.showDetial:hover {
/* background-color: rgba(255, 255, 255, 0.91); */
color: #607FB0;
/* font-weight: 800; */
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ 243c186e
......@@ -29,7 +29,7 @@
</div>
<div class="section-item_content_down">
<KeepAlive>
<component :is="el.defaultComponent" :title="titleFn(el)"></component>
<component :is="el.defaultComponent" :title="titleFn(el)" :slogan="el.title" :legendName="el.legendName"></component>
</KeepAlive>
</div>
......@@ -64,6 +64,7 @@ const props = defineProps({
const settingConfig = ref([
{
title: '容量/流量',
legendName:['链路层容量','用户实际流量'],
defaultComponent: markRaw(hotMapComponent),
templateSelector: [
{
......@@ -129,6 +130,7 @@ const settingConfig = ref([
},
{
title: '可用性',
legendName:['规划可用性','实际可用性'],
defaultComponent: markRaw(cdf),
templateSelector: [
{
......@@ -188,6 +190,7 @@ const settingConfig = ref([
},
{
title: '网络时延/丢包',
legendName:['搜星时延','丢包率'],
defaultComponent: markRaw(instant),
templateSelector: [
{
......@@ -403,7 +406,7 @@ defineExpose({
}
.templateCase_right_content_body {
height: 92%;
height: 100%;
width: 100%;
/* background-color: #73df2b; */
}
......@@ -412,7 +415,7 @@ defineExpose({
display: flex;
/* 启用弹性布局来水平排列 */
height: 100%;
border-right: 1px solid rgba(255, 0, 0, 0.1);
/* border-right: 1px solid rgba(255, 0, 0, 0.1); */
}
......@@ -515,6 +518,8 @@ defineExpose({
.section-item_content_down {
width: 100%;
/* height: 100%; */
height: 340px;
/* background-color: #9520a0; */
padding: 10px 0;
}
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 243c186e
......@@ -81,16 +81,21 @@
</div>
</div>
<div class="content-item">
<KeepAlive>
<component :is="currentComponent1"></component>
<component :is="currentComponent1" :title="titles[0]" slogan="容量/流量" :legendName="['链路层容量', '用户实际流量']">
</component>
</KeepAlive>
<KeepAlive>
<component :is="currentComponent2"></component>
<component :is="currentComponent2" :title="titles[1]" slogan="可用性" :legendName="['规划可用性', '实际可用性']">
</component>
</KeepAlive>
<KeepAlive>
<component :is="currentComponent3"></component>
<component :is="currentComponent3" :title="titles[2]" slogan="网络时延/丢包" :legendName="['搜星时延', '丢包率']">
</component>
</KeepAlive>
</div>
......@@ -162,7 +167,7 @@ const emits = defineEmits(['handleScreenConfigeClose']);
// 标签页状态管理
const activeTab = ref('equipmentCount'); // 默认选中"地面站设备数量"
const titles = ref([]);
const keliSelector = ref(
{
......@@ -245,11 +250,6 @@ const handleDelete = () => {
})
};
const handleAdd = () => {
// console.log('新增')
// const ret = await templateAdd({
// name: '模板1',
// settingConfig: {}
// })
const templateId = Date.now();
templateCaseList.value.push({
//新增模板
......@@ -392,6 +392,11 @@ const templateOnChange = (val) => {
currentComponent2 = obj[selectedTemplate.availabilityCurveType]
currentComponent3 = obj[selectedTemplate.latencyCurveType]
titles.value[0] = selectedTemplate.capacityCurveType + '-' + selectedTemplate.capacityGeoStandard + '-' + selectedTemplate.capacityTimeStandard
titles.value[1] = selectedTemplate.availabilityCurveType + '-' + selectedTemplate.availabilityGeoStandard + '-' + selectedTemplate.availabilityTimeStandard
titles.value[2] = selectedTemplate.latencyCurveType + '-' + selectedTemplate.latencyGeoStandard + '-' + selectedTemplate.latencyTimeStandard
// if()
......@@ -581,7 +586,8 @@ const templateOnChange = (val) => {
}
.tab-panel {
min-height: 600px;
/* min-height: 600px; */
height: 600px;
/* max-height: 700px; */
color: #e2e8f0;
}
......@@ -591,6 +597,7 @@ const templateOnChange = (val) => {
flex-direction: row;
font-size: 15px;
width: 1500px;
height: 500px;
/* gap: 20px; 添加间距 */
/* height: 500px; */
/* background-color: rgba(1, 73, 241, 0.5); */
......@@ -601,7 +608,7 @@ const templateOnChange = (val) => {
.templateCase {
flex: 1;
height: 700px;
height: 100%;
/* width: 500px; */
/* background-color: rgba(241, 1, 81, 0.5); */
/* border-radius: 6px; 添加圆角 */
......@@ -643,20 +650,6 @@ const templateOnChange = (val) => {
/* padding: 10px 10px; */
}
.templateCase_right_content_header {
display: flex;
flex-direction: column;
height: 8%;
width: 100%;
padding: 10px 10px;
/* background-color: #df2b34; */
}
.templateCase_right_content_body {
height: 92%;
width: 100%;
background-color: #73df2b;
}
/* 新增样式 */
.horizontal-sections {
......@@ -711,6 +704,7 @@ const templateOnChange = (val) => {
.templateCase_left_content {
/* background-color: #6ffcba; */
width: 100%;
......@@ -857,6 +851,7 @@ const templateOnChange = (val) => {
.content-item {
display: flex;
flex-direction: row;
height: 340px;
gap: 20px;
padding: 10px 5px;
/* background-color: #1c5abe; */
......
src/pages/rights2/index.vue
浏览文件 @ 243c186e
......@@ -106,7 +106,7 @@
:before-close="handleIsErrorDataCloseFn"
:destroy-on-close="true"
:destroy-on-close=""
style="background: rgba(0, 0, 0, 0);padding: 0;margin: 0;"
>
<errorDataShowComponent @handleIsErrorDataCloseFn="handleIsErrorDataCloseFn" :errorDetailItems="errorDetailItems"></errorDataShowComponent>
......
world.json 0 → 100644
浏览文件 @ 243c186e
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论