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