Skip to content

W
web-project
Commit da07dc47 authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

Merge branch 'master' of gitee.com:tj-wang-yahui/AMS_HeatSys_Vue_V10 

# Conflicts:
#	node_modules/.vite/deps/_metadata.json
parents 9d01b8c4 22ef1c5b
Show whitespace changes
Inline Side-by-side
Showing with 2015 additions and 415 deletions
dist/config.js
View file @ da07dc47
export const ExternalSERVEICE='http://218.69.97.198:8001'
export const WithinSERVEICE='http://192.168.1.252:8001'
// export const ExternalSERVEICE='http://localhost:5013'
// export const WithinSERVEICE='http://localhost:5013'
// export const ExternalSERVEICE='http://218.69.97.198:8001'
// export const WithinSERVEICE='http://192.168.1.252:8001'
export const ExternalSERVEICE='http://localhost:5013'
export const WithinSERVEICE='http://localhost:5013'
export const CURRLOGO="LOGO_gangyi.png"
node_modules/.vite/deps/_metadata.json 0 → 100644
View file @ da07dc47
{
"hash": "76d29559",
"configHash": "2effb732",
"lockfileHash": "415b4f88",
"browserHash": "5ddfa83a",
"optimized": {
"vue": {
"src": "../../vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "6e724a88",
"needsInterop": false
},
"element-plus": {
"src": "../../element-plus/es/index.mjs",
"file": "element-plus.js",
"fileHash": "db311218",
"needsInterop": false
},
"@element-plus/icons-vue": {
"src": "../../@element-plus/icons-vue/dist/index.js",
"file": "@element-plus_icons-vue.js",
"fileHash": "466ff16a",
"needsInterop": false
},
"vue3-smooth-scroll": {
"src": "../../vue3-smooth-scroll/dist/vue-smooth-scroll.min.js",
"file": "vue3-smooth-scroll.js",
"fileHash": "73ac546b",
"needsInterop": true
},
"@kyvg/vue3-notification": {
"src": "../../@kyvg/vue3-notification/dist/index.es.js",
"file": "@kyvg_vue3-notification.js",
"fileHash": "7913f170",
"needsInterop": false
},
"jquery": {
"src": "../../jquery/dist/jquery.js",
"file": "jquery.js",
"fileHash": "953bbb02",
"needsInterop": true
},
"element-plus/dist/locale/zh-cn.mjs": {
"src": "../../element-plus/dist/locale/zh-cn.mjs",
"file": "element-plus_dist_locale_zh-cn__mjs.js",
"fileHash": "7c795d35",
"needsInterop": false
},
"axios": {
"src": "../../axios/index.js",
"file": "axios.js",
"fileHash": "67fae377",
"needsInterop": false
},
"vue-router": {
"src": "../../vue-router/dist/vue-router.mjs",
"file": "vue-router.js",
"fileHash": "036d0e44",
"needsInterop": false
},
"vuex": {
"src": "../../vuex/dist/vuex.esm-bundler.js",
"file": "vuex.js",
"fileHash": "9c4ab673",
"needsInterop": false
},
"echarts": {
"src": "../../echarts/index.js",
"file": "echarts.js",
"fileHash": "a587f8e5",
"needsInterop": false
},
"@amap/amap-jsapi-loader": {
"src": "../../@amap/amap-jsapi-loader/dist/index.js",
"file": "@amap_amap-jsapi-loader.js",
"fileHash": "58817286",
"needsInterop": true
},
"mitt": {
"src": "../../mitt/dist/mitt.mjs",
"file": "mitt.js",
"fileHash": "a116a557",
"needsInterop": false
},
"jsencrypt": {
"src": "../../jsencrypt/lib/index.js",
"file": "jsencrypt.js",
"fileHash": "5f3dd49a",
"needsInterop": false
},
"lodash/cloneDeep": {
"src": "../../lodash/cloneDeep.js",
"file": "lodash_cloneDeep.js",
"fileHash": "7a95577d",
"needsInterop": true
}
},
"chunks": {
"chunk-YFT6OQ5R": {
"file": "chunk-YFT6OQ5R.js"
},
"chunk-LNZ7GA7G": {
"file": "chunk-LNZ7GA7G.js"
},
"chunk-VDFR5PMD": {
"file": "chunk-VDFR5PMD.js"
},
"chunk-ZS7NZCD4": {
"file": "chunk-ZS7NZCD4.js"
}
}
}
\ No newline at end of file
public/config.js
View file @ da07dc47
// export const ExternalSERVEICE='http://218.69.97.198:8001'
// export const WithinSERVEICE='http://192.168.1.252:8001'
export const ExternalSERVEICE='http://localhost:5013'
export const WithinSERVEICE='http://localhost:5013'
export const ExternalSERVEICE='http://218.69.97.198:8001'
export const WithinSERVEICE='http://192.168.1.252:8001'
// export const ExternalSERVEICE='http://localhost:5013'
// export const WithinSERVEICE='http://localhost:5013'
export const CURRLOGO="LOGO_gangyi.png"
src/api/overview.js 0 → 100644
View file @ da07dc47
import http from './http'
//能耗总览页---概况接口
export const postArealist = params => {
return http.post(`/api/overview/Area`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---关口实时数据
export const postGYPipeReal = params => {
return http.post(`/api/gis/GYPipeReal`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---公司当日热量使用情况
export const postAllHeat = params => {
return http.post(`/api/overview/AllHeat`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---公司整体能耗
export const postGYCompanyEnergy = params => {
return http.post(`/api/overview/GYCompanyEnergy`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---近七日气象趋势
export const postGYWeather = params => {
return http.post(`/api/overview/GYWeather`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---服务中心热单耗
export const postGYCenterHeatUc = params => {
return http.post(`/api/overview/GYCenterHeatUc`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---服务中心度日数热耗
export const postGYCenterDayHeatUc = params => {
return http.post(`/api/overview/GYCenterDayHeatUc`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---二次侧水耗
export const postGYCenterWaterUc = params => {
return http.post(`/api/overview/GYCenterWaterUc`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---二次侧电耗
export const postGYCenterElecUc = params => {
return http.post(`/api/overview/GYCenterElecUc`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---万平米流量（一次侧）
export const postGYCenterWPMLL = params => {
return http.post(`/api/overview/GYCenterWPMLL`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---一次侧流量分配
export const postGYSupplyWater = params => {
return http.post(`/api/overview/GYSupplyWater`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---二网均温
export const postGYCenterSecAvgT = params => {
return http.post(`/api/overview/GYCenterSecAvgT`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---二网温差
export const postGYCenterSecAbsT = params => {
return http.post(`/api/overview/GYCenterSecAbsT`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//能耗总览页---二网万平米流量
export const postGYCenterECWPMLL = params => {
return http.post(`/api/overview/GYCenterECWPMLL`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
src/api/report.js
View file @ da07dc47
......@@ -21,6 +21,13 @@ export const postPrintHeatForecast = params => {
})
}
//明日预测报表（保存打印记录）
export const postSaveHeatForecast = params => {
return http.post(`/api/analysis/report/SaveHeatForecast`, params).then(res => res).catch(function (error) {
console.log(error);
})
}
//换热站能耗报表
export const postTransferEnergy = params => {
return http.post(`/api/analysis/report/TransferEnergy`, params).then(res => res).catch(function (error) {
......
src/components/Remote/HolidayControl.vue
View file @ da07dc47
......@@ -243,18 +243,18 @@
transferName:"",
isDisabled: true,
transferStatus: 0,
holidayAction: null,
holidayMonStart: null,
holidayDayStart: null,
holidayHourStart: null,
holidayMonEnd: null,
holidayDayEnd: null,
holidayHourEnd: null,
holidayWeekStart: null,
holidayWeekEnd: null,
holidayConstantTemp: null,
weekHourStart: null,
weekHourEnd: null
holidayAction: false,
holidayMonStart: 0,
holidayDayStart: 0,
holidayHourStart: 0,
holidayMonEnd: 0,
holidayDayEnd: 0,
holidayHourEnd: 0,
holidayWeekStart: 0,
holidayWeekEnd: 0,
holidayConstantTemp: 0,
weekHourStart: 0,
weekHourEnd: 0
});
onMounted(() => {
......@@ -419,46 +419,46 @@
try{
//console.log("write row:"+element.transferName);
var writeValue = "";
if(forms.holidayAction != null && forms.holidayAction != ""){
//if(forms.holidayAction != null && forms.holidayAction != ""){
element.holidayAction=forms.holidayAction;
writeValue +="HolidayAction:"+forms.holidayAction + ";";
}
if(element.holidayMonStart != null && forms.holidayMonStart != ""){
writeValue ="HolidayAction:"+ (forms.holidayAction===true ? "1;":"0;");
// }
// if(element.holidayMonStart != null && forms.holidayMonStart != ""){
element.holidayMonStart=forms.holidayMonStart;
writeValue +="HolidayMonStart:"+forms.holidayMonStart + ";";
}
if(element.holidayDayStart != null && forms.holidayDayStart != ""){
// }
// if(element.holidayDayStart != null && forms.holidayDayStart != ""){
element.holidayDayStart=forms.holidayDayStart;
writeValue +="HolidayDayStart:"+forms.holidayDayStart + ";";
}
if(element.holidayHourStart != null && forms.holidayHourStart != ""){
//}
//if(element.holidayHourStart != null && forms.holidayHourStart != ""){
element.holidayHourStart=forms.holidayHourStart;
writeValue +="HolidayHourStart:"+forms.holidayHourStart + ";";
}
if(element.holidayMonEnd != null && forms.holidayMonEnd != ""){
//}
//if(element.holidayMonEnd != null && forms.holidayMonEnd != ""){
element.holidayMonEnd=forms.holidayMonEnd;
writeValue +="HolidayMonEnd:"+forms.holidayMonEnd + ";";
}
if(element.holidayDayEnd != null && forms.holidayDayEnd != ""){
//}
//if(element.holidayDayEnd != null && forms.holidayDayEnd != ""){
element.holidayDayEnd=forms.holidayDayEnd;
writeValue +="HolidayDayEnd:"+forms.holidayDayEnd + ";";
}
if(element.holidayHourEnd != null && forms.holidayHourEnd != ""){
//}
//if(element.holidayHourEnd != null && forms.holidayHourEnd != ""){
element.holidayHourEnd=forms.holidayHourEnd;
writeValue +="HolidayHourEnd:"+forms.holidayHourEnd + ";";
}
if(element.holidayWeekStart != null && forms.holidayWeekStart != ""){
//}
//if(element.holidayWeekStart != null && forms.holidayWeekStart != ""){
element.holidayWeekStart=forms.holidayWeekStart;
writeValue +="HolidayWeekStart:"+forms.holidayWeekStart + ";";
}
if(element.holidayWeekEnd != null && forms.holidayWeekEnd != ""){
//}
//if(element.holidayWeekEnd != null && forms.holidayWeekEnd != ""){
element.holidayWeekEnd=forms.holidayWeekEnd;
writeValue +="HolidayWeekEnd:"+forms.holidayWeekEnd + ";";
}
if(element.holidayConstantTemp != null && forms.holidayConstantTemp != ""){
//}
//if(element.holidayConstantTemp != null && forms.holidayConstantTemp != ""){
element.holidayConstantTemp=forms.holidayConstantTemp;
writeValue +="HolidayConstantTemp:"+forms.holidayConstantTemp + ";";
}
//}
if(element.weekHourStart != null && forms.weekHourStart != ""){
element.weekHourStart=forms.weekHourStart;
writeValue +="WeekHourStart:"+forms.weekHourStart + ";";
......
src/components/Remote/TransferRegControl.vue
View file @ da07dc47
......@@ -71,7 +71,7 @@
<el-form-item label="4#电调阀给定：" v-if="forms.ecv4OpeningSet != null">
<el-input v-model="forms.ecv4OpeningSet" style="width: 200px;" v-float-number/>
</el-form-item>
<el-form-item label="1#循环泵频率给定" v-if="forms.criclePump1FreqGiven != null">
<el-form-item label="1#循环泵频率给定：" v-if="forms.criclePump1FreqGiven != null">
<el-input v-model="forms.criclePump1FreqGiven" style="width: 200px;" v-float-number/>
</el-form-item>
<el-form-item label="2#循环泵频率给定：" v-if="forms.criclePump2FreqGiven != null">
......
src/components/screenDisplay.vue
View file @ da07dc47
......@@ -220,15 +220,15 @@ import AMapLoader from "@amap/amap-jsapi-loader";
<div class="rightLayer1 rightLayer3" style="margin-top: 7%">
<table v-show="menuGYTransfer == 0">
<tr>
<th style="width: 15%">名称</th>
<th style="width: 20%">名称</th>
<!-- <th v-for="item in gYTransferValue" :key="item.transferId">
{{ item.transferName }}
</th> -->
<th style="width: 14%">一次供温℃</th>
<th style="width: 14%">一次回温℃</th>
<th style="width: 14%">1#阀门开度%</th>
<th style="width: 14%">2#阀门开度%</th>
<th style="width: 14%">3阀门开度%</th>
<th style="width: 13%">一次供温℃</th>
<th style="width: 13%">一次回温℃</th>
<th style="width: 13%">1#阀门开度%</th>
<th style="width: 13%">2#阀门开度%</th>
<th style="width: 13%">3阀门开度%</th>
<th>4阀门开度%</th>
</tr>
<tr v-for="item in gYTransferValue" :key="item.transferId">
......@@ -1492,9 +1492,6 @@ export default defineComponent({
stack: "总量",
label: {
show: true,
// formatter: function (params) {
// return params.value + "%";
// },
position: "inside",
color: "#ffffff",
},
......@@ -1574,9 +1571,6 @@ export default defineComponent({
right: 0;
bottom: 0;
width: 100%;
/* min-width: 1890px; */
/* min-width: 1680px; */
/* min-height: 1080px; */
margin: 0 auto;
overflow: hidden;
}
......@@ -1897,8 +1891,8 @@ export default defineComponent({
}
.gis_content .nodata {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中，如果需要的话 */
align-items: center;
justify-content: center;
font-size: 160%;
color: rgb(25, 247, 255);
}
......
src/router/index.js
View file @ da07dc47
......@@ -392,6 +392,14 @@ const routes = [
title: "循环泵压差控制",
},
},
{
path: "/Remote/CtrlSecondTemp",
name: "CtrlSecondTemp",
component: () => import("@/views/RemotePage/CtrlSecondTemp.vue"),
meta: {
title: "二次网方案",
},
},
{
path: "/Video",
name: "VideoPage",
......
src/utils/toPDF.js 0 → 100644
View file @ da07dc47
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
var noTableHeight = 0 //table外的元素高度
export const htmlPdf = (title, html, fileList, type) => {// type传有效值pdf则为横版
if (fileList) {
const pageHeight = Math.floor(277 * html.scrollWidth / 190) + 20 //计算pdf高度
for (let i = 0; i < fileList.length; i++) { //循环获取的元素
const multiple = Math.ceil((fileList[i].offsetTop + fileList[i].offsetHeight) / pageHeight) //元素的高度
if (isSplit(fileList, i, multiple * pageHeight)) { //计算是否超出一页
var _H = '' //向pdf插入空白块的内容高度
if (fileList[i].localName !== 'tr') { //判断是不是表格里的内容
_H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight)
} else {
_H = multiple * pageHeight - (fileList[i].offsetTop + fileList[i].offsetHeight + noTableHeight) + 20
}
var newNode = getFooterElement(_H) //向pdf插入空白块的内容
const divParent = fileList[i].parentNode // 获取该div的父节点
const next = fileList[i].nextSibling // 获取div的下一个兄弟节点
// 判断兄弟节点是否存在
if (next) {
// 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
divParent.insertBefore(newNode, next)
} else {
// 否则向节点添加最后一个子节点
divParent.appendChild(newNode)
}
}
}
}
html2Canvas(html, {
allowTaint: false,
taintTest: false,
logging: false,
useCORS: true,
dpi: window.devicePixelRatio * 1,
scale: 1 // 按比例增加分辨率
}).then(canvas => {
var pdf = new JsPDF('p', 'mm', 'a4') // A4纸，纵向
var ctx = canvas.getContext('2d')
var a4w = type ? 277 : 190; var a4h = type ? 190 : 277 // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
var renderedHeight = 0
while (renderedHeight < canvas.height) {
var page = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) {
pdf.addPage()// 如果后面还有内容，添加一个空页
}
// delete page;
}
// 保存文件
pdf.save(title + '.pdf')
})
}
// pdf截断需要一个空白位置来补充
const getFooterElement = (remainingHeight, fillingHeight = 0) => {
const newNode = document.createElement('div')
newNode.style.background = '#ffffff'
newNode.style.width = 'calc(100% + 8px)'
newNode.style.marginLeft = '-4px'
newNode.style.marginBottom = '0px'
newNode.classList.add('divRemove')
newNode.style.height = (remainingHeight + fillingHeight) + 'px'
return newNode
}
const isSplit = (nodes, index, pageHeight) => {
// 判断是不是tr 如果不是高度存起来
// 表格里的内容要特殊处理
// tr.offsetTop 是tr到table表格的高度
// 所以计算高速时候要把表格外的高度加起来
// 生成的pdf没有表格了这里可以不做处理 直接计算就行
if (nodes[index].localName !== 'tr') { //判断元素是不是tr
noTableHeight += nodes[index].clientHeight
}
if (nodes[index].localName !== 'tr') {
return nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight
} else {
return nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight + noTableHeight > pageHeight
}
}
\ No newline at end of file
src/views/AlarmPage/AlarmStatusPage.vue
View file @ da07dc47
......@@ -24,10 +24,10 @@
:cell-style="setCellStyle" id="out-table" border highlight-current-row :header-cell-style="setHeaderCellStyle"
:header-cell-class-name="handleHeadAddClass">
<el-table-column prop="index" label="编号" :sortable="false" width="100px" fixed />
<el-table-column prop="name" label="设施名称" :sortable="false" width="250px" fixed />
<el-table-column prop="name" label="设施名称" :sortable="false" fixed />
<el-table-column prop="cnName" label="报警类型" :sortable="false" fixed />
<el-table-column prop="gatherTime" label="报警时间" :sortable="false" width="200px" fixed />
<el-table-column prop="topMost" label="上上限" :sortable="false" width="200px" fixed>
<el-table-column prop="gatherTime" label="报警时间" :sortable="false" fixed />
<el-table-column prop="topMost" label="上上限" :sortable="false" width="100px" fixed>
<template #default="scope">
<div class="div-form-img">
<el-image class="img-center" v-if="getImgUrl(scope, scope.column.property)"
......@@ -35,7 +35,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="upper" label="上限" :sortable="false" width="200px" fixed>
<el-table-column prop="upper" label="上限" :sortable="false" width="100px" fixed>
<template #default="scope">
<div class="div-form-img">
<el-image class="img-center" v-if="getImgUrl(scope, scope.column.property)"
......@@ -43,7 +43,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="lower" label="下限" :sortable="false" width="200px" fixed>
<el-table-column prop="lower" label="下限" :sortable="false" width="100px" fixed>
<template #default="scope">
<div class="div-form-img">
<el-image class="img-center" v-if="getImgUrl(scope, scope.column.property)"
......@@ -51,7 +51,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="downMost" label="下下限" :sortable="false" width="200px" fixed>
<el-table-column prop="downMost" label="下下限" :sortable="false" width="100px" fixed>
<template #default="scope">
<div class="div-form-img">
<el-image class="img-center" v-if="getImgUrl(scope, scope.column.property)"
......
src/views/HandlerPage/OverviewPage.vue
View file @ da07dc47
<template>
<div class="home-contianer">
<div class="h-top">
<div class="h-top-left" id="h-chart1">left</div>
<div class="h-top-center">
<div class="n-item">
<div
@click="open(item)"
class="item"
:class="'item' + (index + 1)"
v-for="(item, index) in center"
:key="index"
class="contentBlock"
id="contentBlock"
v-loading="loading"
element-loading-background="rgba(122, 122, 122, 0.6)"
>
<i
style="font-size: 30px; padding-bottom: 10px"
:class="item.icon"
:size="20"
></i>
<br />
{{ item.title }}
<div class="contentBlockInn" v-if="pageInit">
<div class="flexBlock">
<el-card class="card-contianer" style="width: 46%">
<ul class="titinfoL">
<li>
<div>
当前为{{ areaList.supplyYear ? areaList.supplyYear : "" }}采暖季
</div>
<div>
<span
>已供热
<span style="color: #f00">{{ areaList.runDay }}</span>
天</span
>
</div>
</li>
<li>
<div>
<span>{{ areaList.heArea.toFixed(2) }}万㎡</span>
</div>
<div class="h-top-right task-table">
<h3 class="h3">相关信息</h3>
<table border="0" cellspacing="0" cellpadding="0">
<tr v-for="(row, index) in list" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.desc }}</td>
</tr>
</table>
<div>供热面积</div>
</li>
<li>
<div>
<span>{{ areaList.gasArea.toFixed(2) }}万㎡</span>
</div>
<div>燃气供热面积</div>
</li>
<li>
<div>
<span>{{ areaList.transferCount }}</span>
</div>
<div class="h-chart">
<div id="h-chart6"></div>
<!-- <div class="h-left-grid">
<div class="item" v-for="(item, index) in grid" :key="index">
<div class="icon-text">
<i :class="item.icon"></i>
<span class="name">{{ item.name }}</span>
<div>用户数量</div>
</li>
<li>
<div>
<span>{{ areaList.userCount }}</span>
</div>
<div class="desc">{{ item.desc }}</div>
<div>换热机组</div>
</li>
</ul>
</el-card>
<el-card class="card-contianer" style="width: 34%">
<ul class="titinfoM">
<li>
预测热量
<span>{{ allHeat.value.plannedHeat.toFixed(2) }} GJ</span>
</li>
<li>
实际热量 <span>{{ allHeat.value.realHeat.toFixed(2) }} GJ</span>
</li>
<li>
供热进度 <span>{{ allHeat.value.progress.toFixed(1) }}%</span>
</li>
</ul>
</el-card>
<el-card class="card-contianer" style="width: 20%">
<div class="selcBlock">
<div>数据统计时间</div>
<select @change="timeFun()" v-model="selTime">
<option value="1">近24小时</option>
<option value="2">昨日</option>
<option value="3">近7日</option>
<option value="4">近30日</option>
<option value="5">采暖季</option>
<option value="6">自定义</option>
</select>
</div>
</div>-->
<div id="h-chart2"></div>
<div id="h-chart3"></div>
<div class="block" style="margin-top: 10px">
<el-config-provider :locale="zhCn">
<el-date-picker
v-model="timeV"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
size="small"
style="width: 90%"
format="YYYY-MM-DD HH:mm:ss"
time-format="HH:mm:ss"
@change="seltimeFun"
:disabled="selTimeF"
/>
</el-config-provider>
</div>
<div style="display: flex;">
</el-card>
</div>
<div class="mainBlock">
<div class="mainBlockInn">
<div class="flexBlock subTitBlockL">
<el-card class="card-contianer" style="width: 33%">
<div
id="h-chart4"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
style="font-size: 120%; text-align: center; font-weight: bolder"
>
关口实时数据
</div>
<table
cellpadding="0"
cellspacing="1"
style="background-color: #99bbe8"
class="tableStyle"
>
<tr>
<td></td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ item.supplyName ? item.supplyName : "-" }}
</td>
</tr>
<tr>
<td>供温</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.supplyPipeTemp).toFixed(1) }}
</td>
</tr>
<tr>
<td>回温</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.returnPipeTemp).toFixed(1) }}
</td>
</tr>
<tr>
<td>供压</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.supplyPipePressure).toFixed(2) }}
</td>
</tr>
<tr>
<td>回压</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.returnPipePressure).toFixed(2) }}
</td>
</tr>
<tr>
<td>流量</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.supplyFlow).toFixed(2) }}
</td>
</tr>
<tr>
<td>热功率</td>
<td v-for="item in gYPipeReal.value" :key="item">
{{ parseFloat(item.supplyFlowSum / 10000).toFixed(2) }} 万
</td>
</tr>
</table>
</el-card>
<el-card class="card-contianer subTitBlockM" style="width: 33%">
<div
id="h-chart5"
style="height: 350px; background: white; flex: 1;padding-top:15px;"
></div>
style="font-size: 120%; text-align: center; font-weight: bolder"
>
{{ gYCompanyEnergy.value.enterpriseName }}
</div>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 60px">热耗</td>
<td>
<div>
<span
>{{ gYCompanyEnergy.value.heatUc.toFixed(4) }}W/㎡</span
>
</div>
</template>
<script>
import * as echarts from 'echarts';
import { chart1, chart2, chart3, chart4, chart5 } from '../Chart/home-chart-options';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart2;
export default {
components: {},
data() {
return {
center: [
{
title: '系统消息',
icon: 'el-icon-set-up',
url: ''
},
{
title: '工具条',
icon: 'el-icon-turn-off',
url: ''
}
],
n: 90,
value1: '1',
applicants: {
//报名信息
day: 20, //本日
week: 150, //本周
month: 1200, //本月
totalBoy: 800,
totalGirl: 890,
taotal: 1690
}, //报名信息
list: [
{ desc: '总供热面积（万m³）：484232.7398' },
{ desc: '当日平均温度（℃）：30' },
{ desc: '耗热量（GJ）：0' },
{ desc: '热单耗（w/m）：0' },
{ desc: '耗电量（A）：0' },
{
desc: '耗水量（t）：0'
},
{
desc: '耗气量（Nm³）：0'
}
],
grid: [
{
name: '用户管理',
desc: '系统用户管理,注册用户3000000人。',
icon: 'el-icon-user'
},
{
name: '站内消息',
desc: '您有一条新的消息,请及时处理。',
icon: 'el-icon-chat-dot-round'
},
{
name: '系统管理',
desc: '这里放点什么,还没想好。',
icon: 'el-icon-setting'
},
{
name: '还没想好',
desc: '这里不知道应该放点什么或者写点什么。',
icon: 'el-icon-document'
},
{
name: '语音导航',
desc: '高德地图林志玲为您语音导航。',
icon: 'el-icon-microphone'
},
{
name: '垃圾回收',
desc: '删除过的数据在此处找回。。。。',
icon: 'el-icon-delete'
<!-- <div><span>40W/㎡</span></div> -->
</td>
<td>水耗</td>
<td>
<span
>{{ gYCompanyEnergy.value.waterUc.toFixed(2) }}kg/㎡</span
>
</td>
</tr>
<tr>
<td style="height: 20px"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width: 60px">
<div>度日数</div>
热耗
</td>
<td>
<div>
<span
>{{
gYCompanyEnergy.value.dayHeatUc.toFixed(4)
}}W/㎡*℃</span
>
</div>
</td>
<td>电耗</td>
<td>
<span
>{{ gYCompanyEnergy.value.elecUc.toFixed(4) }}WH/㎡</span
>
</td>
</tr>
</table>
</el-card>
<el-card class="card-contianer" style="width: 33%">
<div class="echartLayer1" id="echartLayer1"></div>
</el-card>
</div>
<div class="flexBlock">
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 20%"
>
<div class="echartLayer2" id="echartLayer2"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 20%"
>
<div class="echartLayer3" id="echartLayer3"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 20%"
>
<div class="echartLayer4" id="echartLayer4"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 20%"
>
<div class="echartLayer5" id="echartLayer5"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 20%"
>
<div class="echartLayer6" id="echartLayer6"></div>
</el-card>
</div>
<div class="flexBlock">
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 25%"
>
<div class="echartLayer7" id="echartLayer7"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 25%"
>
<div class="echartLayer8" id="echartLayer8"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 25%"
>
<div class="echartLayer9" id="echartLayer9"></div>
</el-card>
<el-card
class="card-contianer"
body-style="padding:5%;"
style="width: 25%"
>
<div class="echartLayer10" id="echartLayer10"></div>
</el-card>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {
ref,
reactive,
onBeforeMount,
onMounted,
onUnmounted,
onActivated,
onDeactivated,
} from "vue";
import * as echarts from "echarts";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus";
import {
postArealist,
postGYPipeReal,
postAllHeat,
postGYCompanyEnergy,
postGYWeather,
postGYCenterHeatUc,
postGYCenterWaterUc,
postGYCenterElecUc,
postGYCenterWPMLL,
postGYCenterSecAvgT,
postGYCenterSecAbsT,
postGYCenterECWPMLL,
postGYCenterDayHeatUc,
postGYSupplyWater,
} from "../../api/overview";
let timerID = ref();
const pageInit = ref(false);
const areaList = reactive({
supplyYear: "2024-2025",
runDay: 0,
heArea: 8794624.8564,
gasArea: 481832.7398,
transferCount: 162,
userCount: 76177,
});
const loading = ref(false);
const allHeat = reactive([]);
const gYPipeReal = reactive([]);
const gYCompanyEnergy = reactive([]);
const gYCenterHeatUc = reactive([]);
const gYWeather = reactive({
time: [],
data1: [],
data2: [],
});
const selTime = ref("1");
const params = {
startTime: null,
endTime: null,
};
const timeV = ref("");
const selTimeF = ref(true);
//能耗总览页---概况接口
function postArealistFun() {
loading.value = true;
postArealist().then((res) => {
if (res.success === true) {
areaList.supplyYear = res.data[0].supplyYear;
areaList.runDay = res.data[0].runDay;
areaList.heArea = res.data[0].heArea;
areaList.gasArea = res.data[0].gasArea;
areaList.transferCount = res.data[0].transferCount;
areaList.userCount = res.data[0].userCount;
} else {
loading.value = false;
ElMessage.error(res.message);
}
]
};
},
setup() {
let open = (item) => {
window.open(item.url, '_blank');
};
let interval;
onMounted(() => {
$chart = echarts.init(document.getElementById('h-chart1'));
$chart.setOption(chart1);
$chart2 = echarts.init(document.getElementById('h-chart2'));
$chart2.setOption(chart2);
postGYPipeRealFun();
});
}
// interval = setInterval(() => {
// chart2.xAxis[0].data.splice(0, 1);
// let lastYear =
// chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1;
// chart2.xAxis[0].data.push(lastYear);
function postGYPipeRealFun() {
postGYPipeReal().then((res) => {
if (res.success === true) {
gYPipeReal.value = res.data;
} else {
loading.value = false;
ElMessage.error(res.message);
}
postAllHeatFun();
});
}
// chart2.series[0].data.splice(0, 1);
// chart2.series[0].data.push(~~(Math.random() * 1000));
function postAllHeatFun() {
postAllHeat().then((res) => {
if (res.success === true) {
allHeat.value = res.data[0];
} else {
loading.value = false;
ElMessage.error(res.message);
}
postGYCompanyEnergyFun();
});
}
// chart2.series[1].data.splice(0, 1);
// chart2.series[1].data.push(~~(Math.random() * 1000));
// $chart2.setOption(chart2);
// }, 2000);
function postGYCompanyEnergyFun() {
postGYCompanyEnergy().then((res) => {
if (res.success === true) {
gYCompanyEnergy.value = res.data[0];
} else {
loading.value = false;
ElMessage.error(res.message);
}
postGYWeatherFun();
});
}
$chart3 = echarts.init(document.getElementById('h-chart3'));
$chart3.setOption(chart3);
let $chart4 = echarts.init(document.getElementById('h-chart4'));
$chart4.setOption(chart4);
let $chart5 = echarts.init(document.getElementById('h-chart5'));
$chart5.setOption(chart2);
let $chart6 = echarts.init(document.getElementById('h-chart6'));
$chart6.setOption(chart5);
});
onUnmounted(() => {
interval && clearInterval(interval);
if ($chart) {
$chart.dispose();
$chart2.dispose();
$chart3.dispose();
$chart5.dispose();
//近七日气象趋势
function postGYWeatherFun() {
postGYWeather().then((res) => {
if (res.success === true) {
gYWeather.data1 = [];
gYWeather.data2 = [];
gYWeather.time = [];
res.data.forEach((element, index) => {
if (index % 2 == 0) {
gYWeather.time.push(element.gatherTime);
gYWeather.data1.push(element.temperature);
} else {
gYWeather.data2.push(element.temperature);
}
});
return { open };
},
destroyed() {
$chart2 = null;
} else {
loading.value = false;
ElMessage.error(res.message);
}
};
var $chart, $chart2, $chart3;
// window.addEventListener("resize", function () {
// $chart2.setOption(chart2);
// });
</script>
<style lang="less" scoped>
.home-contianer {
padding: 6px;
background: #eee;
width: 100%;
height: 100%;
// max-width: 800px;
// position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
pageInit.value = true;
setTimeout(function () {
echartInit1();
}, 500);
postGYCenterHeatUcFun();
});
}
.h-top {
display: flex;
.h-top-left {
height: 100%;
width: 300px;
background: white;
}
height: 300px;
//服务中心热单耗
function postGYCenterHeatUcFun() {
postGYCenterHeatUc(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data.ucData);
let totalData = [];
res.data.totalData.forEach((element) => {
totalData.push((element / 10000).toFixed(4));
});
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.h-top > div {
border: 1px solid #e8e7e7;
border-radius: 5px;
// margin: 6px;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit2(totalData, timeData, ucData);
postGYCenterDayHeatUcFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
.h-top-center {
height: 100%;
background: white;
margin: 0 6px;
display: flex;
flex-direction: column;
flex: 1;
.item1 .num {
padding-top: 28px;
});
}
//服务中心度日数热耗
function postGYCenterDayHeatUcFun() {
postGYCenterDayHeatUc(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data.ucData);
let totalData = [];
res.data.totalData.forEach((element) => {
totalData.push((element / 10000).toFixed(4));
});
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.item2 .num {
padding-bottom: 20px;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit3(totalData, timeData, ucData);
postGYCenterWaterUcFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
});
}
.n-item {
width: 100%;
height: 100%;
text-align: center;
cursor: pointer;
// display: flex;
.item {
border-right: 1px solid #e5e5e5;
width: 33.3333333%;
float: left;
height: 50%;
border-bottom: 1px solid #e5e5e5;
padding: 47px 0;
font-size: 13px;
//二次侧水耗
function postGYCenterWaterUcFun() {
postGYCenterWaterUc(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit4(timeData, ucData);
postGYCenterElecUcFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
.item:last-child {
border-right: 0;
});
}
//二次侧电耗
function postGYCenterElecUcFun() {
postGYCenterElecUc(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.item3,
.item6 {
border-right: 0;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit5(timeData, ucData);
postGYCenterWPMLLFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
.num {
word-break: break-all;
color: #282727;
font-size: 30px;
transition: transform 0.8s;
});
}
//万平米流量（一次侧）
function postGYCenterWPMLLFun() {
postGYCenterWPMLL(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.num:hover {
color: #55ce80;
transform: scale(1.2);
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit6(timeData, ucData);
postGYSupplyWaterFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
.text {
font-size: 13px;
color: #777;
});
}
//一次侧流量分配
function postGYSupplyWaterFun() {
postGYSupplyWater(params).then((res) => {
if (res.success === true) {
const data = res.data;
let dataList = [];
data.forEach((element, index) => {
let arr = {
value: element.waterRecord,
name: element.supplyName,
};
dataList.push(arr);
});
echartInit7(dataList);
postGYCenterSecAvgTFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
});
}
//能耗总览页---二网均温
function postGYCenterSecAvgTFun() {
postGYCenterSecAvgT(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit8(timeData, ucData);
postGYCenterSecAbsTFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
.h-top-right {
// flex: 1;
});
}
width: 400px;
height: 100%;
background: white;
//二网温差
function postGYCenterSecAbsTFun() {
postGYCenterSecAbsT(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.h3 {
padding: 7px 15px;
font-weight: 500;
background: #fff;
border-bottom: 1px dotted #d4d4d4;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit9(timeData, ucData);
postGYCenterECWPMLLFun();
} else {
loading.value = false;
ElMessage.error(res.message);
}
});
}
//二网万平米流量
function postGYCenterECWPMLLFun() {
postGYCenterECWPMLL(params).then((res) => {
if (res.success === true) {
const data = dataDeal(res.data);
let ucData = [];
let timeData = [];
data.forEach((element, index) => {
let arr = [];
element.listInfo.forEach((item) => {
if (index == 0) {
timeData.push(item.supplyYear);
}
.task-table {
table {
width: 100%;
.thead {
font-weight: bold;
arr.push(item.uc);
});
ucData.push(arr);
});
echartInit10(timeData, ucData);
loading.value = false;
} else {
loading.value = false;
ElMessage.error(res.message);
}
tr {
cursor: pointer;
td {
border-bottom: 1px solid #f3f3f3;
padding: 9px 8px;
font-size: 12px;
});
}
function dataDeal(data) {
var listArr = [];
data.forEach(function (el, index) {
for (var i = 0; i < listArr.length; i++) {
if (listArr[i].centerId == el.centerId) {
listArr[i].listInfo.push({
centerId: el.centerId,
centerName: el.centerName,
supplyYear: el.supplyYear,
total: el.total,
uc: el.uc.toFixed(4),
});
return;
}
}
tr:hover {
background: #eee;
listArr.push({
centerId: el.centerId,
centerName: el.centerName,
listInfo: [
{
supplyYear: el.supplyYear,
total: el.total,
uc: el.uc.toFixed(4),
},
],
});
});
return listArr;
}
function echartInit1() {
var chartDom = document.getElementById("echartLayer1");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "近七日气温走势",
left: "center",
fontSize: 12,
},
legend: {
show: true,
left: "center",
top: 30,
right: 0,
bottom: 0,
},
tooltip: {
trigger: "axis",
},
grid: {
top: 50,
left: 30,
right: 30,
bottom: 20,
},
xAxis: {
type: "category",
data: gYWeather.time,
},
yAxis: {
type: "value",
},
series: [
{
name: "集团数据",
data: gYWeather.data1,
type: "line",
},
{
name: "采集数据",
data: gYWeather.data2,
type: "line",
},
],
};
option && myChart.setOption(option);
}
function echartInit2(totalData, timeData, ucData) {
var chartDom = document.getElementById("echartLayer2");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "热单耗W/㎡",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 9,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 40,
bottom: 35,
},
xAxis: {
type: "category",
// data: ["港东中心", "城区中心"],
data: timeData,
axisLabel: {
rotate: 20, // X轴标签倾斜 45 度
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
position: "right",
axisLabel: {
formatter: "{value}万",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#009dff",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#22e4ff",
},
},
{
name: "累计量",
yAxisIndex: 1,
data: totalData,
type: "line",
itemStyle: {
color: "#eb7a00",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit3(totalData, timeData, ucData) {
var chartDom = document.getElementById("echartLayer3");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "度热数热耗W/㎡·℃",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 40,
bottom: 35,
},
xAxis: {
type: "category",
data: timeData,
axisLabel: {
rotate: 20, // X轴标签倾斜 45 度
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
position: "right",
axisLabel: {
formatter: "{value}万",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#fca919",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#c94005",
},
},
{
name: "累计量",
yAxisIndex: 1,
data: totalData,
type: "line",
},
],
};
option && myChart.setOption(option);
}
function echartInit4(timeData, ucData) {
var chartDom = document.getElementById("echartLayer4");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "二次侧水耗kg/㎡",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
// data: ["港东中心", "城区中心"],
data: timeData,
axisLabel: {
rotate: 20, // X轴标签倾斜 45 度
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#a7ff96",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#3ed048",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit5(timeData, ucData) {
var chartDom = document.getElementById("echartLayer5");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "二次侧电耗kWh/㎡",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 50,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
data: timeData,
axisLabel: {
rotate: 20,
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#a7ff96",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#3ed048",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit6(timeData, ucData) {
var chartDom = document.getElementById("echartLayer6");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "万平米流量(一次侧)",
left: "center",
fontSize: 9,
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
// data: ["港东中心", "城区中心"],
data: timeData,
axisLabel: {
rotate: 20, // X轴标签倾斜 45 度
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#a7ff96",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#3ed048",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit7(data) {
var chartDom = document.getElementById("echartLayer7");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "一次侧流量分配",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "item",
textStyle: {
fontSize: 9,
},
formatter: "{a} <br/>{b} : {c} ({d}%)",
position: "top",
},
grid: {
top: 50,
left: 25,
right: 25,
bottom: 20,
},
series: [
{
name: "一次侧流量分配",
type: "pie",
radius: ["30%", "65%"],
center: ["50%", "70%"],
roseType: "area",
data: data,
label: {
normal: {
show: true,
position: "outside",
formatter: "{b}",
distance: 2,
textStyle: {
fontWeight: "bold",
fontSize: 9,
},
rotate: "auto",
},
},
// data: [
// { value: 40, name: timeData[0] },
// { value: 30, name: timeData[1] },
// { value: 30, name: timeData[2] },
// { value: 40, name: timeData[0] },
// { value: 30, name: timeData[1] },
// { value: 30, name: timeData[2] },
// ],
},
],
};
option && myChart.setOption(option);
}
function echartInit8(timeData, ucData) {
var chartDom = document.getElementById("echartLayer8");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "二网均温℃",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 40,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
data: timeData,
axisLabel: {
rotate: 20,
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#f89441",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#ff4d00",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit9(timeData, ucData) {
var chartDom = document.getElementById("echartLayer9");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "二次温差℃",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
data: timeData,
axisLabel: {
rotate: 20,
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#42acee",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#2356ae",
},
},
],
};
option && myChart.setOption(option);
}
function echartInit10(timeData, ucData) {
var chartDom = document.getElementById("echartLayer10");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "二网万米流量t/㎡",
left: "center",
fontSize: 9,
},
legend: {
show: true,
left: "center",
top: 20,
right: 0,
bottom: 0,
textStyle: {
width: 1,
fontSize: 8,
padding: 0,
margin: 0,
},
},
tooltip: {
trigger: "axis",
textStyle: {
fontSize: 9,
},
position: "top",
},
grid: {
top: 60,
left: 35,
right: 10,
bottom: 35,
},
xAxis: {
type: "category",
data: timeData,
axisLabel: {
rotate: 20,
textStyle: {
fontSize: 9,
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "港东中心",
data: ucData[0],
type: "bar",
itemStyle: {
color: "#42acee",
},
},
{
name: "城区中心",
data: ucData[1],
type: "bar",
itemStyle: {
color: "#2356ae",
},
},
],
};
option && myChart.setOption(option);
}
function dateFormatter(formatter, date) {
date = date ? new Date(date) : new Date();
const Y = date.getFullYear() + "",
M = date.getMonth() + 1,
D = date.getDate(),
H = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds();
return formatter
.replace(/YYYY|yyyy/g, Y)
.replace(/YY|yy/g, Y.substr(2, 2))
.replace(/MM/g, (M < 10 ? "0" : "") + M)
.replace(/DD/g, (D < 10 ? "0" : "") + D)
.replace(/HH|hh/g, (H < 10 ? "0" : "") + H)
.replace(/mm/g, (m < 10 ? "0" : "") + m)
.replace(/ss/g, (s < 10 ? "0" : "") + s);
}
function seltimeFun(e) {
(params.startTime = dateFormatter("YYYY-MM-DD HH:mm:ss", timeV.value[0])),
(params.endTime = dateFormatter("YYYY-MM-DD HH:mm:ss", timeV.value[1])),
setTimeout(function () {
postArealistFun();
}, 500);
}
function timeFun() {
selTimeF.value = true;
const today = new Date();
let nowYear = today.getFullYear();
let nextYear = today.getFullYear() + 1;
let preYear = today.getFullYear() - 1;
let preday = new Date(today);
preday.setDate(preday.getDate() - 1);
let sevenday = new Date(today);
sevenday.setDate(sevenday.getDate() - 7);
let thirtyday = new Date(today);
thirtyday.setDate(thirtyday.getDate() - 30);
const prehour = new Date(today.getTime() - 60 * 60 * 1000);
const hour = today.getHours();
switch (selTime.value) {
case "1":
params.startTime =
preday.toISOString().split("T")[0] + " " + hour + ":00:00";
params.endTime =
today.toISOString().split("T")[0] + " " + hour + ":00:00";
postArealistFun();
break;
case "2":
params.startTime = preday.toISOString().split("T")[0] + " " + "00:00:00";
params.endTime = today.toISOString().split("T")[0] + " " + "23:00:00";
postArealistFun();
break;
case "3":
params.startTime =
sevenday.toISOString().split("T")[0] + " " + "00:00:00";
params.endTime = today.toISOString().split("T")[0] + " " + "23:00:00";
postArealistFun();
break;
case "4":
params.startTime =
thirtyday.toISOString().split("T")[0] + " " + "00:00:00";
params.endTime = today.toISOString().split("T")[0] + " " + "23:00:00";
postArealistFun();
break;
case "5":
params.startTime = nowYear + "-11-01" + " " + "00:00:00";
params.endTime = nextYear + "-03-31" + " " + "23:00:00";
postArealistFun();
break;
case "6":
selTimeF.value = false;
break;
}
}
function addTimer() {
let timeOff = true;
timerID = setInterval(() => {
const time = new Date();
let minutes = time.getMinutes().toString().padStart(2, "0");
if (minutes == 15) {
if (timeOff) {
timeOff = false;
postArealistFun();
}
} else {
timeOff = true;
}
.h-chart {
height: 340px;
margin: 6px 0px;
}, 1000);
}
function clearIntervalExample() {
clearInterval(timerID);
}
onMounted(() => {
timeFun();
addTimer();
window.addEventListener("resize", function () {
location.reload();
});
});
onUnmounted(() => {
clearIntervalExample();
});
</script>
<style lang="less" scoped>
.contentBlock {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
font-size: 16px;
}
.flexBlock,
.selcBlock {
display: flex;
.h-left-grid {
width: 300px;
height: 100%;
background: white;
display: inline-block;
.name {
margin-left: 7px;
}
.item:hover {
background: #f9f9f9;
cursor: pointer;
}
.item {
padding: 22px 14px;
float: left;
width: 50%;
height: 33.33333%;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
i {
font-size: 30px;
}
.desc {
font-size: 12px;
color: #c3c3c3;
padding: 5px 0 0 4px;
line-height: 1.5;
}
}
}
}
#h-chart2 {
border-radius: 3px;
background: white;
padding-top: 10px;
height: 100%;
width: 0;
flex: 1;
margin: 0 7px;
justify-content: space-around;
}
.card-contianer {
margin: 0.5%;
padding: 0;
}
ul.titinfoL,
ul.titinfoM {
display: flex;
justify-content: space-around;
align-items: center;
height: 6vh;
}
ul.titinfoL li,
ul.titinfoM li {
font-size: 80%;
}
ul.titinfoL li div,
ul.titinfoM li div {
text-align: center;
}
ul.titinfoL li span,
ul.titinfoM li span {
font-size: 130%;
font-weight: bolder;
}
.custom-select-size {
font-size: 50px !important;
}
.selcBlock {
font-size: 80%;
}
.selcBlock select {
width: 60%;
padding: 1px 5px;
}
.el-card__body {
padding: 0 !important;
}
.subTitBlockL table {
width: 100%;
}
.subTitBlockL table td {
background-color: #ffffff;
font-size: 80%;
padding: 0.5%;
}
.subTitBlockM table {
margin-top: 6%;
}
.subTitBlockM table td span {
font-size: 140%;
font-weight: bolder;
padding: 10% 3%;
}
.echartLayer1 {
height: 25vh;
}
.echartLayer2,
.echartLayer3,
.echartLayer4,
.echartLayer5,
.echartLayer6,
.echartLayer7,
.echartLayer8,
.echartLayer9,
.echartLayer10 {
height: 30vh;
}
.mainBlock {
width: 100%;
height: 66vh;
overflow: auto;
}
.tableStyle td {
text-align: center;
}
@media (min-width: 1700px) {
.mainBlock {
height: 73vh;
}
#h-chart3 {
border-radius: 3px;
padding: 10px 10px 0 10px;
background: white;
// padding-top: 10px;
height: 100%;
width: 400px;
}
@media (min-width: 2560px) {
.mainBlock {
height: 78vh;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
src/views/HandlerPage/QOQ.vue
View file @ da07dc47
......@@ -370,6 +370,7 @@ function postExternalQOQFun() {
break;
}
let params = {
enterpriseId: store.getters.getEnterpriseId(),
supplyIdList: networkType.value == 1 ? enertyInfo.supplyIdList : null,
idList: networkType.value == 2 ? enertyInfo.idList : null,
startTime: enertyInfo.startTime,
......@@ -382,7 +383,7 @@ function postExternalQOQFun() {
postExternalQOQ(params).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
if (res.data.hourWater.length >0) {
if (res.data.hourWater.length > 0) {
pageInitFun(res);
tableData = res.data.hourWater;
}
......@@ -394,7 +395,7 @@ function postExternalQOQFun() {
postWithinQOQ(params).then((res) => {
echarts.dispose(document.getElementById("echartsLayer"));
if (res.success === true) {
if (res.data.data.length >0) {
if (res.data.data.length > 0) {
pageInitFun(res);
tableData = res.data.hourWater;
}
......@@ -446,16 +447,6 @@ function pageInitFun(res) {
});
echartSeries.push(
// {
// name: element.transferName + "温度",
// type: "line",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ℃";
// },
// },
// data: data1,
// },
{
name: element.transferName + "能耗",
type: "bar",
......
src/views/RemotePage/CtrlSecondTemp.vue 0 → 100644
View file @ da07dc47
<template>
<el-card class="card-contianer">
<label>二次网供水方案列表：</label>
<!-- <el-select v-model="value" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> -->
</el-card>
</template>
\ No newline at end of file
src/views/login/login.vue
View file @ da07dc47
......@@ -210,7 +210,8 @@ import {
getCurrentInstance,
onMounted,
onUpdated,
onBeforeUnmount
onBeforeUnmount,
handleError
} from 'vue';
import { User, Lock } from '@element-plus/icons-vue'
......@@ -290,7 +291,7 @@ function login() {
}
loading.value = true;
userInfo.verificationCode = code.value;
code.value='';
http.post('/api/user/login', userInfo, '正在登录....').then((result) => {
if (!result.success) {
loading.value = false;
......@@ -306,4 +307,11 @@ function login() {
});
}
function handleKeyEvent(event){
if(event.key === 'Enter'){
login();
}
}
window.addEventListener('keydown',handleKeyEvent);
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment