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