添加乡镇功能
This commit is contained in:
parent
3a7fcccd04
commit
98d7244fa5
2
.env
2
.env
|
|
@ -2,7 +2,7 @@
|
|||
VITE_PORT = 3100
|
||||
|
||||
# 网站标题
|
||||
VITE_GLOB_APP_TITLE = 磐石市供热信息化平台
|
||||
VITE_GLOB_APP_TITLE = 磐石市乡镇供热在线监测平台
|
||||
|
||||
# 简称，此变量只能是字符/下划线
|
||||
VITE_GLOB_APP_SHORT_NAME = 供热信息化平台
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ VITE_PUBLIC_PATH = /
|
|||
|
||||
|
||||
# 跨域代理，您可以配置多个 ,请注意，没有换行符
|
||||
VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
|
||||
VITE_PROXY = [["/jeecgboot","http://localhost:8050/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
|
||||
|
||||
#后台接口全路径地址(必填)
|
||||
VITE_GLOB_DOMAIN_URL=http://localhost:8080/jeecg-boot
|
||||
VITE_GLOB_DOMAIN_URL=http://localhost:8050/jeecg-boot
|
||||
|
||||
#后台接口父地址(必填)
|
||||
VITE_GLOB_API_URL=/jeecgboot
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ enum Api {
|
|||
slcx = '/exportapi/homeApi/slcx',
|
||||
cqglfgswd = '/exportapi/homeApi/cqglfgswd',
|
||||
getStaticList = '/exportapi/homeApi/getStaticList',
|
||||
getStaticNowList = '/exportapi/homeApi/getStaticNowList',
|
||||
glfzb = '/exportapi/homeApi/glfzb',
|
||||
}
|
||||
|
||||
|
|
@ -25,6 +26,9 @@ export const cqglfgswd = () => {
|
|||
export const getStaticList = (params) => {
|
||||
return defHttp.post({ url: Api.getStaticList,params });
|
||||
};
|
||||
export const getStaticNowList = (params) => {
|
||||
return defHttp.post({ url: Api.getStaticNowList,params });
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 MiB After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 230 KiB After Width: | Height: | Size: 475 KiB |
|
|
@ -0,0 +1,239 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="锅炉房">
|
||||
<a-select ref="select" placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
|
||||
@focus="focus" @change="handleChange2">
|
||||
<a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!-- <a-col :lg="5">-->
|
||||
<!-- <a-form-item label="换热站">-->
|
||||
<!-- <a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"-->
|
||||
<!-- @focus="focus" @change="handleChange3">-->
|
||||
<!-- <a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName-->
|
||||
<!-- }}</a-select-option>-->
|
||||
<!-- </a-select>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- </a-col>-->
|
||||
<a-col :lg="5">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button preIcon="ant-design:sync-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
<!-- <a-col :lg="5">
|
||||
<a-form-item label="一次供水温度">
|
||||
<a-input placeholder="请输入一次供水温度" v-model:value="queryParam.view005"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="一次回水温度">
|
||||
<a-input placeholder="请输入一次回水温度" v-model:value="queryParam.view006"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="二次供水温度">
|
||||
<a-input placeholder="请输入二次供水温度" v-model:value="queryParam.view009"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="二次回水温度">
|
||||
<a-input placeholder="请输入二次回水温度" v-model:value="queryParam.view010"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>-->
|
||||
</a-row>
|
||||
</a-form>
|
||||
</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>
|
||||
<span v-else-if="record.fromFlow == 1">{{ record.view035 }}</span>
|
||||
<span v-else>{{ 0 }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'view006'">
|
||||
<span v-if="record.fromFlow == 0">{{ record.view006 }}</span>
|
||||
<span v-else-if="record.fromFlow == 1">{{ record.view036 }}</span>
|
||||
<span v-else>{{ 0 }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
|
||||
<HeatanalysisModal ref="registerModal"></HeatanalysisModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="heatanalysis-heatanalysis" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { columnsJx } from './Heatanalysis.data';
|
||||
import { list, companylist, heatsourcelist, heatsourcestationlist } from './Heatanalysis.api';
|
||||
import HeatanalysisModal from './components/HeatanalysisModal.vue'
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
const queryParam = ref<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '',
|
||||
api: list,
|
||||
columns: columnsJx,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
clickToRowSelect: false,
|
||||
showIndexColumn: false,
|
||||
immediate: false,
|
||||
tableSetting: {
|
||||
// 是否显示刷新按钮
|
||||
redo: false,
|
||||
// 是否显示尺寸调整按钮
|
||||
size: false,
|
||||
// 是否显示字段调整按钮
|
||||
setting: false,
|
||||
// 是否显示全屏按钮
|
||||
fullScreen: false,
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
// queryParam.value.regionType = '乡镇'
|
||||
params.column = '', params.order = '';//新生成的默认不带排序
|
||||
return Object.assign(params, queryParam.value);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const labelCol = reactive({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
});
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
queryParam.value = {};
|
||||
selectedRowKeys.value = [];
|
||||
getHeatsource();
|
||||
// getHeatsourcestation();
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource() {
|
||||
let params = { sourceId: userInfo.sourceId };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
}
|
||||
|
||||
// const heatsourcestation = ref();
|
||||
// async function getHeatsourcestation() {
|
||||
// heatsourcestation.value = await heatsourcestationlist();
|
||||
// }
|
||||
async function handleChange2(record) {
|
||||
// var params = { sourceId: record };
|
||||
// heatsourcestation.value = await heatsourcestationlist(params);
|
||||
}
|
||||
function handleChange3(record) {
|
||||
}
|
||||
|
||||
function handleDetail(record) {
|
||||
registerModal.value.jxDetail(record)
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
onMounted(async() => {
|
||||
await getHeatsource();
|
||||
var sourceId = userInfo.sourceId;
|
||||
if(sourceId){
|
||||
if(sourceId.indexOf(',') > -1){
|
||||
queryParam.value.view002 = parseInt(sourceId.split(',')[0]);
|
||||
}else{
|
||||
queryParam.value.view002 = parseInt(sourceId);
|
||||
}
|
||||
}
|
||||
reload();
|
||||
// getHeatsourcestation();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
width: calc(50% - 15px);
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.jeecg-basic-table-form-container) {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="p-2">
|
||||
<!--查询区域-->
|
||||
<div class="jeecg-basic-table-form-container">
|
||||
<a-form @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-row :gutter="24">
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="锅炉房">
|
||||
<a-select ref="select" placeholder="请选择锅炉房" v-model:value="queryParam.view002" @focus="focus"
|
||||
@change="handleChange2">
|
||||
<a-select-option :value="item.id" v-for="item in heatsource"
|
||||
:key="item.id">{{ item.sourceName }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="开始时间">
|
||||
<a-date-picker placeholder="请选择开始时间" v-model:value="queryParam.SDate" :disabledDate="startDisabledDate"
|
||||
@change="handleStartChange" show-time style="width: 100%" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<a-form-item label="结束时间">
|
||||
<a-date-picker placeholder="请选择结束时间" v-model:value="queryParam.EDate" :disabledDate="endDisabledDate"
|
||||
@change="handleEndChange" show-time style="width: 100%" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="5">
|
||||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
||||
<a-col :lg="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
|
||||
<a-button preIcon="ant-design:sync-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable">
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="heatanalysis-heatanalysis" setup>
|
||||
import { ref, reactive, onMounted, watch, unref } from 'vue';
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { jxcolumns } from './HeatanalysisHistory.data';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
import {
|
||||
companylist,
|
||||
heatsourcelist,
|
||||
heatsourcestationlist,
|
||||
jxpage
|
||||
} from './HeatanalysisHistory.api';
|
||||
|
||||
const queryParam = ref<any>({});
|
||||
const toggleSearchStatus = ref<boolean>(false);
|
||||
const registerModal = ref();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '',
|
||||
api: jxpage,
|
||||
columns: jxcolumns,
|
||||
canResize: false,
|
||||
useSearchForm: false,
|
||||
clickToRowSelect: false,
|
||||
showActionColumn: false,
|
||||
showIndexColumn: false,
|
||||
immediate: false,
|
||||
tableSetting: {
|
||||
// 是否显示刷新按钮
|
||||
redo: false,
|
||||
// 是否显示尺寸调整按钮
|
||||
size: false,
|
||||
// 是否显示字段调整按钮
|
||||
setting: false,
|
||||
// 是否显示全屏按钮
|
||||
fullScreen: false,
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
params.column = '', params.order = '';//新生成的默认不带排序
|
||||
return Object.assign(params, queryParam.value);
|
||||
},
|
||||
},
|
||||
});
|
||||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
|
||||
const labelCol = reactive({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 },
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
});
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询
|
||||
*/
|
||||
function searchQuery() {
|
||||
reload();
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function searchReset() {
|
||||
queryParam.value = {};
|
||||
selectedRowKeys.value = [];
|
||||
getHeatsource();
|
||||
getHeatsourcestation();
|
||||
//刷新数据
|
||||
reload();
|
||||
}
|
||||
|
||||
const thermalcompany = ref();
|
||||
async function getThermalcompany() {
|
||||
thermalcompany.value = await companylist();
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource() {
|
||||
heatsource.value = await heatsourcelist({ sourceId: userInfo.sourceId });
|
||||
}
|
||||
|
||||
const heatsourcestation = ref();
|
||||
async function getHeatsourcestation() {
|
||||
heatsourcestation.value = await heatsourcestationlist();
|
||||
}
|
||||
|
||||
async function handleChange1(record) {
|
||||
var params = { companyId: record };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
heatsourcestation.value = [];
|
||||
}
|
||||
async function handleChange2(record) {
|
||||
var params = { sourceId: record };
|
||||
heatsourcestation.value = await heatsourcestationlist(params);
|
||||
}
|
||||
function handleChange3(record) {
|
||||
}
|
||||
|
||||
// 禁用开始日期的规则
|
||||
function startDisabledDate(current) {
|
||||
// 结束日期未选时不做限制
|
||||
if (!queryParam.value.EDate) return false;
|
||||
return !current.isSame(queryParam.value.EDate, 'month') ||
|
||||
current.isAfter(queryParam.value.EDate, 'day');
|
||||
}
|
||||
|
||||
// 禁用结束日期的规则
|
||||
function endDisabledDate(current) {
|
||||
// 开始日期未选时禁用所有
|
||||
if (!queryParam.value.SDate) return true;
|
||||
return !current.isSame(queryParam.value.SDate, 'month') ||
|
||||
current.isBefore(queryParam.value.SDate, 'day');
|
||||
}
|
||||
|
||||
// 开始日期变化时处理
|
||||
function handleStartChange(momentObj) {
|
||||
if (momentObj && queryParam.value.EDate &&
|
||||
!momentObj.isSame(queryParam.value.EDate, 'month')) {
|
||||
queryParam.value.EDate = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 结束日期变化时处理
|
||||
function handleEndChange(momentObj) {
|
||||
if (momentObj && queryParam.value.SDate &&
|
||||
!momentObj.isSame(queryParam.value.SDate, 'month')) {
|
||||
queryParam.value.SDate = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
getThermalcompany();
|
||||
getHeatsource();
|
||||
getHeatsourcestation();
|
||||
|
||||
|
||||
|
||||
watch(
|
||||
() => queryParam.value.SDate,
|
||||
async (newVal) => {
|
||||
if (newVal && queryParam.value.EDate &&
|
||||
(!newVal.isSame(queryParam.value.EDate, 'month') || newVal > queryParam.value.EDate)) {
|
||||
queryParam.value.EDate = null;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
// 更新 父部门 选项
|
||||
watch(
|
||||
() => queryParam.value.EDate,
|
||||
async (newVal) => {
|
||||
if (newVal && queryParam.value.SDate &&
|
||||
(!newVal.isSame(queryParam.value.SDate, 'month') || newVal < queryParam.value.SDate)) {
|
||||
queryParam.value.SDate = null;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
|
||||
await getHeatsource();
|
||||
var sourceId = userInfo.sourceId;
|
||||
if(sourceId){
|
||||
if(sourceId.indexOf(',') > -1){
|
||||
queryParam.value.view002 = parseInt(sourceId.split(',')[0]);
|
||||
}else{
|
||||
queryParam.value.view002 = parseInt(sourceId);
|
||||
}
|
||||
}
|
||||
reload();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.jeecg-basic-table-form-container {
|
||||
.table-page-search-submitButtons {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.query-group-cust {
|
||||
width: calc(50% - 15px);
|
||||
min-width: 100px !important;
|
||||
}
|
||||
|
||||
.query-group-split-cust {
|
||||
width: 30px;
|
||||
display: inline-block;
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-title) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.jeecg-basic-table-form-container) {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -46,7 +46,7 @@ function prepareOptions(records: any[]) {
|
|||
|
||||
const cityX = buildXAxis(city, 'view028');
|
||||
console.log("🚀 ~ prepareOptions ~ cityX:", cityX)
|
||||
const citySW = city.map((r: any) => safeNum(r.view037));
|
||||
const citySW = city.map((r: any) => safeNum(r.view041));
|
||||
cityOption = {
|
||||
title: { text: '乡镇锅炉房热流量', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ function prepareOptions(records: any[]) {
|
|||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view037));
|
||||
const citySW = city.map((r: any) => safeNum(r.view041));
|
||||
cityOption = {
|
||||
title: { text: '乡镇锅炉房历史热流量', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function prepareOptions(records: any[]) {
|
|||
|
||||
const cityX = buildXAxis(city, 'view028');
|
||||
console.log("🚀 ~ prepareOptions ~ cityX:", cityX)
|
||||
const citySW = city.map((r: any) => safeNum(r.view041));
|
||||
const citySW = city.map((r: any) => safeNum(r.view037));
|
||||
cityOption = {
|
||||
title: { text: '乡镇锅炉房水流量', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4" hidden>
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticNowList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view005));
|
||||
const cityHW = city.map((r: any) => safeNum(r.view006));
|
||||
cityOption = {
|
||||
title: { text: '供/回水温度监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: '℃' },
|
||||
series: [
|
||||
{ name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
{ name: '回水温度', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticNowList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" :disabledDate="disabledDate" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
// 禁用 2025-09 之前的日期
|
||||
const disabledDate = (current) => {
|
||||
const minDate = dayjs('2025-09-01', 'YYYY-MM-DD'); // 最小允许日期
|
||||
const currentMonth = dayjs().startOf('month'); // 当前月份（如 2025-09-01）
|
||||
|
||||
// 如果日期早于 2025-08 或晚于当前月份，则禁用
|
||||
return (
|
||||
current.isBefore(minDate, 'month') || // 早于 2025-08
|
||||
current.isAfter(currentMonth, 'month') // 晚于当前月份（禁止下个月）
|
||||
);
|
||||
};
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view005));
|
||||
const cityHW = city.map((r: any) => safeNum(r.view006));
|
||||
cityOption = {
|
||||
title: { text: '历史供/回水温度监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: '℃' },
|
||||
series: [
|
||||
{ name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
{ name: '回水温度', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4" hidden>
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticNowList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view041));
|
||||
cityOption = {
|
||||
title: { text: '热量监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'kw' },
|
||||
series: [
|
||||
{ name: '热量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticNowList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" :disabledDate="disabledDate" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
// 禁用 2025-09 之前的日期
|
||||
const disabledDate = (current) => {
|
||||
const minDate = dayjs('2025-09-01', 'YYYY-MM-DD'); // 最小允许日期
|
||||
const currentMonth = dayjs().startOf('month'); // 当前月份（如 2025-09-01）
|
||||
|
||||
// 如果日期早于 2025-08 或晚于当前月份，则禁用
|
||||
return (
|
||||
current.isBefore(minDate, 'month') || // 早于 2025-08
|
||||
current.isAfter(currentMonth, 'month') // 晚于当前月份（禁止下个月）
|
||||
);
|
||||
};
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view041));
|
||||
cityOption = {
|
||||
title: { text: '历史热量监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'kw' },
|
||||
series: [
|
||||
{ name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4" hidden>
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticNowList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view037));
|
||||
cityOption = {
|
||||
title: { text: '水流量监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'm³/h' },
|
||||
series: [
|
||||
{ name: '水流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticNowList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" :disabledDate="disabledDate" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
// 禁用 2025-09 之前的日期
|
||||
const disabledDate = (current) => {
|
||||
const minDate = dayjs('2025-09-01', 'YYYY-MM-DD'); // 最小允许日期
|
||||
const currentMonth = dayjs().startOf('month'); // 当前月份（如 2025-09-01）
|
||||
|
||||
// 如果日期早于 2025-08 或晚于当前月份，则禁用
|
||||
return (
|
||||
current.isBefore(minDate, 'month') || // 早于 2025-08
|
||||
current.isAfter(currentMonth, 'month') // 晚于当前月份（禁止下个月）
|
||||
);
|
||||
};
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view037));
|
||||
cityOption = {
|
||||
title: { text: '水流量监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'm³/h' },
|
||||
series: [
|
||||
{ name: '水流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4" hidden>
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticNowList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view007));
|
||||
const cityHW = city.map((r: any) => safeNum(r.view008));
|
||||
cityOption = {
|
||||
title: { text: '供/回水压力监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'MPa' },
|
||||
series: [
|
||||
{ name: '供水压力', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
{ name: '回水压力', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticNowList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div style="background-color: #fff;padding:14px;height: 100%;">
|
||||
<a-row :span="24" style="margin-top:10px;">
|
||||
<a-col :span="4" style="padding-left: 30px;">
|
||||
<a-select ref="select"
|
||||
placeholder="选择锅炉房"
|
||||
v-model:value="queryParam.sourceId"
|
||||
style="width: 155px;"
|
||||
@focus="focus"
|
||||
@change="handleChange">
|
||||
<a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM" :disabledDate="disabledDate" picker="month" placeholder="请选择时间" @change="handleChange" />
|
||||
</a-col>
|
||||
<a-col :span="24" >
|
||||
<div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { cqglfgswd,getStaticList } from '/@/api/dashboard/api';
|
||||
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
|
||||
import dayjs from 'dayjs';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
const { userInfo } = useUserStore();
|
||||
|
||||
// 禁用 2025-09 之前的日期
|
||||
const disabledDate = (current) => {
|
||||
const minDate = dayjs('2025-09-01', 'YYYY-MM-DD'); // 最小允许日期
|
||||
const currentMonth = dayjs().startOf('month'); // 当前月份（如 2025-09-01）
|
||||
|
||||
// 如果日期早于 2025-08 或晚于当前月份，则禁用
|
||||
return (
|
||||
current.isBefore(minDate, 'month') || // 早于 2025-08
|
||||
current.isAfter(currentMonth, 'month') // 晚于当前月份（禁止下个月）
|
||||
);
|
||||
};
|
||||
/* ---- dom refs ---- */
|
||||
const cityChartRef = ref<HTMLElement | null>(null);
|
||||
/* ---- echarts instances & options ---- */
|
||||
let cityChart: echarts.ECharts | null = null;
|
||||
let cityOption: any = null;
|
||||
const queryParam = ref<any>({sourceId: userInfo.sourceId});
|
||||
|
||||
/* ---- helpers ---- */
|
||||
function safeNum(v: any) {
|
||||
if (v === null || v === undefined || v === '') return null;
|
||||
const n = Number(v);
|
||||
return Number.isNaN(n) ? null : n;
|
||||
}
|
||||
function sortByTime(arr: any[]) {
|
||||
return [...arr].sort((a, b) => {
|
||||
const ta = new Date(a.datatime || a.view032 || '').getTime();
|
||||
const tb = new Date(b.datatime || b.view032 || '').getTime();
|
||||
return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
|
||||
});
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource(){
|
||||
heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
|
||||
}
|
||||
|
||||
async function handleChange(){
|
||||
loadData();
|
||||
}
|
||||
function splitByRegion(data: any[]) {
|
||||
// const city = data.filter(d => String(d.regionType).includes('乡镇'));
|
||||
return { city: sortByTime(data) };
|
||||
}
|
||||
function buildXAxis(records: any[], key = 'view028') {
|
||||
return records.map((r: any) => {
|
||||
return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- build options（折线改为直线 smooth: false） ---- */
|
||||
function prepareOptions(records: any[]) {
|
||||
const { city } = splitByRegion(records);
|
||||
|
||||
const cityX = buildXAxis(city, 'datatime');
|
||||
const citySW = city.map((r: any) => safeNum(r.view007));
|
||||
const cityHW = city.map((r: any) => safeNum(r.view008));
|
||||
cityOption = {
|
||||
title: { text: '历史供/回水压力监测', left: 'center', top: 10 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { top: 36, left: 'center' },
|
||||
grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
|
||||
yAxis: { type: 'value', name: 'MPa' },
|
||||
series: [
|
||||
{ name: '供水压力', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
|
||||
{ name: '回水压力', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
|
||||
],
|
||||
color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
|
||||
};
|
||||
}
|
||||
|
||||
/* ---- lazy init & resize ---- */
|
||||
let resizeAdded = false;
|
||||
function ensureResize() {
|
||||
if (resizeAdded) return;
|
||||
const onResize = () => {
|
||||
cityChart?.resize();
|
||||
};
|
||||
window.addEventListener('resize', onResize);
|
||||
onUnmounted(() => window.removeEventListener('resize', onResize));
|
||||
resizeAdded = true;
|
||||
}
|
||||
|
||||
/* ---- load data ---- */
|
||||
async function loadData() {
|
||||
console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
|
||||
queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
|
||||
try {
|
||||
// 1. 获取参数
|
||||
// 2. 获取图表数据
|
||||
const r = await getStaticList(queryParam.value);
|
||||
const records = r?.data ?? [];
|
||||
prepareOptions(records);
|
||||
|
||||
// 3. 等 DOM 更新完
|
||||
await nextTick();
|
||||
cityChart = echarts.init(cityChartRef.value);
|
||||
cityChart?.setOption(cityOption, true);
|
||||
|
||||
// 5. 窗口自适应
|
||||
ensureResize();
|
||||
} catch (err) {
|
||||
console.error('load error', err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onMounted( async () => {
|
||||
await getHeatsource()
|
||||
var list = heatsource.value
|
||||
queryParam.value.sourceId = list[0].sourceId
|
||||
queryParam.value.startDate = dayjs().format('YYYY-MM');
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bjclass {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: center; /* 水平居中 */
|
||||
height: calc(100vh - 120px); /* 需要设置容器高度 */
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div :class="prefixCls" class="login-background-img">
|
||||
<div class="index-body">
|
||||
<div class="index_header">
|
||||
<span class="index_header-word">磐石市供热信息化平台</span>
|
||||
<span class="index_header-word"> </span>
|
||||
</div>
|
||||
<div class="index-centre">
|
||||
<div class="index-padd">
|
||||
|
|
@ -60,8 +60,8 @@
|
|||
//账号登录表单字段
|
||||
const formData = reactive<any>({
|
||||
inputCode: '',
|
||||
username: 'system',
|
||||
password: '123456',
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
//定时器
|
||||
const timer = ref<any>(null);
|
||||
|
|
@ -147,4 +147,8 @@
|
|||
|
||||
<style lang="less" scoped>
|
||||
@import '/@/assets/loginmini/style/index.less';
|
||||
.ant-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -279,10 +279,10 @@
|
|||
confirm: handleFrozen.bind(null, record, 1),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '代理人',
|
||||
onClick: handleAgentSettings.bind(null, record.username),
|
||||
},
|
||||
// {
|
||||
// label: '代理人',
|
||||
// onClick: handleAgentSettings.bind(null, record.username),
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,41 +14,6 @@ export const columns: BasicColumn[] = [
|
|||
dataIndex: 'realname',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '头像',
|
||||
dataIndex: 'avatar',
|
||||
width: 120,
|
||||
customRender: render.renderAvatar,
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sex',
|
||||
width: 80,
|
||||
sorter: true,
|
||||
customRender: ({ text }) => {
|
||||
return render.renderDict(text, 'sex');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '生日',
|
||||
dataIndex: 'birthday',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
width: 150,
|
||||
dataIndex: 'orgCodeTxt',
|
||||
},
|
||||
{
|
||||
title: '负责部门',
|
||||
width: 150,
|
||||
dataIndex: 'departIds_dictText',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status_dictText',
|
||||
|
|
@ -189,6 +154,7 @@ export const formSchema: FormSchema[] = [
|
|||
componentProps: {
|
||||
labelKey: 'name',
|
||||
},
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
label: '角色',
|
||||
|
|
@ -206,6 +172,7 @@ export const formSchema: FormSchema[] = [
|
|||
label: '所属部门',
|
||||
field: 'selecteddeparts',
|
||||
component: 'JSelectDept',
|
||||
ifShow: false,
|
||||
componentProps: ({ formActionType, formModel }) => {
|
||||
return {
|
||||
sync: false,
|
||||
|
|
@ -242,12 +209,14 @@ export const formSchema: FormSchema[] = [
|
|||
async: true,
|
||||
multiple: true
|
||||
},
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
label: '身份',
|
||||
field: 'userIdentity',
|
||||
component: 'RadioGroup',
|
||||
defaultValue: 1,
|
||||
ifShow: false,
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: [
|
||||
|
|
@ -260,6 +229,15 @@ export const formSchema: FormSchema[] = [
|
|||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "锅炉房",
|
||||
field: 'sourceId',
|
||||
component: 'JSelectMultiple',
|
||||
componentProps:{
|
||||
dictCode:"bl_heatsource,source_name,id,region_type = '乡镇'"
|
||||
},
|
||||
//colProps: {span: 6},
|
||||
},
|
||||
{
|
||||
label: '负责部门',
|
||||
field: 'departIds',
|
||||
|
|
@ -276,11 +254,13 @@ export const formSchema: FormSchema[] = [
|
|||
componentProps: {
|
||||
fileMax: 1,
|
||||
},
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
label: '生日',
|
||||
field: 'birthday',
|
||||
component: 'DatePicker',
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
|
|
@ -291,12 +271,13 @@ export const formSchema: FormSchema[] = [
|
|||
placeholder: '请选择性别',
|
||||
stringToNumber: true,
|
||||
},
|
||||
ifShow: false,
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
field: 'email',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
ifShow: false,
|
||||
dynamicRules: ({ model, schema }) => {
|
||||
return [
|
||||
{ ...rules.duplicateCheckRule('sys_user', 'email', model, schema, true)[0], trigger: 'blur' },
|
||||
|
|
@ -308,7 +289,7 @@ export const formSchema: FormSchema[] = [
|
|||
label: '手机号码',
|
||||
field: 'phone',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
ifShow: false,
|
||||
dynamicRules: ({ model, schema }) => {
|
||||
return [
|
||||
{ ...rules.duplicateCheckRule('sys_user', 'phone', model, schema, true)[0], trigger: 'blur' },
|
||||
|
|
@ -320,12 +301,14 @@ export const formSchema: FormSchema[] = [
|
|||
label: '座机',
|
||||
field: 'telephone',
|
||||
component: 'Input',
|
||||
ifShow: false,
|
||||
rules: [{ pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }],
|
||||
},
|
||||
{
|
||||
label: '工作流引擎',
|
||||
field: 'activitiSync',
|
||||
defaultValue: 1,
|
||||
ifShow: false,
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
dictCode: 'activiti_sync',
|
||||
|
|
|
|||
Loading…
Reference in New Issue