提交 96184e36 authored 作者: liujiaxing's avatar liujiaxing

曲线问题

上级 4d3999a8
...@@ -118,6 +118,8 @@ onUnmounted(() => { ...@@ -118,6 +118,8 @@ onUnmounted(() => {
}); });
const series1Data = ref([])//时间轴对象数据 const series1Data = ref([])//时间轴对象数据
function initChart() { function initChart() {
console.log(props, '传入数据---------------');
const chartDom = document.getElementById(idName.value); const chartDom = document.getElementById(idName.value);
chartDom.style.height = '100%'; chartDom.style.height = '100%';
chartDom.style.width = '100%'; chartDom.style.width = '100%';
...@@ -358,9 +360,39 @@ function initChart() { ...@@ -358,9 +360,39 @@ function initChart() {
fontSize: 12 fontSize: 12
}, },
formatter: function (params) { formatter: function (params) {
let res = params[0].axisValue + '<br>'; // 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}`; // res += `${params[0].marker} ${params[0].seriesName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}`;
// return res;
console.log(params,props.legendName);
let res = ''
if (params[0].seriesIndex == 0) {
if (Array.isArray(props.legendName) && props.legendName.length > 1) {
res = params[0].axisValue + '<br>';
if(props.data[0].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
}
if(props.data[1].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}:<br>`;
}
return res;
} else {
res = params[0].axisValue + '<br>';
res += `${params[0].marker} ${props.legendName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
return res; return res;
}
} else if (params[0].seriesIndex == 1) {
let res =params[0].axisValue + '<br>';
if(props.data[0].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}:<br>`;
} if(props.data[1].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value} <br>`;
}
return res;
}
}, },
// props.yName.value[index], // props.yName.value[index],
// 固定tooltip位置在顶部 // 固定tooltip位置在顶部
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</cdfCurve> </cdfCurve>
</div> </div>
</div> </div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true' <el-dialog v-model="bigStatus" :modal='true' :show-close="false" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; "> width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container"> <div class="dashboard-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
......
...@@ -234,6 +234,18 @@ function initChart() { ...@@ -234,6 +234,18 @@ function initChart() {
min: 0, min: 0,
max: maxValue.value, max: maxValue.value,
orient: "horizontal", orient: "horizontal",
// 关键:添加 outOfRange
outOfRange: {
color: "#378eff" // 0值或范围外显示第一个颜色
},
// pieces: [
// // { gte: maxValue.value, color: "#6ffcba" }, // 最大值 - 绿色
// // { gte: maxValue.value * 0.75, color: "#409eff" }, // 75%-100%
// // { gte: maxValue.value * 0.5, color: "#2e7dff" }, // 50%-75%
// // { gte: maxValue.value * 0.25, color: "#97D5E4" }, // 25%-50%
// // { gt: 0, color: "#97D5E4" }, // > 0 的最小值
// { value: 0, color: "#6ffcba" }, // 0 值显示第一个颜色
// ],
inRange: { inRange: {
color: [ color: [
"#6ffcba", "#6ffcba",
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
<hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap> <hotMap :title="props.legendName[1]" :data="props.data[1]"></hotMap>
</div> --> </div> -->
</div> </div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true' <el-dialog v-model="bigStatus" :modal='true' :show-close="false" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; "> width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container"> <div class="dashboard-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
......
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
</instantCurve> </instantCurve>
</div> </div>
</div> </div>
<el-dialog v-model="bigStatus" :modal='true' :show-close="true" class="dialogModel" :modal-penetrable='true' <el-dialog v-model="bigStatus" :modal='true' :show-close="false" class="dialogModel" :modal-penetrable='true'
width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; "> width="200" :before-close="closeDialogFn" style="margin: 0;padding: 0; ">
<div class="dashboard-container"> <div class="dashboard-container">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
......
...@@ -132,6 +132,7 @@ onUnmounted(() => { ...@@ -132,6 +132,7 @@ onUnmounted(() => {
const series1Data = ref([])//时间轴对象数据 const series1Data = ref([])//时间轴对象数据
function initChart() { function initChart() {
console.log(props.data, '传入数据---------------');
const chartDom = document.getElementById(idName.value); const chartDom = document.getElementById(idName.value);
if (!myChart) { if (!myChart) {
myChart = echarts.init(chartDom); myChart = echarts.init(chartDom);
...@@ -147,6 +148,7 @@ function initChart() { ...@@ -147,6 +148,7 @@ function initChart() {
if (props.lineArray) { if (props.lineArray) {
xAxisType = 'time'; xAxisType = 'time';
props.data.forEach((it, index) => { props.data.forEach((it, index) => {
if(it.length>0){
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]); 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, '最终数据'); // console.log(series1Data.value, '最终数据');
if (series1Data.value.length > 0) { if (series1Data.value.length > 0) {
...@@ -199,6 +201,7 @@ function initChart() { ...@@ -199,6 +201,7 @@ function initChart() {
firstTime = 0 firstTime = 0
lastTime = 0 lastTime = 0
} }
}
}) })
} else { } else {
// console.log(dataX.value, 'xinxi1-----', props.data); // console.log(dataX.value, 'xinxi1-----', props.data);
...@@ -438,9 +441,36 @@ function initChart() { ...@@ -438,9 +441,36 @@ function initChart() {
fontSize: 12 fontSize: 12
}, },
formatter: function (params) { formatter: function (params) {
let res = ''
if (params[0].seriesIndex == 0) {
if (Array.isArray(props.legendName) && props.legendName.length > 1) {
res = timestampToHMS(params[0].axisValue) + '<br>';
if(props.data[0].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
}
if(props.data[1].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}:<br>`;
}
return res;
} else {
// console.log(params,props.legendName);
res = timestampToHMS(params[0].axisValue) + '<br>';
res += `${params[0].marker} ${props.legendName}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value}<br>`;
return res;
}
} else if (params[0].seriesIndex == 1) {
let res = timestampToHMS(params[0].axisValue) + '<br>'; let res = timestampToHMS(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}`; if(props.data[0].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[0]};\"></span>`} ${props.legendName[0]}:<br>`;
}
if(props.data[1].length>0){
res += `${`<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${props.color[1]};\"></span>`} ${props.legendName[1]}: ${params[0].value[1]} ${props.lineArray ? props.yName?.value[params[0].seriesIndex] : props.yName?.value} <br>`;
}
return res; return res;
}
}, },
// 固定tooltip位置在顶部 // 固定tooltip位置在顶部
position: function (pos, params, dom, rect, size) { position: function (pos, params, dom, rect, size) {
......
...@@ -1545,18 +1545,18 @@ watch( ...@@ -1545,18 +1545,18 @@ watch(
// console.log(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value, '时间对比'); // console.log(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value, '时间对比');
//对比时间----判断是否需要停止,拖动后后端连续返回三条数据,第一条是提示,第二第三条是ue用来定位和平滑的数据,这是后不应该停止时间,到56秒后应该接收到下一条数据时 //对比时间----判断是否需要停止,拖动后后端连续返回三条数据,第一条是提示,第二第三条是ue用来定位和平滑的数据,这是后不应该停止时间,到56秒后应该接收到下一条数据时
if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) { // if (compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value)) {
if (isPlaying.value) { // if (isPlaying.value) {
console.log('歘告诉过'); // console.log('歘告诉过');
stopAutoPlay(); // stopAutoPlay();
// hasPlayed.value = false; // // hasPlayed.value = false;
isChange_flag_firstBackDate.value = false; // isChange_flag_firstBackDate.value = false;
} // }
// clearInterval(intervalTimer.value); // // clearInterval(intervalTimer.value);
// intervalTimer.value = null; // // intervalTimer.value = null;
} // }
} }
}, },
......
...@@ -340,11 +340,11 @@ const handleglobaleAutoPlayChange = (value) => { ...@@ -340,11 +340,11 @@ const handleglobaleAutoPlayChange = (value) => {
//切换 地面站设备数量或设备故障情况 //切换 地面站设备数量或设备故障情况
const activeTabHandleClickTab = (value) => { const activeTabHandleClickTab = (value) => {
console.log(searchEquipmentValue.value, value, "yongdainji", useAppStoreInstance.globalStartWss); // console.log(searchEquipmentValue.value, value, "yongdainji", useAppStoreInstance.globalStartWss);
activeTab.value = value activeTab.value = value
//判断wx是否是链接状态,如果不连接直接获取最后的一条数据的值 //判断wx是否是链接状态,如果不连接直接获取最后的一条数据的值
if (!useAppStoreInstance.globalStartWss) { if (!useAppStoreInstance.globalStartWss) {
console.log(primitiveFaultData.value, "问题1", primitiveSatelliteData.value, '问题2'); // console.log(primitiveFaultData.value, "问题1", primitiveSatelliteData.value, '问题2');
if (value === 'fault') { if (value === 'fault') {
// siteDataPageErrorInfoApi({ // siteDataPageErrorInfoApi({
...@@ -441,20 +441,22 @@ function searchEquipmentList() { ...@@ -441,20 +441,22 @@ function searchEquipmentList() {
item.qv.toString().includes(searchEquipmentValue.value.toLowerCase()) item.qv.toString().includes(searchEquipmentValue.value.toLowerCase())
) )
// console.log(filteredData, '故障列表');
filteredData.map(item => { filteredData.map(item => {
item.allData.arr.forEach(it => { item.allData.arr.map(it => {
console.log(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime, '故障时间',isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime));
//判断故障时间是否包含当前时间 //判断故障时间是否包含当前时间
console.log(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime, '故障时间');
if (isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime)) { if (isTimeInRange(useAppStoreInstance.globalTimeLineEndSelectTime, it.startTime, it.endTime)) {
item.ku = item.controlAntennaNum item.ku = it.controlAntennaNum
item.qv = item.controlBaseStationNum2 item.qv = it.controlBaseStationNum2
item.monitor = item.controlBaseStationNum item.monitor = it.controlBaseStationNum
item.baseband = item.baseStationNum item.baseband = it.baseStationNum
// console.log(item.ku, item.qv, item.monitor, item.baseband, '故障数量',it);
} }
}) })
}) })
// console.log(filteredData, '故障列表');
faultData.value = filteredData faultData.value = filteredData
} }
...@@ -471,7 +473,7 @@ const satlTitle = ref('') ...@@ -471,7 +473,7 @@ const satlTitle = ref('')
function tableHandleRowClickFn(row, column, event) { function tableHandleRowClickFn(row, column, event) {
errorDialogVisible.value = true// 打开面板 errorDialogVisible.value = true// 打开面板
currentGroundEquipmentObj.value = row//行数据赋值 currentGroundEquipmentObj.value = row//行数据赋值
//找到对应信关站的地面网元信息 //找到对应信关站的地面网元信息--故障情况赋值
errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.groundNetworkElementResponses || [] errorDeviceList.value = errorDeviceListDetailsDialog.value.filter(item => item.siteId === row.siteId)[0]?.groundNetworkElementResponses || []
satlTitle.value = row.station ? row.station : '未知名称'//卫星名称 satlTitle.value = row.station ? row.station : '未知名称'//卫星名称
// 天线基本信息赋值 // 天线基本信息赋值
...@@ -902,8 +904,9 @@ watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => { ...@@ -902,8 +904,9 @@ watch(() => useAppStoreInstance.globalLeftWssCONTINE, val => {
if (JSONdata.type === 'realtime') {//实时模式 if (JSONdata.type === 'realtime') {//实时模式
//卫星轨迹数据,实时模式下的wss数据结构和历史模式不太一样,历史模式是CurrData数组里套satelliteBasicInfoResponse对象,实时模式是CurrData数组里直接就是satelliteBasicInfoResponse对象 //卫星轨迹数据,实时模式下的wss数据结构和历史模式不太一样,历史模式是CurrData数组里套satelliteBasicInfoResponse对象,实时模式是CurrData数组里直接就是satelliteBasicInfoResponse对象
const satelliteList = [] const satelliteList = []
JSONdata.CurrData.forEach(items => {
const temp = items.satelliteBasicInfoResponse JSONdata.CurrData?.forEach(items => {
let temp = items.satelliteBasicInfoResponse||{}
temp.siteName = items.siteName temp.siteName = items.siteName
satelliteList.push(temp) satelliteList.push(temp)
}); });
......
...@@ -53,7 +53,7 @@ const yName3 = ref({ ...@@ -53,7 +53,7 @@ const yName3 = ref({
type: true, type: true,
value: ["ms", ""] value: ["ms", ""]
}) })
//组件返回时信息根据type区分判断 //组件返回时时间信息信息根据type区分判断
const changeTimeFn = (type, times) => { const changeTimeFn = (type, times) => {
console.log(times, '对比', type); console.log(times, '对比', type);
if (type == 1) { if (type == 1) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论