修改样式
This commit is contained in:
parent
9bd916876f
commit
391f70825f
|
|
@ -8,6 +8,7 @@
|
|||
<a-form-item label="供热公司">
|
||||
<a-select ref="select" placeholder="请选择供热公司" v-model:value="queryParam.view001" style="width: 150px"
|
||||
@focus="focus" @change="handleChange1">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
<a-form-item label="锅炉房">
|
||||
<a-select ref="select" placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
|
||||
@focus="focus">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
|
|
@ -186,16 +188,11 @@ async function getHeatsourcestation() {
|
|||
}
|
||||
|
||||
async function handleChange1(record) {
|
||||
queryParam.value.view002 = ""
|
||||
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 handleDetail(record) {
|
||||
registerModal.value.cqDetail(record)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,258 @@
|
|||
<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.view001" style="width: 150px"
|
||||
@focus="focus" @change="handleChange1">
|
||||
<a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
|
||||
}}</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.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-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>{{ record.view005 || record.view035 || 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>{{ record.view005 || record.view035 || 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 { 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);
|
||||
const registerModal = ref();
|
||||
//注册table数据
|
||||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
|
||||
tableProps: {
|
||||
title: '',
|
||||
api: list,
|
||||
columns,
|
||||
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 thermalcompany = ref();
|
||||
async function getThermalcompany() {
|
||||
let params = { regionType: '城区' };
|
||||
thermalcompany.value = await companylist(params);
|
||||
}
|
||||
|
||||
const heatsource = ref();
|
||||
async function getHeatsource() {
|
||||
let params = { regionType: '城区' };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
}
|
||||
|
||||
const heatsourcestation = ref();
|
||||
async function getHeatsourcestation() {
|
||||
heatsourcestation.value = await heatsourcestationlist();
|
||||
}
|
||||
|
||||
async function handleChange1(record) {
|
||||
var params = { companyId: record, regionType: '城区' };
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
heatsourcestation.value = [];
|
||||
}
|
||||
async function handleChange2(record) {
|
||||
var params = { sourceId: record };
|
||||
heatsourcestation.value = await heatsourcestationlist(params);
|
||||
}
|
||||
function handleChange3(record) {
|
||||
}
|
||||
|
||||
function handleDetail(record) {
|
||||
registerModal.value.cqDetail(record)
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record) {
|
||||
return [
|
||||
{
|
||||
label: '详情',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
async function init(params) {
|
||||
console.log("🚀 ~ init ~ params:", params)
|
||||
await getThermalcompany();
|
||||
await getHeatsource();
|
||||
await getHeatsourcestation();
|
||||
|
||||
queryParam.value.view001 = params.view001;
|
||||
queryParam.value.view002 = params.view002;
|
||||
reload();
|
||||
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
});
|
||||
|
||||
</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,78 @@
|
|||
<template>
|
||||
<j-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"
|
||||
:bodyStyle="{ background: 'transparent' }" :maskStyle="{ background: 'rgba(0, 0, 0, 0.1)' }"
|
||||
>
|
||||
<HeatanalysisDpList ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></HeatanalysisDpList>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, nextTick, defineExpose } from 'vue';
|
||||
import HeatanalysisDpList from './HeatanalysisDpList.vue'
|
||||
import JModal from '/@/components/Modal/src/JModal/JModal.vue';
|
||||
|
||||
const title = ref<string>('');
|
||||
const width = ref<string>('80%');
|
||||
const visible = ref<boolean>(false);
|
||||
const disableSubmit = ref<boolean>(false);
|
||||
const registerForm = ref();
|
||||
const emit = defineEmits(['register', 'success']);
|
||||
|
||||
/**
|
||||
* 新增
|
||||
*/
|
||||
function add(record) {
|
||||
title.value = '新增';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.add(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑
|
||||
* @param record
|
||||
*/
|
||||
function init(record) {
|
||||
title.value = '详情';
|
||||
visible.value = true;
|
||||
nextTick(() => {
|
||||
registerForm.value.init(record);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 确定按钮点击事件
|
||||
*/
|
||||
function handleOk() {
|
||||
registerForm.value.submitForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* form保存回调事件
|
||||
*/
|
||||
function submitCallback() {
|
||||
handleCancel();
|
||||
emit('success');
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消按钮回调事件
|
||||
*/
|
||||
function handleCancel() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
disableSubmit,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
/**隐藏样式-modal确定按钮 */
|
||||
.jee-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -105,10 +105,10 @@
|
|||
<div class="top-text-2">{{ cqhrzsl }}</div>
|
||||
<div class="bottom-text-2">城区换热站总数</div>
|
||||
</div>
|
||||
<div class="left-img">
|
||||
<div class="left-img" @click="openModal(2, '乡镇锅炉房')">
|
||||
<img src="./dashboard/dp_icon3.png" />
|
||||
</div>
|
||||
<div class="right-text">
|
||||
<div class="right-text" @click="openModal(2, '乡镇锅炉房')">
|
||||
<div class="top-text-3">{{ jxsl }}</div>
|
||||
<div class="bottom-text-3">乡镇总数</div>
|
||||
</div>
|
||||
|
|
@ -125,8 +125,8 @@
|
|||
<div class="area-header">
|
||||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">乡镇瞬时热量【实时】</span>
|
||||
<span class="header-left-text" style="margin-left: 140px;">单位：kw</span>
|
||||
<span class="header-left-text">乡镇温度【供水、回水】</span>
|
||||
<span class="header-left-text" style="margin-left: 140px;">单位：℃</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-body"></div>
|
||||
|
|
@ -135,8 +135,8 @@
|
|||
<div class="area-header">
|
||||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">乡镇瞬时流量【实时】</span>
|
||||
<span class="header-left-text" style="margin-left: 130px;">单位：m³/h</span>
|
||||
<span class="header-left-text">乡镇压力【供压、回压】</span>
|
||||
<span class="header-left-text" style="margin-left: 130px;">单位：MPa</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" area-body"></div>
|
||||
|
|
@ -146,16 +146,16 @@
|
|||
<div class="area-header">
|
||||
<div class="header-left">
|
||||
<img src="./dashboard/dp_icon4.png" alt="icon" />
|
||||
<span class="header-left-text">乡镇供回水温度【实时】</span>
|
||||
<span class="header-left-text">乡镇水流量热量</span>
|
||||
</div>
|
||||
<div class="header-right" style="display: flex; ">
|
||||
<div class="header-right">
|
||||
<div class="header-right cursorPointer" @click="updateChartArea8()">
|
||||
<div style="background: linear-gradient(90deg, #2E5A6B, #F7B833);"></div>
|
||||
<div>供水</div>
|
||||
<div>水流量</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-right cursorPointer" @click="updateChartArea82()">
|
||||
<div style="background: linear-gradient(90deg, #ffd3be, #FF9D71);"></div>
|
||||
<div>回水</div>
|
||||
<div>热量</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -207,6 +207,89 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="modalCqVisible" class="modal-overlay" @click.self="closeCqModal">
|
||||
<div class="modal-content" style="height: 700px;">
|
||||
<div class="modal-header">
|
||||
<span>详情</span>
|
||||
<span class="close-btn" @click="closeCqModal">×</span>
|
||||
</div>
|
||||
<div class="modal-body list-container" style="max-height: 600px;">
|
||||
|
||||
<div>
|
||||
<a-row style="line-height: 50px;margin-bottom: 20px;">
|
||||
<a-col :span="6" style="text-align: center;">
|
||||
<span style="color:white;font-size:16px;">供热公司： </span>
|
||||
<a-select placeholder="请选择供热公司" v-model:value="queryParam.view001" style="width: 150px"
|
||||
@focus="focus" @change="handleChange1">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="item.id" v-for="item in thermalcompany" :key="item.id">{{ item.companyName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;">
|
||||
<span style="color:white;font-size:16px;">锅炉房： </span>
|
||||
<a-select placeholder="请选择锅炉房" v-model:value="queryParam.view002" style="width: 150px"
|
||||
@focus="focus" @change="handleChange2">
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="item.id" v-for="item in heatsource" :key="item.id">{{ item.sourceName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6" style="text-align: center;">
|
||||
<span style="color:white;font-size:16px;">换热站： </span>
|
||||
<a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"
|
||||
@focus="focus" >
|
||||
<a-select-option value="">全部</a-select-option>
|
||||
<a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchGrgsQuery">查询</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="list-header" style="color: #fff;">
|
||||
<img src="./dashboard/dp_icon4-left.png" class="left-icon" />
|
||||
<span>供热公司</span>
|
||||
<span>锅炉房</span>
|
||||
<span>换热站</span>
|
||||
<span>一次网供水温度</span>
|
||||
<span>一次网回水温度</span>
|
||||
<span>一次网供水压力</span>
|
||||
<span>一次网回水压力</span>
|
||||
<span>二次网供水温度</span>
|
||||
<span>二次网回水温度</span>
|
||||
<span>二次网供水压力</span>
|
||||
<span>二次网回水压力</span>
|
||||
<span>操作</span>
|
||||
<img src="./dashboard/dp_icon4-right.png" class="left-icon" />
|
||||
</div>
|
||||
<div class="list-body">
|
||||
<div v-if="!!modalCqData.length" v-for="item in modalCqData" :key="item.id" class="list-row"
|
||||
style="color: #fff;">
|
||||
<span>{{ item.view001Name }}</span>
|
||||
<span>{{ item.view002Name }}</span>
|
||||
<span>{{ item.view004Name }}</span>
|
||||
<span>{{ item.view005 }}</span>
|
||||
<span>{{ item.view006 }}</span>
|
||||
<span>{{ item.view007 }}</span>
|
||||
<span>{{ item.view008 }}</span>
|
||||
<span>{{ item.view009 }}</span>
|
||||
<span>{{ item.view010 }}</span>
|
||||
<span>{{ item.view011 }}</span>
|
||||
<span>{{ item.view012 }}</span>
|
||||
<span><a-button type="link"><span style="color: #81c7e6;"
|
||||
@click="detailFunc(item)">详情</span></a-button></span>
|
||||
</div>
|
||||
<div v-else class="list-row">
|
||||
<span>暂无数据</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="modalVisible2" class="modal-overlay2" @click.self="closeModal2">
|
||||
<div class="modal-content2">
|
||||
<ZxtCQ ref="registerModal" @close="closeModal2" />
|
||||
|
|
@ -219,11 +302,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<HeatanalysisDpListModal ref="heatanalysisDpListModalRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
|
||||
import { ref, onMounted,reactive, onUnmounted, onBeforeUnmount, nextTick, computed } from 'vue';
|
||||
import { slcx, cqglfgswd, glfzb } from '/@/api/dashboard/api';
|
||||
import * as echarts from 'echarts';
|
||||
import aImg from './dashboard/c.png';
|
||||
|
|
@ -231,15 +315,23 @@ import lqImg from './dashboard/lq.png';
|
|||
import ljt from './dashboard/ljt.png';
|
||||
import ZxtCQ from './components/ZxtCQ.vue'
|
||||
import ZxtJx from './components/ZxtJx.vue'
|
||||
import HeatanalysisDpListModal from '/@/views/heating/heatanalysis/HeatanalysisDpListModal.vue'
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { func } from 'vue-types';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { list, companylist, heatsourcelist, heatsourcestationlist } from '/@/views/heating/heatanalysis/Heatanalysis.api';
|
||||
|
||||
const registerModal = ref();
|
||||
const registerModal3 = ref();
|
||||
const heatanalysisDpListModalRef = ref();
|
||||
|
||||
const modalVisible = ref(false);
|
||||
const modalVisible2 = ref(false)
|
||||
const modalVisible3 = ref(false)
|
||||
const modalCqVisible = ref(false);
|
||||
const modalTitle = ref('');
|
||||
const modalData = ref<any[]>([]);
|
||||
const modalCqData = ref<any[]>([]);
|
||||
|
||||
let chartMain: echarts.ECharts | null = null; // 区域 main
|
||||
let chartLine: echarts.ECharts | null = null; // 区域 line
|
||||
|
|
@ -247,8 +339,18 @@ let chartCounty: echarts.ECharts | null = null; // area-6
|
|||
let chartRadar: echarts.ECharts | null = null; // area-7 雷达图
|
||||
let chartArea8: echarts.ECharts | null = null;
|
||||
|
||||
const queryParam = ref<any>({});
|
||||
const currentTime = ref(new Date().toLocaleString());
|
||||
|
||||
const labelCol = reactive({
|
||||
xs: 24,
|
||||
sm: 4,
|
||||
xl: 6,
|
||||
xxl: 4
|
||||
});
|
||||
const wrapperCol = reactive({
|
||||
xs: 24,
|
||||
sm: 20,
|
||||
});
|
||||
let dataTimer: number | null = null;
|
||||
let timer: number;
|
||||
const cqglfsl = ref(0)
|
||||
|
|
@ -260,6 +362,7 @@ const jbzbzys = ref('rgba(27, 147, 191, 0.3)')
|
|||
|
||||
const cityList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
const countyList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
const countyAddList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
|
||||
const cityHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
const countyHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
|
||||
|
|
@ -292,11 +395,61 @@ function stopScroll() {
|
|||
|
||||
}
|
||||
|
||||
const thermalcompany = ref();
|
||||
async function getThermalcompany() {
|
||||
let params = { };
|
||||
thermalcompany.value = await companylist(params);
|
||||
}
|
||||
const heatsource = ref();
|
||||
async function getHeatsource() {
|
||||
let params = {};
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
}
|
||||
|
||||
const heatsourcestation = ref();
|
||||
async function getHeatsourcestation() {
|
||||
heatsourcestation.value = await heatsourcestationlist(null);
|
||||
}
|
||||
|
||||
|
||||
async function handleChange1(record) {
|
||||
queryParam.value.view001 = record;
|
||||
queryParam.value.view002 = "";
|
||||
queryParam.value.view003 = "";
|
||||
var params = { companyId: record};
|
||||
heatsource.value = await heatsourcelist(params);
|
||||
// heatsourcestation.value = [];
|
||||
}
|
||||
async function handleChange2(record) {
|
||||
queryParam.value.view002 = record;
|
||||
queryParam.value.view003 = "";
|
||||
var params = { sourceId: record };
|
||||
heatsourcestation.value = await heatsourcestationlist(params);
|
||||
}
|
||||
function handleChange3(record) {
|
||||
}
|
||||
|
||||
function searchGrgsQuery() {
|
||||
queryParam.value.pageSize = -1;
|
||||
defHttp.get({url: '/heating/heatanalysis/page', params: queryParam.value}).then(res => {
|
||||
modalCqData.value = res.records;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 区域 main 柱状图
|
||||
function updateChartMain() {
|
||||
if (!chartMain) return;
|
||||
const names = cityList.value.map(i => i.name);
|
||||
const gsValues = cityList.value.map(i => i.value);
|
||||
const gsValues = cityList.value.map(item => ({
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
// 可以在这里添加自定义属性
|
||||
id: item.raw?.id || 0,
|
||||
view001: item.raw?.view001 || 0,
|
||||
view002: item.raw?.view002 || 0
|
||||
}
|
||||
}));
|
||||
const hsValues = cityList.value.map(i => Number(i.raw?.view006 || 0));
|
||||
const maxVal = gsValues.length ? Math.max(...gsValues) * 1.15 : 100;
|
||||
|
||||
|
|
@ -344,6 +497,22 @@ function updateChartMain() {
|
|||
]
|
||||
}, true);
|
||||
|
||||
// --------- 添加点击事件 ---------
|
||||
chartMain.off('click'); // 先移除旧的点击事件监听器，避免重复绑定
|
||||
chartMain.on('click', function(params) {
|
||||
var data = params.data.itemStyle;
|
||||
// heatanalysisDpListModalRef.value.disableSubmit = true;
|
||||
// heatanalysisDpListModalRef.value.init(data);
|
||||
modalCqVisible.value = true;
|
||||
setTimeout(()=>{
|
||||
handleChange1(data.view001);
|
||||
handleChange2(data.view002);
|
||||
searchGrgsQuery();
|
||||
},200)
|
||||
|
||||
|
||||
});
|
||||
|
||||
// --------- 自动轮播 tooltip 的逻辑（每 5 秒切换） ---------
|
||||
// 清除旧定时器（避免重复）
|
||||
if (chartMain.__autoTooltipTimer) {
|
||||
|
|
@ -450,17 +619,24 @@ function updateChartCounty() {
|
|||
if (!chartCounty) return;
|
||||
|
||||
const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
|
||||
const values = countyList.value.map(i => (i.raw?.view041 ? Number(i.raw.view041) : 0));
|
||||
const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
|
||||
const values = countyList.value.map(i => (i.raw?.view035 ? Number(i.raw.view035) : 0));
|
||||
const values2 = countyList.value.map(i => (i.raw?.view036 ? Number(i.raw.view036) : 0));
|
||||
const maxVal = values.length ? Math.max(...values, ...values2) * 1.15 : 100;
|
||||
|
||||
chartCounty.setOption({
|
||||
grid: { left: 10, right: 60, bottom: 14, top: 28, containLabel: true },
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 120, // 增加右侧空间以容纳两个标签
|
||||
bottom: 14,
|
||||
top: 28,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: 'transparent' // 设置为透明，取消悬浮背景
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
|
|
@ -469,7 +645,8 @@ function updateChartCounty() {
|
|||
var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
|
||||
+ '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
|
||||
+ '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
|
||||
+ params[0].name + '</br>瞬时热量:' + params[1].value
|
||||
+ params[0].name + '</br>供水温度:' + params[1].value
|
||||
+ '</br>回水温度:' + params[2].value
|
||||
+ '</div>';
|
||||
return content;
|
||||
}
|
||||
|
|
@ -484,54 +661,191 @@ function updateChartCounty() {
|
|||
yAxis: {
|
||||
type: 'category',
|
||||
data: names,
|
||||
axisLabel: { color: jbztys.value, interval: 0,fontSize: 18, },
|
||||
axisLabel: {
|
||||
color: jbztys.value,
|
||||
interval: 0,
|
||||
fontSize: 16, // 稍微减小字体以适应更多内容
|
||||
margin: 2 // 减少边距
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false }
|
||||
},
|
||||
series: [
|
||||
// 背景条
|
||||
{ type: 'bar', barWidth: 3, data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
|
||||
// 主体条
|
||||
{ type: 'bar', barWidth: 4, data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ECA924' }, { offset: 1, color: '#0D9FD8' }] }, opacity: 0.95 }, z: 2 },
|
||||
// 顶部小图片
|
||||
{ type: 'pictorialBar', symbol: `image://${lqImg}`, symbolSize: [25, 25], symbolOffset: [10, 0], symbolPosition: 'end', data: values, z: 3, silent: true },
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 10,
|
||||
data: names.map(() => maxVal),
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 1, y2: 0,
|
||||
colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }]
|
||||
}
|
||||
},
|
||||
z: 1,
|
||||
silent: true
|
||||
},
|
||||
|
||||
// 第一个主体条（供水温度）- 左侧柱子
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 10, // 减小宽度
|
||||
barGap: '60%', // 设置柱子间距
|
||||
data: values.map((val, index) => ({
|
||||
value: val,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 1, y2: 0,
|
||||
colorStops: [{ offset: 0, color: '#ECA924' }, { offset: 1, color: '#0D9FD8' }]
|
||||
}
|
||||
}
|
||||
})),
|
||||
itemStyle: {
|
||||
opacity: 0.95
|
||||
},
|
||||
z: 2
|
||||
},
|
||||
|
||||
// 第二个主体条（回水温度）- 右侧柱子
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 10, // 减小宽度
|
||||
barGap: '60%', // 设置柱子间距
|
||||
data: values2.map((val, index) => ({
|
||||
value: val,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 1, y2: 0,
|
||||
colorStops: [{ offset: 0, color: '#FF6B6B' }, { offset: 1, color: '#4ECDC4' }]
|
||||
}
|
||||
}
|
||||
})),
|
||||
itemStyle: {
|
||||
opacity: 0.95
|
||||
},
|
||||
z: 3
|
||||
},
|
||||
|
||||
// 第一个顶部小图片（供水温度）
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbol: `image://${lqImg}`,
|
||||
symbolSize: [25, 25], // 减小图标大小
|
||||
symbolOffset: [13, -7], // 向左偏移，放在左侧柱子顶部
|
||||
symbolPosition: 'end',
|
||||
data: values,
|
||||
z: 4,
|
||||
silent: true
|
||||
},
|
||||
|
||||
// 第二个顶部小图片（回水温度）
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
symbol: `image://${lqImg}`,
|
||||
symbolSize: [25, 25], // 减小图标大小
|
||||
symbolOffset: [13, 9], // 向右偏移，放在右侧柱子顶部
|
||||
symbolPosition: 'end',
|
||||
data: values2,
|
||||
z: 5,
|
||||
silent: true
|
||||
},
|
||||
|
||||
// 第一个标签（供水温度）- 左侧标签
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: 4,
|
||||
barWidth: 8,
|
||||
data: values.map(() => maxVal),
|
||||
itemStyle: { color: 'transparent' }, // 透明柱子
|
||||
itemStyle: { color: 'transparent' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
distance: 0,
|
||||
fontSize: 16, // 添加这行来设置文字大小
|
||||
distance: 40,
|
||||
fontSize: 18, // 减小字体大小
|
||||
offset: [-20, -20], // 添加偏移量
|
||||
align: 'left',
|
||||
color: '#ffffff',
|
||||
formatter: (params: any) => `{icon|} ${values[params.dataIndex]}`, // 数值左边加图标
|
||||
formatter: (params) => {
|
||||
const value = values[params.dataIndex];
|
||||
const value2 = values2[params.dataIndex];
|
||||
return `{icon|} ${value.toFixed(1)} - ${value2.toFixed(2)}`; // 格式化数值
|
||||
},
|
||||
rich: {
|
||||
icon: {
|
||||
height: 14, // 图标高度
|
||||
width: 12,
|
||||
height: 12,
|
||||
align: 'center',
|
||||
backgroundColor: {
|
||||
image: ljt // 使用导入的图片变量
|
||||
image: ljt
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
z: 4,
|
||||
z: 7,
|
||||
silent: true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// 第二个标签（回水温度）- 右侧标签
|
||||
// {
|
||||
// type: 'bar',
|
||||
// barWidth: 8,
|
||||
// data: values2.map(() => maxVal),
|
||||
// itemStyle: { color: 'transparent' },
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// distance: 40, // 增加距离，放在更右侧
|
||||
// fontSize: 12, // 减小字体大小
|
||||
// offset: [0, -20], // 添加偏移量
|
||||
// align: 'left',
|
||||
// color: '#ffffff',
|
||||
// formatter: (params) => {
|
||||
// const value = values2[params.dataIndex];
|
||||
// return `{icon2|} ${value.toFixed(1)}`; // 格式化数值
|
||||
// },
|
||||
// rich: {
|
||||
// icon2: {
|
||||
// width: 12,
|
||||
// height: 12,
|
||||
// align: 'center',
|
||||
// backgroundColor: {
|
||||
// image: ljt
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// z: 7,
|
||||
// silent: true
|
||||
// }
|
||||
],
|
||||
}, true);
|
||||
|
||||
// 添加点击事件
|
||||
chartCounty.off('click');
|
||||
chartCounty.on('click', function(params) {
|
||||
if (params.seriesIndex === 1 || params.seriesIndex === 2) {
|
||||
const clickedName = params.name;
|
||||
const gsValue = values[params.dataIndex];
|
||||
const hsValue = values2[params.dataIndex];
|
||||
|
||||
// 这里可以添加你的业务逻辑
|
||||
}
|
||||
});
|
||||
}
|
||||
// area-7 的雷达图更新函数
|
||||
function updateRadarChart() {
|
||||
if (!chartRadar) return;
|
||||
const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') + '\n' + i.raw?.view037 );
|
||||
const values = countyList.value.map(i => (i.raw?.view037 ? Number(i.raw.view037) : 0));
|
||||
const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
|
||||
|
||||
// 获取数据
|
||||
const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') + '\n' + i.raw?.view007+"-"+i.raw?.view008);
|
||||
const values1 = countyList.value.map(i => (i.raw?.view007 ? Number(i.raw.view007) : 0));
|
||||
const values2 = countyList.value.map(i => (i.raw?.view008 ? Number(i.raw.view008) : 0)); // 假设 view038 是第二个数据集
|
||||
|
||||
// 计算最大值
|
||||
const maxVal = Math.max(...values1, ...values2) * 1.15 || 100;
|
||||
|
||||
chartRadar.setOption({
|
||||
grid: { left: 10, right: 40, bottom: 14, top: 0, containLabel: true },
|
||||
|
|
@ -542,9 +856,9 @@ function updateRadarChart() {
|
|||
formatter: function (params) {
|
||||
const values = Array.isArray(params.value) ? params.value : [params.value];
|
||||
let content1 = `${params.name}<br/>`;
|
||||
values.forEach((val, i) => {
|
||||
content1 += `${names[i]}: ${val}<br/>`;
|
||||
});
|
||||
// values.forEach((val, i) => {
|
||||
// content1 += `${names[i]}: ${val}<br/>`;
|
||||
// });
|
||||
var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
|
||||
+ '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
|
||||
+ '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
|
||||
|
|
@ -554,7 +868,7 @@ function updateRadarChart() {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['瞬时流量'],
|
||||
data: ['供水压力', '回水压力'], // 更新图例
|
||||
textStyle: { color: '#f4f4f4' },
|
||||
bottom: 10
|
||||
},
|
||||
|
|
@ -564,7 +878,7 @@ function updateRadarChart() {
|
|||
splitNumber: 0,
|
||||
center: ['50%', '45%'],
|
||||
radius: '68%',
|
||||
nameGap:30,
|
||||
nameGap: 30,
|
||||
name: {
|
||||
rich: {
|
||||
padding: [20, 20, 10, 20]
|
||||
|
|
@ -585,39 +899,75 @@ function updateRadarChart() {
|
|||
splitArea: { show: true, areaStyle: { color: ['rgba(15,40,70,0.5)', 'rgba(20,50,80,0.3)'] } },
|
||||
axisLine: { lineStyle: { color: 'rgba(100,200,255,0.5)' } }
|
||||
},
|
||||
series: [{
|
||||
name: '瞬时流量',
|
||||
type: 'radar',
|
||||
lineStyle: { width: 3, color: '#00e4ff' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'radial', // 径向渐变
|
||||
x: 0.5, // 渐变中心 x（0~1）
|
||||
y: 0.5, // 渐变中心 y（0~1）
|
||||
r: 0.5, // 渐变半径
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(9,147,149,0.0)' }, // 中心颜色
|
||||
{ offset: 0.4, color: 'rgba(9,147,149,0.2)' }, // 中间颜色
|
||||
{ offset: 0.7, color: 'rgba(9,147,149,0.6)' }, // 中间颜色
|
||||
{ offset: 1, color: 'rgba(9,147,149,0.8)' } // 外圈透明
|
||||
]
|
||||
}
|
||||
series: [
|
||||
// 第一个雷达图（瞬时流量）
|
||||
{
|
||||
name: '供水压力',
|
||||
type: 'radar',
|
||||
lineStyle: { width: 3, color: '#00e4ff' },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(9,147,149,0.0)' },
|
||||
{ offset: 0.4, color: 'rgba(9,147,149,0.2)' },
|
||||
{ offset: 0.7, color: 'rgba(9,147,149,0.6)' },
|
||||
{ offset: 1, color: 'rgba(9,147,149,0.8)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
itemStyle: { color: 'rgba(0,255,255,0.8)' },
|
||||
data: [{
|
||||
value: values1,
|
||||
name: '供水压力',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
lineStyle: { width: 2, color: 'rgba(9,147,149,0.8)' }
|
||||
}]
|
||||
},
|
||||
|
||||
// 第二个雷达图（累计流量）
|
||||
{
|
||||
name: '回水压力',
|
||||
type: 'radar',
|
||||
lineStyle: { width: 3, color: '#FFA500' }, // 橙色线条
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.5,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(255,165,0,0.0)' },
|
||||
{ offset: 0.4, color: 'rgba(255,165,0,0.2)' },
|
||||
{ offset: 0.7, color: 'rgba(255,165,0,0.6)' },
|
||||
{ offset: 1, color: 'rgba(255,165,0,0.8)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
itemStyle: { color: 'rgba(255,165,0,0.8)' },
|
||||
data: [{
|
||||
value: values2,
|
||||
name: '回水压力',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
lineStyle: { width: 2, color: 'rgba(255,165,0,0.8)' }
|
||||
}]
|
||||
}
|
||||
,
|
||||
itemStyle: { color: 'rgba( 0,255,255, 0.8)' },
|
||||
data: [{ value: values, name: '瞬时流量', symbol: 'none', symbolSize: 6, lineStyle: { width: 2, color: 'rgba(9,147,149, 0.8)' } }]
|
||||
}],
|
||||
]
|
||||
}, true);
|
||||
}
|
||||
|
||||
// area-8 折线图更新函数
|
||||
function updateChartArea8() {
|
||||
if (!chartArea8) return;
|
||||
|
||||
const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
|
||||
const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view035) : Number(i.raw.view005));
|
||||
const returnData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view036) : Number(i.raw.view006));
|
||||
const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view038) : Number(i.raw.view038));
|
||||
|
||||
const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
|
||||
|
||||
chartArea8.setOption({
|
||||
grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
|
||||
|
|
@ -641,8 +991,7 @@ function updateChartArea8() {
|
|||
<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
${params[0].name}<br/>
|
||||
供水: ${supplyData[p.dataIndex]}<br/>
|
||||
回水: ${returnData[p.dataIndex]}
|
||||
水流量: ${supplyData[p.dataIndex]}
|
||||
</div>`;
|
||||
return content;
|
||||
}
|
||||
|
|
@ -658,7 +1007,7 @@ function updateChartArea8() {
|
|||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '温度℃',
|
||||
name: 'm³/h',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff',
|
||||
|
|
@ -678,7 +1027,7 @@ function updateChartArea8() {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: '供水',
|
||||
name: '热量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: supplyData,
|
||||
|
|
@ -696,8 +1045,120 @@ function updateChartArea8() {
|
|||
},
|
||||
label: { show: false }
|
||||
},
|
||||
]
|
||||
}, true);
|
||||
|
||||
// -------- 自动轮播 tooltip（每 5 秒） --------
|
||||
// 清理旧定时器（避免重复）
|
||||
if (chartArea8.__autoTooltipTimer) {
|
||||
clearInterval(chartArea8.__autoTooltipTimer);
|
||||
chartArea8.__autoTooltipTimer = null;
|
||||
try { chartArea8.dispatchAction({ type: 'hideTip' }); } catch (e) { }
|
||||
try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
|
||||
try { chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
|
||||
}
|
||||
|
||||
if (!names || names.length === 0) return;
|
||||
|
||||
let idx = 0;
|
||||
// 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
|
||||
setTimeout(() => {
|
||||
try {
|
||||
chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||||
// 同时也可以高亮第二条线的点（可选）
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) { }
|
||||
chartArea8.__autoTooltipTimer = setInterval(() => {
|
||||
try {
|
||||
// 取消上一个高亮
|
||||
chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
|
||||
|
||||
// 下一个索引
|
||||
idx = (idx + 1) % names.length;
|
||||
|
||||
// 显示 tooltip（axis 模式会显示两条线的数据）并高亮
|
||||
chartArea8.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
|
||||
chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
|
||||
} catch (e) {
|
||||
// console.error(e);
|
||||
}
|
||||
}, 5000);
|
||||
}, 2500);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// area-8 折线图更新函数
|
||||
function updateChartArea82() {
|
||||
if (!chartArea8) return;
|
||||
|
||||
const names = countyAddList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
|
||||
const returnData = countyAddList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view042) : Number(i.raw.view042));
|
||||
|
||||
|
||||
chartArea8.setOption({
|
||||
grid: { left: 30, right: 10, bottom: 14, top: 30, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'transparent',
|
||||
extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
|
||||
formatter: function (params) {
|
||||
const p = params[0];
|
||||
const content = `<div style="
|
||||
position:relative;
|
||||
border-left:2px solid #cccccc46;
|
||||
border-right:2px solid #cccccc46;
|
||||
border-radius:5px;
|
||||
background:linear-gradient(to right bottom, #08101D, #1a3b70);
|
||||
color:#ffffff;
|
||||
padding:5px 10px;
|
||||
margin-left:10px;
|
||||
z-index:99;
|
||||
text-align:center;">
|
||||
<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
|
||||
${params[0].name}<br/>
|
||||
热量: ${returnData[p.dataIndex]}
|
||||
</div>`;
|
||||
return content;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: names,
|
||||
axisLabel: { rotate: 0, interval: 0, color: jbztys.value ,fontSize: 16},
|
||||
axisLine: { lineStyle: { color: jbzbzys.value } },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '焦耳',
|
||||
nameLocation: 'end',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff',
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 11
|
||||
},
|
||||
nameGap: 15,
|
||||
axisLabel: {
|
||||
color: jbztys.value,
|
||||
margin: 8,
|
||||
formatter: '{value}'
|
||||
},
|
||||
axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '回水',
|
||||
name: '热量',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: returnData,
|
||||
|
|
@ -882,6 +1343,51 @@ function stopAutoTooltipArea8() {
|
|||
const z = ref<any[]>([]);
|
||||
const doubleZList = computed(() => [...z.value, ...z.value]);
|
||||
|
||||
function filterSongshanData(data) {
|
||||
// 分离松山数据和其他数据
|
||||
const songshanData = data.filter(item => item.raw.view027 === "松山");
|
||||
const otherData = data.filter(item => item.raw.view027 !== "松山");
|
||||
|
||||
// 对松山数据按 view035 降序排序，取最大值的那条
|
||||
if (songshanData.length > 0) {
|
||||
songshanData.sort((a, b) => Number(b.raw.view035) - Number(a.raw.view035));
|
||||
const maxSongshan = songshanData[0];
|
||||
|
||||
// 返回其他数据 + 松山最大值数据
|
||||
return [...otherData, maxSongshan];
|
||||
}
|
||||
|
||||
// 如果没有松山数据，直接返回原数据
|
||||
return data;
|
||||
}
|
||||
|
||||
function sumSongshanData(data) {
|
||||
// 分离松山数据和其他数据
|
||||
const songshanData = data.filter(item => item.raw.view027 === "松山");
|
||||
const otherData = data.filter(item => item.raw.view027 !== "松山");
|
||||
|
||||
// 对松山数据按 view035 降序排序，取最大值的那条
|
||||
if (songshanData.length > 0) {
|
||||
songshanData.sort((a, b) => Number(b.raw.view035) - Number(a.raw.view035));
|
||||
const maxSongshan = songshanData[0];
|
||||
var sumView038 = 0;
|
||||
var sumView042 = 0;
|
||||
for(var i=0;i<songshanData.length;i++){
|
||||
var param = songshanData[i];
|
||||
sumView038 = sumView038 + Number(param.view038);
|
||||
sumView042 = sumView042 + Number(param.sumView042);
|
||||
}
|
||||
maxSongshan.view038 = sumView038;
|
||||
maxSongshan.view042 = sumView042;
|
||||
|
||||
// 返回其他数据 + 松山最大值数据
|
||||
return [...otherData, maxSongshan];
|
||||
}
|
||||
|
||||
// 如果没有松山数据，直接返回原数据
|
||||
return data;
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
const s = await slcx();
|
||||
|
|
@ -916,7 +1422,8 @@ async function loadData() {
|
|||
});
|
||||
|
||||
cityList.value = cities;
|
||||
countyList.value = countys;
|
||||
countyList.value = filterSongshanData(countys);
|
||||
countyAddList.value = sumSongshanData(countys);
|
||||
//
|
||||
const arr2 = (z_ && z_.data) ? z_.data : [];
|
||||
const cities2: { name: string; value: number; raw: any }[] = [];
|
||||
|
|
@ -978,6 +1485,9 @@ onMounted(() => {
|
|||
|
||||
window.addEventListener('resize', handleFullScreenChange);
|
||||
|
||||
getThermalcompany();
|
||||
// getHeatsource();
|
||||
// getHeatsourcestation();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -1034,10 +1544,11 @@ function openModal(type: number, title: string) {
|
|||
function closeModal() {
|
||||
modalVisible.value = false;
|
||||
}
|
||||
function closeCqModal() {
|
||||
modalCqVisible.value = false;
|
||||
}
|
||||
|
||||
async function detailFunc(record) {
|
||||
console.log(record);
|
||||
console.log(modalType);
|
||||
if (modalType.value == 2) {
|
||||
modalVisible3.value = true;
|
||||
await nextTick()
|
||||
|
|
@ -1528,7 +2039,7 @@ function closeModal3() {
|
|||
|
||||
.modal-content {
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
// max-width: 1000px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(6px);
|
||||
border-radius: 12px;
|
||||
|
|
@ -1585,4 +2096,7 @@ function closeModal3() {
|
|||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.cursorPointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ function initChartsOptions(records: any[], record_: any) {
|
|||
legend: { top: 36, left: 'center', textStyle: { color: '#ffffff' } }, // 设置折线图legend文字为白色
|
||||
grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
boundaryGap: false,
|
||||
|
|
|
|||
|
|
@ -158,6 +158,7 @@ function initChartsOptions(records: any[], record_: any) {
|
|||
legend: { top: 36, left: 'center', textStyle: { color: '#ffffff' } }, // 设置折线图legend文字为白色
|
||||
grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'category',
|
||||
data: xAxis,
|
||||
boundaryGap: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue