提交 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,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<!-- 顶部标题栏 --> <!-- 顶部标题栏 -->
<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>
...@@ -28,22 +28,14 @@ ...@@ -28,22 +28,14 @@
<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 <span v-if="device.status === 'error'" class="toggle-icon">
v-if="device.status === 'error'"
class="toggle-icon"
>
{{ device.expanded ? '▾' : '▸' }} {{ device.expanded ? '▾' : '▸' }}
</span> </span>
{{ device.name }} {{ device.name }}
...@@ -57,10 +49,8 @@ ...@@ -57,10 +49,8 @@
</div> </div>
<!-- 故障详情 --> <!-- 故障详情 -->
<div <div class="error-details-container"
class="error-details-container" v-if="device.status === 'error' && device.expanded && device.errorDetails">
v-if="device.status === 'error' && device.expanded && device.errorDetails"
>
<div class="error-details"> <div class="error-details">
{{ device.errorDetails }} {{ device.errorDetails }}
</div> </div>
...@@ -68,10 +58,9 @@ ...@@ -68,10 +58,9 @@
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div <div class="no-data">
class="no-data" <p>暂无数据</p>
> </div>
<p>暂无数据</p></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -80,17 +69,9 @@ ...@@ -80,17 +69,9 @@
<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"
:key="index"
>
<!-- 主设备行 --> <!-- 主设备行 -->
<div class="device-row" <div class="device-row" v-for="(item, index) in items" :key="index">
v-for="(item, index) in items"
:key="index"
>
<div class="col device-name"> <div class="col device-name">
{{ item.label }} {{ item.label }}
...@@ -107,15 +88,10 @@ ...@@ -107,15 +88,10 @@
</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>
<!-- 设备列表头部 --> <!-- 设备列表头部 -->
...@@ -173,9 +149,9 @@ ...@@ -173,9 +149,9 @@
<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([])
...@@ -192,7 +168,9 @@ const deviceStatusMap = ref([ ...@@ -192,7 +168,9 @@ const deviceStatusMap = ref([
// 监听 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
} }
...@@ -230,35 +208,35 @@ watch(() => props.baseDeviceList, (newVal) => { ...@@ -230,35 +208,35 @@ watch(() => props.baseDeviceList, (newVal) => {
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;
...@@ -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;
...@@ -469,16 +450,19 @@ const closePanel = () => { ...@@ -469,16 +450,19 @@ const closePanel = () => {
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,13 +478,15 @@ const closePanel = () => { ...@@ -494,13 +478,15 @@ 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;
...@@ -529,9 +515,10 @@ const closePanel = () => { ...@@ -529,9 +515,10 @@ const closePanel = () => {
} }
.has-error{ .has-error {
overflow: hidden; overflow: hidden;
} }
.has-error .device-row { .has-error .device-row {
position: relative; position: relative;
left: -20px; left: -20px;
...@@ -542,9 +529,11 @@ const closePanel = () => { ...@@ -542,9 +529,11 @@ const closePanel = () => {
.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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论