Skip to content

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

最新代码

上级 bb4d1f54
显示空白字符变更
内嵌 并排
正在显示 包含 232 行增加 和 235 行删除
src/main.js
浏览文件 @ 91790872
...@@ -47,10 +47,6 @@ import './permission' // 路由拦截和加载页面进度条 ...@@ -47,10 +47,6 @@ import './permission' // 路由拦截和加载页面进度条
// import { useDict } from '@/utils/dict' // import { useDict } from '@/utils/dict'
import directive from './directive' // 导入公共函数 import directive from './directive' // 导入公共函数
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
......
src/pages/all/components/cdf/cdfCurve.vue
浏览文件 @ 91790872
...@@ -3,21 +3,6 @@ ...@@ -3,21 +3,6 @@
<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">
<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" :show-close="false" :modal="false" custom-class="custom-cdf-dialog" <el-dialog v-model="isDetialDialogVisible" :show-close="false" :modal="false" custom-class="custom-cdf-dialog"
width="200" height="100" :destroy-on-close="false" :before-close="isDetialDialogVisibleHandleClose" width="200" height="100" :destroy-on-close="false" :before-close="isDetialDialogVisibleHandleClose"
...@@ -35,12 +20,11 @@ export default { ...@@ -35,12 +20,11 @@ export default {
</script> </script>
<script setup> <script setup>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import childrenCdfCurve from './childrenCdfCurve.vue' import childrenCdfCurve from './childrenCdfCurve.vue'
import { onMounted, onUnmounted, ref, nextTick, computed, watch } from 'vue'; import { onMounted, onUnmounted, ref, nextTick, computed, watch } from 'vue';
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: {
...@@ -52,11 +36,11 @@ const props = defineProps({ ...@@ -52,11 +36,11 @@ const props = defineProps({
default: false default: false
}, },
color: { color: {
type: String, type: null,
default: '#5470C6' default: '#5470C6'
}, },
legendName: { legendName: {
type: String, type: null,
default: 'CDF曲线图' default: 'CDF曲线图'
}, },
data: { data: {
...@@ -66,9 +50,16 @@ const props = defineProps({ ...@@ -66,9 +50,16 @@ const props = defineProps({
zoomHeight: { zoomHeight: {
type: String, type: String,
default: null default: null
},
lineArray: {
type: Boolean,
default: false
} }
}) })
setTimeout(() => {
console.log(props.data, 'cdf权限去');
}, 2000);
const dataX = computed(() => { const dataX = computed(() => {
if (props.data.length > 0 && props.data[0]?.x == 'CDF分布') { if (props.data.length > 0 && props.data[0]?.x == 'CDF分布') {
let arr = [] let arr = []
...@@ -94,41 +85,13 @@ watch(() => props.data, (newVal) => { ...@@ -94,41 +85,13 @@ watch(() => props.data, (newVal) => {
initChart(); initChart();
}) })
const showView = ref(false);
var lineColor = props.color; var lineColor = props.color;
const markLineData = ref([
{
color: '#89dac4',
descript: "最大值：12"
},
{
color: '#da45ds',
descript: "最小值：12"
},
{
color: '#56fds9',
descript: "平均值：12"
},
])
let myChart = null; let myChart = null;
//弹框状态
const isDetialDialogVisible = ref(false); const isDetialDialogVisible = ref(false);
function showViewClick() { //关闭弹窗
// //console.log("时间");
isDetialDialogVisible.value = !isDetialDialogVisible.value;
showView.value = true;
if (window.ue5) {
window.ue5("callBackAllDialogFn", String(JSON.stringify({
type: "CDFCurveDetailDialog",
status: "open"
})));
}
// //console.log("当前的值:",showView.value);
}
function isDetialDialogVisibleHandleClose() { function 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: "CDFCurveDetailDialog", type: "CDFCurveDetailDialog",
...@@ -140,8 +103,6 @@ onMounted(() => { ...@@ -140,8 +103,6 @@ onMounted(() => {
nextTick(() => { nextTick(() => {
initChart(); initChart();
}) })
//console.log("-------cdfCurve-------",props.idName);
// document.getElementById(props.idName).style.height = '240px';
}); });
...@@ -151,7 +112,7 @@ onUnmounted(() => { ...@@ -151,7 +112,7 @@ onUnmounted(() => {
myChart.dispose(); myChart.dispose();
} }
}); });
const series1Data = ref([])//时间轴对象数据
function initChart() { function initChart() {
const chartDom = document.getElementById(idName.value); const chartDom = document.getElementById(idName.value);
chartDom.style.height = '100%'; chartDom.style.height = '100%';
...@@ -159,10 +120,98 @@ function initChart() { ...@@ -159,10 +120,98 @@ function initChart() {
if (!myChart) { if (!myChart) {
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
}; };
let seriesArr = [];//图标数据
if (props.lineArray) {
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(it, series1Data.value, '最终数据');
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
data: series1Data.value,
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: hexToRgba(props.color[index], 0.8)
},
{
offset: 1,
color: hexToRgba(props.color[index], 0.2)
}
],
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: hexToRgba(props.color, 0.8)
},
{
offset: 1,
color: hexToRgba(props.color, 0.2)
}
],
global: false
}
},
markLine: {
symbol: 'none',
label: {
show: false
},
}
})
}
console.log(seriesArr, '总数据对比');
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
...@@ -180,9 +229,9 @@ function initChart() { ...@@ -180,9 +229,9 @@ function initChart() {
}, },
grid: { grid: {
top: '23%', top: '23%',
right: '8%', right: '4%',
bottom: '16%', bottom: '16%',
left: '18%', left: '8%',
containLabel: true //自动计算x轴label containLabel: true //自动计算x轴label
}, },
xAxis: { xAxis: {
...@@ -208,13 +257,11 @@ function initChart() { ...@@ -208,13 +257,11 @@ function initChart() {
// }, // },
hideOverlap: true, // 防重叠（很关键） hideOverlap: true, // 防重叠（很关键）
formatter: function (value) { formatter: function (value) {
// console.log('x - value', value) if (value.toString().includes(':')) {
if (value.toString().includes('-')) {
// console.log('嘿嘿', value) // console.log('嘿嘿', value)
let str = [] let str = []
const arr = value.split('-') // 只保留日期部分 const arr = value.split('-') // 只保留日期部分
for (let val of arr) { for (let val of arr) {
if (Number(val) >= 1e8 && val.includes('.')) { if (Number(val) >= 1e8 && val.includes('.')) {
// console.log(val) // console.log(val)
val = (Number(val) / 1e8).toFixed(0) + '亿' val = (Number(val) / 1e8).toFixed(0) + '亿'
...@@ -234,56 +281,6 @@ function initChart() { ...@@ -234,56 +281,6 @@ function initChart() {
} }
}, },
}, },
dataZoom: dataX.value.length <= 7 ? [] : [
// {
// type: 'slider',
// xAxisIndex: 0,
// startValue: 0,
// endValue: 5, // 一屏只看20个点 ⭐
// height: 5,
// showDetail: false,
// top: 40
// },
// {
// type: 'inside',
// start: 0,
// end: 10,
// left: '18%',
// right: '8%',
// minSpan: 1,
// handleLabel: {
// show: false
// },
// labelFormatter: function (value) {
// console.log('xxx', dataX[value])
// return dataX[value]
// },
// textStyle: {
// color: 'rgba(255, 255, 255, 0.92)',
// fontSize: 8
// }
// },
{
start: 0,
end: 100,
minSpan: 1,
bottom: 8,
left: '14%',
right: '10%',
height: Number(props?.zoomHeight) || 20,
handleLabel: {
show: false
},
labelFormatter: function (value) {
return dataX[value]
},
textStyle: {
color: 'rgba(255, 255, 255, 0.92)',
fontSize: 8
}
}
],
yAxis: { yAxis: {
type: 'value', type: 'value',
// max: 120, // max: 120,
...@@ -303,66 +300,39 @@ function initChart() { ...@@ -303,66 +300,39 @@ function initChart() {
formatter: function (value) { formatter: function (value) {
return value.toFixed(0); return value.toFixed(0);
} }
}
}, },
series: [
{
name: props.legendName,
color: props.color,
data: dataY.value,
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: lineColor,
width: 3
}, },
areaStyle: { dataZoom: (props.lineArray ? series1Data.value.length <= 7 : dataX.value.length <= 7) ? [] : [
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ {
offset: 0, start: 0,
color: lineColor end: 100,
minSpan: 1,
bottom: 8,
left: '14%',
right: '10%',
height: Number(props?.zoomHeight) || 20,
handleLabel: {
show: false
}, },
{ labelFormatter: function (value) {
offset: 1, return dataX[value]
color: 'rgba(84,112,198,0.20)'
}
],
global: false
}
}, },
markLine: { textStyle: {
symbol: 'none', color: 'rgba(255, 255, 255, 0.92)',
label: { fontSize: 8
show: false
}, },
// data: [ splitLine: {
// { show: true,
// yAxis: 45, lineStyle: {
// lineStyle: { color: '#202B32', // 修改为你想要的颜色
// color: '#ff0000', type: 'dashed'
// width: 2,
// type: 'dashed'
// },
// },
// {
// yAxis: 70,
// lineStyle: {
// color: '#ff55f5',
// width: 2,
// type: 'dashed'
// },
// }
// ]
} }
} }
},
{ type: 'inside', start: 0, end: 100 }
], ],
series: seriesArr,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
// 确保tooltip显示在最上层 // 确保tooltip显示在最上层
...@@ -381,12 +351,20 @@ function initChart() { ...@@ -381,12 +351,20 @@ function initChart() {
} }
} }
}; };
// console.log(JSON.stringify(option), '转喊');
if (props.lineArray) {
delete option.xAxis.data
}
myChart.setOption(option); myChart.setOption(option);
resizeChart(); resizeChart();
window.addEventListener('resize', resizeChart); window.addEventListener('resize', resizeChart);
} }
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function resizeChart() { function resizeChart() {
if (myChart) { if (myChart) {
myChart.resize(); myChart.resize();
......
src/pages/all/components/cdf/index.vue
浏览文件 @ 91790872
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</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">
<cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve> <cdfCurve :legendName="props.legendName[0]" :data="props.data[0]"></cdfCurve>
</div> </div>
...@@ -29,6 +29,13 @@ ...@@ -29,6 +29,13 @@
<cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true"> <cdfCurve :legendName="props.legendName[1]" :data="props.data[1]" color="#6ffcba" :isShowDetial="true">
</cdfCurve> </cdfCurve>
</div> </div>
</div> -->
<div class="container" v-if="props.lineArray">
<div class="flex-box">
<cdfCurve :lineArray="props.lineArray" :legendName="props.legendName" :data="props.data" :color="colorList"
:isShowDetial="true">
</cdfCurve>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -36,6 +43,7 @@ ...@@ -36,6 +43,7 @@
<script setup> <script setup>
import { onBeforeUnmount } from 'vue'; import { onBeforeUnmount } from 'vue';
import cdfCurve from './cdfCurve.vue' import cdfCurve from './cdfCurve.vue'
const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜色设置
const props = defineProps({ const props = defineProps({
title: { title: {
...@@ -57,6 +65,10 @@ const props = defineProps({ ...@@ -57,6 +65,10 @@ const props = defineProps({
zoomHeight: { zoomHeight: {
type: String, type: String,
default: null default: null
},
lineArray: {
type: Boolean,
default: false
} }
}); });
......
src/pages/all/components/instant/index.vue
浏览文件 @ 91790872
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</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" @click="clickBig">
<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 class="arrow-path " <path class="arrow-path "
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<!-- 核心数据指标 判断一个图表中是否有多个曲线--> <!-- 核心数据指标 判断一个图表中是否有多个曲线-->
<!-- <div class="container" v-if="!props.lineArray"> <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,9 +30,8 @@ ...@@ -30,9 +30,8 @@
<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>
<div class="container" v-if="props.lineArray"> <div class="container" v-if="props.lineArray">
<div>5555</div>
<div class="flex-box"> <div class="flex-box">
<instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName" <instantCurve :lineArray="props.lineArray" :data="props.data" :legendName="props.legendName"
:propsDate="componentProps" :color="colorList"></instantCurve> :propsDate="componentProps" :color="colorList"></instantCurve>
...@@ -76,7 +75,11 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜 ...@@ -76,7 +75,11 @@ const colorList = ["#6ffcba", "#5470c6"]//同一个图标中不同曲线的颜
setTimeout(() => { setTimeout(() => {
console.log('瞬时值曲线', props.lineArray) console.log('瞬时值曲线', props.lineArray)
}, 2000); }, 2000);
//点击放大窗口详细查看曲线
const clickBig = () => {
console.log('放大');
}
const componentProps = ref({}) const componentProps = ref({})
</script> </script>
......
src/pages/all/components/instant/instantCurve.vue
浏览文件 @ 91790872
...@@ -55,11 +55,6 @@ const props = defineProps({ ...@@ -55,11 +55,6 @@ const props = defineProps({
default: false default: false
} }
}) })
setTimeout(() => {
console.log(props, '大屏配置曲线图',);
}, 2000);
watch(() => props.data, (newVal) => { watch(() => props.data, (newVal) => {
initChart(); initChart();
}) })
...@@ -127,7 +122,7 @@ onUnmounted(() => { ...@@ -127,7 +122,7 @@ onUnmounted(() => {
myChart.dispose(); myChart.dispose();
} }
}); });
const series1Data = ref([])//时间轴对象数据
function initChart() { function initChart() {
const chartDom = document.getElementById(idName.value); const chartDom = document.getElementById(idName.value);
if (!myChart) { if (!myChart) {
...@@ -136,17 +131,14 @@ function initChart() { ...@@ -136,17 +131,14 @@ function initChart() {
chartDom.style.height = '100%'; chartDom.style.height = '100%';
chartDom.style.width = '100%'; chartDom.style.width = '100%';
let seriesArr = [];//图标数据 let seriesArr = [];//图标数据
// console.log(props.data.length, '判断值是多少?', props)
console.log('颜色', props.data);
if (props.lineArray) { if (props.lineArray) {
props.data.forEach((it, index) => { props.data.forEach((it, index) => {
const series1Data = it.map((item, idx) => [item.x, item.y]); 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, '最终数据'); // console.log(it, series1Data.value, '最终数据');
seriesArr.push({ seriesArr.push({
color: props.color[index], color: props.color[index],
name: props.legendName[index], name: props.legendName[index],
data: series1Data, data: series1Data.value,
type: 'line', type: 'line',
smooth: 0.6, smooth: 0.6,
symbol: 'none', symbol: 'none',
...@@ -164,11 +156,11 @@ function initChart() { ...@@ -164,11 +156,11 @@ function initChart() {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: props.color[index] color: hexToRgba(props.color[index], 0.8)
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(111,252,186,0.20)' color: hexToRgba(props.color[index], 0.2)
} }
], ],
global: false global: false
...@@ -204,11 +196,11 @@ function initChart() { ...@@ -204,11 +196,11 @@ function initChart() {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: props.color color: hexToRgba(props.color, 0.8)
}, },
{ {
offset: 1, offset: 1,
color: 'rgba(111,252,186,0.20)' color: hexToRgba(props.color, 0.2)
} }
], ],
global: false global: false
...@@ -240,7 +232,10 @@ function initChart() { ...@@ -240,7 +232,10 @@ function initChart() {
} }
}) })
} }
const option = { // console.log(seriesArr, '总数据对比');
var option = {
legend: { legend: {
show: true, show: true,
data: Array.isArray(props.legendName) ? props.legendName : [props.legendName], data: Array.isArray(props.legendName) ? props.legendName : [props.legendName],
...@@ -261,30 +256,49 @@ function initChart() { ...@@ -261,30 +256,49 @@ function initChart() {
}, },
grid: { grid: {
top: '23%', top: '23%',
right: '8%', right: '4%',
bottom: '16%', bottom: '16%',
left: '18%', left: '8%',
containLabel: true //自动计算x轴label containLabel: true //自动计算x轴label
}, },
xAxis: { xAxis: {
// type: 'category', // type: 'category',
type: 'time', type: props.lineArray ? 'time' : 'category',
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,
fontSize: 10, fontSize: 10,
color: '#fff', color: '#fff',
rotate: 45, rotate: 45,
fontSize: 10,
margin: 20, margin: 20,
fontSize: 10,
interval: 'auto', // 或直接不写 interval: 'auto', // 或直接不写
// interval: function (index) {
// return index % 10 === 0 // 每10个显示一个
// },
hideOverlap: true, // 防重叠（很关键） hideOverlap: true, // 防重叠（很关键）
formatter: function (value) {
console.log(value);
if (value.toString().includes(':')) {
return value
}
}
// formatter: function (value) {
// if (value.toString().includes(':') && false) {
// // console.log('嘿嘿', value)
// let str = []
// const arr = value.split('-') // 只保留日期部分
// for (let val of arr) {
// if (Number(val) >= 1e8 && val.includes('.')) {
// // console.log(val)
// val = (Number(val) / 1e8).toFixed(0) + '亿'
// }
// str.push(val)
// }
// return str.join('-') // 用换行符连接
// }
// // console.log('value', value)
// return value
// }
}, },
axisLine: { axisLine: {
show: true, //去除轴线 show: true, //去除轴线
...@@ -318,36 +332,7 @@ function initChart() { ...@@ -318,36 +332,7 @@ function initChart() {
} }
} }
}, },
dataZoom: dataX.value.length <= 7 ? [] : [ dataZoom: (props.lineArray ? series1Data.value.length <= 7 : dataX.value.length <= 7) ? [] : [
// {
// type: 'slider',
// xAxisIndex: 0,
// startValue: 0,
// endValue: 20, // 一屏只看20个点 ⭐
// height: 5,
// showDetail: false,
// top: 40
// },
// {
// type: 'inside',
// start: 0,
// end: 10,
// left: '18%',
// right: '8%',
// minSpan: 1,
// handleLabel: {
// show: false
// },
// labelFormatter: function (value) {
// console.log('xxx', dataX[value])
// return dataX[value]
// },
// textStyle: {
// color: 'rgba(255, 255, 255, 0.92)',
// fontSize: 8
// }
// },
{ {
start: 0, start: 0,
end: 100, end: 100,
...@@ -361,13 +346,19 @@ function initChart() { ...@@ -361,13 +346,19 @@ function initChart() {
show: false show: false
}, },
labelFormatter: function (value) { labelFormatter: function (value) {
if (props.lineArray) {
// console.log('触发', value);
return series1Data.value[value]
} else {
return dataX[value] return dataX[value]
}
}, },
textStyle: { textStyle: {
color: 'rgba(255, 255, 255, 0.92)', color: 'rgba(255, 255, 255, 0.92)',
fontSize: 8 fontSize: 8
} }
} },
{ type: 'inside', start: 0, end: 100 }
], ],
series: seriesArr, series: seriesArr,
tooltip: { tooltip: {
...@@ -388,13 +379,30 @@ function initChart() { ...@@ -388,13 +379,30 @@ function initChart() {
} }
} }
}; };
console.log(option, '配置', myChart, '住新冠');
if (props.lineArray) {
delete option.xAxis.data
}
// console.log(option, '配置', myChart, '住新冠');
// console.log(option, '数据');
// console.log(series1Data.value, '对象');
// if (timesset) {
// clearTimeout(timesset)
// }
// timesset = setTimeout(() => {
clearTimeout(timesset)
myChart.setOption(option); myChart.setOption(option);
resizeChart(); resizeChart();
window.addEventListener('resize', resizeChart); window.addEventListener('resize', resizeChart);
// }, 1000);
} }
function hexToRgba(hex, alpha) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
var timesset = null
function resizeChart() { function resizeChart() {
if (myChart) { if (myChart) {
myChart.resize(); myChart.resize();
......
src/pages/header/component/screenConfigeDialog.vue
浏览文件 @ 91790872
...@@ -91,13 +91,13 @@ ...@@ -91,13 +91,13 @@
<!-- <KeepAlive> --> <!-- <KeepAlive> -->
<component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]" <component :is="currentComponent2" :data="[availabilityData, actualAvailabilityData]" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="false"> slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true">
</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="['搜星时延', '丢包率']" :lineArray="true"> :legendName="['搜星时延', '丢包率']" :lineArray="false">
</component> </component>
<!-- </KeepAlive> --> <!-- </KeepAlive> -->
......
src/pages/rights/index.vue
浏览文件 @ 91790872
...@@ -3,22 +3,22 @@ ...@@ -3,22 +3,22 @@
<!-- 顶部区域：标题与核心指标 --> <!-- 顶部区域：标题与核心指标 -->
<div class="header-container"> <div class="header-container">
<!-- <allHotMap></allHotMap> --> <!-- <allHotMap></allHotMap> -->
<!-- <div>{{ component1 }}</div> -->
<component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量" <component :is="component1" :data="[capacityData, trafficData]" zoomHeight="2" :title="titles[0]" slogan="容量/流量"
:legendName="['链路层容量', '用户实际流量']"></component> :legendName="['链路层容量', '用户实际流量']" :lineArray="true"></component>
</div> </div>
<!-- 卫星列表 --> <!-- 卫星列表 -->
<div class="satellite-section"> <div class="satellite-section">
<!-- <cdf></cdf> --> <!-- <cdf></cdf> -->
<component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]" <component :is="component2" :data="[availabilityData, actualAvailabilityData]" zoomHeight="14" :title="titles[1]"
slogan="可用性" :legendName="['规划可用性', '实际可用性']"></component> slogan="可用性" :legendName="['规划可用性', '实际可用性']" :lineArray="true"></component>
</div> </div>
<!-- 地面系统 --> <!-- 地面系统 -->
<div class="ground-system-section"> <div class="ground-system-section">
<!-- <instant></instant> --> <!-- <instant></instant> -->
<component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包" <component :is="component3" :data="[delayData, lossRateData]" zoomHeight="14" :title="titles[2]" slogan="网络时延/丢包"
:legendName="['搜星时延', '丢包率']"></component> :legendName="['搜星时延', '丢包率']" :lineArray="false"></component>
</div> </div>
</div> </div>
</template> </template>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论