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

曲线

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