Compare commits
45 Commits
v-lijf43
153 changed files with 25419 additions and 5247 deletions
@ -0,0 +1,27 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 查询运行记录
|
||||
export function reportSysList(data) { |
||||
return request({ |
||||
url: "/reportSys/list", |
||||
method: "post", |
||||
data, |
||||
}); |
||||
} |
||||
// 编辑运行记录
|
||||
export function reportSysEdit(data) { |
||||
return request({ |
||||
url: "/reportSys/edit", |
||||
method: "put", |
||||
data, |
||||
}); |
||||
} |
||||
// 导出
|
||||
export function reportSysExport(data) { |
||||
return request({ |
||||
url: "/reportSys/export", |
||||
method: "post", |
||||
data, |
||||
responseType: 'blob', |
||||
}); |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request"; |
||||
// 历史天气查询
|
||||
export function weatherTempData(query) { |
||||
return request({ |
||||
url: "/device/cs/getWeatherTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 数据分析-月
|
||||
export function queryMonthDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryMonth", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 数据分析-年
|
||||
export function queryYearDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/analysis/queryYear", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,34 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 楼层
|
||||
export function hotBuildList(query) { |
||||
return request({ |
||||
url: "/space/building/hot_list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗环比
|
||||
export function hotEnergySum(query) { |
||||
return request({ |
||||
url: "/hot_energy/energySum", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterTemp(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterTemp", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 温度变化表
|
||||
export function hotWaterLevel(query) { |
||||
return request({ |
||||
url: "/hot_energy/waterLevel", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 水电表读数
|
||||
export function queryDeviceDatas(query) { |
||||
return request({ |
||||
url: "/hot_energy/queryDeviceDatas", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 设备状态
|
||||
export function deviceState(query) { |
||||
return request({ |
||||
url: "/device/hotWater/deviceState", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
// 楼栋能耗
|
||||
export function hotEnergyQuery(query) { |
||||
return request({ |
||||
url: "/hot_energy/query", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 284 KiB After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 188 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1000 B After Width: | Height: | Size: 1000 B |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 283 KiB |
|
Before Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 342 KiB |
|
Before Width: | Height: | Size: 410 KiB After Width: | Height: | Size: 410 KiB |
|
Before Width: | Height: | Size: 417 KiB After Width: | Height: | Size: 417 KiB |
|
After Width: | Height: | Size: 13 MiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 156 KiB After Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 46 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
<template> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
created() { |
||||
this.toPage(); |
||||
}, |
||||
methods: { |
||||
toPage() { |
||||
console.log("需要跳转的") |
||||
// 跳转到展示 |
||||
this.$router.push("/boilerMonitorDetails") |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
<template> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
created() { |
||||
this.toPage(); |
||||
}, |
||||
methods: { |
||||
toPage() { |
||||
console.log("需要跳转的") |
||||
// 跳转到展示 |
||||
this.$router.push("/heatingPumpDetails") |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
@ -0,0 +1,269 @@
|
||||
<template> |
||||
<div class="monitor" v-loading="loading"> |
||||
<div class="monitor-top"> |
||||
<img |
||||
class="title-left" |
||||
src="../../../assets/images/title-left.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="title-center" |
||||
src="../../../assets/images/title-center.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="title-right" |
||||
src="../../../assets/images/title-right.png" |
||||
alt="" |
||||
/> |
||||
<div class="sys-title">热水锅炉监测</div> |
||||
<!-- logo --> |
||||
<img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" /> |
||||
<div class="nowTime">{{ formattedDate }}</div> |
||||
<div class="monitor-time">已监测时长:{{ dayData }}天</div> |
||||
<img |
||||
class="icon_warning" |
||||
src="../../../assets/images/warning.png" |
||||
title="报警记录" |
||||
@click="goWarning" |
||||
v-if="isShowWarning" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="icon_home" |
||||
src="../../../assets/images/icon_home.png" |
||||
title="首页" |
||||
@click="goSys" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="back-icon" |
||||
src="../../../assets/images/back-icon.png" |
||||
title="返回" |
||||
@click="goBack" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { runTime } from "@/api/centerairC/sysMonitor"; |
||||
import { alarmRecordList } from "@/api/alarm/alarmRecord"; |
||||
import { getDay } from "@/utils/datetime"; |
||||
export default { |
||||
name: "boilerMonitorDetails", |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
currentDate: new Date(), |
||||
nowTimer: null, |
||||
isShowWarning: false, //是否有报警 |
||||
dayData: "", //监测天数 |
||||
currentWeekday: "", |
||||
}; |
||||
}, |
||||
computed: { |
||||
formattedDate() { |
||||
const year = this.currentDate.getFullYear(); |
||||
const month = String(this.currentDate.getMonth() + 1).padStart(2, "0"); |
||||
const day = String(this.currentDate.getDate()).padStart(2, "0"); |
||||
const hours = String(this.currentDate.getHours()).padStart(2, "0"); |
||||
const minutes = String(this.currentDate.getMinutes()).padStart(2, "0"); |
||||
const seconds = String(this.currentDate.getSeconds()).padStart(2, "0"); |
||||
const weekDays = [ |
||||
"星期日", |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
]; |
||||
const weekDay = weekDays[this.currentDate.getDay()]; |
||||
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`; |
||||
}, |
||||
}, |
||||
created() { |
||||
const weekdays = [ |
||||
"星期日", |
||||
"星期一", |
||||
"星期二", |
||||
"星期三", |
||||
"星期四", |
||||
"星期五", |
||||
"星期六", |
||||
]; |
||||
const date = new Date(); |
||||
const dayIndex = date.getDay(); |
||||
this.currentWeekday = weekdays[dayIndex]; |
||||
console.log("今天是星期几", this.currentWeekday); |
||||
}, |
||||
mounted() { |
||||
this.getAlarnStatus(); |
||||
this.getDayData(); |
||||
}, |
||||
beforeDestroy() { |
||||
// 组件销毁前清除定时器 |
||||
if (this.nowTimer) { |
||||
clearInterval(this.nowTimer); |
||||
} |
||||
}, |
||||
methods: { |
||||
// 进入系统首页 |
||||
goSys() { |
||||
this.$router.push("/"); |
||||
}, |
||||
// 返回上一页 |
||||
goBack() { |
||||
window.history.go(-2); |
||||
}, |
||||
// 监测天数 |
||||
getDayData() { |
||||
runTime().then((res) => { |
||||
if (res.code == 200) { |
||||
this.dayData = res.data.runTime; |
||||
} |
||||
}); |
||||
}, |
||||
// 报警列表 |
||||
getAlarnStatus() { |
||||
let data = { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
status: "0", |
||||
}; |
||||
let timeArr = [getDay(0), getDay(0)]; |
||||
alarmRecordList(this.addDateRange(data, timeArr)).then((res) => { |
||||
if (res.code == 200 && res.rows.length > 0) { |
||||
this.isShowWarning = true; |
||||
} else { |
||||
this.isShowWarning = false; |
||||
} |
||||
}); |
||||
}, |
||||
goWarning() { |
||||
this.$router.push("/alarm/alarmRecord"); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.monitor { |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
background-color: black; |
||||
color: #fff; |
||||
.monitor-top { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
padding: 0.1rem 0.2rem; |
||||
position: relative; |
||||
.title-left { |
||||
width: 3.41rem; |
||||
height: 0.8rem; |
||||
} |
||||
.title-center { |
||||
width: 9.46rem; |
||||
height: 0.69rem; |
||||
} |
||||
.title-right { |
||||
width: 5.04rem; |
||||
height: 0.61rem; |
||||
} |
||||
.sys-title { |
||||
position: absolute; |
||||
top: 40%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
font-size: 0.28rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
z-index: 100; |
||||
} |
||||
.nowTime { |
||||
position: absolute; |
||||
top: 0.3rem; |
||||
right: 0.6rem; |
||||
font-size: 0.18rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
z-index: 100; |
||||
} |
||||
.sys-logo { |
||||
width: 1.8rem; |
||||
height: 0.5rem; |
||||
position: absolute; |
||||
top: 0.26rem; |
||||
left: 0.8rem; |
||||
z-index: 10; |
||||
} |
||||
.monitor-time { |
||||
position: absolute; |
||||
top: 0.44rem; |
||||
left: 4.2rem; |
||||
z-index: 10; |
||||
font-size: 0.18rem; |
||||
color: #ffffff; |
||||
font-weight: bold; |
||||
} |
||||
.icon_warning { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 4.4rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
margin: 0 0.25rem 0 0.27rem; |
||||
cursor: pointer; |
||||
/* 添加闪烁动画 */ |
||||
animation: blink 1s infinite; |
||||
} |
||||
@keyframes blink { |
||||
100% { |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
opacity: 0; |
||||
} |
||||
} |
||||
.icon_home { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 4rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
margin: 0 0.2rem 0 0.27rem; |
||||
cursor: pointer; |
||||
} |
||||
.back-icon { |
||||
position: absolute; |
||||
top: 0.33rem; |
||||
right: 3.7rem; |
||||
z-index: 10; |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
.special-div .special-title { |
||||
padding-left: 0.36rem !important; |
||||
font-size: 0.2rem !important; |
||||
line-height: 0.23rem !important; |
||||
background-size: 1.4rem 0.35rem !important; |
||||
background-position: 0px -0.03rem !important; |
||||
} |
||||
.special-div .special-top { |
||||
padding: 0.04rem 0.26rem 0.04rem 0px; |
||||
min-height: 0.37rem; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,20 @@
|
||||
<template> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
created() { |
||||
this.toPage(); |
||||
}, |
||||
methods: { |
||||
toPage() { |
||||
console.log("需要跳转的") |
||||
// 跳转到展示 |
||||
this.$router.push("/hotWaterBoilerDetails") |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
@ -0,0 +1,911 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="queryParams.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
clearable |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="日期范围" prop="timeArr"> |
||||
<el-date-picker |
||||
style="width: 220px" |
||||
v-model="timeArr" |
||||
type="daterange" |
||||
unlink-panels |
||||
range-separator="~" |
||||
start-placeholder="开始日期" |
||||
end-placeholder="结束日期" |
||||
value-format="yyyy-MM-dd" |
||||
@change="dateChange" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<!-- <el-col :span="1.5"> |
||||
<div class="success-btn"> |
||||
<el-button |
||||
type="success" |
||||
@click="leadingPrint" |
||||
icon="el-icon-printer" |
||||
size="mini" |
||||
>打印</el-button |
||||
> |
||||
</div> |
||||
</el-col> --> |
||||
<el-col :span="1.5"> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> |
||||
<right-toolbar |
||||
:showSearch.sync="showSearch" |
||||
@queryTable="getList" |
||||
></right-toolbar> |
||||
</el-row> |
||||
|
||||
<el-table v-loading="loading" :data="postList" stripe> |
||||
<!-- <el-table-column label="主机id" align="center" prop="deviceNum" /> --> |
||||
<el-table-column label="时间" align="center" prop="curTime" /> |
||||
<el-table-column label="蒸发器"> |
||||
<el-table-column |
||||
label="冷冻水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInChillerWater" /> |
||||
<el-table-column |
||||
label="冷冻水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutChillerWater" /> |
||||
<el-table-column label="设计流量(%)" align="center" prop="designFlow" /> |
||||
<el-table-column |
||||
label="蒸发器压力(kpa)" |
||||
align="center" |
||||
prop="pressEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempEvapSaturation" /> |
||||
<el-table-column |
||||
label="蒸发器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempEvapApproaching" |
||||
/></el-table-column> |
||||
<el-table-column label="冷凝器"> |
||||
<el-table-column |
||||
label="冷却水进水温度(℃)" |
||||
align="center" |
||||
prop="tempInCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水温度(℃)" |
||||
align="center" |
||||
prop="tempOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器压力(kpa)" |
||||
align="center" |
||||
prop="pressCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器饱和温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserSaturation" |
||||
/> |
||||
<el-table-column |
||||
label="冷凝器趋近温度(℃)" |
||||
align="center" |
||||
prop="tempCondenserApproaching" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="系统"> |
||||
<el-table-column |
||||
label="冷冻水设定值(℃)" |
||||
align="center" |
||||
prop="setChillerWater" |
||||
/> |
||||
<el-table-column label="冷水机需求(%)" align="center" prop="setLoad" /> |
||||
<el-table-column label="总电流(%)" align="center" prop="currentTotal" /> |
||||
<el-table-column |
||||
label="总输入功率(kw)" |
||||
align="center" |
||||
prop="inputPowerTotal" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机1_压缩比" |
||||
align="center" |
||||
prop="ratioCompOne" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机2_压缩比" |
||||
align="center" |
||||
prop="ratioCompTwo" |
||||
/> |
||||
<el-table-column |
||||
label="压缩机3_压缩比" |
||||
align="center" |
||||
prop="ratioCompThree" |
||||
/> |
||||
<el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" /> |
||||
<el-table-column |
||||
label="运行中的压缩机数量" |
||||
align="center" |
||||
prop="runCompNum" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷冻泵"> |
||||
<el-table-column |
||||
label="冷冻水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyChiller" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutChillerWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷冻水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInChillerWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却泵"> |
||||
<el-table-column |
||||
label="冷却水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCooling" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水出水压力(kpa)" |
||||
align="center" |
||||
prop="pressOutCoolingWater" |
||||
/> |
||||
<el-table-column |
||||
label="冷却水进水压力(kpa)" |
||||
align="center" |
||||
prop="pressInCoolingWater" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="冷却塔"> |
||||
<el-table-column |
||||
label="冷却塔水泵频率(hz)" |
||||
align="center" |
||||
prop="frequencyCoolingTower" |
||||
/> |
||||
<el-table-column |
||||
label="冷却塔运行数量" |
||||
align="center" |
||||
prop="runCoolingTower" |
||||
/> |
||||
</el-table-column> |
||||
<el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" /> |
||||
<el-table-column |
||||
label="室外湿度(%)" |
||||
align="center" |
||||
prop="humidityOutdoor" |
||||
/> |
||||
<el-table-column |
||||
label="恒压补水罐压力(Mpa)" |
||||
align="center" |
||||
prop="pressConstantWaterTank" |
||||
/> |
||||
<el-table-column label="巡查记录人" align="center" prop="recorder" /> |
||||
<el-table-column |
||||
label="操作" |
||||
align="center" |
||||
class-name="small-padding fixed-width" |
||||
> |
||||
<template slot-scope="scope"> |
||||
<el-button |
||||
size="mini" |
||||
type="text" |
||||
icon="el-icon-edit" |
||||
@click="handleUpdate(scope.row)" |
||||
v-hasPermi="['device:ledger:edit']" |
||||
>修改</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<!-- 添加或修改设备台账对话框 --> |
||||
<el-dialog :title="title" :visible.sync="open" append-to-body> |
||||
<el-form ref="form" :model="form" :rules="rules"> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="主机编号" prop="deviceNum"> |
||||
<el-select |
||||
v-model="form.deviceNum" |
||||
placeholder="请选择主机编号" |
||||
disabled |
||||
> |
||||
<el-option label="1号主机" value="1" /> |
||||
<el-option label="2号主机" value="2" /> |
||||
<el-option label="3号主机" value="3" /> |
||||
</el-select> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="设计流量(%)" prop="designFlow"> |
||||
<el-input v-model="form.designFlow" placeholder="请输入流量(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater"> |
||||
<el-input |
||||
v-model="form.tempInChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater"> |
||||
<el-input |
||||
v-model="form.tempOutChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation"> |
||||
<el-input |
||||
v-model="form.tempEvapSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching"> |
||||
<el-input |
||||
v-model="form.tempEvapApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation"> |
||||
<el-input |
||||
v-model="form.pressEvapSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器压力(kpa)" |
||||
prop="pressCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.pressCondenserSaturation" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempInCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater"> |
||||
<el-input |
||||
v-model="form.tempOutCoolingWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器饱和温度(℃)" |
||||
prop="tempCondenserSaturation" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserSaturation" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷凝器趋近温度(℃)" |
||||
prop="tempCondenserApproaching" |
||||
> |
||||
<el-input |
||||
v-model="form.tempCondenserApproaching" |
||||
placeholder="请输入温度(℃)" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水设定值(℃)" prop="setChillerWater"> |
||||
<el-input |
||||
v-model="form.setChillerWater" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷水机需求(%)" prop="setLoad"> |
||||
<el-input v-model="form.setLoad" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总输入功率(kw)" prop="inputPowerTotal"> |
||||
<el-input |
||||
v-model="form.inputPowerTotal" |
||||
placeholder="请输入功率(kw)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="总电流(%)" prop="currentTotal"> |
||||
<el-input v-model="form.currentTotal" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机1_压缩比" prop="ratioCompOne"> |
||||
<el-input |
||||
v-model="form.ratioCompOne" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机2_压缩比" prop="ratioCompTwo"> |
||||
<el-input |
||||
v-model="form.ratioCompTwo" |
||||
placeholder="请输入压缩比" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="压缩机3_压缩比" prop="ratioCompThree"> |
||||
<el-input |
||||
v-model="form.ratioCompThree" |
||||
placeholder="请输入压缩比" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="膨胀阀开度(%)" prop="openExv"> |
||||
<el-input v-model="form.openExv" placeholder="请输入(%)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="运行中的压缩机数量" prop="runCompNum"> |
||||
<el-input |
||||
v-model="form.runCompNum" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller"> |
||||
<el-input v-model="form.openExv" placeholder="请输入频率(hz)" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水出水压力(kpa)" |
||||
prop="pressOutChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷冻水进水压力(kpa)" |
||||
prop="pressInChillerWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInChillerWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水出水压力(kpa)" |
||||
prop="pressOutCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressOutCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却水进水压力(kpa)" |
||||
prop="pressInCoolingWater" |
||||
> |
||||
<el-input |
||||
v-model="form.pressInCoolingWater" |
||||
placeholder="请输入压力(kpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling"> |
||||
<el-input |
||||
v-model="form.frequencyCooling" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="冷却塔水泵频率(hz)" |
||||
prop="frequencyCoolingTower" |
||||
> |
||||
<el-input |
||||
v-model="form.frequencyCoolingTower" |
||||
placeholder="请输入频率(hz)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="冷却塔运行数量" prop="runCoolingTower"> |
||||
<el-input |
||||
v-model="form.runCoolingTower" |
||||
placeholder="请输入数量" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item |
||||
label="恒压补水罐压力(Mpa)" |
||||
prop="pressConstantWaterTank" |
||||
> |
||||
<el-input |
||||
v-model="form.pressConstantWaterTank" |
||||
placeholder="请输入压力(Mpa)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外温度" prop="tempOutdoor"> |
||||
<el-input |
||||
v-model="form.tempOutdoor" |
||||
placeholder="请输入温度(℃)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="室外湿度(%)" prop="humidityOutdoor"> |
||||
<el-input |
||||
v-model="form.humidityOutdoor" |
||||
placeholder="请输入湿度(%)" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
<el-row type="flex" justify="center"> |
||||
<el-col :span="12"> |
||||
<el-form-item label="巡查记录人" prop="recorder"> |
||||
<el-input |
||||
v-model="form.recorder" |
||||
placeholder="请输入巡查记录人" |
||||
/> </el-form-item |
||||
></el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="备注" prop="remark"> |
||||
<el-input |
||||
v-model="form.remark" |
||||
placeholder="请输入备注" |
||||
/> </el-form-item |
||||
></el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div slot="footer" class="dialog-footer"> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog |
||||
:visible.sync="dialogPrintVisible" |
||||
title="打印预览" |
||||
class="print-dialog" |
||||
> |
||||
<div id="report" ref="report" class="report"> |
||||
<table |
||||
border="1" |
||||
style=" |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
border: 1px solid #e2e6f0; |
||||
margin-bottom: 35px; |
||||
" |
||||
> |
||||
<thead> |
||||
<tr> |
||||
<th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th> |
||||
</tr> |
||||
<tr> |
||||
<th>主机id</th> |
||||
<th>时间</th> |
||||
<th colspan="6">蒸发器</th> |
||||
<th colspan="5">冷凝器</th> |
||||
<th colspan="7">系统</th> |
||||
<th colspan="3">冷冻泵</th> |
||||
<th colspan="3">冷却泵</th> |
||||
<th colspan="2">冷却塔</th> |
||||
<th>室外温度(℃)</th> |
||||
<th>室外湿度(%)</th> |
||||
<th>恒压补水罐压力(Mpa)</th> |
||||
<th>巡查记录人</th> |
||||
</tr> |
||||
<tr> |
||||
<th></th> |
||||
<th></th> |
||||
<th>冷冻水进水温度(℃)</th> |
||||
<th>冷冻水出水温度(℃)</th> |
||||
<th>设计流量(%)</th> |
||||
<th>蒸发器压力(kpa)</th> |
||||
<th>蒸发器饱和温度(℃)</th> |
||||
<th>蒸发器趋近温度(℃)</th> |
||||
<th>冷却水进水温度(℃)</th> |
||||
<th>冷却水出水温度(℃)</th> |
||||
<th>冷凝器压力(kpa)</th> |
||||
<th>冷凝器饱和温度(℃)</th> |
||||
<th>冷凝器趋近温度(℃)</th> |
||||
<th>冷冻水设定值(℃)</th> |
||||
<th>冷水机需求(%)</th> |
||||
<th>总电流(%)</th> |
||||
<th>总输入功率(kw)</th> |
||||
<th>压缩机1_压缩比</th> |
||||
<th>膨胀阀开度(%)</th> |
||||
<th>运行中的压缩机数量</th> |
||||
<th>冷冻水泵频率(hz)</th> |
||||
<th>冷冻水出水压力(kpa)</th> |
||||
<th>冷冻水进水压力(kpa)</th> |
||||
<th>冷却水泵频率(hz)</th> |
||||
<th>冷却水出水压力(kpa)</th> |
||||
<th>冷却水进水压力(kpa)</th> |
||||
<th>冷却塔水泵频率(hz)</th> |
||||
<th>冷却塔运行数量</th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
<th></th> |
||||
</tr> |
||||
</thead> |
||||
<tr v-for="(item, index) in postList" :key="index"> |
||||
<td align="center" v-for="(value, key) in item" :key="key"> |
||||
{{ value }} |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
<div |
||||
class="detail" |
||||
style=" |
||||
display: flex; |
||||
flex-direction: row; |
||||
font-size: 14px; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
width: 40%; |
||||
color: #ffffff; |
||||
" |
||||
> |
||||
<div>操作员: {{ this.userName }}</div> |
||||
<div class="print-date">日期： {{ this.operationDate }}</div> |
||||
</div> |
||||
</div> |
||||
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
||||
<el-col :span="2"> |
||||
<el-button type="info" @click="dialogPrintVisible = false" |
||||
>取消</el-button |
||||
> |
||||
</el-col> |
||||
<el-col :span="2" style="margin-left: 60px"> |
||||
<el-button type="success" @click="surePrint">确认</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
reportSysList, |
||||
reportSysEdit, |
||||
reportSysExport, |
||||
} from "@/api/centerairC/hostRunReport"; |
||||
import { format2, getDay } from "@/utils/datetime"; |
||||
export default { |
||||
name: "ledger", |
||||
data() { |
||||
return { |
||||
timeArr: [], |
||||
// 遮罩层 |
||||
loading: false, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
deviceNum: "", |
||||
params: { |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
}, |
||||
// 表单参数 |
||||
form: {}, |
||||
// 表单校验 |
||||
rules: { |
||||
deviceName: [ |
||||
{ required: true, message: "设备名称不能为空", trigger: "blur" }, |
||||
], |
||||
}, |
||||
dialogPrintVisible: false, |
||||
userName: "", //操作员 |
||||
operationDate: getDay(0), //操作日期 |
||||
titleDate: "", |
||||
}; |
||||
}, |
||||
created() { |
||||
this.userName = sessionStorage.getItem("userName"); |
||||
this.queryParams.deviceNum = "1"; |
||||
this.getList(); |
||||
}, |
||||
methods: { |
||||
// 选中日期事件 |
||||
dateChange() { |
||||
// console.log("打印时间", this.timeArr); |
||||
if (!this.timeArr) { |
||||
this.$nextTick(() => { |
||||
this.timeArr = []; |
||||
this.queryParams.params.startTime = ""; |
||||
this.queryParams.params.endTime = ""; |
||||
}); |
||||
} else { |
||||
this.queryParams.params.startTime = this.timeArr[0]; |
||||
this.queryParams.params.endTime = this.timeArr[1]; |
||||
} |
||||
}, |
||||
/** 查询设备台账列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
reportSysList(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
} else { |
||||
this.postList = []; |
||||
this.total = 0; |
||||
this.loading = false; |
||||
} |
||||
}); |
||||
}, |
||||
// 取消按钮 |
||||
cancel() { |
||||
this.open = false; |
||||
this.reset(); |
||||
this.form.id = ""; |
||||
}, |
||||
// 表单重置 |
||||
reset() { |
||||
this.form = { |
||||
id: "", |
||||
deviceNum: "", |
||||
curTime: "", |
||||
tempInChillerWater: "", |
||||
tempOutChillerWater: "", |
||||
designFlow: "", |
||||
pressEvapSaturation: "", |
||||
tempEvapSaturation: "", |
||||
tempEvapApproaching: "", |
||||
tempInCoolingWater: "", |
||||
tempOutCoolingWater: "", |
||||
pressCondenserSaturation: "", |
||||
tempCondenserSaturation: "", |
||||
tempCondenserApproaching: "", |
||||
setChillerWater: "", |
||||
setLoad: "", |
||||
currentTotal: "", |
||||
inputPowerTotal: "", |
||||
ratioCompOne: "", |
||||
openExv: "", |
||||
runCompNum: "", |
||||
frequencyChiller: "", |
||||
pressOutChillerWater: "", |
||||
pressInChillerWater: "", |
||||
frequencyCooling: "", |
||||
pressOutCoolingWater: "", |
||||
pressInCoolingWater: "", |
||||
frequencyCoolingTower: "", |
||||
runCoolingTower: "", |
||||
pressConstantWaterTank: "", |
||||
tempOutdoor: "", |
||||
humidityOutdoor: "", |
||||
recorder: "", |
||||
remark: "", |
||||
ratioCompTwo: "", |
||||
ratioCompThree: "", |
||||
}; |
||||
this.resetForm("form"); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.resetForm("queryForm"); |
||||
this.handleQuery(); |
||||
}, |
||||
/** 修改按钮操作 */ |
||||
handleUpdate(row) { |
||||
this.reset(); |
||||
this.form = Object.assign({}, row); |
||||
this.open = true; |
||||
this.title = "修改主机运行记录"; |
||||
}, |
||||
/** 提交按钮 */ |
||||
submitForm: function () { |
||||
this.$refs["form"].validate((valid) => { |
||||
if (valid) { |
||||
if (this.form.id != undefined) { |
||||
reportSysEdit(this.form).then((response) => { |
||||
this.$modal.msgSuccess("修改成功"); |
||||
this.open = false; |
||||
this.getList(); |
||||
}); |
||||
} else { |
||||
console.log("新增参数", this.form); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
reportSysExport(this.queryParams).then((res) => { |
||||
console.log("导出返回", res); |
||||
// 请求的结果就是文件 |
||||
// 创建一个blob URL，用于生成下载链接 |
||||
const url = window.URL.createObjectURL(new Blob([res])); |
||||
// 创建一个<a>元素，并设置其href和download属性 |
||||
const link = document.createElement("a"); |
||||
link.href = url; |
||||
link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名 |
||||
// 模拟点击下载链接 |
||||
document.body.appendChild(link); |
||||
link.click(); |
||||
document.body.removeChild(link); |
||||
// 释放blob URL资源 |
||||
window.URL.revokeObjectURL(url); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
}, |
||||
// 打印 |
||||
leadingPrint() { |
||||
this.dialogPrintVisible = true; |
||||
}, |
||||
// 打印 |
||||
surePrint() { |
||||
const printHTML = document.querySelector("#report").innerHTML; |
||||
// 将打印的区域赋值，进行打印 |
||||
window.document.body.innerHTML = printHTML; |
||||
window.print(); // 调用window打印方法 |
||||
window.location.reload(); // 打印完成后重新加载页面 |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */ |
||||
@media (max-width: 2000px) { |
||||
::v-deep .el-dialog { |
||||
width: 800px !important; |
||||
} |
||||
::v-deep .print-dialog .el-dialog { |
||||
width: 1200px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item__label { |
||||
width: 150px !important; |
||||
} |
||||
::v-deep .el-dialog .el-form-item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
// ::v-deep .el-dialog { |
||||
// width: 8rem !important; |
||||
// } |
||||
|
||||
// ::v-deep .el-dialog .el-form-item__label { |
||||
// width: 1.5rem !important; |
||||
// } |
||||
// ::v-deep .el-dialog .el-form-item { |
||||
// display: flex; |
||||
// flex-direction: row; |
||||
// align-items: center; |
||||
// } |
||||
} |
||||
</style> |
||||
@ -1,431 +0,0 @@
|
||||
<template> |
||||
<div class="app-container" v-loading="loading"> |
||||
<!-- 状态统计 --> |
||||
<div class="status-statistics"> |
||||
<div class="status-card"> |
||||
<div class="status-label">运行设备</div> |
||||
<div class="status-value-running"> |
||||
{{ statistics.running }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">手动模式</div> |
||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">自动模式</div> |
||||
<div class="status-value-maintenance"> |
||||
{{ statistics.auto }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">故障设备</div> |
||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
||||
</div> |
||||
</div> |
||||
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||
<el-tab-pane label="主机" name="host"> </el-tab-pane> |
||||
<el-tab-pane label="冷却塔" name="second"> </el-tab-pane> |
||||
<el-tab-pane label="冷却泵" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷冻泵" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane> |
||||
<el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane> |
||||
</el-tabs> |
||||
<!-- 非蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="hostList" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="coolingTowerFanList" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="coolingPump" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<div class="device-container"> |
||||
<list-header |
||||
:deviceList="freezingPump" |
||||
@operationControl="hadleOperationConrol" |
||||
></list-header> |
||||
</div> |
||||
<!-- 蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="freezingValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="coolingValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
<div class="device-container"> |
||||
<vavleheader |
||||
:valveList="coolingTowerOutValve" |
||||
@operationControl="hadleOperationConrol" |
||||
></vavleheader> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
||||
import listHeader from "./listHeader.vue"; |
||||
import Vavleheader from "./vavleheader.vue"; |
||||
export default { |
||||
components: { listHeader, Vavleheader }, |
||||
name: "sysMonitor", |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
deviceList: [], //全部 |
||||
hostList: [], //主机 |
||||
coolingTowerFanList: [], //冷却塔风机 |
||||
coolingPump: [], //冷却泵 |
||||
freezingPump: [], //冷冻泵 |
||||
valveList: [], //阀 |
||||
total: null, |
||||
freezingValve: [], //冷冻蝶阀 |
||||
coolingValve: [], //冷却蝶阀 |
||||
coolingTowerOutValve: [], //冷却塔出水阀 |
||||
activeName: "host", //设备管理 |
||||
}; |
||||
}, |
||||
computed: { |
||||
statistics() { |
||||
const deviceManual = this.deviceList.filter( |
||||
(d) => d.automaticText === false |
||||
).length; |
||||
const deviceAuto = this.deviceList.filter( |
||||
(d) => d.automaticText === true |
||||
).length; |
||||
const valveManual = this.valveList.filter( |
||||
(v) => v.automaticText === false |
||||
).length; |
||||
const valveAuto = this.valveList.filter( |
||||
(v) => v.automaticText === true |
||||
).length; |
||||
|
||||
return { |
||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
||||
manual: deviceManual + valveManual, |
||||
auto: deviceAuto + valveAuto, |
||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
||||
}; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getOperationList(); |
||||
}, |
||||
methods: { |
||||
handleClick(tab, event) { |
||||
console.log(tab, event); |
||||
}, |
||||
// 系统控制列表 |
||||
getOperationList() { |
||||
return new Promise((resolve, reject) => { |
||||
operationList({ systemType: 0 }) |
||||
.then((res) => { |
||||
console.log("列表返回res", res); |
||||
if (res.code === 200) { |
||||
let handleList = res.rows; |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
handleList.forEach((element) => { |
||||
if (element.children && element.children.length > 0) { |
||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
||||
let deviceItem = { |
||||
name: element.name, |
||||
}; |
||||
// 初始化一个空对象来存储阀门处理后的结果 |
||||
let valveItem = { |
||||
name: element.name, |
||||
}; |
||||
|
||||
const limitedChildren = element.children; |
||||
let valveClosed = false; |
||||
let valveOpened = false; |
||||
|
||||
limitedChildren.forEach((child) => { |
||||
if (child.name) { |
||||
// 运行状态 |
||||
if ( |
||||
child.paramType === "1" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.runStatus = |
||||
Number(child.value) == 0 ? "不运行" : "运行"; |
||||
} |
||||
// 手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
deviceItem.controlId = child.id; |
||||
} |
||||
// 手自动切换 0自动1手动 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
deviceItem.automaticId = child.id; |
||||
} |
||||
// 故障报警 |
||||
else if ( |
||||
child.paramType === "5" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.warnText = |
||||
Number(child.value) == 0 ? "未故障" : "故障"; |
||||
// 本地远程 |
||||
} else if ( |
||||
child.paramType === "22" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 频率调节 |
||||
else if ( |
||||
child.paramType === "3" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.frequencySet = |
||||
Number(child.value) == 0 ? "0" : child.value; |
||||
deviceItem.frequencyId = child.id; |
||||
} |
||||
// 频率反馈 |
||||
else if (child.paramType === "4") { |
||||
deviceItem.frequency = child.value; |
||||
} |
||||
|
||||
// 阀门的-手自动切换 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
valveItem.automaticId = child.id; |
||||
} |
||||
// 阀门的-手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
valveItem.controlId = child.id; |
||||
} |
||||
|
||||
// 记录阀关到位状态 |
||||
if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveClosed = false; |
||||
} else if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveClosed = true; |
||||
} |
||||
// 记录阀开到位的状态 |
||||
if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveOpened = false; |
||||
} else if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveOpened = true; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
||||
if (valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "开启"; |
||||
valveItem.openStauts = "关闭"; |
||||
} else if (!valveClosed && valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "开启"; |
||||
} else if (!valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "关闭"; |
||||
} |
||||
|
||||
// 将处理后的对象添加到 deviceList 中 |
||||
if (Object.keys(deviceItem).length > 1) { |
||||
this.deviceList.push(deviceItem); |
||||
} |
||||
// 将处理后的对象添加到 valveList 中 |
||||
if (Object.keys(valveItem).length > 1) { |
||||
this.valveList.push(valveItem); |
||||
} |
||||
} |
||||
}); |
||||
this.valveList = this.valveList.filter( |
||||
(item) => item.name && item.name.includes("阀") |
||||
); |
||||
console.log("处理过的this.deviceList", this.deviceList); |
||||
console.log("处理过的this.valveList", this.valveList); |
||||
this.total = this.deviceList.length + this.valveList.length; |
||||
|
||||
// 再分类不同的设备列表 |
||||
this.hostList = []; |
||||
this.coolingTowerFanList = []; |
||||
this.coolingPump = []; |
||||
this.freezingPump = []; |
||||
this.freezingValve = []; |
||||
this.coolingValve = []; |
||||
this.coolingTowerOutValve = []; |
||||
this.deviceList.forEach((list) => { |
||||
if (list.name.includes("机") && !list.name.includes("风")) { |
||||
this.hostList.push(list); |
||||
} |
||||
if (list.name.includes("风机")) { |
||||
this.coolingTowerFanList.push(list); |
||||
} |
||||
if (list.name.includes("冷却泵")) { |
||||
this.coolingPump.push(list); |
||||
} |
||||
if (list.name.includes("冷冻泵")) { |
||||
this.freezingPump.push(list); |
||||
} |
||||
}); |
||||
this.valveList.forEach((list) => { |
||||
if (list.name.includes("冷冻蝶阀")) { |
||||
this.freezingValve.push(list); |
||||
} |
||||
if (list.name.includes("冷却蝶阀")) { |
||||
this.coolingValve.push(list); |
||||
} |
||||
if (list.name.includes("冷却塔出水阀")) { |
||||
this.coolingTowerOutValve.push(list); |
||||
} |
||||
}); |
||||
console.log("处理过后的主机列表", this.hostList); |
||||
} else { |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
this.total = 0; |
||||
} |
||||
// 成功时解析 Promise |
||||
resolve(res); |
||||
}) |
||||
.catch((error) => { |
||||
// 失败时拒绝 Promise |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
// 操作 |
||||
hadleOperationConrol(id, param) { |
||||
let data = { |
||||
id: id, |
||||
param: param, |
||||
}; |
||||
console.log("操作参数", data); |
||||
operationConrol([data]) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("指令下发成功!"); |
||||
// 开启 loading 效果 |
||||
this.loading = true; |
||||
// 更新所有设备状态; |
||||
setTimeout(() => { |
||||
this.getOperationList().finally(() => { |
||||
// 关闭 loading 效果 |
||||
this.loading = false; |
||||
}); |
||||
}, 6000); |
||||
} else { |
||||
// this.$modal.msgError("操作失败"); |
||||
console.log("应该更新状态的"); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log("请求发生错误，更新设备状态", error); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/* 设备控制列表样式 */ |
||||
.device-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
background-color: #142c4e; |
||||
padding: 10px 10px 30px 10px; |
||||
border-radius: 10px; |
||||
margin-bottom: 20px; |
||||
} |
||||
/* 状态统计样式 */ |
||||
.status-statistics { |
||||
margin-bottom: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.status-card { |
||||
background-color: #142c4e; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
width: 24%; |
||||
} |
||||
|
||||
.status-label { |
||||
color: #9ca3af; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.status-value-running { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #22c55e; |
||||
} |
||||
|
||||
.status-value-auto { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #60a5fa; |
||||
} |
||||
|
||||
.status-value-error { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #ef4444; |
||||
} |
||||
|
||||
.status-value-maintenance { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #f59e0b; |
||||
} |
||||
</style> |
||||
@ -1,643 +0,0 @@
|
||||
<template> |
||||
<div class="app-container" v-loading="loading"> |
||||
<!-- 状态统计 --> |
||||
<div class="status-statistics"> |
||||
<div class="status-card"> |
||||
<div class="status-label">运行设备</div> |
||||
<div class="status-value-running"> |
||||
{{ statistics.running }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">手动模式</div> |
||||
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">自动模式</div> |
||||
<div class="status-value-maintenance"> |
||||
{{ statistics.auto }}/{{ total }} |
||||
</div> |
||||
</div> |
||||
<div class="status-card"> |
||||
<div class="status-label">故障设备</div> |
||||
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div> |
||||
</div> |
||||
</div> |
||||
<!-- 非蝶阀控制列表 --> |
||||
<div class="device-container"> |
||||
<!-- <div class="device-li"> |
||||
<div class="device-name">设备名称</div> |
||||
<div class="device-name">运行状态</div> |
||||
<div class="device-name">手动控制</div> |
||||
<div class="device-name">手自动切换</div> |
||||
<div class="device-name">本地远程状态</div> |
||||
<div class="device-name">故障报警</div> |
||||
<div class="device-name">频率调节</div> |
||||
<div class="device-name">频率反馈</div> |
||||
</div> --> |
||||
<list-header :deviceList ="deviceList"></list-header> |
||||
<!-- <div class="device-li" v-for="(item, index) in deviceList" :key="index"> |
||||
<div class="device-name">{{ item.name }}</div> |
||||
<div class="device-name"> |
||||
<div |
||||
class="run" |
||||
:class="item.runStatus === '运行' ? 'run' : 'no-run'" |
||||
> |
||||
{{ item.runStatus }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.controlText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleControlText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.automaticText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="自动" |
||||
inactive-text="手动" |
||||
@change="handleAutomaticText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<span |
||||
:class=" |
||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
||||
" |
||||
>{{ item.localRemote }}</span |
||||
> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'"> |
||||
{{ item.warnText }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-input |
||||
v-if="item.frequencySet !== null && item.frequencySet !== undefined" |
||||
v-model="item.frequencySet" |
||||
size="mini" |
||||
@keyup.enter.native="handleEnter(item)" |
||||
@input="handleInput(item)" |
||||
></el-input> |
||||
<div class="device-name" v-else></div> |
||||
</div> |
||||
<div class="device-name" v-if="item.frequency"> |
||||
{{ item.frequency }}Hz |
||||
</div> |
||||
<div class="device-name" v-else></div> |
||||
</div> --> |
||||
</div> |
||||
<!-- 蝶阀控制列表 --> |
||||
<div class="device-container second"> |
||||
<div class="device-li"> |
||||
<div class="device-name">设备名称</div> |
||||
<div class="device-name">手动控制</div> |
||||
<div class="device-name">手自动切换</div> |
||||
<div class="device-name">本地远程状态</div> |
||||
<div class="device-name">阀关反馈</div> |
||||
<div class="device-name">阀开反馈</div> |
||||
</div> |
||||
<div class="device-li" v-for="(item, index) in valveList" :key="index"> |
||||
<div class="device-name">{{ item.name }}</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.controlText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="停止" |
||||
@change="handleControlText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="item.automaticText" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="自动" |
||||
inactive-text="手动" |
||||
@change="handleAutomaticText(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="device-name"> |
||||
<span |
||||
:class=" |
||||
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric' |
||||
" |
||||
>{{ item.localRemote }}</span |
||||
> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div |
||||
:class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'" |
||||
> |
||||
{{ item.openStauts }} |
||||
</div> |
||||
</div> |
||||
<div class="device-name"> |
||||
<div |
||||
:class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'" |
||||
> |
||||
{{ item.closeStatus }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor"; |
||||
import listHeader from "./listHeader.vue"; |
||||
export default { |
||||
components: { listHeader }, |
||||
name: "sysMonitor", |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
deviceList: [], //全部 |
||||
hostList: [], //主机 |
||||
coolingTowerFanList: [], //冷却塔风机 |
||||
coolingPump: [], //冷却泵 |
||||
freezingPump: [], //冷冻泵 |
||||
valveList: [], //阀 |
||||
total: null, |
||||
freezingValve: [], //冷冻蝶阀 |
||||
coolingValve: [], //冷却蝶阀 |
||||
coolingTowerOutValve: [], //冷却塔出水阀 |
||||
}; |
||||
}, |
||||
computed: { |
||||
statistics() { |
||||
const deviceManual = this.deviceList.filter( |
||||
(d) => d.automaticText === false |
||||
).length; |
||||
const deviceAuto = this.deviceList.filter( |
||||
(d) => d.automaticText === true |
||||
).length; |
||||
const valveManual = this.valveList.filter( |
||||
(v) => v.automaticText === false |
||||
).length; |
||||
const valveAuto = this.valveList.filter( |
||||
(v) => v.automaticText === true |
||||
).length; |
||||
|
||||
return { |
||||
running: this.deviceList.filter((d) => d.runStatus === "运行").length, |
||||
manual: deviceManual + valveManual, |
||||
auto: deviceAuto + valveAuto, |
||||
warn: this.deviceList.filter((d) => d.warnText === "故障").length, |
||||
}; |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getOperationList(); |
||||
}, |
||||
methods: { |
||||
// 系统控制列表 |
||||
getOperationList() { |
||||
return new Promise((resolve, reject) => { |
||||
operationList({ systemType: 0 }) |
||||
.then((res) => { |
||||
console.log("列表返回res", res); |
||||
if (res.code === 200) { |
||||
let handleList = res.rows; |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
handleList.forEach((element) => { |
||||
if (element.children && element.children.length > 0) { |
||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
||||
let deviceItem = { |
||||
name: element.name, |
||||
}; |
||||
// 初始化一个空对象来存储阀门处理后的结果 |
||||
let valveItem = { |
||||
name: element.name, |
||||
}; |
||||
|
||||
const limitedChildren = element.children; |
||||
let valveClosed = false; |
||||
let valveOpened = false; |
||||
|
||||
limitedChildren.forEach((child) => { |
||||
if (child.name) { |
||||
// 运行状态 |
||||
if ( |
||||
child.paramType === "1" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.runStatus = |
||||
Number(child.value) == 0 ? "不运行" : "运行"; |
||||
} |
||||
// 手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
deviceItem.controlId = child.id; |
||||
} |
||||
// 手自动切换 0自动1手动 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
deviceItem.automaticId = child.id; |
||||
} |
||||
// 故障报警 |
||||
else if ( |
||||
child.paramType === "5" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.warnText = |
||||
Number(child.value) == 0 ? "未故障" : "故障"; |
||||
// 本地远程 |
||||
} else if ( |
||||
child.paramType === "22" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 频率调节 |
||||
else if ( |
||||
child.paramType === "3" && |
||||
!child.name.includes("阀") |
||||
) { |
||||
deviceItem.frequencySet = |
||||
Number(child.value) == 0 ? "0" : child.value; |
||||
deviceItem.frequencyId = child.id; |
||||
} |
||||
// 频率反馈 |
||||
else if (child.paramType === "4") { |
||||
deviceItem.frequency = child.value; |
||||
} |
||||
|
||||
// 阀门的-本地远程状态 |
||||
else if ( |
||||
child.paramType === "22" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.localRemote = |
||||
Number(child.value) == 0 ? "本地" : "远程"; |
||||
} |
||||
// 阀门的-手自动切换 |
||||
else if ( |
||||
child.paramType === "6" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.automaticText = |
||||
Number(child.value) == 0 ? true : false; |
||||
valveItem.automaticId = child.id; |
||||
} |
||||
// 阀门的-手动控制 |
||||
else if ( |
||||
child.paramType === "2" && |
||||
child.name.includes("阀") |
||||
) { |
||||
valveItem.controlText = |
||||
Number(child.value) == 0 ? false : true; |
||||
valveItem.controlId = child.id; |
||||
} |
||||
|
||||
// 记录阀关到位状态 |
||||
if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveClosed = false; |
||||
} else if ( |
||||
child.name.includes("阀关到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveClosed = true; |
||||
} |
||||
// 记录阀开到位的状态 |
||||
if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 0 |
||||
) { |
||||
valveOpened = false; |
||||
} else if ( |
||||
child.name.includes("阀开到位") && |
||||
Number(child.value) == 1 |
||||
) { |
||||
valveOpened = true; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// 根据阀关到位和阀开到位的状态设置阀门状态 |
||||
if (valveClosed && !valveOpened) { |
||||
valveItem.closeStatus = "开启"; |
||||
valveItem.openStauts = "关闭"; |
||||
} else if (!valveClosed && valveOpened) { |
||||
valveItem.closeStatus = "关闭"; |
||||
valveItem.openStauts = "开启"; |
||||
} |
||||
|
||||
// 将处理后的对象添加到 deviceList 中 |
||||
if (Object.keys(deviceItem).length > 1) { |
||||
this.deviceList.push(deviceItem); |
||||
} |
||||
// 将处理后的对象添加到 valveList 中 |
||||
if (Object.keys(valveItem).length > 1) { |
||||
this.valveList.push(valveItem); |
||||
} |
||||
} |
||||
}); |
||||
console.log("处理过的this.deviceList", this.deviceList); |
||||
console.log("处理过的this.valveList", this.valveList); |
||||
this.total = this.deviceList.length + this.valveList.length; |
||||
|
||||
// 再分类不同的设备列表 |
||||
this.hostList = []; |
||||
this.deviceList.forEach((list) => { |
||||
if (list.name.includes("机") && !list.name.includes("风")) { |
||||
this.hostList.push(list); |
||||
} |
||||
}); |
||||
console.log("处理过后的主机列表", this.hostList); |
||||
} else { |
||||
this.deviceList = []; |
||||
this.valveList = []; |
||||
this.total = 0; |
||||
} |
||||
// 成功时解析 Promise |
||||
resolve(res); |
||||
}) |
||||
.catch((error) => { |
||||
// 失败时拒绝 Promise |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
// 处理输入事件，过滤非数字字符 |
||||
handleInput(item) { |
||||
console.log("校验"); |
||||
// 实时校验并过滤非数字字符 |
||||
item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, ""); |
||||
}, |
||||
handleEnter(item) { |
||||
console.log("请求后端"); |
||||
this.$confirm( |
||||
`确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
this.hadleOperationConrol(item.frequencyId, item.frequencySet); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，需要更新原来的频率 |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
//手动控制 |
||||
handleControlText(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.controlText ? "开启" : "停止 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
// 这里调用请求函数 |
||||
console.log("请求后台", item.controlText); |
||||
let param = null; |
||||
if (item.controlText) { |
||||
param = 1; |
||||
} else { |
||||
param = 0; |
||||
} |
||||
this.hadleOperationConrol(item.controlId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.controlText = !item.controlText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
// 手自动切换 |
||||
handleAutomaticText(item) { |
||||
this.$confirm( |
||||
`确定要切换设备"${item.name}"的状态为:${ |
||||
item.automaticText ? "自动" : "手动 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
// 这里调用请求函数 |
||||
console.log("请求后台", item.automaticText); |
||||
let param = null; |
||||
if (item.automaticText) { |
||||
param = 0; |
||||
} else { |
||||
param = 1; |
||||
} |
||||
this.hadleOperationConrol(item.automaticId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.automaticText = !item.automaticText; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
hadleOperationConrol(id, param) { |
||||
let data = { |
||||
id: id, |
||||
param: param, |
||||
}; |
||||
console.log("操作参数", data); |
||||
operationConrol([data]) |
||||
.then((res) => { |
||||
if (res.code == 200) { |
||||
this.$modal.msgSuccess("操作成功"); |
||||
// 开启 loading 效果 |
||||
this.loading = true; |
||||
// 更新所有设备状态; |
||||
setTimeout(() => { |
||||
this.getOperationList().finally(() => { |
||||
// 关闭 loading 效果 |
||||
this.loading = false; |
||||
}); |
||||
}, 6000); |
||||
} else { |
||||
// this.$modal.msgError("操作失败"); |
||||
console.log("应该更新状态的"); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log("请求发生错误，更新设备状态", error); |
||||
// 更新所有设备状态; |
||||
this.getOperationList(); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/* 设备控制列表样式 */ |
||||
.device-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
background-color: #142c4e; |
||||
padding: 10px 10px 30px 10px; |
||||
border-radius: 10px; |
||||
.device-li { |
||||
flex: 1; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
padding: 12px 0; |
||||
color: #abcdfc; |
||||
border-bottom: 1px dashed #0349ac; |
||||
.device-name { |
||||
flex: 1; |
||||
white-space: nowrap; |
||||
.el-switch { |
||||
width: 120px !important; |
||||
} |
||||
.run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(16, 231, 16); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.no-run { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
display: block; |
||||
} |
||||
.no-run::before { |
||||
content: ""; |
||||
display: inline-block; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: rgb(180, 180, 180); |
||||
border-radius: 50%; |
||||
margin-right: 5px; |
||||
} |
||||
.el-input { |
||||
width: 100px; |
||||
} |
||||
.strong-electric { |
||||
background-color: rgba(59, 130, 246, 0.2); |
||||
color: #60a5fa; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.auto-electric { |
||||
background-color: rgba(231, 144, 45, 0.2); |
||||
color: #e47f21; |
||||
padding: 5px 20px; |
||||
border-radius: 10px; |
||||
} |
||||
.good-status { |
||||
color: #4ade80; |
||||
} |
||||
.bad-status { |
||||
color: #f05348; |
||||
} |
||||
} |
||||
} |
||||
.device-li:nth-child(1) { |
||||
color: #9ca3af; |
||||
} |
||||
} |
||||
.second { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
/* 状态统计样式 */ |
||||
.status-statistics { |
||||
margin-bottom: 25px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.status-card { |
||||
background-color: #142c4e; |
||||
border-radius: 10px; |
||||
padding: 10px; |
||||
width: 24%; |
||||
} |
||||
|
||||
.status-label { |
||||
color: #9ca3af; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.status-value-running { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #22c55e; |
||||
} |
||||
|
||||
.status-value-auto { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #60a5fa; |
||||
} |
||||
|
||||
.status-value-error { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #ef4444; |
||||
} |
||||
|
||||
.status-value-maintenance { |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
color: #f59e0b; |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,430 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="日期" prop="msgCode"> |
||||
<el-date-picker |
||||
style="width: auto" |
||||
v-model="monthValue" |
||||
type="month" |
||||
placeholder="选择月" |
||||
value-format="yyyy-MM" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="warning-btn"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column label="日期" align="center" prop="dateAndWeek" /> |
||||
<el-table-column label="最高气温" align="center" prop="maxTemp" /> |
||||
<el-table-column label="最低气温" align="center" prop="minTemp" /> |
||||
<el-table-column label="天气" align="center" prop="weatherConditions" /> |
||||
<el-table-column label="风向" align="center" prop="windDirection" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { weatherTempData } from "@/api/centerairC/temHistory"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
name: "temHistoryQuery", |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
monthValue: "", |
||||
chartInstance: null, |
||||
option: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 获取当前日期 |
||||
const currentDate = new Date(); |
||||
// 获取当前年份 |
||||
const year = currentDate.getFullYear(); |
||||
// 获取当前月份，注意月份是从 0 开始的，所以要加 1 |
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0"); |
||||
// 格式化日期为 yyyy-MM 格式 |
||||
this.monthValue = `${year}-${month}`; |
||||
}, |
||||
mounted() { |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.getChartData(); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// 修改颜色 |
||||
if (columnIndex === 1) { |
||||
return "color: #fd1e00;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 2) { |
||||
return "color: #3390ff;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 4) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
getChartData() { |
||||
this.loading = true; |
||||
this.queryParams.pageNum = 0; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("图表参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
console.log("处理值然后渲染"); |
||||
if (response.rows.length > 0) { |
||||
let data = response.rows; |
||||
let timeValue = []; |
||||
let hightValue = []; |
||||
let lowValue = []; |
||||
data.forEach((element) => { |
||||
timeValue.push(element.weatherDate); |
||||
hightValue.push(element.maxTemp); |
||||
lowValue.push(element.minTemp); |
||||
}); |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: timeValue, |
||||
}, |
||||
yAxis: { |
||||
name: "℃", |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: hightValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(18, 126, 226)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(18, 126, 226)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
{ |
||||
data: lowValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(250, 169, 19)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(250, 169, 19)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
}, |
||||
{ |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
this.getChartData(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.handleQuery(); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.queryParams.pageNum = 1; |
||||
this.queryParams.pageSize = 32; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
if (response.code == 200) { |
||||
import("@/assets/excel/Export2Excel").then((excel) => { |
||||
var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数 |
||||
var filterVal = [ |
||||
"dateAndWeek", |
||||
"maxTemp", |
||||
"minTemp", |
||||
"weatherConditions", |
||||
"windDirection", |
||||
]; |
||||
const data = this.formatJson(filterVal, response.rows); |
||||
const autoWidth = true; |
||||
excel.export_json_to_excel({ |
||||
header: tHeader, //表头 |
||||
data, //数据 |
||||
filename: "历史天气报表", //名称 |
||||
autoWidth: true, //宽度自适应 |
||||
}); |
||||
this.$message({ |
||||
type: "success", |
||||
message: "导出成功!", |
||||
}); |
||||
}); |
||||
} else { |
||||
this.$message.error("导出失败!"); |
||||
} |
||||
}); |
||||
}, |
||||
//格式转换,不需要改动 |
||||
formatJson(filterVal, jsonData) { |
||||
return jsonData.map((v) => |
||||
filterVal.map((j) => { |
||||
if (j === "installDate") { |
||||
return format(v[j]); |
||||
} else { |
||||
return v[j]; |
||||
} |
||||
}) |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
this.option = { |
||||
tooltip: { |
||||
// 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发 |
||||
trigger: "axis", |
||||
textStyle: { |
||||
// 设置提示框内文字的大小 |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
// textStyle: { |
||||
// // 设置图例文字的大小 |
||||
// fontSize: 14 |
||||
// } |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
bottom: "3%", |
||||
containLabel: true, |
||||
}, |
||||
xAxis: { |
||||
type: "category", |
||||
//设置为true代表离零刻度间隔一段距离 |
||||
boundaryGap: true, |
||||
// 修饰刻度标签的颜色即x坐标数据 |
||||
axisLabel: { |
||||
// interval: 0, //强制显示所有x轴数据 |
||||
// rotate: 30, //x轴坐标字体倾斜30度 |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, //y轴单位文字大小 |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最高气温", |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最低气温", |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.charts { |
||||
height: 3rem !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,460 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: "", |
||||
chartData2: "", |
||||
allData: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.chartData1 = ""; |
||||
this.chartData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("运行")) { |
||||
this.chartData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("停止")) { |
||||
this.chartData2 = parseInt(item.value); |
||||
} |
||||
// 计算总和 |
||||
this.allData = this.chartData1 + this.chartData2; |
||||
}); |
||||
this.$nextTick(() => { |
||||
// // 销毁现有的 ECharts 实例 |
||||
// if (this.chartInstance) { |
||||
// this.chartInstance.dispose(); |
||||
// } |
||||
// // 重新初始化图表 |
||||
// this.initChart(); |
||||
this.echartsData(); |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.subData); |
||||
if (this.subData) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.chartData1, name: "运行数" }, |
||||
{ value: this.chartData2, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "风柜系统:", |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "运行数" }, |
||||
{ value: 0, name: "停止数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtext: "运行状态", |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
subtextStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
textAlign: "center", |
||||
x: "49%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "horizontal", // 水平布局 |
||||
bottom: 0, // 位于最底部 |
||||
left: "center", // 水平居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "风柜系统:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#0882ff", "#ffe21e"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#02427f", "#385f5c"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
}, |
||||
// 最里面渐变小圆 |
||||
{ |
||||
// 颜色 |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["0%", "38%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
padding: 20px; |
||||
.charts { |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.sys_content { |
||||
padding: 0.2rem !important; |
||||
.charts { |
||||
width: 100%; |
||||
height: 2.5rem !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,142 @@
|
||||
<template> |
||||
<div class="card-div"> |
||||
<div class="card-li room-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">回水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData1}}℃</div> |
||||
</div> |
||||
<div class="card-li amb-temp"> |
||||
<div class="card-header"> |
||||
<h2 class="card-title">供水平均温度</h2> |
||||
<div class="icon"> |
||||
<i class="fas fa-home"></i> |
||||
</div> |
||||
</div> |
||||
<div class="thermometer"> |
||||
<div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div> |
||||
</div> |
||||
<div class="temperature">{{temData2}}℃</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
temData1: "", |
||||
temData2: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.temData1 = ""; |
||||
this.temData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("回水")) { |
||||
this.temData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("供水")) { |
||||
this.temData2 = parseInt(item.value); |
||||
} |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card-div { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
.card-li { |
||||
width: 50%; |
||||
padding: 0.2rem 0; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.card-header { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
margin-bottom: 0.1rem; |
||||
.card-title { |
||||
font-size: 15px; |
||||
font-weight: 600; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 20px; |
||||
font-weight: 700; |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
.thermometer { |
||||
height: 180px; |
||||
width: 40px; |
||||
background: #3d5581; |
||||
border-radius: 20px; |
||||
margin: 0 auto 0.25rem; |
||||
overflow: hidden; |
||||
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); |
||||
position: relative; |
||||
} |
||||
.temprogress { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
border-top-left-radius: 20px; |
||||
border-top-right-radius:20px; |
||||
background: linear-gradient(to top, #3498db, #2ecc71) !important; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 2000px) { |
||||
.card-div { |
||||
.card-li { |
||||
.card-header { |
||||
.card-title { |
||||
font-size: 0.15rem !important; |
||||
} |
||||
} |
||||
.temperature { |
||||
font-size: 0.2rem !important; |
||||
} |
||||
.thermometer { |
||||
height: 1.8rem !important; |
||||
width: 0.4rem !important; |
||||
border-radius: 0.2rem !important; |
||||
} |
||||
.temprogress { |
||||
border-top-left-radius: 0.2rem !important; |
||||
border-top-right-radius:0.2rem !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,460 @@
|
||||
<template> |
||||
<div class="sys_content"> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
subData: { |
||||
type: Array, |
||||
required: true, |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
chartData1: "", |
||||
chartData2: "", |
||||
allData: "", |
||||
}; |
||||
}, |
||||
watch: { |
||||
subData: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
console.log("检测到传功来的数据", this.subData); |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
let data = newVal; |
||||
this.chartData1 = ""; |
||||
this.chartData2 = ""; |
||||
data.forEach((item) => { |
||||
if (item.name.includes("在线")) { |
||||
this.chartData1 = parseInt(item.value); |
||||
} |
||||
if (item.name.includes("离线")) { |
||||
this.chartData2 = parseInt(item.value); |
||||
} |
||||
// 计算总和 |
||||
this.allData = this.chartData1 + this.chartData2; |
||||
}); |
||||
this.$nextTick(() => { |
||||
// // 销毁现有的 ECharts 实例 |
||||
// if (this.chartInstance) { |
||||
// this.chartInstance.dispose(); |
||||
// } |
||||
// // 重新初始化图表 |
||||
// this.initChart(); |
||||
this.echartsData(); |
||||
}); |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.subData); |
||||
if (this.subData) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 2, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "温度监测:", |
||||
data: [ |
||||
{ value: this.chartData1, name: "在线数" }, |
||||
{ value: this.chartData2, name: "离线数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.chartData1, name: "在线数" }, |
||||
{ value: this.chartData2, name: "离线数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 2, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
legend: { |
||||
itemWidth: titleFontSize, |
||||
itemHeight: titleFontSize, |
||||
itemGap: titleFontSize * 2, |
||||
formatter: function (name) { |
||||
var arr = []; |
||||
let data = adapterOption.series[0].data; |
||||
var index = 0; |
||||
var total = 0; |
||||
// 计算总和 |
||||
for (var i = 0; i < data.length; i++) { |
||||
total += data[i].value; |
||||
if (data[i].name == name) { |
||||
index = i; |
||||
} |
||||
} |
||||
// 检查当前项的值是否为 0 |
||||
var percentage = |
||||
data[index].value === 0 |
||||
? "0.00" |
||||
: ((data[index].value / total) * 100).toFixed(2); |
||||
arr.push( |
||||
"{name|" + name + "}", |
||||
"{text|" + " " + ":" + " " + "}", |
||||
"{value|" + data[index].value + " " + "}", |
||||
"{percentage|" + " " + percentage + "%}" |
||||
); |
||||
return arr.join(""); |
||||
}, |
||||
textStyle: { |
||||
color: function (name) { |
||||
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||
const index = dataSeries.findIndex( |
||||
(item) => item.name === name |
||||
); |
||||
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||
return colorList[index]; |
||||
}, |
||||
rich: { |
||||
name: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
text: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
}, |
||||
value: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
percentage: { |
||||
align: "left", |
||||
fontSize: titleFontSize * 1.6, |
||||
// color: function (params) { |
||||
// let data = adapterOption.series[1].data; |
||||
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||
// }, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "温度监测:", |
||||
data: [ |
||||
{ value: 0, name: "在线数" }, |
||||
{ value: 0, name: "离线数" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "在线数" }, |
||||
{ value: 0, name: "离线数" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
this.option = { |
||||
//环形图中间文字 |
||||
title: { |
||||
subtext: "在线状态", |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
subtextStyle: { |
||||
color: "#ffffff", |
||||
}, |
||||
textAlign: "center", |
||||
x: "49%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "horizontal", // 水平布局 |
||||
bottom: 0, // 位于最底部 |
||||
left: "center", // 水平居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "温度监测:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#2df499", "#08c8ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["50%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#09596b", "#024e7d"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
}, |
||||
// 最里面渐变小圆 |
||||
{ |
||||
// 颜色 |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["0%", "38%"], |
||||
center: ["50%", "44%"], |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
name: "", |
||||
itemStyle: {}, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.sys_content { |
||||
padding: 20px; |
||||
.charts { |
||||
width: 100%; |
||||
height: 250px; |
||||
} |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.sys_content { |
||||
padding: 0.2rem !important; |
||||
.charts { |
||||
width: 100%; |
||||
height: 2.5rem !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue