Browse Source
2、添加日历控制一键开关机（分时段控制）、节假日自己控制； 3、热平衡记录分析（冷冻水侧与冷却水侧的能量对比、热平衡率、热平衡偏差），其中热平衡率、热平衡偏差是折线，其余是柱状图；颗粒度是每分钟显示； 4、监控界面右下角添加热平衡率实时显示；bl_ai
11 changed files with 2590 additions and 11 deletions
@ -0,0 +1,514 @@
|
||||
<template> |
||||
<div class="schedule-panel"> |
||||
<!-- 顶部：全局状态与一键开关 --> |
||||
<el-row type="flex" align="middle" class="global-header"> |
||||
<el-col :span="12"> |
||||
<div class="global-switch"> |
||||
<span class="label">一键总开关</span> |
||||
<el-switch |
||||
v-model="globalSwitch" |
||||
active-text="开启" |
||||
inactive-text="关闭" |
||||
@change="handleGlobalSwitch" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<div class="status-card"> |
||||
<p><span class="label">当前时间：</span>{{ currentTime }}</p> |
||||
<p><span class="label">今日计划：</span>{{ todayPlan }}</p> |
||||
<p><span class="label">下次动作：</span>{{ nextAction }}</p> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
<div class="date-content"> |
||||
<div class="date-left"> |
||||
<!-- 中部：常规时段设置（周循环） --> |
||||
<el-card class="section-card"> |
||||
<div slot="header" class="section-header"> |
||||
<span>常规时段设置</span> |
||||
<el-radio-group v-model="scheduleMode" size="small"> |
||||
<el-radio-button label="normal">普通模式</el-radio-button> |
||||
<el-radio-button label="advanced">高级模式</el-radio-button> |
||||
</el-radio-group> |
||||
</div> |
||||
|
||||
<!-- 普通模式：一周统一规则（此处仅展示示例，实际可按 mode 切换） --> |
||||
<el-form v-if="scheduleMode === 'normal'" label-width="150px"> |
||||
<el-form-item label="工作日(周一~周五)"> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="workdayRange1" |
||||
range-separator="至" |
||||
start-placeholder="开机时间" |
||||
end-placeholder="关机时间" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
<span class="time-range-sep">+</span> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="workdayRange2" |
||||
range-separator="至" |
||||
start-placeholder="开机时间" |
||||
end-placeholder="关机时间" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item label="周六"> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="saturdayRange" |
||||
range-separator="至" |
||||
start-placeholder="开机时间" |
||||
end-placeholder="关机时间" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item label="周日"> |
||||
<el-checkbox v-model="sundayOff">全天关机</el-checkbox> |
||||
<el-time-picker |
||||
v-if="!sundayOff" |
||||
is-range |
||||
v-model="sundayRange" |
||||
range-separator="至" |
||||
start-placeholder="开机时间" |
||||
end-placeholder="关机时间" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<!-- 高级模式：每天独立设置（简化示例，可扩展为表格） --> |
||||
<el-form v-else label-width="80px"> |
||||
<div v-for="day in weekDays" :key="day.value" class="daily-item"> |
||||
<el-form-item :label="day.label"> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="day.ranges[0]" |
||||
range-separator="至" |
||||
start-placeholder="开机" |
||||
end-placeholder="关机" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
size="mini" |
||||
> |
||||
</el-time-picker> |
||||
<span class="time-range-sep">+</span> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="day.ranges[1]" |
||||
range-separator="至" |
||||
start-placeholder="开机" |
||||
end-placeholder="关机" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
size="mini" |
||||
> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
</div> |
||||
</el-form> |
||||
</el-card> |
||||
<el-card class="section-card"> |
||||
<div slot="header" class="section-header"> |
||||
<span>节假日与特殊日控制</span> |
||||
<el-button type="primary" size="small" @click="dialogVisible = true" |
||||
>+ 添加例外日</el-button |
||||
> |
||||
</div> |
||||
|
||||
<el-table :data="exceptionList" stripe style="width: 100%"> |
||||
<el-table-column |
||||
prop="date" |
||||
label="日期" |
||||
width="120" |
||||
></el-table-column> |
||||
<el-table-column |
||||
prop="week" |
||||
label="星期" |
||||
width="80" |
||||
></el-table-column> |
||||
<el-table-column prop="type" label="类型" width="100"> |
||||
<template slot-scope="scope"> |
||||
<el-tag :type="scope.row.type | typeTag">{{ |
||||
scope.row.type |
||||
}}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="rule" label="执行规则"></el-table-column> |
||||
<el-table-column label="操作" width="150"> |
||||
<template slot-scope="scope"> |
||||
<el-button size="mini" @click="editException(scope.row)" |
||||
>编辑</el-button |
||||
> |
||||
<el-button |
||||
size="mini" |
||||
type="danger" |
||||
@click="deleteException(scope.row)" |
||||
>删除</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<!-- 添加例外日的弹窗 --> |
||||
<el-dialog |
||||
title="添加例外日" |
||||
:visible.sync="dialogVisible" |
||||
width="600px" |
||||
> |
||||
<el-form label-width="80px"> |
||||
<el-form-item label="日期"> |
||||
<el-date-picker |
||||
v-model="newException.date" |
||||
type="date" |
||||
placeholder="选择日期" |
||||
format="yyyy-MM-dd" |
||||
></el-date-picker> |
||||
</el-form-item> |
||||
<el-form-item label="规则"> |
||||
<el-radio-group v-model="newException.ruleType"> |
||||
<el-radio label="off">全天关闭</el-radio> |
||||
<el-radio label="on">全天开启</el-radio> |
||||
<el-radio label="custom">自定义时段</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item |
||||
v-if="newException.ruleType === 'custom'" |
||||
label="时段" |
||||
> |
||||
<el-time-picker |
||||
is-range |
||||
v-model="newException.customRange" |
||||
range-separator="至" |
||||
start-placeholder="开机" |
||||
end-placeholder="关机" |
||||
format="HH:mm" |
||||
> |
||||
</el-time-picker> |
||||
</el-form-item> |
||||
<el-form-item label="年度循环"> |
||||
<el-checkbox v-model="newException.recurring" |
||||
>每年生效</el-checkbox |
||||
> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer"> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<el-button type="primary" @click="saveException">保存</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</el-card> |
||||
</div> |
||||
<!-- 下部：节假日与特殊日控制 + 日历视图（左右布局） --> |
||||
<div class="date-right exception-section"> |
||||
<el-card class="section-card"> |
||||
<div slot="header" class="section-header"> |
||||
<span>日历视图</span> |
||||
<el-button type="text" @click="syncHolidays">同步节假日</el-button> |
||||
</div> |
||||
<!-- 日历组件：v-model 绑定当前显示的月份 --> |
||||
<el-calendar v-model="calendarDate"> |
||||
<!-- 作用域插槽：使用 slot-scope="scope" 访问 scope.data --> |
||||
<template slot="dateCell" slot-scope="scope"> |
||||
<div class="calendar-cell" :class="getDayClass(scope.data.day)"> |
||||
<!-- 显示月-日，去掉年份 --> |
||||
{{ scope.data.day.split("-").slice(1).join("-") }} |
||||
</div> |
||||
</template> |
||||
</el-calendar> |
||||
</el-card> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 底部：操作按钮与优先级说明 --> |
||||
<el-row |
||||
type="flex" |
||||
justify="space-between" |
||||
align="middle" |
||||
class="footer-actions" |
||||
> |
||||
<el-col :span="12"> |
||||
<div class="priority-note"> |
||||
优先级：特殊日规则 > 节假日规则 > 周循环规则 |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="12" class="text-right"> |
||||
<el-button @click="handleCancel">取消</el-button> |
||||
<span class="div-primary" style="margin-left: 10px" |
||||
><el-button type="primary" @click="handleSave">保存</el-button></span |
||||
> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
// 模拟数据与简单逻辑 |
||||
export default { |
||||
name: "EnergySchedule", |
||||
data() { |
||||
return { |
||||
globalSwitch: true, |
||||
currentTime: "2024-03-20 14:30 星期三", |
||||
todayPlan: "08:00 - 17:30", |
||||
nextAction: "下次开机 明天 08:00", |
||||
scheduleMode: "normal", // normal / advanced |
||||
// 普通模式数据 |
||||
workdayRange1: ["08:00", "12:00"], |
||||
workdayRange2: ["13:00", "17:30"], |
||||
saturdayRange: ["09:00", "12:00"], |
||||
sundayOff: true, |
||||
sundayRange: [], |
||||
// 高级模式数据 |
||||
weekDays: [ |
||||
{ |
||||
label: "周一", |
||||
value: 1, |
||||
ranges: [ |
||||
["08:00", "12:00"], |
||||
["13:00", "17:30"], |
||||
], |
||||
}, |
||||
{ |
||||
label: "周二", |
||||
value: 2, |
||||
ranges: [ |
||||
["08:00", "12:00"], |
||||
["13:00", "17:30"], |
||||
], |
||||
}, |
||||
{ |
||||
label: "周三", |
||||
value: 3, |
||||
ranges: [ |
||||
["08:00", "12:00"], |
||||
["13:00", "17:30"], |
||||
], |
||||
}, |
||||
{ |
||||
label: "周四", |
||||
value: 4, |
||||
ranges: [ |
||||
["08:00", "12:00"], |
||||
["13:00", "17:30"], |
||||
], |
||||
}, |
||||
{ |
||||
label: "周五", |
||||
value: 5, |
||||
ranges: [ |
||||
["08:00", "12:00"], |
||||
["13:00", "17:30"], |
||||
], |
||||
}, |
||||
{ label: "周六", value: 6, ranges: [["09:00", "12:00"], []] }, |
||||
{ label: "周日", value: 0, ranges: [[], []] }, |
||||
], |
||||
data: { |
||||
day: "2025-03-03", |
||||
}, |
||||
// 例外日列表 |
||||
exceptionList: [ |
||||
{ |
||||
date: "2024-05-01", |
||||
week: "周三", |
||||
type: "法定节假日", |
||||
rule: "全天关闭", |
||||
}, |
||||
{ |
||||
date: "2024-05-04", |
||||
week: "周六", |
||||
type: "调休日", |
||||
rule: "按工作日规则", |
||||
}, |
||||
], |
||||
// 预设的节假日规则，使用 "MM-DD" 格式，每年重复 |
||||
holidayRules: [ |
||||
{ date: "05-01", type: "holiday" }, // 劳动节 |
||||
{ date: "05-04", type: "workday" }, // 青年节（示例） |
||||
{ date: "10-01", type: "holiday" }, // 国庆节 |
||||
], |
||||
dialogVisible: false, |
||||
newException: { |
||||
date: "", |
||||
ruleType: "off", |
||||
customRange: [], |
||||
recurring: false, |
||||
}, |
||||
calendarDate: new Date(), |
||||
}; |
||||
}, |
||||
filters: { |
||||
typeTag(type) { |
||||
if (type.includes("法定")) return "danger"; |
||||
if (type.includes("调休")) return "warning"; |
||||
return "info"; |
||||
}, |
||||
}, |
||||
methods: { |
||||
handleGlobalSwitch(val) { |
||||
console.log("一键开关:", val); |
||||
}, |
||||
editException(row) { |
||||
console.log("编辑", row); |
||||
}, |
||||
deleteException(row) { |
||||
console.log("删除", row); |
||||
// 实际应从列表中移除 |
||||
}, |
||||
syncHolidays() { |
||||
console.log("同步国家法定节假日"); |
||||
}, |
||||
/** |
||||
* 根据日期字符串 'YYYY-MM-DD' 返回对应的样式类名 |
||||
* @param {string} dayStr - 格式如 '2024-03-20' |
||||
* @returns {string} 样式类名，如 'holiday' 或 'workday' |
||||
*/ |
||||
getDayClass(dayStr) { |
||||
// 提取月-日部分，例如从 '2024-05-01' 得到 '05-01' |
||||
const monthDay = dayStr.slice(5); // 或者 dayStr.split('-').slice(1).join('-') |
||||
|
||||
// 在预设规则中查找匹配项 |
||||
const rule = this.holidayRules.find((item) => item.date === monthDay); |
||||
|
||||
// 如果找到规则，返回对应的类型；否则返回空字符串（无特殊样式） |
||||
return rule ? rule.type : ""; |
||||
}, |
||||
|
||||
/** |
||||
* 模拟“同步节假日”按钮功能 |
||||
* 实际开发中可调用接口更新 holidayRules |
||||
*/ |
||||
syncHolidays() { |
||||
// 示例：从服务器获取最新节假日配置 |
||||
// this.holidayRules = [...]; |
||||
this.$message.success("节假日规则已同步"); |
||||
}, |
||||
handleSave() { |
||||
console.log("保存所有设置"); |
||||
this.$message.success("设置已保存"); |
||||
}, |
||||
handleCancel() { |
||||
console.log("取消"); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.schedule-panel { |
||||
padding: 0px 20px 20px 20px; |
||||
/* background-color: #f5f7fa; */ |
||||
min-width: 1000px; |
||||
} |
||||
.global-header { |
||||
/* background-color: #fff; */ |
||||
padding: 5px 20px; |
||||
border-radius: 4px; |
||||
margin-bottom: 20px; |
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |
||||
} |
||||
.global-switch .label { |
||||
font-weight: bold; |
||||
margin-right: 15px; |
||||
} |
||||
.status-card { |
||||
border-left: 2px solid #409eff; |
||||
padding-left: 15px; |
||||
} |
||||
.status-card p { |
||||
margin: 5px 0; |
||||
font-size: 14px; |
||||
} |
||||
.status-card .label { |
||||
color: #909399; |
||||
} |
||||
.section-card { |
||||
margin-bottom: 20px; |
||||
} |
||||
.section-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
} |
||||
.time-range-sep { |
||||
margin: 0 10px; |
||||
color: #aaa; |
||||
} |
||||
.daily-item { |
||||
margin-bottom: 10px; |
||||
} |
||||
.calendar-cell { |
||||
height: 60px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.calendar-cell.holiday { |
||||
background-color: #fde2e2; |
||||
color: #f56c6c; |
||||
border-radius: 4px; |
||||
} |
||||
.calendar-cell.workday { |
||||
background-color: #d8def3; |
||||
color: #67c23a; |
||||
border-radius: 4px; |
||||
} |
||||
.footer-actions { |
||||
background-color: #0962aa; |
||||
padding: 15px 20px; |
||||
border-radius: 4px; |
||||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); |
||||
} |
||||
.priority-note { |
||||
color: #ffffff; |
||||
font-size: 13px; |
||||
} |
||||
.text-right { |
||||
text-align: right; |
||||
} |
||||
.date-content { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
.date-left { |
||||
width: 59%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
.date-right { |
||||
width: 40%; |
||||
} |
||||
.el-calendar { |
||||
background-color: #637c94 !important; |
||||
} |
||||
.el-calendar-table td.is-selected .calendar-cell { |
||||
color: #409eff !important; |
||||
font-weight: bold; |
||||
} |
||||
.el-calendar-table .el-calendar-day:hover .calendar-cell { |
||||
color: #409eff !important; |
||||
font-weight: bold; |
||||
} |
||||
.el-calendar-table thead th { |
||||
color: #d8def3 !important; |
||||
} |
||||
.el-calendar__title { |
||||
color: #ffffff !important; |
||||
font-weight: bold; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,815 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
<div class="score"> |
||||
<div class="excellent">优秀</div> |
||||
<div class="good">良好</div> |
||||
<div class="bad">差</div> |
||||
<div class="improve">需要改进</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
data1: "0", |
||||
data2: "0", |
||||
data3: "0", |
||||
data4: "0", |
||||
data5: "0", |
||||
chartInstance2: null, |
||||
option2: {}, |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.initChart2(); |
||||
this.getCoe(); |
||||
this.screenAdapter2(); |
||||
window.addEventListener("resize", this.screenAdapter2); |
||||
// this.nowData() |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter2); |
||||
}, |
||||
methods: { |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart2() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 130; |
||||
this.chartInstance2 = echarts.init(this.$refs.sys_charts); |
||||
this.option2 = { |
||||
tooltip: { |
||||
//弹窗组件 |
||||
formatter: "{a} <br/>{b} : {c}", |
||||
}, |
||||
// 设置仪表盘的背景颜色 整个cavas |
||||
// backgroundColor: "#f5f5f5", |
||||
series: [ |
||||
{ |
||||
//主机 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
radius: "65%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。 |
||||
center: ["48%", "40%"], |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
clockWise: true, |
||||
min: 0, |
||||
max: 15, |
||||
splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。 |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.2, |
||||
length: titleFontSize, |
||||
show: true, // 是否显示刻度(线),默认 true。 |
||||
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
color: "auto", //线的颜色,默认 #eee。 |
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
||||
width: titleFontSize * 0.1, |
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
||||
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
||||
// shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
length: "40%", // 指针长度 |
||||
width: titleFontSize * 0.4, |
||||
offsetCenter: ["0", "-20%"], // 详情位置的偏移量 |
||||
itemStyle: { |
||||
color: "auto", // 指针颜色自动匹配轴线颜色 |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize, |
||||
// color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']] |
||||
// opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
||||
// shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
||||
// shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
||||
color: [ |
||||
// 轴线颜色区间，可以设置不同的颜色渐变区间 |
||||
[0.35, "#ffb219"], |
||||
[0.38, "#00be97"], |
||||
[1, "#208fff"], |
||||
], |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, |
||||
show: true, // 是否显示分隔线,默认 true。 |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
color: "auto", //线的颜色,默认 #eee。 |
||||
opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted |
||||
// shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
||||
// shadowColor: "#fff", //阴影颜色。支持的格式同color。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: true, // 是否显示标签,默认 true。 |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, |
||||
color: "inherit", |
||||
}, |
||||
title: { |
||||
color: "#ffffff", |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["-30%", "20%"], //设置文字位置 |
||||
}, |
||||
detail: { |
||||
valueAnimation: true, |
||||
animationDuration: 2000, |
||||
color: "#c5fff3", |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["28%", "20%"], // 设置数字位置 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "主机", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
//冷却塔 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
radius: "65%", |
||||
center: ["48%", "90%"], |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
clockWise: true, |
||||
min: 0, |
||||
max: 120, |
||||
splitNumber: 4, |
||||
axisTick: { |
||||
distance: titleFontSize * 0.2, |
||||
show: true, |
||||
splitNumber: 5, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.1, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
pointer: { |
||||
length: "40%", |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
offsetCenter: [0, "-25%"], |
||||
itemStyle: { |
||||
color: "auto", |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: titleFontSize, |
||||
color: [ |
||||
[0.407, "#ffb219"], |
||||
[0.446, "#00be97"], |
||||
[1, "#208fff"], |
||||
], |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
distance: titleFontSize * 0.35, |
||||
show: true, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: true, |
||||
fontSize: titleFontSize * 1.5, //刻度线数字字体大小 |
||||
distance: titleFontSize * 1.5, |
||||
color: "inherit", |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["-33%", "20%"], |
||||
color: "#ffffff", |
||||
}, |
||||
detail: { |
||||
valueAnimation: true, |
||||
animationDuration: 2000, |
||||
color: "#c5fff3", |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["28%", "20%"], // 设置数字位置 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "冷却塔", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
//系统能效 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
detail: { formatter: "{value}" }, |
||||
radius: "90%", |
||||
center: ["15%", "55%"], |
||||
startAngle: 225, |
||||
endAngle: -45, |
||||
clockWise: true, |
||||
min: 0, |
||||
max: 10, |
||||
splitNumber: 4, |
||||
axisTick: { |
||||
distance: titleFontSize * 0.4, |
||||
show: true, |
||||
splitNumber: 5, |
||||
length: titleFontSize * 1.2, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
color: "inherit", |
||||
fontSize: titleFontSize * 1.8, |
||||
distance: titleFontSize * 3, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.6, |
||||
itemStyle: { |
||||
color: "auto", |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: titleFontSize * 1.6, |
||||
color: [ |
||||
[0.35, "#ee5e5e"], |
||||
[0.415, "#ffb219"], |
||||
[0.5, "#00be97"], |
||||
[1, "#208fff"], |
||||
], |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
distance: titleFontSize * 0.35, |
||||
show: true, |
||||
length: titleFontSize * 2, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 2.6, |
||||
color: "#ffffff", |
||||
offsetCenter: ["-25%", "90%"], //设置文字位置 |
||||
}, |
||||
detail: { |
||||
valueAnimation: true, |
||||
animationDuration: 2000, |
||||
color: "#c5fff3", |
||||
fontSize: titleFontSize * 2.6, |
||||
offsetCenter: ["35%", "90%"], // 设置数字位置 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "系统EER", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
//冷冻泵 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
radius: "65%", |
||||
center: ["75%", "40%"], |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
clockWise: true, |
||||
min: 0, |
||||
max: 100, |
||||
splitNumber: 4, |
||||
axisTick: { |
||||
distance: titleFontSize * 0.2, |
||||
show: true, |
||||
splitNumber: 5, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.1, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
pointer: { |
||||
length: "40%", |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
offsetCenter: [0, "-20%"], |
||||
// width: 3.5, // 指针宽度 |
||||
itemStyle: { |
||||
color: "auto", |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: titleFontSize, |
||||
color: [ |
||||
[0.417, "#ffb219"], |
||||
[0.459, "#00be97"], |
||||
[1, "#208fff"], |
||||
], |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
distance: titleFontSize * 0.35, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: true, |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, |
||||
color: "inherit", |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["-33%", "20%"], |
||||
color: "#ffffff", |
||||
}, |
||||
detail: { |
||||
valueAnimation: true, |
||||
animationDuration: 2000, |
||||
color: "#c5fff3", |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["28%", "20%"], // 设置数字位置 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "冷冻泵", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
//冷却泵 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
radius: "65%", |
||||
center: ["75%", "90%"], |
||||
startAngle: 180, |
||||
endAngle: 0, |
||||
clockWise: true, |
||||
min: 0, |
||||
max: 60, |
||||
splitNumber: 4, |
||||
axisTick: { |
||||
distance: titleFontSize * 0.2, |
||||
show: true, |
||||
splitNumber: 5, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.1, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
pointer: { |
||||
length: "40%", |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
offsetCenter: [0, "-20%"], |
||||
itemStyle: { |
||||
color: "auto", |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
width: titleFontSize, |
||||
color: [ |
||||
[0.813, "#ffb219"], |
||||
[0.892, "#00be97"], |
||||
[1, "#208fff"], |
||||
], |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
distance: titleFontSize * 0.35, |
||||
show: true, |
||||
length: titleFontSize, |
||||
lineStyle: { |
||||
color: "auto", |
||||
opacity: 1, |
||||
width: titleFontSize * 0.2, |
||||
type: "solid", |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: true, |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, |
||||
color: "inherit", |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["-33%", "20%"], |
||||
color: "#ffffff", |
||||
}, |
||||
detail: { |
||||
valueAnimation: true, |
||||
animationDuration: 2000, |
||||
color: "#c5fff3", |
||||
fontSize: titleFontSize * 2, |
||||
offsetCenter: ["28%", "20%"], // 设置数字位置 |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "冷却泵", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance2.setOption(this.option2, true); |
||||
}, |
||||
// 定时器 |
||||
nowData() { |
||||
//把option.series[0].data[0].value的值使用random()方法获取一个随机数 |
||||
this.option2.series[0].data[0].value = (Math.random() * 7).toFixed(2); |
||||
this.option2.series[1].data[0].value = (Math.random() * 10).toFixed(2); |
||||
this.option2.series[2].data[0].value = (Math.random() * 2).toFixed(2); |
||||
this.option2.series[3].data[0].value = (Math.random() * 2).toFixed(2); |
||||
this.option2.series[4].data[0].value = (Math.random() * 10).toFixed(2); |
||||
this.chartInstance2.setOption(this.option2, true); |
||||
setInterval(this.nowData, 100000); |
||||
this.clear(); |
||||
}, |
||||
clear() { |
||||
clearInterval(this.nowData); |
||||
this.nowData = null; |
||||
}, |
||||
screenAdapter2() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 130; |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
//主机 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
width: titleFontSize * 0.1, //线度,默认 1。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize, //轴线宽度,默认 30。 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 2。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
detail: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
}, |
||||
{ |
||||
//冷却塔 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
width: titleFontSize * 0.1, //线度,默认 1。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize, //轴线宽度,默认 30。 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 2。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
detail: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
}, |
||||
{ |
||||
//系统能效 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.4, //刻度线离边缘的距离 |
||||
length: titleFontSize * 1.2, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 1。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.6, // 指针宽度 |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize * 1.6, //轴线宽度,默认 30。 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||
length: titleFontSize * 2, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 2。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.8, |
||||
distance: titleFontSize * 3, // 标签与刻度线的距离,默认 5。 |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 2.2, |
||||
}, |
||||
detail: { |
||||
fontSize: titleFontSize * 2.2, |
||||
}, |
||||
}, |
||||
{ |
||||
//冷冻泵 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
width: titleFontSize * 0.1, //线度,默认 1。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize, //轴线宽度,默认 30。 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 2。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
detail: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
}, |
||||
{ |
||||
//冷却泵 |
||||
name: "实时EER系数", |
||||
type: "gauge", |
||||
axisTick: { |
||||
// 刻度(线)样式。 |
||||
distance: titleFontSize * 0.2, //刻度线离边缘的距离 |
||||
length: titleFontSize, // 刻度线长。支持相对半径的百分比,默认 8。 |
||||
lineStyle: { |
||||
// 刻度线样式。 |
||||
width: titleFontSize * 0.1, //线度,默认 1。 |
||||
}, |
||||
}, |
||||
pointer: { |
||||
width: titleFontSize * 0.4, // 指针宽度 |
||||
}, |
||||
axisLine: { |
||||
// 仪表盘轴线(轮廓线)相关配置。 |
||||
lineStyle: { |
||||
// 仪表盘轴线样式。 |
||||
width: titleFontSize, //轴线宽度,默认 30。 |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
// 分隔线样式。 |
||||
distance: titleFontSize * 0.35, //分割线离边缘的距离 |
||||
length: titleFontSize, // 分隔线线长。支持相对半径的百分比,默认 30。 |
||||
lineStyle: { |
||||
// 分隔线样式。 |
||||
width: titleFontSize * 0.2, //线度,默认 2。 |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
fontSize: titleFontSize * 1.5, |
||||
distance: titleFontSize * 1.5, // 标签与刻度线的距离,默认 5。 |
||||
}, |
||||
title: { |
||||
fontSize: titleFontSize * 1.5, |
||||
}, |
||||
detail: { |
||||
fontSize: titleFontSize* 1.5, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance2.setOption(adapterOption); |
||||
this.chartInstance2.resize(); |
||||
}, |
||||
// 请求的数据 |
||||
// 系统系数 |
||||
getCoe() { |
||||
// this.$api.homeScreen.getCoe().then((res) => { |
||||
// console.log("系统系数返回", res) |
||||
// if (res.code == 200) { |
||||
// this.data1 = res.data.sysCoe || this.data1; |
||||
// this.data2 = res.data.chillerCoe || this.data2; |
||||
// this.data3 = res.data.chillPumpCoe || this.data3; |
||||
// this.data4 = res.data.coolPumpCoe || this.data4; |
||||
// this.data5 = res.data.towerCoe || this.data5; |
||||
|
||||
// this.option2.series[0].data[0].value = this.data2; |
||||
// this.option2.series[1].data[0].value = this.data5; |
||||
// this.option2.series[2].data[0].value = this.data1; |
||||
// this.option2.series[3].data[0].value = this.data3; |
||||
// this.option2.series[4].data[0].value = this.data4; |
||||
// this.chartInstance2.setOption(this.option2, true); |
||||
// } |
||||
// }) |
||||
this.data1 = 8.0; |
||||
this.data2 = 0; |
||||
this.data3 = 8.17; |
||||
this.data4 = 0; |
||||
this.data5 = 0; |
||||
|
||||
this.option2.series[0].data[0].value = this.data2; |
||||
this.option2.series[1].data[0].value = this.data5; |
||||
this.option2.series[2].data[0].value = this.data1; |
||||
this.option2.series[3].data[0].value = this.data3; |
||||
this.option2.series[4].data[0].value = this.data4; |
||||
this.chartInstance2.setOption(this.option2, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
width: 100%; |
||||
height: 300px; |
||||
|
||||
.sys_title { |
||||
width: 15%; |
||||
font-size: 0.2rem; |
||||
margin: 0.1rem 0 0 0.2rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
color: #c5fff3; |
||||
} |
||||
|
||||
.sys_charts { |
||||
width: 85%; |
||||
height: 250px; |
||||
margin-top: 0.2rem; |
||||
} |
||||
|
||||
.score { |
||||
width: 10%; |
||||
height: 100%; |
||||
// display: flex; |
||||
// flex-direction: column; |
||||
// justify-content: space-between; |
||||
font-size: 0.18rem; |
||||
color: #ffffff; |
||||
margin: 0.6rem 0.6rem 0 0; |
||||
|
||||
.excellent, |
||||
.good, |
||||
.bad, |
||||
.improve { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-bottom: 0.1rem; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.excellent::before, |
||||
.good::before, |
||||
.bad::before, |
||||
.improve::before { |
||||
display: block; |
||||
content: ""; |
||||
width: 0.15rem; |
||||
height: 0.14rem; |
||||
margin-right: 0.16rem; |
||||
} |
||||
|
||||
.excellent::before { |
||||
background-color: #208fff; |
||||
} |
||||
|
||||
.good::before { |
||||
background-color: #00be97; |
||||
} |
||||
|
||||
.bad::before { |
||||
background-color: #ffb219; |
||||
} |
||||
|
||||
.improve::before { |
||||
background-color: #ee5e5e; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue