Skip to content

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

曲线问题

上级 84776f90
隐藏空白字符变更
内嵌 并排
正在显示 包含 121 行增加 和 36 行删除
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 84c9135c
......@@ -136,6 +136,7 @@ function initChart() {
data: series1Data.value,
type: 'line',
smooth: 0.6,
unit: props.yName.value[index],
symbol: 'none',
lineStyle: {
color: props.color[index],
......@@ -287,13 +288,14 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
name: props.lineArray ? (props.yName.type ? props.yName.value[0] : '') : props.yName.value,//y轴名称
// max: 120,
minInterval: 1,
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
color: '#fff',
padding: [0, 40, 0, 0]
},
splitLine: {
show: true,
......@@ -355,6 +357,12 @@ function initChart() {
color: '#fff',
fontSize: 12
},
formatter: function (params) {
let res = params[0].axisValue + '<br>';
res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
return res;
},
// props.yName.value[index],
// 固定tooltip位置在顶部
position: function (pos, params, dom, rect, size) {
return ['10%', pos[1]];
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 84c9135c
......@@ -55,12 +55,14 @@
<!-- 核心数据指标 -->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<cdfCurve :legendName="props.legendName[0]" :yName="props.yName" :data="props.data[0]" color="#ff9f7f"
:isShowDetial="true"></cdfCurve>
<cdfCurve :legendName="props.legendName[0]"
:yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
:data="props.data[0]" color="#ff9f7f" :isShowDetial="true"></cdfCurve>
</div>
<div class="flex-box flex-right">
<cdfCurve :legendName="props.legendName[1]" :yName="props.yName" :data="props.data[1]" color="#6ffcba"
:isShowDetial="true">
<cdfCurve :legendName="props.legendName[1]"
:yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
:data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve>
</div>
</div>
......@@ -83,9 +85,9 @@
</i>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<!-- <div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div> -->
</div>
<div class="logo logo_right">
......
src/pages/all/components/hotMapComponents/index.vue
浏览文件 @ 84c9135c
......@@ -82,9 +82,9 @@
</i>
<span class="logo_header_content">热力图</span>
</div>
<div class="logo_header_right">
<!-- <div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div> -->
</div>
<div class="logo logo_right">
......@@ -99,10 +99,14 @@
<div class="container" v-if="bigStatus">
<!-- 核心数据指标 热力图-->
<div class="flex-box flex-left">
<hotMap :title="props.legendName[0]" :yName="props.yName" :data="props.data[0]"></hotMap>
<hotMap :title="props.legendName[0]"
:yName="{ type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' }"
:data="props.data[0]"></hotMap>
</div>
<div class="flex-box flex-right">
<hotMap :title="props.legendName[1]" :yName="props.yName" :data="props.data[1]"></hotMap>
<hotMap :title="props.legendName[1]"
:yName="{ type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' }"
:data="props.data[1]"></hotMap>
</div>
</div>
</main>
......
src/pages/all/components/instant/index.vue
浏览文件 @ 84c9135c
......@@ -55,21 +55,23 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<!-- <div>{{ props.data[0] }}-----</div> -->
<instantCurve :idName="`instant-left-${props.allIdName}`" :data="props.data[0]"
:legendName="props.legendName[0]" :yName="props.yName[0] ? props.yName[0] : ''" :propsDate="componentProps"
:istemplate="props.istemplate"></instantCurve>
:legendName="props.legendName[0]"
:yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[0] ? props.yName?.value[0] : '' } : {}"
:propsDate="componentProps" :istemplate="props.istemplate"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :data="props.data[1]" color="#6ffcba"
:legendName="props.legendName[1]" :yName="props.yName[1] ? props.yName[1] : ''" :propsDate="componentProps"
isShowDetail="true" :istemplate="props.istemplate">
:legendName="props.legendName[1]"
:yName="props.yName ? { type: props.yName?.type, value: props.yName?.value[1] ? props.yName?.value[1] : '' } : {}"
:propsDate="componentProps" isShowDetail="true" :istemplate="props.istemplate">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
<instantCurve :lineArray="props.lineArray" :yName="props.yName" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList" :istemplate="props.istemplate">
</instantCurve>
</div>
......@@ -86,9 +88,9 @@
</i>
<span class="logo_header_content">通信曲线</span>
</div>
<div class="logo_header_right">
<!-- <div class="logo_header_right">
<span class="logo_header_right_content">[区域一特事故]</span>
</div>
</div> -->
</div>
<div class="logo logo_right">
......@@ -103,18 +105,20 @@
<!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<div class="container" v-if="!props.lineArray">
<div class="flex-box flex-left">
<instantCurve :idName="`instant-left-${props.allIdName}`" :yName="props.yName[0] ? props.yName[0] : ''"
<instantCurve :idName="`instant-left-${props.allIdName}`"
:yName="props.yName ? { type: props.yName.type, value: props.yName.value[0] ? props.yName.value[0] : '' } : {}"
:data="props.data[0]" :legendName="props.legendName[0]" :propsDate="componentProps"></instantCurve>
</div>
<div class="flex-box flex-right">
<instantCurve :idName="`instant-right-${props.allIdName}`" :yName="props.yName[1] ? props.yName[1] : ''"
<instantCurve :idName="`instant-right-${props.allIdName}`"
:yName="props.yName ? { type: props.yName.type, value: props.yName.value[1] ? props.yName.value[1] : '' } : {}"
:data="props.data[1]" color="#6ffcba" :legendName="props.legendName[1]" :isShowDetail="true">
</instantCurve>
</div>
</div>
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<instantCurve :lineArray="props.lineArray" :yName="props.yName[0]" :data="props.data"
<instantCurve :lineArray="props.lineArray" :yName="props.yName" :data="props.data"
:legendName="props.legendName" :propsDate="componentProps" :color="colorList"></instantCurve>
</div>
</div>
......@@ -126,6 +130,7 @@
</template>
<script setup>
import instantCurve from './instantCurve.vue'
import bigdialog from '../../../header/component/bigdialog.vue'
......@@ -166,6 +171,8 @@ const props = defineProps({
}
});
console.log(props.yName, 'y轴名称------');
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
setTimeout(() => {
// console.log('瞬时值曲线', props)
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 84c9135c
......@@ -140,8 +140,12 @@ function initChart() {
chartDom.style.width = '100%';
//判断x轴刻度问题
var firstTime = 0, lastTime = 0;
// 定义一个字段,判断x轴是不是时间,如果是,则type为time
var xAxisType = 'category';
let seriesArr = [];//图标数据
if (props.lineArray) {
xAxisType = 'time';
props.data.forEach((it, index) => {
series1Data.value = it.map((item, idx) => [item.x, it[0]?.y && Object.prototype.toString(it[0]?.y) === '[object Object]' && it[0].y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(series1Data.value, '最终数据');
......@@ -197,10 +201,25 @@ function initChart() {
}
})
} else {
// console.log(dataX.value, 'xinxi1-----', props.data);
if (props.data[0]?.x?.includes(':')) {
xAxisType = 'time';
if (dataX.value.length > 0) {
firstTime = props.data[0]?.x
lastTime = props.data[props.data.length - 1]?.x
}
series1Data.value = props.data.map((item, idx) => [item.x, item?.y && Object.prototype.toString(item?.y) === '[object Object]' && item.y?.errorRate !== undefined ? item.y.dropRate : item.y]);
// console.log(series1Data.value, '最终数据');
} else {
xAxisType = 'category';
}
seriesArr.push({
color: props.color,
name: props.legendName,
data: dataY.value,
data: xAxisType == 'time' ? series1Data.value : dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
......@@ -255,6 +274,7 @@ function initChart() {
})
}
var option = {
legend: {
show: true,
......@@ -282,8 +302,8 @@ function initChart() {
containLabel: true //自动计算x轴label
},
xAxis: {
// type: 'category',
type: props.lineArray ? 'time' : 'category',
type: xAxisType,
// type: props.lineArray ? 'time' : 'category',
boundaryGap: false,
data: dataX.value,
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
......@@ -299,7 +319,24 @@ function initChart() {
showMaxLabel: true, // 显示最大刻度标签
formatter: function (value) {
if (!props.lineArray) {
return value
if (xAxisType == 'time') {
return timestampToHMS(value)
// if (firstTime == value || lastTime == value) {
// return value
// } else {
// if (value.split(':')[1] == '00' && value.split(':')[2] == '00') {
// console.log(value);
// return value
// }
// }
} else {
return value
}
// console.log(value, 'x轴刻度', firstTime, lastTime);
}
if (value.toString().includes(':')) {
const date = new Date(value);
......@@ -329,11 +366,12 @@ function initChart() {
},
yAxis: {
type: 'value',
name: props.yName,//y轴名称
name: props.lineArray ? (props.yName.type ? props.yName.value[0] : '') : props.yName.value,//y轴名称
nameTextStyle: { // 文本样式
fontSize: 12,
fontWeight: 'bold',
color: '#fff'
color: '#fff',
padding: [0, 40, 0, 0]
},
// max: 120,
minInterval: 1,
......@@ -399,6 +437,11 @@ function initChart() {
color: '#fff',
fontSize: 12
},
formatter: function (params) {
let res = params[0].axisValue + '<br>';
res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
return res;
},
// 固定tooltip位置在顶部
position: function (pos, params, dom, rect, size) {
return ['10%', pos[1]];
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 84c9135c
......@@ -84,20 +84,20 @@
<!-- <KeepAlive> -->
<component :is="currentComponent1" :data="[capacityData, trafficData]" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']" :lineArray="true" :istemplate="true">
:yName="yName1" :legendName="['链路层容量', '用户实际流量']" :lineArray="true" :istemplate="true">
</component>
<!-- </KeepAlive> -->
<!-- <KeepAlive> -->
<component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true" :istemplate="true">
slogan="可用性" :yName="yName2" :legendName="['规划可用性', '实际可用性']" :lineArray="true" :istemplate="true">
</component>
<!-- </KeepAlive> -->
<!-- <KeepAlive> -->
<component :is="currentComponent3" :data="[delayData, lossRateData]" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']" :lineArray="false" :istemplate="true">
:yName="yName3" :legendName="['搜星时延', '丢包率']" :lineArray="false" :istemplate="true">
</component>
<!-- </KeepAlive> -->
......@@ -181,7 +181,19 @@ const resetData = () => {
availabilityData.value = []
actualAvailabilityData.value = []
}
// y轴单位
const yName1 = ref({
type: true,
value: ["Mbps", 'Mbps']
})
const yName2 = ref({
type: false,
value: ['s', 'dB']
})
const yName3 = ref({
type: true,
value: ["ms", ""]
})
const screenConfigCaseRef = ref()
const currentSettingConfig = ref()
......
src/pages/rights/index.vue
浏览文件 @ 84c9135c
......@@ -41,9 +41,18 @@ const startTime = ref('')
const endTime = ref('')
const timeclick = ref(true)//选择时间时更新组件
// y轴单位
const yName1 = ref(["Mbps"])
const yName2 = ref([])
const yName3 = ref(["ms", ""])
const yName1 = ref({
type: true,
value: ["Mbps", 'Mbps']
})
const yName2 = ref({
type: false,
value: ['s', 'dB']
})
const yName3 = ref({
type: true,
value: ["ms", ""]
})
//组件返回时信息根据type区分判断
const changeTimeFn = (type, times) => {
console.log(times, '对比', type);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论