|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情 ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
|
|
|
+ <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温监测详情 ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
|
|
|
<div class="fiber-modal">
|
|
|
<div class="modal-left">
|
|
|
<div
|
|
@@ -212,8 +212,20 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-bottom">
|
|
|
- <span class="base-title">设备监测曲线</span>
|
|
|
- <a-table size="small" :columns="ballvalveColumns" :data-source="[]" :pagination="false" :scroll="{ y: 300 }" />
|
|
|
+ <span class="base-title">设备监测</span>
|
|
|
+ <!-- <a-table size="small" :columns="ballvalveColumns" :data-source="historyList" :pagination="false" :scroll="{ y: 300 }" /> -->
|
|
|
+ <div class="echarts-box">
|
|
|
+ <BarAndLine
|
|
|
+ class="echarts-line"
|
|
|
+ xAxisPropType="time"
|
|
|
+ :dataSource="historyList"
|
|
|
+ height="100%"
|
|
|
+ width="100%"
|
|
|
+ :chartsColumns="chartsColumns"
|
|
|
+ :option="echatsOption"
|
|
|
+ chartsType="listMonitor"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -224,9 +236,11 @@
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { chartsColumnList } from '../device.data';
|
|
|
import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
import dayjs from 'dayjs';
|
|
|
import { ballvalveColumns } from '../device.data';
|
|
|
+ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
|
|
@@ -243,6 +257,20 @@
|
|
|
const historyList = ref<any[]>([]);
|
|
|
const posList = ref<any[]>([]);
|
|
|
const posMonitor = shallowRef({});
|
|
|
+ const chartsColumnArr = getTableHeaderColumns('ballvalve_chart');
|
|
|
+ const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ left: '-5',
|
|
|
+ right: '45',
|
|
|
+ bottom: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
const [register, { setModalProps, closeModal }] = useModalInner();
|
|
|
|
|
@@ -308,6 +336,9 @@
|
|
|
historyList,
|
|
|
activeDeviceID,
|
|
|
posMonitor,
|
|
|
+ echatsOption,
|
|
|
+ chartsColumnList,
|
|
|
+ chartsColumns,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
@@ -399,7 +430,8 @@
|
|
|
width: 120px;
|
|
|
}
|
|
|
.value {
|
|
|
- width: 100px;
|
|
|
+ width: 150px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -472,19 +504,19 @@
|
|
|
}
|
|
|
.item-data {
|
|
|
position: relative;
|
|
|
- height: 130px;
|
|
|
+ height: 120px;
|
|
|
padding-top: 0;
|
|
|
.icon {
|
|
|
position: absolute;
|
|
|
left: 20px;
|
|
|
- top: 30px;
|
|
|
+ top: 25px;
|
|
|
// margin-right: 30px;
|
|
|
// margin-top: 25px;
|
|
|
}
|
|
|
.item-container {
|
|
|
width: 140px;
|
|
|
position: absolute;
|
|
|
- padding-top: 18px;
|
|
|
+ padding-top: 15px;
|
|
|
justify-content: flex-start;
|
|
|
right: 0;
|
|
|
.value {
|
|
@@ -553,7 +585,7 @@
|
|
|
:deep(.dv-scroll-board) {
|
|
|
.row-item {
|
|
|
height: 40px !important;
|
|
|
- line-height: 40px !important;
|
|
|
+ line-height: 35px !important;
|
|
|
}
|
|
|
|
|
|
.header-item {
|
|
@@ -566,11 +598,11 @@
|
|
|
}
|
|
|
|
|
|
.right-bottom {
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
|
|
|
.echarts-box {
|
|
|
width: 100%;
|
|
|
- height: 320px;
|
|
|
+ height: 180px;
|
|
|
position: relative;
|
|
|
|
|
|
.echarts-line {
|