71 changed files with 6655 additions and 550 deletions
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
//根据房间号查询对应的风柜系统操作
|
||||
export function windList(query) { |
||||
return request({ |
||||
url: "/device/ahu/monitor/list", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,35 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 能耗总览和基本信息、冷源系统和生活热水系统能耗
|
||||
export function overView(data) { |
||||
return request({ |
||||
url: "/bigScreen/overview", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 用电趋势
|
||||
export function systemTrend(data) { |
||||
return request({ |
||||
url: "/bigScreen/systemTrend", |
||||
method: "post", |
||||
data: data, |
||||
}); |
||||
} |
||||
|
||||
// 天气数据
|
||||
export function getWeatherData() { |
||||
return request({ |
||||
url: "/device/cs/getWeatherData", |
||||
method: "get", |
||||
}); |
||||
} |
||||
|
||||
// 运行时间
|
||||
export function getRunTime() { |
||||
return request({ |
||||
url: "/device/cs/runTime", |
||||
method: "get", |
||||
}); |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 历史数据
|
||||
export function temHistory(query) { |
||||
return request({ |
||||
url: "/device/indoor/tempHis", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
@ -0,0 +1,10 @@
|
||||
import request from "@/utils/request"; |
||||
|
||||
// 设备监视
|
||||
export function temList(query) { |
||||
return request({ |
||||
url: "/device/indoor/tempList", |
||||
method: "get", |
||||
params: query, |
||||
}); |
||||
} |
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 224 KiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 537 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
After Width: | Height: | Size: 10 MiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 783 B |
@ -0,0 +1,2 @@
|
||||
import Vue from "vue"; |
||||
export const eventBus = new Vue(); |
||||
@ -0,0 +1,758 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="left-tree"> |
||||
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
||||
<div style="height: 7rem; overflow-y: auto"> |
||||
<el-tree |
||||
ref="tree" |
||||
:data="treeData" |
||||
node-key="id" |
||||
:default-expand-all="false" |
||||
:default-expanded-keys="expandedKeys" |
||||
:auto-expand-parent="true" |
||||
icon-class="none" |
||||
@node-expand="handleNodeExpand" |
||||
@node-collapse="handleNodeCollapse" |
||||
:highlight-current="true" |
||||
@node-click="handleNodeClick" |
||||
> |
||||
<template #default="{ node }"> |
||||
<span class="custom-tree-node"> |
||||
<!-- 根据节点状态动态设置图标类名 --> |
||||
<div class="tree-left"> |
||||
<i :class="getIconClass(node)" class="custom-tree-icon"></i> |
||||
<span class="tree-label">{{ node.label }}</span> |
||||
</div> |
||||
</span> |
||||
</template> |
||||
</el-tree> |
||||
</div> |
||||
</div> |
||||
<div class="right-monitor"> |
||||
<div class="buildingDiv"> |
||||
<img |
||||
class="title-bg" |
||||
src="../../../assets/images/title-bg.png" |
||||
alt="" |
||||
/> |
||||
<div class="title-word">位置：{{ currentName }}</div> |
||||
</div> |
||||
<div class="mostDiv"> |
||||
<div class="windC"> |
||||
<!-- 空调风柜定位 --> |
||||
<img |
||||
class="wind-img" |
||||
src="../../../assets/images/fenggui.png" |
||||
alt="" |
||||
/> |
||||
<!-- 风扇定位 --> |
||||
<img |
||||
class="wind-move tunCircle" |
||||
src="../../../assets/images/fengshan.png" |
||||
alt="" |
||||
/> |
||||
<!-- 箭头定位 --> |
||||
<div class="arrow-flex"> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/orange-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/orange-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/orange-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/orange-arrow.png" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
<div class="arrow-flex2"> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
<div class="arrow-flex3"> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
<img |
||||
class="wind-arrow" |
||||
src="../../../assets/images/blue-arrow.png" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
<div class="wind-tem"> |
||||
<div class="wind-text">回风温度</div> |
||||
<el-input v-model="temValue" size="mini"> |
||||
<svg-icon slot="prefix" icon-class="tem_icon" class="tem-icon" /> |
||||
</el-input> |
||||
</div> |
||||
<div class="wind-valve"> |
||||
<div class="wind-text">电动阀比例调节控制</div> |
||||
<el-input v-model="valvePercent" size="mini"> |
||||
<svg-icon |
||||
slot="prefix" |
||||
icon-class="percentage-icon" |
||||
class="percentage-icon" |
||||
/> |
||||
</el-input> |
||||
</div> |
||||
<div class="fan-run"> |
||||
<div class="wind-text">风机运行状态</div> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="runStatus" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="运行" |
||||
inactive-text="停止" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="fan-auto"> |
||||
<div class="wind-text">风机手自动状态</div> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="autoStatus" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="手动" |
||||
inactive-text="自动" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="fan-start"> |
||||
<div class="wind-text">风机启停控制</div> |
||||
<el-switch |
||||
style="display: block" |
||||
v-model="startStatus" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="关闭" |
||||
inactive-text="打开" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
<div class="fan-frequency"> |
||||
<div class="wind-text">风机变频控制</div> |
||||
<el-input v-model="frequency" size="mini"> |
||||
<svg-icon |
||||
slot="prefix" |
||||
icon-class="percentage-icon" |
||||
class="percentage-icon" |
||||
/> |
||||
</el-input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { spaceTree } from "@/api/region"; |
||||
import { windList } from "@/api/aircAndWindc/index"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
treeData: [], |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label", |
||||
}, |
||||
deviceList: [], |
||||
expandedKeys: [], |
||||
currentId: "", //当前选中高亮的id |
||||
currentName: "", //当前选中的名称 |
||||
currentLevel: "", //当前节点的层级 |
||||
currentParentId: "", //当前节点的上级的id |
||||
|
||||
tableData: [], //系统状态表格数据 |
||||
temValue: "℃", //回风温度 |
||||
valvePercent: "%", //阀比例 |
||||
runStatus: false, //运行状态 |
||||
autoStatus: false, //手自动状态 |
||||
startStatus: false, //启停控制 |
||||
frequency: "v", |
||||
}; |
||||
}, |
||||
watch: { |
||||
temValue(newVal) { |
||||
let valueWithoutTem = newVal.replace(/℃/g, ""); |
||||
if (valueWithoutTem === "") { |
||||
this.temValue = "℃"; |
||||
} else { |
||||
this.temValue = valueWithoutTem + "℃"; |
||||
} |
||||
}, |
||||
valvePercent(newVal) { |
||||
// 去除输入值中的 % |
||||
let valueWithoutPercent = newVal.replace(/%/g, ""); |
||||
// 如果输入值为空，保持 % |
||||
if (valueWithoutPercent === "") { |
||||
this.temValue = "%"; |
||||
} else { |
||||
// 否则在输入值后面添加 % |
||||
this.temValue = valueWithoutPercent + "%"; |
||||
} |
||||
}, |
||||
frequency(newVal) { |
||||
let valueWithoutFrequency = newVal.replace(/v/g, ""); |
||||
if (valueWithoutFrequency === "") { |
||||
this.temValue = "v"; |
||||
} else { |
||||
this.temValue = valueWithoutFrequency + "v"; |
||||
} |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.getSysBuild(); |
||||
}, |
||||
methods: { |
||||
getSysBuild() { |
||||
spaceTree().then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
let newRes = { ...res }; |
||||
|
||||
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
||||
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
||||
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
||||
return item.label && item.label.includes("空调风柜"); |
||||
}); |
||||
} |
||||
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级 |
||||
const targetLevel = 7; |
||||
// 从 data[0] 开始处理，当前层级为 1 |
||||
if (newRes.data[0]) { |
||||
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
||||
} |
||||
console.log("筛选后的新结果", newRes); |
||||
this.treeData = newRes.data; |
||||
this.$nextTick(() => { |
||||
// 默认展开节点 |
||||
this.getExpandedKeys(this.treeData, 1); |
||||
if (this.treeData.length > 0) { |
||||
// 找到最后一层的第一个子节点 |
||||
const lastLevelFirstChild = this.findLastLevelFirstChild( |
||||
this.treeData[0] |
||||
); |
||||
// this.$refs.tree.setCurrentKey( |
||||
// this.treeData[0].children[0].children[0].children[0].id |
||||
// ); |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(lastLevelFirstChild.id); |
||||
// 更新当前节点的信息 |
||||
this.currentId = lastLevelFirstChild.id; |
||||
this.currentLevel = lastLevelFirstChild.level; |
||||
this.currentName = lastLevelFirstChild.label; |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
this.getWindList(); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
// 递归函数，用于去除指定层级往后的 children 数据 |
||||
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
||||
if (currentLevel >= targetLevel) { |
||||
// 当达到指定层级时，将 children 属性置为空数组 |
||||
obj.children = []; |
||||
return; |
||||
} |
||||
if (obj.children && obj.children.length > 0) { |
||||
// 若存在 children 数组，则递归处理每个子项 |
||||
for (let i = 0; i < obj.children.length; i++) { |
||||
this.removeChildrenAfterLevel( |
||||
obj.children[i], |
||||
currentLevel + 1, |
||||
targetLevel |
||||
); |
||||
} |
||||
} |
||||
}, |
||||
// 递归函数，找到最后一层的第一个子节点 |
||||
findLastLevelFirstChild(node, level = 1) { |
||||
if (!node.children || node.children.length === 0) { |
||||
return { |
||||
id: node.id, |
||||
level, |
||||
label: node.label, |
||||
}; |
||||
} |
||||
return this.findLastLevelFirstChild(node.children[0], level + 1); |
||||
}, |
||||
// 默认只展示一二级菜单 |
||||
getExpandedKeys(nodes, level) { |
||||
nodes.forEach((node) => { |
||||
if (level <= this.currentId + 4) { |
||||
this.expandedKeys.push(node.id); |
||||
} |
||||
if (node.children) { |
||||
this.getExpandedKeys(node.children, level + 1); |
||||
} |
||||
}); |
||||
}, |
||||
// 更换图标 |
||||
getIconClass(node) { |
||||
// console.log("当前图标的节点内容", node); |
||||
if (node.level === 5) { |
||||
// 4级菜单时的图标 |
||||
if (node.expanded) { |
||||
return "el-icon-document-opened"; // 三级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-document"; // 三级菜单收缩时的图标类名 |
||||
} |
||||
if (node.expanded) { |
||||
return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名 |
||||
}, |
||||
handleNodeExpand(node) { |
||||
// 节点展开时触发 |
||||
}, |
||||
handleNodeCollapse(node) { |
||||
// 节点收缩时触发 |
||||
}, |
||||
// 点击当前节点，保存节点内容 |
||||
handleNodeClick(node, data) { |
||||
console.log("点击的当前节点", node, data); |
||||
if (data.level !== 5) { |
||||
console.log("不是第5层000"); |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(this.currentId); |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
} else { |
||||
console.log("第5层111"); |
||||
this.currentId = node.id; |
||||
this.currentLevel = data.level; |
||||
this.currentName = node.label; |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(this.currentId); |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
this.getWindList(); |
||||
} |
||||
}, |
||||
// 请求数据 |
||||
getWindList() { |
||||
let data = { |
||||
systemType: "2", |
||||
houseId: this.currentId, |
||||
}; |
||||
windList(data).then((res) => { |
||||
console.log("风柜系统查询返回", res); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.buildingDiv { |
||||
padding-left: 54px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
position: relative; |
||||
.title-bg { |
||||
width: 208px; |
||||
height: 38px; |
||||
position: absolute; |
||||
left: 0; |
||||
z-index: 0; |
||||
} |
||||
.title-word { |
||||
z-index: 10; |
||||
font-family: YouSheBiaoTiHei; |
||||
font-size: 24px; |
||||
color: #ffffff; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.mostDiv { |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.windC { |
||||
width: 13rem; |
||||
height: 5.38rem; |
||||
position: relative; |
||||
.wind-img { |
||||
width: 13rem; |
||||
height: 5.38rem; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 1; |
||||
} |
||||
.wind-tem { |
||||
z-index: 10; |
||||
width: 1.3rem; |
||||
position: absolute; |
||||
top: 0.3rem; |
||||
left: 7.3rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-bottom: 0.15rem; |
||||
} |
||||
} |
||||
.wind-valve { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 4.6rem; |
||||
left: 3rem; |
||||
width: 3rem; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-right: 0.1rem; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.fan-run { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 1.8rem; |
||||
left: 7rem; |
||||
width: 3rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-bottom: 0.15rem; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.fan-auto { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 1.8rem; |
||||
left: 9rem; |
||||
width: 3rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-bottom: 0.15rem; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.fan-start { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 4.6rem; |
||||
left: 7rem; |
||||
width: 3rem; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-bottom: 0.15rem; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.fan-frequency { |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 4.55rem; |
||||
right: 0.5rem; |
||||
width: 2.5rem; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
.wind-text { |
||||
color: #00d2ff; |
||||
font-size: 0.18rem; |
||||
margin-right: 0.1rem; |
||||
white-space: nowrap; |
||||
} |
||||
} |
||||
.wind-move { |
||||
width: 0.72rem; |
||||
height: 0.73rem; |
||||
position: absolute; |
||||
top: 3.23rem; |
||||
right: 3.81rem; |
||||
z-index: 10; |
||||
} |
||||
.tunCircle { |
||||
/* 应用动画 */ |
||||
animation: rotate 2s linear infinite; |
||||
} /* 定义旋转动画 */ |
||||
@keyframes rotate { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
.arrow-flex { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 3.2rem; |
||||
left: -0.1rem; |
||||
} |
||||
.arrow-flex2 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 3.2rem; |
||||
right: 0.6rem; |
||||
} |
||||
.arrow-flex3 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
z-index: 10; |
||||
position: absolute; |
||||
top: 0.6rem; |
||||
right: 6rem; |
||||
transform: rotateY(180deg); |
||||
} |
||||
.wind-arrow { |
||||
width: 0.4rem; |
||||
height: 0.6rem; |
||||
margin-right: 0.15rem; |
||||
animation: moveArrow 2s linear infinite; |
||||
} |
||||
/* 定义每个箭头的透明度 */ |
||||
.wind-arrow:nth-child(1) { |
||||
opacity: 1; |
||||
} |
||||
|
||||
.wind-arrow:nth-child(2) { |
||||
opacity: 0.6; |
||||
} |
||||
|
||||
.wind-arrow:nth-child(3) { |
||||
opacity: 0.4; |
||||
} |
||||
.wind-arrow:nth-child(4) { |
||||
opacity: 0.2; |
||||
} |
||||
|
||||
/* 定义箭头移动的动画 */ |
||||
@keyframes moveArrow { |
||||
0% { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0.2rem); |
||||
/* 箭头向右移动的距离 */ |
||||
} |
||||
} |
||||
} |
||||
.app-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: stretch; |
||||
height: 100%; |
||||
.left-tree { |
||||
width: 256px; |
||||
padding: 15px 10px 10px 10px; |
||||
border: 1px solid #004b8c; |
||||
.status { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
margin-top: 20px; |
||||
.status-li { |
||||
width: 50%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 15px; |
||||
} |
||||
.status1, |
||||
.status2, |
||||
.status3, |
||||
.status4 { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
margin-bottom: 5px; |
||||
} |
||||
.status1::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #00d2ff; |
||||
margin-right: 5px; |
||||
} |
||||
.status2::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #ff2f2f; |
||||
margin-right: 5px; |
||||
} |
||||
.status3::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #ff9908; |
||||
margin-right: 5px; |
||||
} |
||||
.status4::before { |
||||
content: ""; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #7398c7; |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
.right-monitor { |
||||
width: calc(100% - 280px); |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
} |
||||
.tree-container { |
||||
height: 300px; /* 设置固定高度 */ |
||||
overflow-y: auto; /* 启用垂直滚动条 */ |
||||
} |
||||
// 滚动条 |
||||
:-webkit-scrollbar { |
||||
width: 10px; /* 滚动条宽度 */ |
||||
} |
||||
|
||||
::-webkit-scrollbar-track { |
||||
background: transparent !important; /* 滚动条轨道背景色 */ |
||||
} |
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
.tree-left { |
||||
.custom-tree-icon { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
@media (min-width: 1360px) and (max-width: 1680px) { |
||||
.windC { |
||||
transform: scale(0.9); |
||||
} |
||||
} |
||||
@media (min-width: 1160px) and (max-width: 1360px) { |
||||
.windC { |
||||
transform: scale(0.8); |
||||
} |
||||
} |
||||
@media (min-width: 990px) and (max-width: 1160px) { |
||||
.windC { |
||||
transform: scale(0.7); |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
/* 自定义高亮颜色 */ |
||||
.left-tree |
||||
>>> .el-tree--highlight-current |
||||
.el-tree-node.is-current |
||||
> .el-tree-node__content { |
||||
background-color: #285b9e !important; |
||||
/* color: #f56c6c; */ |
||||
color: #25f1f8; |
||||
} |
||||
.windC >>> .el-input__inner { |
||||
background-color: #04193a; |
||||
border: 1px solid #1262db; |
||||
color: #3ef0fd; |
||||
font-weight: 700; |
||||
text-align: center; |
||||
padding: 0 0.1rem !important; |
||||
} |
||||
.windC >>> .el-input__prefix { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.windC >>> .svg-icon { |
||||
width: 0.2rem !important; |
||||
height: 0.2rem !important; |
||||
fill: #ffffff !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,584 @@
|
||||
<template> |
||||
<div class="loginD"> |
||||
<img |
||||
src="../../assets/images/index_img_top.png" |
||||
class="loginD_img_top" |
||||
alt="" |
||||
/> |
||||
<img |
||||
src="../../assets/images/index_img_down.png" |
||||
class="loginD_img_down" |
||||
alt="" |
||||
/> |
||||
<div class="sys-title">楼宇智慧管理系统平台</div> |
||||
<!-- <div class="day">已监测100天</div> --> |
||||
<div class="set"> |
||||
<img src="../../assets/images/icon_time.png" class="icon_time" alt="" /> |
||||
<div>{{ nowTime }}</div> |
||||
<img |
||||
src="../../assets/images/icon_home.png" |
||||
class="icon_home" |
||||
alt="" |
||||
title="进入系统" |
||||
@click="goSys" |
||||
/> |
||||
<img |
||||
src="../../assets/images/icon_dianyuan.png" |
||||
class="icon_dianyuan" |
||||
alt="" |
||||
title="退出系统" |
||||
@click="logout" |
||||
/> |
||||
</div> |
||||
<div class="screen-page"> |
||||
<div class="screen-left" :class="{ collapsed: !isLeftPanelOpen }"> |
||||
<div class="showLeftConent"> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title"> |
||||
<div class="title-left"> |
||||
<div>能耗总览</div> |
||||
<time-data |
||||
v-model="sharedIndex" |
||||
:currentIndex="sharedIndex" |
||||
@update-message="handleUpdateMessage" |
||||
></time-data> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<all-energy :viewMes="viewMes"></all-energy> |
||||
</div> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title"> |
||||
<div class="title-left"> |
||||
<div>冷源系统能耗</div> |
||||
<time-data |
||||
v-model="sharedIndex" |
||||
:currentIndex="sharedIndex" |
||||
@update-message="handleUpdateMessage" |
||||
></time-data> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<cold-sys-energy :viewMes="viewMes"></cold-sys-energy> |
||||
</div> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title"> |
||||
<div class="title-left"> |
||||
<div>生活热水系统</div> |
||||
<time-data |
||||
v-model="sharedIndex" |
||||
:currentIndex="sharedIndex" |
||||
@update-message="handleUpdateMessage" |
||||
></time-data> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<water-sys-energy :viewMes="viewMes"></water-sys-energy> |
||||
</div> |
||||
</div> |
||||
<img |
||||
:src="leftIndicatorSrc" |
||||
class="left-Indicator" |
||||
@click="togglePanel('left')" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
<div class="screen-right" :class="{ collapsed: !isRightPanelOpen }"> |
||||
<div class="showRightConent"> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title"> |
||||
<div class="title-left"> |
||||
<div>基本信息</div> |
||||
<time-data |
||||
v-model="sharedIndex" |
||||
:currentIndex="sharedIndex" |
||||
@update-message="handleUpdateMessage" |
||||
></time-data> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="message"> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img1.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.buildingArea }}m²</div> |
||||
<div>建筑面积</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img3.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.totalEle }}kwh</div> |
||||
<div>总电耗</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img4.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.totalWater }}t</div> |
||||
<div>总水耗</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img2.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.totalCold }}kw</div> |
||||
<div>总产冷量</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img6.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.totalGas }}t</div> |
||||
<div>总蒸汽量</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img5.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.eleUnitArea }}wkh/m²</div> |
||||
<div>面积电耗</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img7.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.waterUnitArea }}kwh</div> |
||||
<div>面积水耗</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img8.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.coldUnitArea }}kw/lm³</div> |
||||
<div>面积冷耗</div> |
||||
</div> |
||||
<div class="message-li"> |
||||
<img |
||||
class="message-img" |
||||
src="../../assets/images/message-img9.png" |
||||
alt="" |
||||
/> |
||||
<div class="message-data">{{ viewMes.gasUnitArea }}kw/lm³</div> |
||||
<div>面积汽耗</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="special-div"> |
||||
<div class="special-top"> |
||||
<div class="special-title"> |
||||
<div class="title-left"> |
||||
<div>用电趋势</div> |
||||
<time-data |
||||
v-model="sharedIndex" |
||||
:currentIndex="sharedIndex" |
||||
@update-message="handleUpdateMessage" |
||||
></time-data> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<use-elect></use-elect> |
||||
</div> |
||||
</div> |
||||
<img |
||||
:src="rightIndicatorSrc" |
||||
class="right-Indicator" |
||||
@click="togglePanel('right')" |
||||
alt="" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<div></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import AllEnergy from "./components/allEnergy.vue"; |
||||
import ColdSysEnergy from "./components/coldSysEnergy.vue"; |
||||
import waterSysEnergy from "./components/waterSysEnergy.vue"; |
||||
import useElect from "./components/useElect.vue"; |
||||
import timeData from "./components/timeData.vue"; |
||||
import { overView, getWeatherData, getRunTime } from "@/api/bigScreen"; |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
export default { |
||||
name: "screen", |
||||
components: { timeData, AllEnergy, ColdSysEnergy, waterSysEnergy, useElect }, |
||||
data() { |
||||
return { |
||||
nowTime: "", |
||||
sharedIndex: "0", //默认为0 |
||||
queryType: "day", //默认为day |
||||
isLeftPanelOpen: true, // 默认显示左边内容 |
||||
isRightPanelOpen: true, // 默认显示右边内容 |
||||
leftIndicatorSrc: require("@/assets/images/left-arrow.png"), |
||||
rightIndicatorSrc: require("@/assets/images/right-arrow.png"), |
||||
viewMes: {}, |
||||
dataTime: getDay(0), //默认为今天 |
||||
}; |
||||
}, |
||||
created() { |
||||
this.nowTimes(); |
||||
}, |
||||
mounted() { |
||||
this.getMessage(); |
||||
// this.getWeather(); |
||||
// this.getRunData(); |
||||
}, |
||||
methods: { |
||||
//显示当前时间（年月日时分秒） |
||||
timeFormate(timeStamp) { |
||||
let hh = |
||||
new Date(timeStamp).getHours() < 10 |
||||
? "0" + new Date(timeStamp).getHours() |
||||
: new Date(timeStamp).getHours(); |
||||
let mm = |
||||
new Date(timeStamp).getMinutes() < 10 |
||||
? "0" + new Date(timeStamp).getMinutes() |
||||
: new Date(timeStamp).getMinutes(); |
||||
let ss = |
||||
new Date(timeStamp).getSeconds() < 10 |
||||
? "0" + new Date(timeStamp).getSeconds() |
||||
: new Date(timeStamp).getSeconds(); |
||||
this.nowTime = hh + ":" + mm + ":" + ss; |
||||
}, |
||||
nowTimes() { |
||||
this.timeFormate(new Date()); |
||||
setInterval(this.nowTimes, 1000); |
||||
this.clear(); |
||||
}, |
||||
clear() { |
||||
clearInterval(this.nowTimes); |
||||
this.nowTimes = null; |
||||
}, |
||||
// 进入系统 |
||||
goSys() { |
||||
this.$router.push("/"); |
||||
}, |
||||
// 退出系统 |
||||
logout() { |
||||
// 清除缓存 |
||||
this.$store.dispatch("LogOut").then(() => { |
||||
location.href = "/index"; |
||||
}); |
||||
}, |
||||
// 父子组件传值 |
||||
handleUpdateMessage(message) { |
||||
console.log("父组件接收的值", message); |
||||
this.sharedIndex = message; |
||||
if (this.sharedIndex === 0) { |
||||
this.queryType = "day"; |
||||
this.dataTime = getDay(0); |
||||
} else if (this.sharedIndex === 1) { |
||||
this.queryType = "month"; |
||||
this.dataTime = getMonth(0); |
||||
} else if (this.sharedIndex === 2) { |
||||
this.queryType = "year"; |
||||
this.dataTime = getYear(0); |
||||
} |
||||
this.getMessage(); |
||||
}, |
||||
togglePanel(val) { |
||||
if (val === "left") { |
||||
console.log("左边伸缩"); |
||||
this.isLeftPanelOpen = !this.isLeftPanelOpen; |
||||
// 切换图片路径，从左箭头切换到右箭头 |
||||
if (this.isLeftPanelOpen) { |
||||
this.leftIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左 |
||||
} else { |
||||
this.leftIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右 |
||||
} |
||||
} else if (val === "right") { |
||||
console.log("右边伸缩"); |
||||
this.indicatorSrc = require("@/assets/images/right-arrow.png"); |
||||
this.isRightPanelOpen = !this.isRightPanelOpen; |
||||
// 切换图片路径，从左箭头切换到右箭头 |
||||
if (this.isRightPanelOpen) { |
||||
this.rightIndicatorSrc = require("@/assets/images/right-arrow.png"); // 右 |
||||
} else { |
||||
this.rightIndicatorSrc = require("@/assets/images/left-arrow.png"); // 左 |
||||
} |
||||
} |
||||
}, |
||||
// 请求基本信息、冷源、热水系统数据 |
||||
getMessage() { |
||||
let data = { |
||||
timeType: this.queryType, |
||||
startTime: this.dataTime, |
||||
endTime: this.dataTime, |
||||
}; |
||||
overView(data).then((res) => { |
||||
console.log("基本信返回", res); |
||||
if (res.code == 200) { |
||||
let viewData = res.rows[0]; |
||||
if (viewData.buildingArea > 10000) { |
||||
let result = (viewData.buildingArea / 10000).toFixed(4); |
||||
// 将结果转换为浮点数再转回字符串 |
||||
result = parseFloat(result).toString(); |
||||
viewData.buildingArea = result + "万"; |
||||
} |
||||
this.viewMes = viewData; |
||||
} |
||||
}); |
||||
}, |
||||
// 获取天气数据 |
||||
getWeather() { |
||||
getWeatherData().then((res) => { |
||||
console.log("天气返回", res); |
||||
}); |
||||
}, |
||||
// 获取运行时间 |
||||
getRunData() { |
||||
getRunTime().then((res) => { |
||||
console.log("运行时间返回", res); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style rel="stylesheet/scss" lang="scss"> |
||||
/* 定义呼吸灯动画 */ |
||||
@keyframes blink { |
||||
0% { |
||||
opacity: 0.2; |
||||
} |
||||
50% { |
||||
opacity: 1; |
||||
} |
||||
100% { |
||||
opacity: 0.2; |
||||
} |
||||
} |
||||
.loginD { |
||||
background-color: #062140; |
||||
background-image: url("../../assets/images/bigscreen.png"); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
width: 100%; |
||||
min-height: 100vh; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
padding-bottom: 20px; |
||||
.sys-title { |
||||
position: absolute; |
||||
top: 0.13rem; |
||||
font-family: YouSheBiaoTiHei; |
||||
font-size: 0.4rem; |
||||
letter-spacing: 0.03rem; |
||||
text-shadow: 0px 2px 1px rgba(255, 255, 255, 0.3); |
||||
background-image: linear-gradient(to bottom, #ffffff, #b0dbff); |
||||
background-clip: text; |
||||
-webkit-background-clip: text; |
||||
color: transparent; |
||||
} |
||||
.day{ |
||||
position: absolute; |
||||
top: 0.43rem; |
||||
left: 5rem; |
||||
color: #ffffff; |
||||
font-size: 0.18rem; |
||||
} |
||||
.set { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 0.24rem; |
||||
font-weight: normal; |
||||
font-stretch: normal; |
||||
letter-spacing: 0.03rem; |
||||
color: #ffffff; |
||||
position: absolute; |
||||
top: 0.44rem; |
||||
right: 0.7rem; |
||||
.icon_time { |
||||
width: 0.22rem; |
||||
height: 0.22rem; |
||||
margin-right: 0.08rem; |
||||
} |
||||
.icon_home { |
||||
width: 0.3rem; |
||||
height: 0.27rem; |
||||
margin: 0 0.25rem 0 0.27rem; |
||||
cursor: pointer; |
||||
} |
||||
.icon_dianyuan { |
||||
width: 0.24rem; |
||||
height: 0.26rem; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.loginD_img_top { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 18.27rem; |
||||
height: 1.13rem; |
||||
} |
||||
.loginD_img_down { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 18.66rem; |
||||
} |
||||
.title-left { |
||||
width: calc(100% - 30px); |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.special-div { |
||||
margin-bottom: 17px; |
||||
} |
||||
.screen-page { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
align-items: stretch; |
||||
width: calc(100% - 122px); |
||||
margin-top: 86px; |
||||
.screen-left { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 433px; |
||||
position: relative; |
||||
.left-Indicator { |
||||
position: absolute; |
||||
right: -90px; |
||||
width: 60px; |
||||
height: 40px; |
||||
cursor: pointer; |
||||
top: 50%; /* 垂直居中对齐 */ |
||||
transform: translateY(-50%); /* 调整垂直对齐 */ |
||||
transition: transform 1s ease; |
||||
} |
||||
.left-Indicator:hover { |
||||
animation: blink 1s infinite; |
||||
} |
||||
} |
||||
.screen-right { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 433px; |
||||
position: relative; |
||||
.message { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
justify-content: flex-start; |
||||
margin-top: 29px; |
||||
font-family: SourceHanSansCN-Regular; |
||||
font-size: 16px; |
||||
font-weight: normal; |
||||
font-stretch: normal; |
||||
letter-spacing: 0px; |
||||
color: #ffffff; |
||||
.message-li { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: calc(33.33% - 32px); |
||||
margin: 0 16px; |
||||
// margin-bottom: 22px; |
||||
.message-data { |
||||
font-family: DIN-Bold; |
||||
font-size: 20px; |
||||
letter-spacing: 0px; |
||||
color: #ffffff; |
||||
margin-bottom: 3px; |
||||
} |
||||
.message-img { |
||||
width: 100px; |
||||
height: 99px; |
||||
} |
||||
} |
||||
} |
||||
.right-Indicator { |
||||
position: absolute; |
||||
left: -90px; |
||||
width: 60px; |
||||
height: 40px; |
||||
cursor: pointer; |
||||
top: 50%; /* 垂直居中对齐 */ |
||||
transform: translateY(-50%); /* 调整垂直对齐 */ |
||||
transition: transform 1s ease; |
||||
} |
||||
.right-Indicator:hover { |
||||
animation: blink 1s infinite; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.screen-left { |
||||
transition: width 0.3s ease; |
||||
} |
||||
|
||||
.screen-left.collapsed .showLeftConent { |
||||
// width: 0 !important; |
||||
// overflow: hidden; |
||||
display: none; |
||||
} |
||||
.screen-right.collapsed .showRightConent { |
||||
// width: 0 !important; |
||||
// overflow: hidden; |
||||
display: none; |
||||
} |
||||
.screen-left.collapsed .left-Indicator { |
||||
right: auto !important; |
||||
left: 0px !important; |
||||
} |
||||
.screen-right.collapsed .right-Indicator { |
||||
left: auto !important; |
||||
right: 0px !important; |
||||
} |
||||
@media (max-width: 1170px) { |
||||
.screen-page { |
||||
width: calc(100% - 60px) !important; |
||||
.screen-left { |
||||
transform: scale(0.9); |
||||
transform-origin: top left; |
||||
} |
||||
.screen-right { |
||||
transform: scale(0.9); |
||||
transform-origin: top right; |
||||
} |
||||
} |
||||
} |
||||
@media (max-width: 1060px) { |
||||
.screen-page { |
||||
width: calc(100% - 40px) !important; |
||||
.screen-left { |
||||
transform: scale(0.8); |
||||
transform-origin: top left; |
||||
} |
||||
.screen-right { |
||||
transform: scale(0.8); |
||||
transform-origin: top right; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,429 @@
|
||||
<template> |
||||
<div> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
props: { |
||||
viewMes: { |
||||
type: Object, |
||||
default: () => ({}), |
||||
}, |
||||
}, |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
energyMes:{} |
||||
}; |
||||
}, |
||||
watch: { |
||||
viewMes: { |
||||
immediate: true, // 页面加载时立即触发一次监听 |
||||
handler(newVal) { |
||||
if (Object.keys(newVal).length > 0) { |
||||
console.log("newval", newVal); |
||||
this.energyMes = newVal; |
||||
this.$nextTick(() => { |
||||
this.echartsData(); |
||||
}) |
||||
} |
||||
}, |
||||
}, |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
}, |
||||
destroyed() { |
||||
//取消监听器 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
echartsData() { |
||||
console.log("父组件传过来的值", this.energyMes); |
||||
if (this.energyMes) { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const colorList = ["#ffe21e", "#08c8ff", "#0882ff", "#2df499"]; // 提取颜色列表 |
||||
const adapterOption = { |
||||
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 = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表 |
||||
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: this.energyMes.totalEle, name: "耗电量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "用水量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "产冷量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "蒸汽量标准煤" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: this.energyMes.totalEle, name: "耗电量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "用水量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "产冷量标准煤" }, |
||||
{ value: this.energyMes.totalEle, name: "蒸汽量标准煤" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||
const adapterOption = { |
||||
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 = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表 |
||||
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: "用水量标准煤" }, |
||||
{ value: 0, name: "产冷量标准煤" }, |
||||
{ value: 0, name: "蒸汽量标准煤" }, |
||||
], |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
// borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
}, |
||||
{ |
||||
data: [ |
||||
{ value: 0, name: "耗电量标准煤" }, |
||||
{ value: 0, name: "用水量标准煤" }, |
||||
{ value: 0, name: "产冷量标准煤" }, |
||||
{ value: 0, name: "蒸汽量标准煤" }, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
} |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 40; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = { |
||||
title: { |
||||
subtextStyle: { |
||||
fontSize: titleFontSize * 1.2, |
||||
}, |
||||
}, |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
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: "27%", |
||||
y: "36%", //距离上边的距离 |
||||
}, |
||||
tooltip: { |
||||
trigger: "item", |
||||
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||
}, |
||||
//图例 |
||||
legend: { |
||||
orient: "vertical", // 垂直排列 |
||||
right: "4%", // 距离右边10% |
||||
top: "middle", // 垂直居中 |
||||
//图例文字颜色 |
||||
textStyle: { |
||||
color: "#ffffff", |
||||
// fontSize: 18, |
||||
}, |
||||
}, |
||||
series: [ |
||||
// 数据圆 |
||||
{ |
||||
name: "数据详情:", |
||||
type: "pie", |
||||
radius: ["60%", "72%"], |
||||
center: ["28%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
color: function (params) { |
||||
var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; |
||||
return colorList[params.dataIndex]; |
||||
}, |
||||
borderWidth: 5, |
||||
borderColor: "#002a56", |
||||
}, |
||||
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||
}, |
||||
// 阴影圆 |
||||
{ |
||||
type: "pie", |
||||
radius: ["50%", "62%"], |
||||
center: ["28%", "44%"], |
||||
avoidLabelOverlap: false, |
||||
label: { |
||||
show: false, |
||||
position: "center", |
||||
}, |
||||
silent: true, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
//颜色 |
||||
itemStyle: { |
||||
color: function (colors) { |
||||
var colorList = ["#024e7d", "#09596b", "#385f5c", "#02427f"]; |
||||
return colorList[colors.dataIndex]; |
||||
}, |
||||
}, |
||||
z: 15, |
||||
}, |
||||
// 内圈边框 |
||||
{ |
||||
// 颜色 |
||||
color: ["#305376"], |
||||
type: "pie", |
||||
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||
// 这里开启silent: true, 就达到效果了 |
||||
// center与非内圈一致 |
||||
radius: ["38%", "39%"], |
||||
center: ["28%", "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: ["28%", "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> |
||||
.charts { |
||||
margin-top: 30px; |
||||
width: 100%; |
||||
height: 200px; |
||||
margin-top: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,598 @@
|
||||
<template> |
||||
<div class="energy_content"> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
<div class="eer"> |
||||
<div>用电量:{{energyMes.totalEle}}kw/h</div> |
||||
<div>产冷量:{{energyMes.totalCold}}kwh</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { eventBus } from "@/utils/evenBus"; |
||||
import { overView } from "@/api/bigScreen"; |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
isShowModule: false, |
||||
energyCostText: "eer数据", |
||||
dateUse: "", |
||||
useForm: { |
||||
useData: 5, |
||||
maxData: 10, //最大的刻度值 |
||||
}, |
||||
queryType: "day", //默认页面为day |
||||
dataTime: "", |
||||
energyMes: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
eventBus.$on("data-sent-queryType", (data) => { |
||||
this.queryType = data; |
||||
console.log("得到的queryType为", this.queryType); |
||||
this.getChartsData(); |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.getChartsData(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 计算颜色设置的函数 |
||||
getAxisLineColor(useData, maxData) { |
||||
// 计算阈值 |
||||
// 真实值大于最大值的0.75才使用颜色渐变 |
||||
const threshold = maxData * 0.75; |
||||
|
||||
// 判断实际值是否超过阈值 |
||||
if (useData > threshold) { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.6, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(69, 235, 167,0.5)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} else { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.5, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(0,127,208,1)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} |
||||
}, |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart() { |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
this.chartInstance = echarts.init(this.$refs.sys_charts); |
||||
// var dataArr = 80; |
||||
this.option = { |
||||
backgroundColor: "transparent", |
||||
tooltip: { |
||||
formatter: "{a} <br/>{b} : {c}", |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
radius: "155%", |
||||
z: 1, |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
formatter: function (value) { |
||||
if (value !== 0) { |
||||
return parseInt(value); |
||||
} else { |
||||
return 0; |
||||
} |
||||
}, |
||||
offsetCenter: [0, 5], |
||||
detail: { |
||||
padding: [0, 0, 0, 0], |
||||
// fontSize: titleFontSize * 1.2, |
||||
color: "#EDFFFD", |
||||
}, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
// 新增的蓝色背景 |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
// 自定义起始角度 |
||||
startAngle: 200, |
||||
// 自定义结束角度 |
||||
endAngle: -20, |
||||
radius: "155%", |
||||
z: 0, // 确保它在最底层 |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[1, "#01366d"], // 设置背景颜色为蓝色 |
||||
], |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
type: "gauge", |
||||
z: 2, |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
splitNumber: 10, |
||||
radius: "180%", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#023B80"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 6, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
//指针上的圆 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: -0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 120, |
||||
itemStyle: { |
||||
color: "#00223a", |
||||
}, |
||||
}, |
||||
], |
||||
z: 4, |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
//指针上的圆-渐变 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: 0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
z: 5, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
type: "gauge", |
||||
radius: "175%", |
||||
center: ["50%", "100%"], |
||||
min: 0, //最小刻度 |
||||
max: this.useForm.maxData, //最大刻度 |
||||
splitNumber: 0, //刻度数量 |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
show: false, |
||||
}, //仪表盘轴线 |
||||
axisLabel: { |
||||
show: true, |
||||
color: "rgba(4,112,212,1)", |
||||
// distance: 16, |
||||
// fontSize: 12, |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, //刻度标签-数字。 |
||||
axisTick: { |
||||
show: true, |
||||
// splitNumber: 5, |
||||
lineStyle: { |
||||
color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用 |
||||
// width: 3, |
||||
}, |
||||
// length: 6, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
show: true, |
||||
// length: 6, |
||||
lineStyle: { |
||||
color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用 |
||||
}, |
||||
}, //分隔线样式 |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: "#EDF85B", |
||||
}, |
||||
pointer: { |
||||
show: true, |
||||
length: "60%", |
||||
radius: "30%", |
||||
shape: "triangle", // 使用内置的箭头形状 |
||||
// width: 15, //指针粗细 |
||||
itemStyle: { |
||||
color: "rgb(3, 105, 206,0.5)", // 指针的颜色 |
||||
// shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色 |
||||
shadowBlur: 20, // 朦胧光的模糊度 |
||||
}, |
||||
}, |
||||
animationDuration: 4000, |
||||
z: 2, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
screenAdapter() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
axisLabel: { |
||||
distance: titleFontSize, |
||||
fontSize: titleFontSize / 4, |
||||
}, |
||||
axisTick: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 5, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 3.6, |
||||
}, //分隔线样式 |
||||
pointer: { |
||||
width: titleFontSize / 2, //指针粗细 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 请求的数据 |
||||
getChartsData() { |
||||
if (this.queryType === "day") { |
||||
this.dataTime = getDay(0); |
||||
} else if (this.queryType === "month") { |
||||
this.dataTime = getMonth(0); |
||||
} else if (this.queryType === "year") { |
||||
this.dataTime = getYear(0); |
||||
} |
||||
let data = { |
||||
timeType: this.queryType, |
||||
startTime: this.dataTime, |
||||
endTime: this.dataTime, |
||||
systemType: "0", |
||||
}; |
||||
overView(data).then((res) => { |
||||
console.log("两个系统参数返回", res); |
||||
if (res.code == 200) { |
||||
this.energyMes = res.rows[0]; |
||||
this.useForm.maxData = 10; |
||||
this.useForm.useData = res.rows[0].eer; |
||||
let that = this; |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
data: [ |
||||
{ |
||||
value: 5, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
label: { |
||||
show: true, |
||||
position: "center", // 文字显示在中心位置 |
||||
offset: [0, -5], // 向上偏移 10 个单位 |
||||
formatter: function () { |
||||
// 返回 HTML 标签，使用 rich 里定义的样式 |
||||
return `{line|${that.useForm.useData}}`; |
||||
}, |
||||
rich: { |
||||
line: { |
||||
color: "#fff", // 第二行文字颜色 |
||||
fontSize: 20, // 第二行文字大小 |
||||
lineHeight: 0, // 行高，实现间距 |
||||
}, |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
itemStyle: { |
||||
// 设置渐变颜色 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgb(4,112,212)", // 顶部颜色 |
||||
}, |
||||
{ |
||||
offset: 0.3, |
||||
color: "rgba(0, 46, 93)", // 底部透明 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
max: this.useForm.maxData, //最大刻度 |
||||
axisLabel: { |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.energy_content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100% !important; |
||||
height: 100%; |
||||
|
||||
.sys_charts { |
||||
width: 100%; |
||||
height: 1.6rem; |
||||
} |
||||
.eer { |
||||
width: 80%; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,52 @@
|
||||
<template> |
||||
<div> |
||||
<div class="choice"> |
||||
<div |
||||
class="mr20" |
||||
v-for="(item, index) in timeData2" |
||||
:key="index" |
||||
@click="handleEnter(index, $event)" |
||||
:class="{ timeStyle: currentIndex == index }" |
||||
> |
||||
{{ item.title }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import { eventBus } from "@/utils/evenBus"; |
||||
export default { |
||||
props: ["currentIndex"], |
||||
data() { |
||||
return { |
||||
timeData2: [{ title: "日" }, { title: "月" }, { title: "年" }], |
||||
timeIndex2: 0, |
||||
}; |
||||
}, |
||||
// watch: { |
||||
// selectedIndex(newValue) { |
||||
// this.timeIndex2 = newValue; |
||||
// }, |
||||
// }, |
||||
methods: { |
||||
handleEnter(index, event) { |
||||
// event.stopPropagation(); // 阻止事件冒泡 |
||||
// this.$emit("update:selectedIndex", index); |
||||
this.timeIndex2 = index; |
||||
let queryType = ""; |
||||
if (index === 0) { |
||||
queryType = "day"; |
||||
} else if (index === 1) { |
||||
queryType = "month"; |
||||
} else if (index === 2) { |
||||
queryType = "year"; |
||||
} |
||||
console.log("传值给父组件", index); |
||||
this.$emit("update-message", index); |
||||
//事件车传值，子组件可互相传值 |
||||
eventBus.$emit("data-sent-queryType", queryType); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,265 @@
|
||||
<template> |
||||
<div class="energy_content"> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
import { systemTrend } from "@/api/bigScreen"; |
||||
import { eventBus } from "@/utils/evenBus"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
queryType: "day", //默认页面为day |
||||
dataTime: "", |
||||
energyMes: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
eventBus.$on("data-sent-queryType", (data) => { |
||||
this.queryType = data; |
||||
console.log("得到的queryType为", this.queryType); |
||||
this.getChartsData(); |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.getChartsData(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.sys_charts.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.sys_charts); |
||||
this.option = { |
||||
tooltip: { |
||||
trigger: "item", |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
}, |
||||
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)", |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// // // min:'dataMin', |
||||
// // // max:'dataMax', |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: 8, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "#00CED1", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "#00CED1", //折线点的颜色 |
||||
}, |
||||
areaStyle: { |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: "rgba(0, 206, 209, 0)", // 渐变结束颜色 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
// 请求的数据 |
||||
getChartsData() { |
||||
if (this.queryType === "day") { |
||||
this.dataTime = getDay(0); |
||||
} else if (this.queryType === "month") { |
||||
this.dataTime = getMonth(0); |
||||
} else if (this.queryType === "year") { |
||||
this.dataTime = getYear(0); |
||||
} |
||||
let data = { |
||||
timeType: this.queryType, |
||||
startTime: this.dataTime, |
||||
endTime: this.dataTime, |
||||
}; |
||||
systemTrend(data).then((res) => { |
||||
console.log("用电趋势返回", res); |
||||
if (res.code == 200) { |
||||
let adapterOption = {}; |
||||
// 添加折线的配置 |
||||
adapterOption = { |
||||
tooltip: { |
||||
trigger: "axis", |
||||
// 自定义 tooltip 内容 |
||||
formatter: function (params) { |
||||
var res = params[0].name + "<br/>"; |
||||
for (var i = 0, l = params.length; i < l; i++) { |
||||
var seriesName = params[i].seriesName; |
||||
var value = params[i].value; |
||||
var marker = |
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||
params[i].color + |
||||
'"></span>'; |
||||
// 根据不同德seriesName 返回不同的单位 |
||||
res += |
||||
marker + |
||||
seriesName + |
||||
":" + |
||||
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||
value + |
||||
"</span><br>"; |
||||
} |
||||
return res; |
||||
}, |
||||
}, |
||||
xAxis: { |
||||
data: res.rows[0].timeStr, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: res.rows[0].data, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
let adapterOption = {}; |
||||
// 添加折线的配置 |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.energy_content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100% !important; |
||||
height: 100%; |
||||
|
||||
.sys_charts { |
||||
width: 100%; |
||||
height: 2rem; |
||||
} |
||||
.eer { |
||||
font-size: 18px; |
||||
margin-top: 25px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,599 @@
|
||||
<template> |
||||
<div class="energy_content"> |
||||
<div class="sys_charts" ref="sys_charts"></div> |
||||
<div class="eer"> |
||||
<div>用电量:{{energyMes.totalEle}}kw/h</div> |
||||
<div>用水量:{{energyMes.totalWater}}吨</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from "echarts"; |
||||
import { eventBus } from "@/utils/evenBus"; |
||||
import { overView } from "@/api/bigScreen"; |
||||
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
chartInstance: null, |
||||
option: {}, |
||||
isShowModule: false, |
||||
energyCostText: "eer数据", |
||||
dateUse: "", |
||||
useForm: { |
||||
useData: 5, |
||||
maxData: 10, //最大的刻度值 |
||||
}, |
||||
queryType: "day", //默认页面为day |
||||
dataTime: "", |
||||
energyMes: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
eventBus.$on("data-sent-queryType", (data) => { |
||||
this.queryType = data; |
||||
console.log("得到的queryType为", this.queryType); |
||||
this.getChartsData(); |
||||
}); |
||||
}, |
||||
mounted() { |
||||
this.initChart(); |
||||
this.screenAdapter(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.getChartsData(); |
||||
}, |
||||
destroyed() { |
||||
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||
window.removeEventListener("resize", this.screenAdapter); |
||||
}, |
||||
methods: { |
||||
// 计算颜色设置的函数 |
||||
getAxisLineColor(useData, maxData) { |
||||
// 计算阈值 |
||||
// 真实值大于最大值的0.75才使用颜色渐变 |
||||
const threshold = maxData * 0.75; |
||||
|
||||
// 判断实际值是否超过阈值 |
||||
if (useData > threshold) { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.6, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(69, 235, 167,0.5)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} else { |
||||
return [ |
||||
[ |
||||
useData / maxData, |
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [ |
||||
{ offset: 0, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 0.5, color: "rgba(0,127,208,1)" }, |
||||
{ offset: 1, color: "rgba(0,127,208,1)" }, |
||||
]), |
||||
], |
||||
[1, "rgba(28,128,245,.0)"], |
||||
]; |
||||
} |
||||
}, |
||||
//初始化chartInstance2对象 折线图 |
||||
initChart() { |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
this.chartInstance = echarts.init(this.$refs.sys_charts); |
||||
// var dataArr = 80; |
||||
this.option = { |
||||
backgroundColor: "transparent", |
||||
tooltip: { |
||||
formatter: "{a} <br/>{b} : {c}", |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
radius: "155%", |
||||
z: 1, |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
formatter: function (value) { |
||||
if (value !== 0) { |
||||
return parseInt(value); |
||||
} else { |
||||
return 0; |
||||
} |
||||
}, |
||||
offsetCenter: [0, 5], |
||||
detail: { |
||||
padding: [0, 0, 0, 0], |
||||
// fontSize: titleFontSize * 1.2, |
||||
color: "#EDFFFD", |
||||
}, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
// 新增的蓝色背景 |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
center: ["50%", "100%"], |
||||
// 自定义起始角度 |
||||
startAngle: 200, |
||||
// 自定义结束角度 |
||||
endAngle: -20, |
||||
radius: "155%", |
||||
z: 0, // 确保它在最底层 |
||||
splitNumber: 10, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [ |
||||
[1, "#01366d"], // 设置背景颜色为蓝色 |
||||
], |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
textStyle: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
type: "gauge", |
||||
z: 2, |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
splitNumber: 10, |
||||
radius: "180%", |
||||
center: ["50%", "100%"], |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#023B80"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 6, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
}, |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
pointer: { |
||||
show: false, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
//指针上的圆 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: -0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
label: { |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 120, |
||||
itemStyle: { |
||||
color: "#00223a", |
||||
}, |
||||
}, |
||||
], |
||||
z: 4, |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
//指针上的圆-渐变 |
||||
type: "pie", |
||||
tooltip: { |
||||
show: false, |
||||
}, |
||||
emphasis: { |
||||
scale: false, // 新版的配置 |
||||
}, |
||||
legendHoverLink: false, |
||||
radius: ["0%", "70%"], |
||||
center: ["50%", "100%"], |
||||
startAngle: 120, |
||||
endAngle: 0, |
||||
labelLine: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: [[1, "#F2BF59"]], |
||||
width: 3, |
||||
// 阴影 |
||||
shadowColor: "rgba(14,31,73)", |
||||
shadowBlur: 60, |
||||
shadowOffsetX: 0, |
||||
}, |
||||
}, |
||||
z: 5, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
type: "gauge", |
||||
radius: "175%", |
||||
center: ["50%", "100%"], |
||||
min: 0, //最小刻度 |
||||
max: this.useForm.maxData, //最大刻度 |
||||
splitNumber: 0, //刻度数量 |
||||
startAngle: 180, |
||||
endAngle: -0, |
||||
axisLine: { |
||||
show: false, |
||||
}, //仪表盘轴线 |
||||
axisLabel: { |
||||
show: true, |
||||
color: "rgba(4,112,212,1)", |
||||
// distance: 16, |
||||
// fontSize: 12, |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, //刻度标签-数字。 |
||||
axisTick: { |
||||
show: true, |
||||
// splitNumber: 5, |
||||
lineStyle: { |
||||
color: "rgba(4,112,212,1)", //用颜色渐变函数不起作用 |
||||
// width: 3, |
||||
}, |
||||
// length: 6, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
show: true, |
||||
// length: 6, |
||||
lineStyle: { |
||||
color: "rgba(106, 104, 228, 0.5)", //用颜色渐变函数不起作用 |
||||
}, |
||||
}, //分隔线样式 |
||||
itemStyle: { |
||||
show: false, |
||||
}, |
||||
detail: { |
||||
show: false, |
||||
}, |
||||
title: { |
||||
//标题 |
||||
show: false, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
itemStyle: { |
||||
color: "#EDF85B", |
||||
}, |
||||
pointer: { |
||||
show: true, |
||||
length: "60%", |
||||
radius: "30%", |
||||
shape: "triangle", // 使用内置的箭头形状 |
||||
// width: 15, //指针粗细 |
||||
itemStyle: { |
||||
color: "rgb(3, 105, 206,0.5)", // 指针的颜色 |
||||
// shadowColor: "rgb(104, 194, 247, 1)", // 朦胧光的颜色 |
||||
shadowBlur: 20, // 朦胧光的模糊度 |
||||
}, |
||||
}, |
||||
animationDuration: 4000, |
||||
z: 2, |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
screenAdapter() { |
||||
const titleFontSize = this.$refs.sys_charts.offsetWidth / 18; |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "蓝色背景", |
||||
type: "gauge", |
||||
axisLine: { |
||||
lineStyle: { |
||||
width: titleFontSize * 1, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
axisLabel: { |
||||
distance: titleFontSize, |
||||
fontSize: titleFontSize / 4, |
||||
}, |
||||
axisTick: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 5, |
||||
}, //刻度样式 |
||||
splitLine: { |
||||
distance: -(titleFontSize / 70), |
||||
lineStyle: { |
||||
width: titleFontSize / 20, |
||||
}, |
||||
length: titleFontSize / 3.6, |
||||
}, //分隔线样式 |
||||
pointer: { |
||||
width: titleFontSize / 2, //指针粗细 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
this.chartInstance.resize(); |
||||
}, |
||||
// 请求的数据 |
||||
getChartsData() { |
||||
if (this.queryType === "day") { |
||||
this.dataTime = getDay(0); |
||||
} else if (this.queryType === "month") { |
||||
this.dataTime = getMonth(0); |
||||
} else if (this.queryType === "year") { |
||||
this.dataTime = getYear(0); |
||||
} |
||||
let data = { |
||||
timeType: this.queryType, |
||||
startTime: this.dataTime, |
||||
endTime: this.dataTime, |
||||
systemType: "1", |
||||
}; |
||||
overView(data).then((res) => { |
||||
console.log("两个系统参数返回", res); |
||||
if (res.code == 200) { |
||||
this.energyMes = res.rows[0]; |
||||
this.useForm.maxData = 10; |
||||
this.useForm.useData = res.rows[0].eer; |
||||
let that = this; |
||||
// 使用配置函数 |
||||
const axisLineColor = this.getAxisLineColor( |
||||
this.useForm.useData, |
||||
this.useForm.maxData |
||||
); |
||||
const adapterOption = { |
||||
series: [ |
||||
{ |
||||
name: "内部动态阴影", |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: axisLineColor, |
||||
// 相当于阴影部分的直径 |
||||
// width: 80, |
||||
}, |
||||
}, |
||||
}, |
||||
{ |
||||
name: "内部大边框", |
||||
min: 0, |
||||
max: this.useForm.maxData, |
||||
}, |
||||
{ |
||||
name: "指针上的圆", |
||||
data: [ |
||||
{ |
||||
value: 5, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
name: "指针上的渐变圆", |
||||
label: { |
||||
show: true, |
||||
position: "center", // 文字显示在中心位置 |
||||
offset: [0, -5], // 向上偏移 10 个单位 |
||||
formatter: function () { |
||||
// 返回 HTML 标签，使用 rich 里定义的样式 |
||||
return `{line|${that.useForm.useData}}`; |
||||
}, |
||||
rich: { |
||||
line: { |
||||
color: "#fff", // 第二行文字颜色 |
||||
fontSize: 20, // 第二行文字大小 |
||||
lineHeight: 0, // 行高，实现间距 |
||||
}, |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
value: 0, |
||||
itemStyle: { |
||||
// 设置渐变颜色 |
||||
color: { |
||||
type: "linear", |
||||
x: 0, |
||||
y: 0, |
||||
x2: 0, |
||||
y2: 1, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: "rgb(4,112,212)", // 顶部颜色 |
||||
}, |
||||
{ |
||||
offset: 0.3, |
||||
color: "rgba(0, 46, 93)", // 底部透明 |
||||
}, |
||||
], |
||||
global: false, // 缺省为 false |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
// 指针 数据 |
||||
name: this.energyCostText, |
||||
max: this.useForm.maxData, //最大刻度 |
||||
axisLabel: { |
||||
formatter: (value) => { |
||||
// 仅显示 0 和最大值 |
||||
if (value === 0 || value == this.useForm.maxData) { |
||||
// 替换 100 为你的最大值 |
||||
return value; |
||||
} |
||||
return ""; |
||||
}, |
||||
}, |
||||
data: [ |
||||
{ |
||||
name: this.dateUse, |
||||
value: this.useForm.useData, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.energy_content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 100% !important; |
||||
height: 100%; |
||||
|
||||
.sys_charts { |
||||
width: 100%; |
||||
height: 1.6rem; |
||||
} |
||||
.eer { |
||||
width: 80%; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin: 10px 0; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,20 @@
|
||||
<template> |
||||
<div></div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
created() { |
||||
this.toPage(); |
||||
}, |
||||
methods: { |
||||
toPage() { |
||||
console.log("需要跳转的") |
||||
// 跳转到高校导航大屏展示 |
||||
this.$router.push("/bigScreen") |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style></style> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,458 @@
|
||||
<template> |
||||
<div class="app-container" v-loading="loading"> |
||||
<img |
||||
class="right-line" |
||||
src="../../../assets/images/right_line.png" |
||||
alt="" |
||||
/> |
||||
<div class="delay-title">定时开关机功能</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> |
||||
<div class="device-li" v-for="(item, index) in delayList" :key="index"> |
||||
<div class="device-name">{{ item.name }}</div> |
||||
<div class="device-name"> |
||||
<el-input |
||||
size="mini" |
||||
v-model="item.delayOpenHour" |
||||
@keyup.enter.native="handleEnter(item, 'openHour')" |
||||
@input="handleInput(item, 'delayOpenHour', 'hour')" |
||||
></el-input> |
||||
<div class="slip">:</div> |
||||
<el-input |
||||
size="mini" |
||||
v-model="item.delayOpenMinute" |
||||
@keyup.enter.native="handleEnter(item, 'openMinute')" |
||||
@input="handleInput(item, 'delayOpenMinute', 'minute')" |
||||
></el-input> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-input |
||||
size="mini" |
||||
v-model="item.delayCloseHour" |
||||
@keyup.enter.native="handleEnter(item, 'closeHour')" |
||||
@input="handleInput(item, 'delayCloseHour', 'hour')" |
||||
></el-input> |
||||
<div class="slip">:</div> |
||||
<el-input |
||||
size="mini" |
||||
v-model="item.delayCloseMinute" |
||||
@keyup.enter.native="handleEnter(item, 'closeMinute')" |
||||
@input="handleInput(item, 'delayCloseMinute', 'minute')" |
||||
></el-input> |
||||
</div> |
||||
<div class="device-name"> |
||||
<el-switch |
||||
style="display: block" |
||||
active-color="#13ce66" |
||||
inactive-color="#ff4949" |
||||
active-text="开启" |
||||
inactive-text="禁用" |
||||
v-model="item.delayStatus" |
||||
@change="handleStatus(item)" |
||||
> |
||||
</el-switch> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<img class="left-line" src="../../../assets/images/left_line.png" alt="" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { policyListData } from "@/api/centerairC/strategy"; |
||||
import { operationConrol } from "@/api/centerairC/sysMonitor"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
delayList: [], |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getPolicyList(); |
||||
}, |
||||
methods: { |
||||
// 请求列表 |
||||
getPolicyList() { |
||||
return new Promise((resolve, reject) => { |
||||
let data = { |
||||
systemType: "0", |
||||
funPolicyType: "3", |
||||
}; |
||||
policyListData(data) |
||||
.then((res) => { |
||||
console.log("设备定时开关返回res", res); |
||||
if (res.code === 200) { |
||||
let handleList = res.rows; |
||||
this.delayList = []; |
||||
handleList.forEach((element, index) => { |
||||
if (element.values && element.values.length > 0) { |
||||
// 初始化一个空对象来存储非蝶阀处理后的结果 |
||||
let delayItem = { |
||||
name: element.name, |
||||
}; |
||||
const limitedChildren = element.values; |
||||
limitedChildren.forEach((child) => { |
||||
// console.log("定时${index}开_时", `定时${index}开_时`); |
||||
// console.log("child.pointName", child.pointName); |
||||
if (child.pointName) { |
||||
// 定时开机-小时 |
||||
if (child.pointName == `定时${index + 1}开_时`) { |
||||
// console.log("定时开机-时·························"); |
||||
delayItem.delayOpenHour = child.curValue; |
||||
delayItem.delayOpenHourId = child.cpmId; |
||||
} |
||||
// 定时开机-分钟 |
||||
else if ( |
||||
child.pointName.includes(`定时${index + 1}开_分`) |
||||
) { |
||||
delayItem.delayOpenMinute = child.curValue; |
||||
delayItem.delayOpenMinuteId = child.cpmId; |
||||
} |
||||
// 定时关机-小时 |
||||
else if ( |
||||
child.pointName.includes(`定时${index + 1}关_时`) |
||||
) { |
||||
delayItem.delayCloseHour = child.curValue; |
||||
delayItem.delayCloseHourId = child.cpmId; |
||||
} |
||||
// 定时关机-分钟 |
||||
else if ( |
||||
child.pointName.includes(`定时${index + 1}关_分`) |
||||
) { |
||||
delayItem.delayCloseMinute = child.curValue; |
||||
delayItem.delayCloseMinuteId = child.cpmId; |
||||
} |
||||
// 启动状态 |
||||
else if (child.pointName.includes(`启动标志`)) { |
||||
delayItem.delayStatus = |
||||
Number(child.curValue) == 0 ? false : true; |
||||
delayItem.delayStatusId = child.cpmId; |
||||
} |
||||
} |
||||
}); |
||||
// 将处理后的对象添加到 delayList 中 |
||||
if (Object.keys(delayItem).length > 1) { |
||||
this.delayList.push(delayItem); |
||||
} |
||||
} |
||||
}); |
||||
console.log("处理后的数组", this.delayList); |
||||
// this.delayList = res.rows; |
||||
} else { |
||||
this.delayList = []; |
||||
} |
||||
// 成功时解析 Promise |
||||
resolve(res); |
||||
}) |
||||
.catch((error) => { |
||||
// 失败时拒绝 Promise |
||||
reject(error); |
||||
}); |
||||
}); |
||||
}, |
||||
|
||||
// 处理输入事件，过滤非数字字符 |
||||
handleInput(item, propertyName, name) { |
||||
console.log("校验", item[propertyName]); |
||||
// 如果值为空，不进行后续校验 |
||||
if (item[propertyName] === "") { |
||||
return; |
||||
} |
||||
let isValid = true; |
||||
// 实时校验并过滤非数字字符 |
||||
let inputValue = String(item[propertyName]).replace(/[^\d]/g, ""); |
||||
if (name === "hour") { |
||||
isValid = |
||||
!isNaN(inputValue) && |
||||
parseInt(inputValue) >= 0 && |
||||
parseInt(inputValue) <= 23; |
||||
if (!isValid) { |
||||
this.$message.error("输入值在0-23区间，请重新输入"); |
||||
item[propertyName] = ""; |
||||
return; |
||||
} |
||||
} else if (name === "minute") { |
||||
isValid = |
||||
!isNaN(inputValue) && |
||||
parseInt(inputValue) >= 0 && |
||||
parseInt(inputValue) <= 59; |
||||
if (!isValid) { |
||||
this.$message.error("输入值在0-59区间，请重新输入"); |
||||
item[propertyName] = ""; |
||||
return; |
||||
} |
||||
} |
||||
item[propertyName] = inputValue; |
||||
}, |
||||
handleEnter(item, name) { |
||||
let id = ""; |
||||
let value = ""; |
||||
let title = ""; |
||||
let unit = ""; |
||||
if (name === "openHour") { |
||||
id = item.delayOpenHourId; |
||||
value = item.delayOpenHour; |
||||
title = "定时开机-小时"; |
||||
unit = "时"; |
||||
} else if (name === "openMinute") { |
||||
id = item.delayOpenMinuteId; |
||||
value = item.delayOpenMinute; |
||||
title = "定时开机-分钟"; |
||||
unit = "分"; |
||||
} else if (name === "closeHour") { |
||||
id = item.delayCloseHourId; |
||||
value = item.delayCloseHour; |
||||
title = "定时关机-小时"; |
||||
unit = "时"; |
||||
} else if (name === "closeMinute") { |
||||
id = item.delayCloseMinuteId; |
||||
value = item.delayCloseMinute; |
||||
title = "定时关机-分钟"; |
||||
unit = "分"; |
||||
} |
||||
|
||||
if (value === "") { |
||||
this.$message.warning("请输入当前设置值!"); |
||||
return; |
||||
} |
||||
console.log("请求后端", item); |
||||
this.$confirm( |
||||
`确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
this.hadleOperationConrol(id, value); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，需要更新原来的频率 |
||||
this.getPolicyList(); |
||||
}); |
||||
}, |
||||
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.getPolicyList().finally(() => { |
||||
// 关闭 loading 效果 |
||||
this.loading = false; |
||||
}); |
||||
}, 6000); |
||||
} else { |
||||
// this.$modal.msgError("操作失败"); |
||||
console.log("应该更新状态的"); |
||||
// 更新所有设备状态; |
||||
this.getPolicyList(); |
||||
} |
||||
}) |
||||
.catch((error) => { |
||||
console.log("请求发生错误，更新设备状态", error); |
||||
// 更新所有设备状态; |
||||
this.getPolicyList(); |
||||
}); |
||||
}, |
||||
// 启用状态 |
||||
handleStatus(item) { |
||||
this.$confirm( |
||||
`确定要切换"${item.name}"的状态为:${ |
||||
item.delayStatus ? "开启" : "禁用 吗?" |
||||
}`, |
||||
"提示", |
||||
{ |
||||
confirmButtonText: "确定", |
||||
cancelButtonText: "取消", |
||||
type: "warning", |
||||
} |
||||
) |
||||
.then(() => { |
||||
// 这里调用请求函数 |
||||
console.log("请求后台", item.delayStatus); |
||||
let param = null; |
||||
if (item.delayStatus) { |
||||
param = 1; |
||||
} else { |
||||
param = 0; |
||||
} |
||||
this.hadleOperationConrol(item.delayStatusId, param); |
||||
}) |
||||
.catch(() => { |
||||
// 用户取消操作，恢复开关状态 |
||||
item.delayStatus = !item.delayStatus; |
||||
console.log("不请求后台"); |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.app-container { |
||||
position: relative; |
||||
padding: 0.2rem; |
||||
.delay-title { |
||||
/* 基础样式 */ |
||||
display: inline-block; |
||||
padding: 0.1rem; |
||||
font-family: "Arial Rounded MT Bold", sans-serif; |
||||
font-size: 0.18rem; |
||||
font-weight: 700; |
||||
color: #e6f3ff; |
||||
text-shadow: 0 2px 4px rgba(0, 60, 120, 0.4); |
||||
letter-spacing: 2px; |
||||
position: relative; |
||||
overflow: hidden; |
||||
cursor: default; |
||||
|
||||
/* 双背景叠加 */ |
||||
background: linear-gradient( |
||||
65deg, |
||||
rgba(1, 11, 24, 0.8) 0%, |
||||
rgba(36, 91, 146, 0.6) 50%, |
||||
rgba(18, 53, 95, 0.5) 100% |
||||
), |
||||
linear-gradient(-25deg, #0b274b 20%, #2b4d6b 80%); |
||||
background-blend-mode: overlay; |
||||
|
||||
/* 动态边框 */ |
||||
border: 2px solid; |
||||
border-image: linear-gradient(45deg, #026bbb, transparent) 1; |
||||
|
||||
/* 主流光动画 */ |
||||
&::before { |
||||
content: ""; |
||||
position: absolute; |
||||
top: -50%; |
||||
left: -100%; |
||||
width: 250%; |
||||
height: 200%; |
||||
background: linear-gradient( |
||||
60deg, |
||||
transparent 20%, |
||||
rgba(255, 255, 255, 0.3) 50%, |
||||
transparent 80% |
||||
); |
||||
animation: shine 2.5s infinite linear; |
||||
} |
||||
|
||||
/* 副流光动画 */ |
||||
&::after { |
||||
content: ""; |
||||
position: absolute; |
||||
top: -30%; |
||||
left: -50%; |
||||
width: 200%; |
||||
height: 160%; |
||||
background: linear-gradient( |
||||
-30deg, |
||||
transparent 30%, |
||||
rgba(255, 255, 255, 0.2) 50%, |
||||
transparent 70% |
||||
); |
||||
animation: shineReverse 3s infinite linear; |
||||
animation-delay: 0.8s; |
||||
} |
||||
} |
||||
|
||||
/* 主流光动画 */ |
||||
@keyframes shine { |
||||
0% { |
||||
transform: translateX(-20%) rotate(60deg); |
||||
} |
||||
100% { |
||||
transform: translateX(120%) rotate(60deg); |
||||
} |
||||
} |
||||
|
||||
/* 反向副流光 */ |
||||
@keyframes shineReverse { |
||||
0% { |
||||
transform: translateX(20%) rotate(-30deg); |
||||
} |
||||
100% { |
||||
transform: translateX(-120%) rotate(-30deg); |
||||
} |
||||
} |
||||
.right-line { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 1.7rem; |
||||
height: 0.4rem; |
||||
} |
||||
.left-line { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
width: 0.5rem; |
||||
height: 2.2rem; |
||||
} |
||||
} |
||||
.device-container { |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 100%; |
||||
min-height: 700px; |
||||
background-color: #142c4e; |
||||
padding: 10px 10px 30px 10px; |
||||
border-radius: 10px; |
||||
.device-li { |
||||
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; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex-wrap: nowrap; |
||||
.slip { |
||||
margin: 0 5px; |
||||
color: #1282d8; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
} |
||||
.device-li:nth-child(1) { |
||||
color: #9ca3af; |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
.device-name >>> .el-input { |
||||
width: 80px !important; |
||||
} |
||||
.device-name >>> .el-input__inner { |
||||
background-color: #04193a; |
||||
border: 1px solid #1262db; |
||||
color: #3ef0fd; |
||||
font-weight: 700; |
||||
text-align: center; |
||||
padding: 0 0.1rem !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@
|
||||
<template> |
||||
<div>历史数据</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
|
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue