城区管网指标检测增加详情（折线图）
This commit is contained in:
parent
b2a9d385a8
commit
ad205bd847
|
|
@ -64,6 +64,10 @@
|
|||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)" />
|
||||
</template>
|
||||
<template v-slot:bodyCell="{ column, record, index, text }">
|
||||
<template v-if="column.dataIndex === 'view005'">
|
||||
<span v-if="record.fromFlow == 0">{{ record.view005 }}</span>
|
||||
|
|
@ -77,6 +81,8 @@
|
|||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<HeatanalysisModal ref="registerModal"></HeatanalysisModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -86,6 +92,7 @@ import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columns } from './Heatanalysis.data';
|
||||
import { list, companylist, heatsourcelist, heatsourcestationlist } from './Heatanalysis.api';
|
||||
import HeatanalysisModal from './components/HeatanalysisModal.vue'
|
||||
|
||||
const queryParam = ref<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
|
|
@ -99,7 +106,6 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
|||
canResize: false,
|
||||
useSearchForm: false,
|
||||
clickToRowSelect: false,
|
||||
showActionColumn: false,
|
||||
showIndexColumn: false,
|
||||
tableSetting: {
|
||||
// 是否显示刷新按钮
|
||||
|
|
@ -156,13 +162,13 @@ function searchReset() {
|
|||
|
||||
const thermalcompany = ref();
|
||||
async function getThermalcompany() {
|
||||
let params = {regionType:'城区'};
|
||||
let params = { regionType: '城区' };
|
||||
thermalcompany.value = await companylist(params);
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource() {
|
||||
let params = {regionType:'城区'};
|
||||
let params = { regionType: '城区' };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
}
|
||||
|
||||
|
|
@ -172,7 +178,7 @@ async function getHeatsourcestation() {
|
|||
}
|
||||
|
||||
async function handleChange1(record) {
|
||||
var params = { companyId: record,regionType:'城区' };
|
||||
var params = { companyId: record, regionType: '城区' };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
heatsourcestation.value = [];
|
||||
}
|
||||
|
|
@ -183,6 +189,22 @@ async function handleChange2(record) {
|
|||
function handleChange3(record) {
|
||||
}
|
||||
|
||||
function handleDetail(record) {
|
||||
registerModal.value.cqDetail(record)
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getThermalcompany();
|
||||
getHeatsource();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<!-- 页面顶部中间显示 公司/锅炉房/换热站 -->
|
||||
<div class="title">{{ headerText }}</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<a-tabs v-model:activeKey="activeTab" centered @change="onTabChange">
|
||||
<a-tab-pane key="temp" tab="温度指标">
|
||||
<div ref="tempChartRef" class="chart-box"></div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="press" tab="压力指标">
|
||||
<div ref="pressChartRef" class="chart-box"></div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineProps, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { list } from '/@/views/heating/history/HeatanalysisHistory.api';
|
||||
|
||||
const props = defineProps({});
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const activeTab = ref('temp'); // 默认进入温度指标 tab
|
||||
|
||||
// 日期：近7天（含今天）
|
||||
const end = new Date();
|
||||
end.setHours(23, 59, 59, 999);
|
||||
const start = new Date(end);
|
||||
start.setDate(end.getDate() - 6);
|
||||
start.setHours(0, 0, 0, 0);
|
||||
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
function formatDateTime(d: Date) {
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
|
||||
}
|
||||
|
||||
const tempChartRef = ref<HTMLElement | null>(null);
|
||||
const pressChartRef = ref<HTMLElement | null>(null);
|
||||
let tempChart: echarts.ECharts | null = null;
|
||||
let pressChart: echarts.ECharts | null = null;
|
||||
let tempOption: any = null;
|
||||
let pressOption: any = null;
|
||||
const headerText = ref(''); // 页面顶部显示文本
|
||||
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
|
||||
function buildHeader(records: any[], record_: any) {
|
||||
if (records && records.length > 0) {
|
||||
const r = records[0];
|
||||
return `${r.view001Name || ''}/${r.view002Name || ''}/${r.view004Name || ''}`;
|
||||
}
|
||||
return `${record_.view001Name || ''}/${record_.view002Name || ''}/${record_.view004Name || ''}`.replace(/\/+$/, '');
|
||||
}
|
||||
|
||||
function initChartsOptions(records: any[]) {
|
||||
records.sort((a: any, b: any) => new Date(a.datatime).getTime() - new Date(b.datatime).getTime());
|
||||
const xAxis = records.map((r: any) => r.datatime);
|
||||
|
||||
const tempSeries = [
|
||||
{ name: '一次供水温度', key: 'view005' },
|
||||
{ name: '一次回水温度', key: 'view006' },
|
||||
{ name: '二次供水温度', key: 'view009' },
|
||||
{ name: '二次回水温度', key: 'view010' },
|
||||
].map(s => ({
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
connectNulls: false,
|
||||
data: records.map((r: any) => safeNum(r[s.key])),
|
||||
}));
|
||||
|
||||
const pressSeries = [
|
||||
{ name: '一次供水压力', key: 'view007' },
|
||||
{ name: '一次回水压力', key: 'view008' },
|
||||
{ name: '二次供水压力', key: 'view011' },
|
||||
{ name: '二次回水压力', key: 'view012' },
|
||||
].map(s => ({
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
connectNulls: false,
|
||||
data: records.map((r: any) => safeNum(r[s.key])),
|
||||
}));
|
||||
|
||||
const baseOption = {
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
formatter: (val: string) => val.replace(' ', '\n'),
|
||||
},
|
||||
},
|
||||
yAxis: { type: 'value', scale: true },
|
||||
};
|
||||
|
||||
tempOption = { ...baseOption, title: { text: '温度指标', left: 'center', top: 8 }, series: tempSeries };
|
||||
pressOption = { ...baseOption, title: { text: '压力指标', left: 'center', top: 8 }, series: pressSeries };
|
||||
}
|
||||
|
||||
let resizeAdded = false;
|
||||
function ensureResizeListener() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
tempChart?.resize();
|
||||
pressChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
});
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
function init(record_: any) {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: -1,
|
||||
regionType: '城区',
|
||||
view001: record_.view001,
|
||||
view002: record_.view002,
|
||||
view004: record_.view004 || -1,
|
||||
SDateStr: formatDateTime(start),
|
||||
EDateStr: formatDateTime(end),
|
||||
};
|
||||
|
||||
list(params).then((res: any) => {
|
||||
const records = (res && res.records) ? res.records : [];
|
||||
headerText.value = buildHeader(records, record_);
|
||||
initChartsOptions(records);
|
||||
nextTick(() => {
|
||||
// 初始化温度图表（默认tab）
|
||||
if (tempChartRef.value) {
|
||||
tempChart = echarts.init(tempChartRef.value);
|
||||
tempChart.setOption(tempOption);
|
||||
}
|
||||
ensureResizeListener();
|
||||
});
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
createMessage.error('获取数据失败');
|
||||
});
|
||||
}
|
||||
|
||||
// tab切换时，第一次进来才 init
|
||||
function onTabChange(key: string) {
|
||||
nextTick(() => {
|
||||
if (key === 'temp') {
|
||||
if (!tempChart && tempChartRef.value) {
|
||||
tempChart = echarts.init(tempChartRef.value);
|
||||
tempChart.setOption(tempOption);
|
||||
}
|
||||
tempChart?.resize();
|
||||
} else if (key === 'press') {
|
||||
if (!pressChart && pressChartRef.value) {
|
||||
pressChart = echarts.init(pressChartRef.value);
|
||||
pressChart.setOption(pressOption);
|
||||
}
|
||||
pressChart?.resize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
defineExpose({ init });
|
||||
|
||||
onUnmounted(() => {
|
||||
if (tempChart) { tempChart.dispose(); tempChart = null; }
|
||||
if (pressChart) { pressChart.dispose(); pressChart = null; }
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wrap {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.chart-box {
|
||||
width: 100%;
|
||||
height: 60vh; /* 一个tab里可以让图高一点 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,19 @@
|
|||
<template>
|
||||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||||
<HeatanalysisForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></HeatanalysisForm>
|
||||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk"
|
||||
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
|
||||
<HeatanalysisForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
|
||||
</HeatanalysisForm>
|
||||
</a-modal>
|
||||
<a-modal title="详情" width="100vw" wrap-class-name="full-modal" :visible="cqzxtVisible" @cancel="handleCqzxtCancel"
|
||||
:okButtonProps="{ class: { 'jee-hidden': true } }" cancelText="关闭">
|
||||
<Cqzxt ref="cqzxtRef"></Cqzxt>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import HeatanalysisForm from './HeatanalysisForm.vue'
|
||||
import Cqzxt from './Cqzxt.vue'
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<number>(800);
|
||||
|
|
@ -14,6 +21,8 @@ const visible = ref<boolean>(false);
|
|||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
const cqzxtVisible = ref(false)
|
||||
const cqzxtRef = ref()
|
||||
|
||||
/**
|
||||
* 新增
|
||||
|
|
@ -60,10 +69,22 @@ function handleCancel() {
|
|||
visible.value = false;
|
||||
}
|
||||
|
||||
function cqDetail(record) {
|
||||
cqzxtVisible.value = true
|
||||
nextTick(()=>{
|
||||
cqzxtRef.value.init(record)
|
||||
})
|
||||
}
|
||||
|
||||
function handleCqzxtCancel() {
|
||||
cqzxtVisible.value = false
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
add,
|
||||
edit,
|
||||
disableSubmit,
|
||||
cqDetail,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -72,4 +93,21 @@ defineExpose({
|
|||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.full-modal {
|
||||
.ant-modal {
|
||||
max-width: 100%;
|
||||
top: 0;
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.ant-modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh);
|
||||
}
|
||||
.ant-modal-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue