Skip to content

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

提交图表问题

上级 da6185af
显示空白字符变更
内嵌 并排
正在显示 包含 232 行增加 和 140 行删除
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ bb4d1f54
......@@ -6,6 +6,7 @@
<h3 class="section-title">{{ props.slogan }}</h3>
<div class="divider-line"></div>
</div>
<!-- 标题文本 -->
<div class="hot-title">
<div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge">
......@@ -56,6 +57,7 @@ const props = defineProps({
})
console.log(props.data, '热力图数据')
console.log(props.legendName[0], 'props.legendName')
const componentProps = ref({})
......
src/pages/all/components/instant/index.vue
浏览文件 @ bb4d1f54
......@@ -20,8 +20,8 @@
</svg>
</div>
</div>
<!-- 核心数据指标 -->
<div class="container">
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<!-- <div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
......@@ -30,8 +30,16 @@
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
</div>
</div> -->
<div class="container" v-if="props.lineArray">
<div>5555</div>
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
</div>
</template>
<script setup>
......@@ -58,11 +66,16 @@ const props = defineProps({
zoomHeight: {
type: String,
default: null
},
lineArray: {
type: Boolean,
default: false
}
});
console.log('瞬时值曲线', props.data)
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
console.log('瞬时值曲线', props.lineArray)
}, 2000);
const componentProps = ref({})
</script>
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ bb4d1f54
<template>
<!-- CDF曲线图 -->
<!-- 瞬时曲线图 -->
<div class="container">
<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>
<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 }}
</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);">
......@@ -40,25 +23,23 @@ export default {
import * as echarts from 'echarts';
import childrenInstantCurveDetail from './childrenInstantCurve.vue'
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
const idName = ref(Math.random().toString(30).slice(2, 8))
//不重复的id信息
const idName = ref(Math.random().toString(30).slice(2, 8) + new Date().getTime())
const props = defineProps({
propsDate: {
type: Object,
default: () => ({})
},
isShowDetail: {
isShowDetail: {//暂时无用
type: Boolean,
default: false
},
legendName: {
type: String,
legendName: {//可能是数组
type: null,
default: '默认曲线图'
},
color: {
type: String,
color: {//可能是数组
type: null,
default: '#5470C6'
},
data: {
......@@ -68,63 +49,64 @@ const props = defineProps({
zoomHeight: {
type: String,
default: null
},
lineArray: {
type: Boolean,
default: false
}
})
setTimeout(() => {
console.log(props, '大屏配置曲线图',);
}, 2000);
watch(() => props.data, (newVal) => {
initChart();
})
const dataX = computed(() => {
if (props.lineArray) {//代表x轴有多个
let arrx = []
props.data.forEach(it => {
arrx.push(it.length > 0 ? it.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
})
// console.log(arrx, 'x轴信息');
return arrx
// return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
} else {
return props.data.length > 0 ? props.data.map(item => item.x.split(' ')[1].slice(0, 8)) : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
}
})
const dataY = computed(() => {
// console.log(props.data, 'Y轴信息');
let arry = []
if (props.lineArray) {
props.data.forEach(it => {
if (it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined) {
it.forEach(item => {
item.y = item.y.dropRate
})
}
arry.push(it.length > 0 ? it.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18])
})
return arry
} else {
if (props.data[0]?.y && Object.prototype.toString(props.data[0]?.y) === '[object Object]' && props.data[0].y?.errorRate !== undefined) {
props.data.forEach(item => {
item.y = item.y.dropRate
})
}
return props.data.length > 0 ? props.data.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18]
})
var lineColor = props.color;
const markLineData = ref([
{
color: '#89dac4',
descript: "最大值：12"
},
{
color: '#da45ds',
descript: "最小值：12"
},
{
color: '#56fds9',
descript: "平均值：12"
},
])
const showView = ref(false)
const isDetialDialogVisible = ref(false)
function showViewClick() {
// //console.log("时间");
showView.value = true;
isDetialDialogVisible.value = true;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "InstantaneousCurveDetailsDialog",
status: "open"
})));
}
// //console.log("当前的值:",showView.value);
}
})
const childrenInstantRef = ref(null)
//折线图颜色设置
const isDetialDialogVisible = ref(false)//弹框状态
//关闭弹窗
const isDetialDialogVisibleHandleClose = () => {
isDetialDialogVisible.value = false;
showView.value = false;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "InstantaneousCurveDetailsDialog",
......@@ -132,9 +114,7 @@ const isDetialDialogVisibleHandleClose = () => {
})));
}
}
let myChart = null;
onMounted(() => {
nextTick(() => {
initChart();
......@@ -155,10 +135,115 @@ function initChart() {
};
chartDom.style.height = '100%';
chartDom.style.width = '100%';
let seriesArr = [];//图标数据
// console.log(props.data.length, '判断值是多少?', props)
console.log('颜色', props.data);
if (props.lineArray) {
props.data.forEach((it, index) => {
const series1Data = it.map((item, idx) => [item.x, item.y]);
console.log(series1Data, '最终数据');
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
data: series1Data,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: props.color[index],
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: props.color[index]
},
{
offset: 1,
color: 'rgba(111,252,186,0.20)'
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
}
})
})
} else {
seriesArr.push({
color: props.color,
name: props.legendName,
data: dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: props.color,
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: props.color
},
{
offset: 1,
color: 'rgba(111,252,186,0.20)'
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
// data: [
// {
// yAxis: 45,
// lineStyle: {
// color: '#ff0000',
// width: 2,
// type: 'dashed'
// },
// },
// {
// yAxis: 70,
// lineStyle: {
// color: '#ff55f5',
// width: 2,
// type: 'dashed'
// },
// }
// ]
}
})
}
const option = {
legend: {
show: true,
data: [props.legendName],
data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
textStyle: {
color: '#fff',
fontSize: 12
......@@ -182,10 +267,10 @@ function initChart() {
containLabel: true //自动计算x轴label
},
xAxis: {
type: 'category',
// type: 'time',
// type: 'category',
type: 'time',
boundaryGap: false,
data: dataX.value,
// data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: {
interval: 0,
......@@ -284,64 +369,7 @@ function initChart() {
}
}
],
series: [
{
color: props.color,
name: props.legendName,
data: dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: lineColor,
width: 3
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: lineColor
},
{
offset: 1,
color: 'rgba(111,252,186,0.20)'
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
// data: [
// {
// yAxis: 45,
// lineStyle: {
// color: '#ff0000',
// width: 2,
// type: 'dashed'
// },
// },
// {
// yAxis: 70,
// lineStyle: {
// color: '#ff55f5',
// width: 2,
// type: 'dashed'
// },
// }
// ]
}
}
],
series: seriesArr,
tooltip: {
trigger: 'axis',
// 确保tooltip显示在最上层
......@@ -360,6 +388,7 @@ function initChart() {
}
}
};
console.log(option, '配置', myChart, '住新冠');
myChart.setOption(option);
resizeChart();
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ bb4d1f54
<template>
<!-- 大屏配置-模版列表 -->
<div class="templateCase_right_content">
<!-- 模版名称修改 -->
<div class="templateCase_right_content_header">
<div class="templateCase_right_content_header_item">
<!-- <span>模板名称</span> -->
<input ref="inputRef" class="templateName" v-model="templateName" :disabled="!isEdit"></input>
<img src="@/assets/images/headers/case_header.png" alt="" title="编辑"
style="width: 20px; height: 20px;cursor: pointer;" @click="handleEdit">
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ bb4d1f54
......@@ -44,7 +44,6 @@
<div class="equipment-content">
<!-- 下拉选择器区域 -->
<div class="selector-container">
<div class="selector-item">
<label class="selector-label">{{ keliSelector.label }}</label>
<div class="custom-select">
......@@ -80,24 +79,25 @@
</div>
</div>
</div>
<!-- 弹框中展示两种 -->
<div class="content-item" style="height: 480px;">
<!-- <KeepAlive> -->
<component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']">
:legendName="['链路层容量', '用户实际流量']" :lineArray="true">
</component>
<!-- </KeepAlive> -->
<!-- <KeepAlive> -->
<component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']">
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false">
</component>
<!-- </KeepAlive> -->
<!-- <KeepAlive> -->
<component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']">
:legendName="['搜星时延', '丢包率']" :lineArray="true">
</component>
<!-- </KeepAlive> -->
......@@ -256,6 +256,8 @@ const handleDelete = () => {
})
return
}
console.log(currentSettingConfig.value, '删除信息', templateCaseList.value);
ElMessageBox.confirm(
`您确定删除 [${currentSettingConfig.value.templateName}] ?`,
'Warning',
......@@ -266,6 +268,15 @@ const handleDelete = () => {
}
)
.then(async () => {
//判断是新加的模版还是接口返回的模版
if (currentSettingConfig.value.templateAdd) {
templateCaseList.value = templateCaseList.value.filter(it => it.templateId != currentSettingConfig.value.templateId)
ElMessage({
type: 'success',
message: '删除成功',
})
return
}
const ret = await templateDel({
templateId: currentSettingConfig.value.templateId // 模板id
})
......@@ -432,7 +443,7 @@ const childrenOnChange = (item) => {
}
watch(() => keliSelector.value.value, keliOnChange)
// 模版列表--确认
const handleApply = async () => {
let ret = null
Loading.show()
......@@ -692,7 +703,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
}
.logo_right {
width: 70%;
width: 80%;
display: flex;
align-items: center;
justify-content: center;
......@@ -774,6 +785,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
border-radius: 8px;
padding: 5px 15px;
}
.equipment-content {
height: 600px;
}
......@@ -1096,4 +1108,13 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
.select-dropdown::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* 下拉框禁止和正常的文字颜色 */
:deep(.custom-select .el-select__wrapper) .el-select__placeholder {
color: #ffffff;
}
:deep(.custom-select .el-select__wrapper.is-disabled) .el-select__placeholder {
color: #cccccc91 !important;
}
</style>
\ No newline at end of file
src/pages/header/index.vue
浏览文件 @ bb4d1f54
......@@ -57,8 +57,8 @@
</div>
</div>
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" :modal="false" :show-close="false"
:before-close="handleScreenConfigeClose"
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" modal-class="dialogModel" :modal="true"
:show-close="false" :before-close="handleScreenConfigeClose"
style="background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;z-index: 999;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
<!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
......@@ -586,6 +586,31 @@ const initChartData = async () => {
color: rgba(255, 255, 255, 0.8);
}
/* 弹框遮罩层 */
:deep().dialogModel {
background-color: rgba(0, 0, 0, 0.8);
}
:deep().dashboard-container {
border: 1px solid #cccccc2a;
}
:deep().dashboard-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
/* 透明边框 */
border-image: linear-gradient(to right, #263347, #3e73cc, #263347) 1;
/* 渐变边框 */
z-index: -1;
/* 确保伪元素在内容之下 */
}
/* 响应式设计 */
@media (max-width: 1440px) {
.platform-title {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论