提交 b3508a7c authored 作者: liujiaxing's avatar liujiaxing

曲线

上级 ece33aef
......@@ -365,7 +365,7 @@ function initChart() {
// 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;
console.log(params, props.legendName);
// console.log(params, props.legendName);
let res = ''
if (params[0].seriesIndex == 0) {
......
......@@ -156,7 +156,7 @@ function initChart() {
firstTime = new Date(series1Data.value[0][0]).getTime()
}
firstTime = new Date(series1Data.value[0][0]).getTime() < firstTime ? new Date(series1Data.value[0][0]).getTime() : firstTime
lastTime = new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() > lastTime ? new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() : lastTime
lastTime = new Date(series1Data.value[series1Data.value.length - 1][0]).getTime() > lastTime ? new Date((series1Data.value[series1Data.value.length - 1][0])).getTime() : lastTime
seriesArr.push({
color: props.color[index],
name: props.legendName[index],
......
......@@ -3,11 +3,11 @@
<!-- 顶部标题栏 -->
<div class="header">
<div class="header_title">
<h2>{{props.satlTitle}}</h2>
<h2>{{ props.satlTitle }}</h2>
</div>
<div class="close-btn" @click="closePanel">×</div>
</div>
<!-- 标签页导航 -->
<div class="tabs">
<div class="tab-btn_forward"></div>
......@@ -15,7 +15,7 @@
<div class="tab-btn" :class="{ active: activeTab === 'devices' }" @click="activeTab = 'devices'">设备情况</div>
<div class="tab-btn_backward"></div>
</div>
<!-- 设备列表内容区 -->
<div class="content" v-if="activeTab === 'devices'">
<!-- 设备列表头部 -->
......@@ -23,99 +23,75 @@
<div class="col device-name">设备名称</div>
<div class="col status">状态</div>
</div>
<!-- 设备列表 -->
<div class="device-list">
<!-- 普通设备项 -->
<div v-if="devices.length > 0">
<div
class="device-item"
v-for="(device, index) in devices"
:key="index"
:class="{
<div v-if="devices.length > 0">
<div class="device-item" v-for="(device, index) in devices" :key="index" :class="{
'has-error': device.status === 'error',
expanded: device.expanded
}"
>
<!-- 主设备行 -->
<div class="device-row" :class="device.status === 'error' ? 'has-error' : ''" @click="toggleExpand(device)">
<div class="col device-name">
<span
v-if="device.status === 'error'"
class="toggle-icon"
>
{{ device.expanded ? '▾' : '▸' }}
</span>
{{ device.name }}
</div>
<div class="col status">
<span class="status-indicator" :class="device.status"></span>
<span class="status-text">
{{ device.status === 'normal' ? '正常' : '故障' }}
</span>
expanded: device.expanded
}">
<!-- 主设备行 -->
<div class="device-row" :class="device.status === 'error' ? 'has-error' : ''" @click="toggleExpand(device)">
<div class="col device-name">
<span v-if="device.status === 'error'" class="toggle-icon">
{{ device.expanded ? '▾' : '▸' }}
</span>
{{ device.name }}
</div>
<div class="col status">
<span class="status-indicator" :class="device.status"></span>
<span class="status-text">
{{ device.status === 'normal' ? '正常' : '故障' }}
</span>
</div>
</div>
</div>
<!-- 故障详情 -->
<div
class="error-details-container"
v-if="device.status === 'error' && device.expanded && device.errorDetails"
>
<div class="error-details">
{{ device.errorDetails }}
<!-- 故障详情 -->
<div class="error-details-container"
v-if="device.status === 'error' && device.expanded && device.errorDetails">
<div class="error-details">
{{ device.errorDetails }}
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div
class="no-data"
>
<p>暂无数据</p></div>
<div v-else>
<div class="no-data">
<p>暂无数据</p>
</div>
</div>
</div>
</div>
<div class="content content_info" v-else>
<div class="content content_info" v-else>
<!-- 设备列表 -->
<div class="device-list1">
<!-- 普通设备项 -->
<div v-if="deviceStatusMap.length > 0">
<div
class="device-item"
v-for="(items, index) in deviceStatusMap"
:key="index"
>
<!-- 主设备行 -->
<div class="device-row"
v-for="(item, index) in items"
:key="index"
>
<div class="col device-name">
{{ item.label }}
<!-- <span :class="items.status === 'error' ? 'has-error1' : 'notHas-error1'">(工作)</span> -->
</div>
<div class="col status">
<span class="status-text">
{{ item.value }}
</span>
<div v-if="deviceStatusMap.length > 0">
<div class="device-item" v-for="(items, index) in deviceStatusMap" :key="index">
<!-- 主设备行 -->
<div class="device-row" v-for="(item, index) in items" :key="index">
<div class="col device-name">
{{ item.label }}
<!-- <span :class="items.status === 'error' ? 'has-error1' : 'notHas-error1'">(工作)</span> -->
</div>
<div class="col status">
<span class="status-text">
{{ item.value }}
</span>
</div>
</div>
</div>
</div>
</div>
<div
v-else
>
<div
class="no-data"
>
<p>暂无数据</p></div>
<div v-else>
<div class="no-data">
<p>暂无数据</p>
</div>
</div>
</div>
<!-- 设备列表头部 -->
......@@ -123,7 +99,7 @@
<div class="col device-name">设备名称12</div>
<div class="col status">状态</div>
</div> -->
<!-- 设备列表 -->
<!-- <div class="device-list">
普通设备项
......@@ -173,26 +149,28 @@
<script setup>
import { onActivated, onMounted, ref, watch } from 'vue';
const props = defineProps(['satlTitle','errorDeviceList',"baseDeviceList"])
const props = defineProps(['satlTitle', 'errorDeviceList', "baseDeviceList"])
const emits = defineEmits(['errorDialoghandleClose'])
//console.log("展示了",props.errorDeviceList,props.baseDeviceList);
//console.log("展示了",props.errorDeviceList,props.baseDeviceList);
// 状态管理
const activeTab = ref('devices'); // 默认显示设备情况标签页
const devices = ref([])
const deviceStatusMap = ref([
// {label: '天线发射频率',value: 12,status: 1 ? 'normal' : 'error',},
// {label: '天线发射EIRP',value: 587 || '未知设备',status: 0 ? 'normal' : 'error',},
// {label: '天线方位角',value: 57 || '未知设备',status: 1 ? 'normal' : 'error',},
// {label: '天线俯仰角',value: 27 || '未知设备',status: 1 ? 'normal' : 'error',}
// {label: '天线发射频率',value: 12,status: 1 ? 'normal' : 'error',},
// {label: '天线发射EIRP',value: 587 || '未知设备',status: 0 ? 'normal' : 'error',},
// {label: '天线方位角',value: 57 || '未知设备',status: 1 ? 'normal' : 'error',},
// {label: '天线俯仰角',value: 27 || '未知设备',status: 1 ? 'normal' : 'error',}
])
// 监听 errorDeviceList 的变化
watch(() => props.errorDeviceList, (newVal) => {
if(newVal.length === 0){
console.log(props.errorDeviceList, '故障详情');
if (newVal.length === 0) {
devices.value = []
return
}
......@@ -227,38 +205,38 @@ watch(() => props.errorDeviceList, (newVal) => {
watch(() => props.baseDeviceList, (newVal) => {
deviceStatusMap.value = []
newVal.forEach(item => {
deviceStatusMap.value.push([{
label: `天线${item.number }发射功率 `,
label: `天线${item.number}发射功率 `,
value: item.power || '0',
status: item.power !==0 ? 'normal' : 'error',
status: item.power !== 0 ? 'normal' : 'error',
},
{
label: `天线${item.number }发射EIRP `,
label: `天线${item.number}发射EIRP `,
value: item.eip || '-',
status: item.power !==0 ? 'normal' : 'error',
status: item.power !== 0 ? 'normal' : 'error',
},
{
label: `天线${item.number }方位角 `,
label: `天线${item.number}方位角 `,
value: item.azimuth || '-',
status: item.power !==0 ? 'normal' : 'error',
status: item.power !== 0 ? 'normal' : 'error',
},
{
label: `天线${item.number }俯仰角 `,
label: `天线${item.number}俯仰角 `,
value: item.elevation || '-',
status: item.power !==0 ? 'normal' : 'error',
status: item.power !== 0 ? 'normal' : 'error',
},
])
])
})
//console.log("11111EIRP111111baseDeviceList",newVal,deviceStatusMap.value)
// deviceStatusMap.value = [
// {label: '天线发射频率',value: newVal.antennaTransmitPower ,status: 1 ? 'normal' : 'error',},
// {label: '天线发射EIRP',value: newVal.antennaEip ,status: 0? 'normal' : 'error',},
// {label: '天线方位角',value: newVal.antennaAzimuth ,status: 1 ? 'normal' : 'error',},
// {label: '天线俯仰角',value: newVal.antennaElevation ,status: 1 ? 'normal' : 'error',}
// ]
// deviceStatusMap.value = [
// {label: '天线发射频率',value: newVal.antennaTransmitPower ,status: 1 ? 'normal' : 'error',},
// {label: '天线发射EIRP',value: newVal.antennaEip ,status: 0? 'normal' : 'error',},
// {label: '天线方位角',value: newVal.antennaAzimuth ,status: 1 ? 'normal' : 'error',},
// {label: '天线俯仰角',value: newVal.antennaElevation ,status: 1 ? 'normal' : 'error',}
// ]
}, { immediate: true })
......@@ -281,7 +259,8 @@ const closePanel = () => {
.device-monitor {
width: 280px;
height: 380px;
position: fixed; /* 改为fixed定位 */
position: fixed;
/* 改为fixed定位 */
bottom: 0.5vh;
left: 20%;
background: #1a1a1a;
......@@ -289,8 +268,8 @@ const closePanel = () => {
z-index: 1001;
overflow: hidden;
/* border-top: 2px solid;
/* border-top: 2px solid;
border-bottom: 2px solid;
border-image: linear-gradient(to right, rgba(54, 27, 27, 0.93) 0%, rgba(255, 2, 2, 0.93) 50%, rgba(54, 27, 27, 0.93)) 1;
box-shadow: inset 0 -20px 70px -25px rgba(255, 2, 2, 0.93); */
......@@ -342,7 +321,7 @@ const closePanel = () => {
.close-btn {
width: 15px;
height: 15px;
background: #1E1E2D;
background: #1E1E2D;
border: none;
color: #aaa;
font-size: 18px;
......@@ -441,11 +420,13 @@ const closePanel = () => {
padding: 0;
background: linear-gradient(to bottom, #1e1e2d, #191925);
}
.content_info{
.content_info {
height: 100%;
/* background-color: #4488f5; */
}
/* 表格头部 */
.table-header {
display: flex;
......@@ -467,18 +448,21 @@ const closePanel = () => {
.device-name {
flex: 1.2;
overflow: hidden;
overflow: hidden;
}
.device-name1{
.device-name1 {
flex: 1;
text-align: right;
text-align: right;
padding-right: 10px;
}
.status {
flex: 1;
right: 10px;
text-align: right;
}
.status1 {
flex: 1;
right: 10px;
......@@ -494,19 +478,21 @@ const closePanel = () => {
height: 260px;
color: #d1d0d0;
}
.device-list1{
.device-list1 {
padding: 0 10px;
max-height:290px;
max-height: 290px;
overflow-y: auto;
z-index: 20;
color: #d1d0d0;
}
.device-item {
margin-bottom: 1px;
border-radius: 6px;
overflow-Y: auto;
transition: all 0.2s;
/* background-color: rgba(255, 255, 255, 0.02); */
/* border: 1px solid rgba(255, 255, 255, 0.05); */
}
......@@ -525,13 +511,14 @@ const closePanel = () => {
cursor: pointer;
transition: background-color 0.2s;
overflow: auto;
}
.has-error{
.has-error {
overflow: hidden;
}
.has-error .device-row {
position: relative;
left: -20px;
......@@ -539,12 +526,14 @@ const closePanel = () => {
/* background-color: rgba(248, 113, 113, 0.05); */
}
.has-error1 {
.has-error1 {
color: red;
}
.notHas-error1 {
.notHas-error1 {
color: green;
}
/* 展开/折叠图标 */
.toggle-icon {
display: inline-block;
......@@ -648,6 +637,7 @@ const closePanel = () => {
color: #888888;
min-height: 260px;
}
::-webkit-scrollbar {
width: 1px !important;
}
......@@ -671,6 +661,7 @@ const closePanel = () => {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
......
......@@ -47,7 +47,7 @@ const yName1 = ref({
})
const yName2 = ref({
type: false,
value: ['s', 's']
value: ['', '']
})
const yName3 = ref({
type: true,
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论