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 @@ ...@@ -6,6 +6,7 @@
<h3 class="section-title">{{ props.slogan }}</h3> <h3 class="section-title">{{ props.slogan }}</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">{{ props.title }}</div> <div class="hot-title-text">{{ props.title }}</div>
<div class="hot-title-enlarge"> <div class="hot-title-enlarge">
...@@ -56,6 +57,7 @@ const props = defineProps({ ...@@ -56,6 +57,7 @@ const props = defineProps({
}) })
console.log(props.data, '热力图数据')
console.log(props.legendName[0], 'props.legendName') console.log(props.legendName[0], 'props.legendName')
const componentProps = ref({}) const componentProps = ref({})
......
src/pages/all/components/instant/index.vue
浏览文件 @ bb4d1f54
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
</svg> </svg>
</div> </div>
</div> </div>
<!-- 核心数据指标 --> <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container"> <!-- <div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left"> <div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]" <instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve> :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
...@@ -30,8 +30,16 @@ ...@@ -30,8 +30,16 @@
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba" <instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :isShowDetail="true"></instantCurve> :legendName="props.legendName[1]" :isShowDetail="true"></instantCurve>
</div> </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> </div>
</div>
</template> </template>
<script setup> <script setup>
...@@ -58,11 +66,16 @@ const props = defineProps({ ...@@ -58,11 +66,16 @@ const props = defineProps({
zoomHeight: { zoomHeight: {
type: String, type: String,
default: null default: null
},
lineArray: {
type: Boolean,
default: false
} }
}); });
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
console.log('瞬时值曲线', props.data) console.log('瞬时值曲线', props.lineArray)
}, 2000);
const componentProps = ref({}) const componentProps = ref({})
</script> </script>
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ bb4d1f54
<template> <template>
<!-- CDF曲线图 --> <!-- 瞬时曲线图 -->
<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="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> -->
</div>
<el-dialog v-model="isDetialDialogVisible" :modal='false' :show-close="false" :modal-penetrable='true' width="200" <el-dialog v-model="isDetialDialogVisible" :modal='false' :show-close="false" :modal-penetrable='true' width="200"
height="100" :before-close="isDetialDialogVisibleHandleClose" height="100" :before-close="isDetialDialogVisibleHandleClose"
style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);"> style="margin: 0;padding: 0; background-color: rgba(0, 0, 0, 0);">
...@@ -40,25 +23,23 @@ export default { ...@@ -40,25 +23,23 @@ export default {
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import childrenInstantCurveDetail from './childrenInstantCurve.vue' import childrenInstantCurveDetail from './childrenInstantCurve.vue'
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue'; import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
//不重复的id信息
const idName = ref(Math.random().toString(30).slice(2, 8)) const idName = ref(Math.random().toString(30).slice(2, 8) + new Date().getTime())
const props = defineProps({ const props = defineProps({
propsDate: { propsDate: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
}, },
isShowDetail: { isShowDetail: {//暂时无用
type: Boolean, type: Boolean,
default: false default: false
}, },
legendName: { legendName: {//可能是数组
type: String, type: null,
default: '默认曲线图' default: '默认曲线图'
}, },
color: { color: {//可能是数组
type: String, type: null,
default: '#5470C6' default: '#5470C6'
}, },
data: { data: {
...@@ -68,63 +49,64 @@ const props = defineProps({ ...@@ -68,63 +49,64 @@ const props = defineProps({
zoomHeight: { zoomHeight: {
type: String, type: String,
default: null default: null
},
lineArray: {
type: Boolean,
default: false
} }
}) })
setTimeout(() => {
console.log(props, '大屏配置曲线图',);
}, 2000);
watch(() => props.data, (newVal) => { watch(() => props.data, (newVal) => {
initChart(); initChart();
}) })
const dataX = computed(() => { 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']; 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(() => { 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) { if (props.data[0]?.y && Object.prototype.toString(props.data[0]?.y) === '[object Object]' && props.data[0].y?.errorRate !== undefined) {
props.data.forEach(item => { props.data.forEach(item => {
item.y = item.y.dropRate item.y = item.y.dropRate
}) })
} }
return props.data.length > 0 ? props.data.map(item => item.y) : [12, 13, 5, 103, 19, 3, 18] 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 = () => { const isDetialDialogVisibleHandleClose = () => {
isDetialDialogVisible.value = false; isDetialDialogVisible.value = false;
showView.value = false;
if (window.ue5) { if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({ window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "InstantaneousCurveDetailsDialog", type: "InstantaneousCurveDetailsDialog",
...@@ -132,9 +114,7 @@ const isDetialDialogVisibleHandleClose = () => { ...@@ -132,9 +114,7 @@ const isDetialDialogVisibleHandleClose = () => {
}))); })));
} }
} }
let myChart = null; let myChart = null;
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {
initChart(); initChart();
...@@ -155,10 +135,115 @@ function initChart() { ...@@ -155,10 +135,115 @@ function initChart() {
}; };
chartDom.style.height = '100%'; chartDom.style.height = '100%';
chartDom.style.width = '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 = { const option = {
legend: { legend: {
show: true, show: true,
data: [props.legendName], data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
textStyle: { textStyle: {
color: '#fff', color: '#fff',
fontSize: 12 fontSize: 12
...@@ -182,10 +267,10 @@ function initChart() { ...@@ -182,10 +267,10 @@ function initChart() {
containLabel: true //自动计算x轴label containLabel: true //自动计算x轴label
}, },
xAxis: { xAxis: {
type: 'category', // type: 'category',
// type: 'time', type: 'time',
boundaryGap: false, boundaryGap: false,
data: dataX.value, // data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
axisLabel: { axisLabel: {
interval: 0, interval: 0,
...@@ -284,64 +369,7 @@ function initChart() { ...@@ -284,64 +369,7 @@ function initChart() {
} }
} }
], ],
series: [ series: seriesArr,
{
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'
// },
// }
// ]
}
}
],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
// 确保tooltip显示在最上层 // 确保tooltip显示在最上层
...@@ -360,6 +388,7 @@ function initChart() { ...@@ -360,6 +388,7 @@ function initChart() {
} }
} }
}; };
console.log(option, '配置', myChart, '住新冠');
myChart.setOption(option); myChart.setOption(option);
resizeChart(); resizeChart();
......
src/pages/header/component/screenConfigCase.vue
浏览文件 @ bb4d1f54
<template> <template>
<!-- 大屏配置-模版列表 -->
<div class="templateCase_right_content"> <div class="templateCase_right_content">
<!-- 模版名称修改 -->
<div class="templateCase_right_content_header"> <div class="templateCase_right_content_header">
<div class="templateCase_right_content_header_item"> <div class="templateCase_right_content_header_item">
<!-- <span>模板名称</span> -->
<input ref="inputRef" class="templateName" v-model="templateName" :disabled="!isEdit"></input> <input ref="inputRef" class="templateName" v-model="templateName" :disabled="!isEdit"></input>
<img src="@/assets/images/headers/case_header.png" alt="" title="编辑" <img src="@/assets/images/headers/case_header.png" alt="" title="编辑"
style="width: 20px; height: 20px;cursor: pointer;" @click="handleEdit"> style="width: 20px; height: 20px;cursor: pointer;" @click="handleEdit">
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ bb4d1f54
...@@ -44,7 +44,6 @@ ...@@ -44,7 +44,6 @@
<div class="equipment-content"> <div class="equipment-content">
<!-- 下拉选择器区域 --> <!-- 下拉选择器区域 -->
<div class="selector-container"> <div class="selector-container">
<div class="selector-item"> <div class="selector-item">
<label class="selector-label">{{ keliSelector.label }}</label> <label class="selector-label">{{ keliSelector.label }}</label>
<div class="custom-select"> <div class="custom-select">
...@@ -80,24 +79,25 @@ ...@@ -80,24 +79,25 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 弹框中展示两种 -->
<div class="content-item" style="height: 480px;"> <div class="content-item" style="height: 480px;">
<!-- <KeepAlive> --> <!-- <KeepAlive> -->
<component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量" <component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']"> :legendName="['链路层容量', '用户实际流量']" :lineArray="true">
</component> </component>
<!-- </KeepAlive> --> <!-- </KeepAlive> -->
<!-- <KeepAlive> --> <!-- <KeepAlive> -->
<component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]" <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']"> slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false">
</component> </component>
<!-- </KeepAlive> --> <!-- </KeepAlive> -->
<!-- <KeepAlive> --> <!-- <KeepAlive> -->
<component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包" <component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']"> :legendName="['搜星时延', '丢包率']" :lineArray="true">
</component> </component>
<!-- </KeepAlive> --> <!-- </KeepAlive> -->
...@@ -256,6 +256,8 @@ const handleDelete = () => { ...@@ -256,6 +256,8 @@ const handleDelete = () => {
}) })
return return
} }
console.log(currentSettingConfig.value, '删除信息', templateCaseList.value);
ElMessageBox.confirm( ElMessageBox.confirm(
`您确定删除 [${currentSettingConfig.value.templateName}] ?`, `您确定删除 [${currentSettingConfig.value.templateName}] ?`,
'Warning', 'Warning',
...@@ -266,6 +268,15 @@ const handleDelete = () => { ...@@ -266,6 +268,15 @@ const handleDelete = () => {
} }
) )
.then(async () => { .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({ const ret = await templateDel({
templateId: currentSettingConfig.value.templateId // 模板id templateId: currentSettingConfig.value.templateId // 模板id
}) })
...@@ -432,7 +443,7 @@ const childrenOnChange = (item) => { ...@@ -432,7 +443,7 @@ const childrenOnChange = (item) => {
} }
watch(() => keliSelector.value.value, keliOnChange) watch(() => keliSelector.value.value, keliOnChange)
// 模版列表--确认
const handleApply = async () => { const handleApply = async () => {
let ret = null let ret = null
Loading.show() Loading.show()
...@@ -692,7 +703,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => { ...@@ -692,7 +703,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
} }
.logo_right { .logo_right {
width: 70%; width: 80%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -774,6 +785,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => { ...@@ -774,6 +785,7 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
border-radius: 8px; border-radius: 8px;
padding: 5px 15px; padding: 5px 15px;
} }
.equipment-content { .equipment-content {
height: 600px; height: 600px;
} }
...@@ -1096,4 +1108,13 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => { ...@@ -1096,4 +1108,13 @@ const calculateConfig = (selectedTemplate = currentSettingConfig.value) => {
.select-dropdown::-webkit-scrollbar-thumb:hover { .select-dropdown::-webkit-scrollbar-thumb:hover {
background: #64748b; 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> </style>
\ No newline at end of file
src/pages/header/index.vue
浏览文件 @ bb4d1f54
...@@ -57,8 +57,8 @@ ...@@ -57,8 +57,8 @@
</div> </div>
</div> </div>
<el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" :modal="false" :show-close="false" <el-dialog v-model="screenConfigeDialogVisible" :destroy-on-close="false" modal-class="dialogModel" :modal="true"
:before-close="handleScreenConfigeClose" :show-close="false" :before-close="handleScreenConfigeClose"
style="background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;z-index: 999;"> style="background-color: rgba(0, 0, 0,0);padding: 0;margin: 0;z-index: 999;">
<screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige> <screenConfige @handleScreenConfigeClose="handleScreenConfigeClose"></screenConfige>
<!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> --> <!-- <div style="width: 100px;height: 100px;background-color: blueviolet;"></div> -->
...@@ -586,6 +586,31 @@ const initChartData = async () => { ...@@ -586,6 +586,31 @@ const initChartData = async () => {
color: rgba(255, 255, 255, 0.8); 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) { @media (max-width: 1440px) {
.platform-title { .platform-title {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论