Browse Source

修改各个系统页面的样式

bl_ai
selia-zx 2 weeks ago
parent
commit
cda0d5e510
  1. BIN
      src/assets/images/temp1.png
  2. BIN
      src/assets/images/temp2.png
  3. BIN
      src/assets/images/temp3.png
  4. BIN
      src/assets/images/temp4.png
  5. BIN
      src/assets/images/temp5.png
  6. BIN
      src/assets/images/temp6.png
  7. 22
      src/layout/components/Navbar.vue
  8. 28
      src/store/modules/permission.js
  9. 864
      src/views/newCenterairC/alarmManage/index.vue
  10. 539
      src/views/newCenterairC/deviceManage/index.vue
  11. 2
      src/views/newCenterairC/energyManage/carbonEmissionsAnalysis/index.vue
  12. 9
      src/views/newCenterairC/energyManage/energyConsumptionEfficiencyTrend/index.vue
  13. 476
      src/views/newCenterairC/energyManage/retrofitEffectivenessCompariso/index.vue
  14. 479
      src/views/newCenterairC/home/index.vue
  15. 12
      src/views/newCenterairC/reportManage/base/index.vue
  16. 12
      src/views/newCenterairC/reportManage/machine/index.vue
  17. 17
      src/views/newLifeWater/alarmManage/index.vue
  18. 6
      src/views/newLifeWater/deviceManage/info/index.vue
  19. 747
      src/views/newLifeWater/energyManage/energyConsumptionEfficiencyTrend/index.vue
  20. 4
      src/views/newLifeWater/energyManage/energyWater/index.vue
  21. 4
      src/views/newLifeWater/energyManage/retrofitEffectivenessCompariso/index.vue
  22. 9
      src/views/newLifeWater/energyManage/warning/index.vue
  23. 654
      src/views/newLifeWater/home/index.vue
  24. 8
      src/views/newLifeWater/reportManage/base/index.vue
  25. 17
      src/views/newLighting/alarmManage/index.vue
  26. 6
      src/views/newLighting/deviceManage/info/index.vue
  27. 503
      src/views/newLighting/deviceManage/strategy/index.vue
  28. 4
      src/views/newLighting/energyManage/retrofitEffectivenessCompariso/index.vue
  29. 9
      src/views/newLighting/energyManage/warning/index.vue
  30. 8
      src/views/newLighting/reportManage/base/index.vue
  31. 341
      src/views/newSystem/systemDevice.vue
  32. 241
      src/views/newSystem/systemEnergy.vue
  33. 180
      src/views/newSystem/systemHome.vue

BIN
src/assets/images/temp1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
src/assets/images/temp2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/assets/images/temp3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/images/temp4.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/assets/images/temp5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/assets/images/temp6.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

22
src/layout/components/Navbar.vue

@ -15,6 +15,19 @@
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu">
<el-form ref="queryForm" size="small" :inline="true">
<el-form-item label="切换项目" prop="project">
<el-select
v-model="project"
placeholder="选择项目"
filterable
>
<el-option label="演示项目" value="演示项目" />
<el-option label="梅州酒店" value="梅州酒店" />
<el-option label="珠海酒店" value="珠海酒店" />
</el-select>
</el-form-item>
</el-form>
<template v-if="device !== 'mobile'">
<img
v-if="isShowWarning"
@ -91,6 +104,7 @@ export default {
data() {
return {
isShowWarning: false,
project: "演示项目",
};
},
mounted() {
@ -299,3 +313,11 @@ export default {
}
}
</style>
<style scoped>
.el-form-item--small.el-form-item{
margin-bottom: 0 !important;
display: flex;
flex-direction: row;
align-items: center;
}
</style>

28
src/store/modules/permission.js

@ -254,6 +254,34 @@ const permission = {
// console.log("不满足条件");
}
//
// 空压热回收
const result6 = sidebarRoutes.find(
(item) => item.name === "NewCenterairC"
);
if (result6) {
// 定义要添加的多个路由对象数组
const additionalRoutes2 = [
{
path: "/monitorCenter",
name: "monitorCenter",
hidden: true,
component: () =>
import("@/views/centerairC/sysMonitor/monitorCenter"),
meta: { title: "系统监测", icon: "screen" },
},
// 可以继续添加更多路由对象
];
// 循环添加额外的路由对象到各路由数组
additionalRoutes2.forEach((route) => {
sidebarRoutes.push(route);
rewriteRoutes.push(route);
asyncRoutes.push(route);
});
} else {
// console.log("不满足条件");
}
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);

864
src/views/newCenterairC/alarmManage/index.vue

File diff suppressed because it is too large Load Diff

539
src/views/newCenterairC/deviceManage/index.vue

@ -13,8 +13,15 @@
@clear="handleSearch"
>
<template #prefix>
<svg class="search-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M909.6 854.5L649.9 594.8c41.3-54.3 65.9-121.4 65.9-194.1C715.8 262.2 560.6 107 370.4 107S25 262.2 25 452.4s155.2 345.4 345.4 345.4c72.7 0 139.8-24.6 194.1-65.9l259.7 259.7c11.1 11.1 29.1 11.1 40.2 0l45.2-45.2c11.1-11.1 11.1-29.1 0-40.2zM370.4 705c-139.1 0-252.6-113.5-252.6-252.6s113.5-252.6 252.6-252.6 252.6 113.5 252.6 252.6-113.5 252.6-252.6 252.6z" fill="currentColor"/>
<svg
class="search-icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M909.6 854.5L649.9 594.8c41.3-54.3 65.9-121.4 65.9-194.1C715.8 262.2 560.6 107 370.4 107S25 262.2 25 452.4s155.2 345.4 345.4 345.4c72.7 0 139.8-24.6 194.1-65.9l259.7 259.7c11.1 11.1 29.1 11.1 40.2 0l45.2-45.2c11.1-11.1 11.1-29.1 0-40.2zM370.4 705c-139.1 0-252.6-113.5-252.6-252.6s113.5-252.6 252.6-252.6 252.6 113.5 252.6 252.6-113.5 252.6-252.6 252.6z"
fill="currentColor"
/>
</svg>
</template>
</el-input>
@ -55,14 +62,27 @@
</div>
</div>
<div class="action-group">
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn">
<el-button type="primary" @click="handleSearch" class="custom-btn"
>查询</el-button
>
</div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">
<svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
</svg>
导出列表
</el-button>
<div class="success-btn">
<el-button type="success" @click="handleExport" class="custom-btn">
<svg
class="btn-icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z"
fill="currentColor"
/>
</svg>
导出列表
</el-button>
</div>
</div>
</div>
@ -71,8 +91,14 @@
<div class="stat-card total">
<div class="stat-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="stat-info">
@ -83,9 +109,18 @@
<div class="stat-card running">
<div class="stat-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
<path
d="M512 592c-4.4 0-8 3.6-8 8v256c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V600c0-4.4-3.6-8-8-8h-48z"
fill="currentColor"
/>
</svg>
</div>
<div class="stat-info">
@ -96,8 +131,14 @@
<div class="stat-card offline">
<div class="stat-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M512 352c-8.8 0-16 7.2-16 16v224c0 8.8 7.2 16 16 16h48c8.8 0 16-7.2 16-16V368c0-8.8-7.2-16-16-16h-48z"
fill="currentColor"
/>
</svg>
</div>
<div class="stat-info">
@ -108,8 +149,14 @@
<div class="stat-card fault">
<div class="stat-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
fill="currentColor"
/>
</svg>
</div>
<div class="stat-info">
@ -120,8 +167,14 @@
<div class="stat-card standby">
<div class="stat-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="stat-info">
@ -140,7 +193,7 @@
@click="handleCategoryChange(index)"
>
<span class="tab-icon">{{ getCategoryIcon(category.value) }}</span>
<span class="tab-label">{{ category.label }}</span>
<!-- <span class="tab-label">{{ category.label }}</span> -->
<span class="tab-count">({{ category.count }})</span>
</div>
</div>
@ -149,9 +202,7 @@
<div class="device-list-container">
<div class="list-header">
<div class="list-title">设备列表</div>
<div class="list-info">
{{ filteredDevices.length }} 台设备
</div>
<div class="list-info"> {{ filteredDevices.length }} 台设备</div>
</div>
<div class="device-grid">
<div
@ -161,7 +212,7 @@
@click="viewDeviceDetail(device)"
>
<div class="card-header">
<div class="device-icon" :style="{ background: device.iconBg }">
<div class="device-icon">
<span>{{ getDeviceIcon(device.type) }}</span>
</div>
<div class="device-header-info">
@ -251,7 +302,10 @@
</div>
<div class="info-item">
<span class="item-label">设备状态:</span>
<span class="item-value status-badge" :class="selectedDevice.status">
<span
class="item-value status-badge"
:class="selectedDevice.status"
>
{{ getStatusText(selectedDevice.status) }}
</span>
</div>
@ -262,7 +316,12 @@
</div>
</div>
<div class="detail-section" v-if="selectedDevice.parameters && selectedDevice.parameters.length > 0">
<div
class="detail-section"
v-if="
selectedDevice.parameters && selectedDevice.parameters.length > 0
"
>
<div class="section-title">运行参数</div>
<div class="params-grid">
<div
@ -292,13 +351,17 @@
</div>
<div class="status-item" v-if="selectedDevice.status === 'fault'">
<span class="status-label">故障信息:</span>
<span class="status-text fault">{{ selectedDevice.faultInfo || '未知故障' }}</span>
<span class="status-text fault">{{
selectedDevice.faultInfo || "未知故障"
}}</span>
</div>
</div>
</div>
</div>
<template #footer>
<el-button @click="closeDetailDialog" class="custom-btn">关闭</el-button>
<el-button @click="closeDetailDialog" class="custom-btn"
>关闭</el-button
>
</template>
</el-dialog>
</div>
@ -312,7 +375,7 @@ export default {
searchForm: {
deviceName: "",
deviceStatus: "",
deviceType: ""
deviceType: "",
},
deviceTypes: [
{ label: "主机", value: "host" },
@ -321,7 +384,7 @@ export default {
{ label: "冷却塔", value: "coolingTower" },
{ label: "温度传感器", value: "tempSensor" },
{ label: "压力传感器", value: "pressureSensor" },
{ label: "电表", value: "meter" }
{ label: "电表", value: "meter" },
],
deviceCategories: [
{ label: "全部设备", value: "all", count: 48 },
@ -330,7 +393,7 @@ export default {
{ label: "冷却泵", value: "coolingPump", count: 4 },
{ label: "冷却塔", value: "coolingTower", count: 3 },
{ label: "传感器", value: "sensor", count: 28 },
{ label: "电表", value: "meter", count: 5 }
{ label: "电表", value: "meter", count: 5 },
],
activeCategory: 0,
currentPage: 1,
@ -341,10 +404,10 @@ export default {
running: 38,
offline: 5,
fault: 2,
standby: 3
standby: 3,
},
detailDialogVisible: false,
selectedDevice: null
selectedDevice: null,
};
},
computed: {
@ -353,20 +416,28 @@ export default {
const category = this.deviceCategories[this.activeCategory];
if (category.value !== "all") {
if (category.value === "sensor") {
devices = devices.filter(d => d.type === "tempSensor" || d.type === "pressureSensor");
devices = devices.filter(
(d) => d.type === "tempSensor" || d.type === "pressureSensor"
);
} else {
devices = devices.filter(d => d.type === category.value);
devices = devices.filter((d) => d.type === category.value);
}
}
if (this.searchForm.deviceName) {
const keyword = this.searchForm.deviceName.toLowerCase();
devices = devices.filter(d => d.name.toLowerCase().includes(keyword) || d.code.toLowerCase().includes(keyword));
devices = devices.filter(
(d) =>
d.name.toLowerCase().includes(keyword) ||
d.code.toLowerCase().includes(keyword)
);
}
if (this.searchForm.deviceStatus) {
devices = devices.filter(d => d.status === this.searchForm.deviceStatus);
devices = devices.filter(
(d) => d.status === this.searchForm.deviceStatus
);
}
if (this.searchForm.deviceType) {
devices = devices.filter(d => d.type === this.searchForm.deviceType);
devices = devices.filter((d) => d.type === this.searchForm.deviceType);
}
return devices;
},
@ -374,7 +445,7 @@ export default {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.filteredDevices.slice(start, end);
}
},
},
mounted() {
this.initDeviceList();
@ -386,30 +457,258 @@ export default {
const towerIcons = ["#fa709a", "#fee140"];
const sensorIcons = ["#f093fb", "#f5576c"];
const meterIcons = ["#a8edea", "#fed6e3"];
this.deviceList = [
{ code: "CH-001", name: "1号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "12.5", unit: "℃" }, { label: "出水温度", value: "7.2", unit: "℃" }, { label: "电流", value: "850", unit: "A" }, { label: "功率", value: "520", unit: "kW" }, { label: "COP", value: "5.2", unit: "" }] },
{ code: "CH-002", name: "2号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "12.3", unit: "℃" }, { label: "出水温度", value: "7.1", unit: "℃" }, { label: "电流", value: "830", unit: "A" }, { label: "功率", value: "508", unit: "kW" }, { label: "COP", value: "5.1", unit: "" }] },
{ code: "CH-003", name: "3号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)` },
{ code: "CH-004", name: "4号主机", type: "host", model: "YKK3CF2HE5", spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)` },
{ code: "CP-001", name: "1号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`, parameters: [{ label: "流量", value: "1150", unit: "m3/h" }, { label: "扬程", value: "30.5", unit: "m" }, { label: "电流", value: "185", unit: "A" }, { label: "功率", value: "98", unit: "kW" }] },
{ code: "CP-002", name: "2号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`, parameters: [{ label: "流量", value: "1120", unit: "m3/h" }, { label: "扬程", value: "29.8", unit: "m" }, { label: "电流", value: "178", unit: "A" }, { label: "功率", value: "95", unit: "kW" }] },
{ code: "CP-003", name: "3号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)` },
{ code: "CP-004", name: "4号冷冻泵", type: "chillerPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW", installDate: "2020-06-15", status: "fault", faultInfo: "电机过载保护", iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)` },
{ code: "CWP-001", name: "1号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`, parameters: [{ label: "流量", value: "1180", unit: "m3/h" }, { label: "扬程", value: "27.2", unit: "m" }, { label: "电流", value: "158", unit: "A" }, { label: "功率", value: "85", unit: "kW" }] },
{ code: "CWP-002", name: "2号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`, parameters: [{ label: "流量", value: "1160", unit: "m3/h" }, { label: "扬程", value: "26.8", unit: "m" }, { label: "电流", value: "152", unit: "A" }, { label: "功率", value: "82", unit: "kW" }] },
{ code: "CWP-003", name: "3号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)` },
{ code: "CWP-004", name: "4号冷却泵", type: "coolingPump", model: "XLE100-400", spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)` },
{ code: "CT-001", name: "1号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "running", runtime: "1256小时", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "37.2", unit: "℃" }, { label: "出水温度", value: "32.5", unit: "℃" }, { label: "风机频率", value: "45", unit: "Hz" }, { label: "风机功率", value: "12.5", unit: "kW" }] },
{ code: "CT-002", name: "2号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "running", runtime: "1180小时", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`, parameters: [{ label: "进水温度", value: "37.0", unit: "℃" }, { label: "出水温度", value: "32.3", unit: "℃" }, { label: "风机频率", value: "43", unit: "Hz" }, { label: "风机功率", value: "11.8", unit: "kW" }] },
{ code: "CT-003", name: "3号冷却塔", type: "coolingTower", model: "CT-800", spec: "冷却水量: 800m3/h, 风机功率: 22kW", installDate: "2020-06-15", status: "standby", iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)` },
{ code: "EM-001", name: "总电表", type: "meter", model: "DTS666", spec: "三相四线, 3(6)A, 0.5S级", installDate: "2020-06-15", status: "running", iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`, parameters: [{ label: "总有功电能", value: "1256800", unit: "kWh" }, { label: "总功率", value: "1256", unit: "kW" }, { label: "A相电流", value: "850", unit: "A" }, { label: "B相电流", value: "820", unit: "A" }, { label: "C相电流", value: "830", unit: "A" }] },
{ code: "EM-002", name: "1号主机电表", type: "meter", model: "DTS666", spec: "三相四线, 3(6)A, 0.5S级", installDate: "2020-06-15", status: "running", iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`, parameters: [{ label: "有功电能", value: "285600", unit: "kWh" }, { label: "功率", value: "520", unit: "kW" }, { label: "A相电流", value: "285", unit: "A" }, { label: "B相电流", value: "280", unit: "A" }, { label: "C相电流", value: "285", unit: "A" }] }
{
code: "CH-001",
name: "1号主机",
type: "host",
model: "YKK3CF2HE5",
spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A",
installDate: "2020-06-15",
status: "running",
runtime: "1256小时",
iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`,
parameters: [
{ label: "进水温度", value: "12.5", unit: "℃" },
{ label: "出水温度", value: "7.2", unit: "℃" },
{ label: "电流", value: "850", unit: "A" },
{ label: "功率", value: "520", unit: "kW" },
{ label: "COP", value: "5.2", unit: "" },
],
},
{
code: "CH-002",
name: "2号主机",
type: "host",
model: "YKK3CF2HE5",
spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A",
installDate: "2020-06-15",
status: "running",
runtime: "1180小时",
iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`,
parameters: [
{ label: "进水温度", value: "12.3", unit: "℃" },
{ label: "出水温度", value: "7.1", unit: "℃" },
{ label: "电流", value: "830", unit: "A" },
{ label: "功率", value: "508", unit: "kW" },
{ label: "COP", value: "5.1", unit: "" },
],
},
{
code: "CH-003",
name: "3号主机",
type: "host",
model: "YKK3CF2HE5",
spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A",
installDate: "2020-06-15",
status: "standby",
iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`,
},
{
code: "CH-004",
name: "4号主机",
type: "host",
model: "YKK3CF2HE5",
spec: "制冷量: 1200RT, 额定功率: 750kW, 额定电流: 1350A",
installDate: "2020-06-15",
status: "standby",
iconBg: `linear-gradient(135deg, #${hostIcons[0]} 0%, #${hostIcons[1]} 100%)`,
},
{
code: "CP-001",
name: "1号冷冻泵",
type: "chillerPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW",
installDate: "2020-06-15",
status: "running",
runtime: "1256小时",
iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`,
parameters: [
{ label: "流量", value: "1150", unit: "m3/h" },
{ label: "扬程", value: "30.5", unit: "m" },
{ label: "电流", value: "185", unit: "A" },
{ label: "功率", value: "98", unit: "kW" },
],
},
{
code: "CP-002",
name: "2号冷冻泵",
type: "chillerPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW",
installDate: "2020-06-15",
status: "running",
runtime: "1180小时",
iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`,
parameters: [
{ label: "流量", value: "1120", unit: "m3/h" },
{ label: "扬程", value: "29.8", unit: "m" },
{ label: "电流", value: "178", unit: "A" },
{ label: "功率", value: "95", unit: "kW" },
],
},
{
code: "CP-003",
name: "3号冷冻泵",
type: "chillerPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW",
installDate: "2020-06-15",
status: "standby",
iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`,
},
{
code: "CP-004",
name: "4号冷冻泵",
type: "chillerPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 32m, 功率: 132kW",
installDate: "2020-06-15",
status: "fault",
faultInfo: "电机过载保护",
iconBg: `linear-gradient(135deg, #${pumpIcons[0]} 0%, #${pumpIcons[1]} 100%)`,
},
{
code: "CWP-001",
name: "1号冷却泵",
type: "coolingPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW",
installDate: "2020-06-15",
status: "running",
runtime: "1256小时",
iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`,
parameters: [
{ label: "流量", value: "1180", unit: "m3/h" },
{ label: "扬程", value: "27.2", unit: "m" },
{ label: "电流", value: "158", unit: "A" },
{ label: "功率", value: "85", unit: "kW" },
],
},
{
code: "CWP-002",
name: "2号冷却泵",
type: "coolingPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW",
installDate: "2020-06-15",
status: "running",
runtime: "1180小时",
iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`,
parameters: [
{ label: "流量", value: "1160", unit: "m3/h" },
{ label: "扬程", value: "26.8", unit: "m" },
{ label: "电流", value: "152", unit: "A" },
{ label: "功率", value: "82", unit: "kW" },
],
},
{
code: "CWP-003",
name: "3号冷却泵",
type: "coolingPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW",
installDate: "2020-06-15",
status: "running",
runtime: "1256小时",
iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`,
},
{
code: "CWP-004",
name: "4号冷却泵",
type: "coolingPump",
model: "XLE100-400",
spec: "流量: 1200m3/h, 扬程: 28m, 功率: 110kW",
installDate: "2020-06-15",
status: "running",
runtime: "1180小时",
iconBg: `linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)`,
},
{
code: "CT-001",
name: "1号冷却塔",
type: "coolingTower",
model: "CT-800",
spec: "冷却水量: 800m3/h, 风机功率: 22kW",
installDate: "2020-06-15",
status: "running",
runtime: "1256小时",
iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`,
parameters: [
{ label: "进水温度", value: "37.2", unit: "℃" },
{ label: "出水温度", value: "32.5", unit: "℃" },
{ label: "风机频率", value: "45", unit: "Hz" },
{ label: "风机功率", value: "12.5", unit: "kW" },
],
},
{
code: "CT-002",
name: "2号冷却塔",
type: "coolingTower",
model: "CT-800",
spec: "冷却水量: 800m3/h, 风机功率: 22kW",
installDate: "2020-06-15",
status: "running",
runtime: "1180小时",
iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`,
parameters: [
{ label: "进水温度", value: "37.0", unit: "℃" },
{ label: "出水温度", value: "32.3", unit: "℃" },
{ label: "风机频率", value: "43", unit: "Hz" },
{ label: "风机功率", value: "11.8", unit: "kW" },
],
},
{
code: "CT-003",
name: "3号冷却塔",
type: "coolingTower",
model: "CT-800",
spec: "冷却水量: 800m3/h, 风机功率: 22kW",
installDate: "2020-06-15",
status: "standby",
iconBg: `linear-gradient(135deg, #${towerIcons[0]} 0%, #${towerIcons[1]} 100%)`,
},
{
code: "EM-001",
name: "总电表",
type: "meter",
model: "DTS666",
spec: "三相四线, 3(6)A, 0.5S级",
installDate: "2020-06-15",
status: "running",
iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`,
parameters: [
{ label: "总有功电能", value: "1256800", unit: "kWh" },
{ label: "总功率", value: "1256", unit: "kW" },
{ label: "A相电流", value: "850", unit: "A" },
{ label: "B相电流", value: "820", unit: "A" },
{ label: "C相电流", value: "830", unit: "A" },
],
},
{
code: "EM-002",
name: "1号主机电表",
type: "meter",
model: "DTS666",
spec: "三相四线, 3(6)A, 0.5S级",
installDate: "2020-06-15",
status: "running",
iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`,
parameters: [
{ label: "有功电能", value: "285600", unit: "kWh" },
{ label: "功率", value: "520", unit: "kW" },
{ label: "A相电流", value: "285", unit: "A" },
{ label: "B相电流", value: "280", unit: "A" },
{ label: "C相电流", value: "285", unit: "A" },
],
},
];
for (let i = 1; i <= 18; i++) {
this.deviceList.push({
code: `TS-${String(i).padStart(3, '0')}`,
code: `TS-${String(i).padStart(3, "0")}`,
name: `${i}号温度传感器`,
type: "tempSensor",
model: "PT100",
@ -417,13 +716,20 @@ export default {
installDate: "2020-06-15",
status: i <= 15 ? "running" : "offline",
iconBg: `linear-gradient(135deg, #${sensorIcons[0]} 0%, #${sensorIcons[1]} 100%)`,
parameters: [{ label: "当前温度", value: (12 + Math.random() * 8).toFixed(1), unit: "℃" }, { label: "信号强度", value: "-45", unit: "dBm" }]
parameters: [
{
label: "当前温度",
value: (12 + Math.random() * 8).toFixed(1),
unit: "℃",
},
{ label: "信号强度", value: "-45", unit: "dBm" },
],
});
}
for (let i = 1; i <= 10; i++) {
this.deviceList.push({
code: `PS-${String(i).padStart(3, '0')}`,
code: `PS-${String(i).padStart(3, "0")}`,
name: `${i}号压力传感器`,
type: "pressureSensor",
model: "HB2000",
@ -432,10 +738,17 @@ export default {
status: i <= 8 ? "running" : i === 9 ? "fault" : "offline",
faultInfo: i === 9 ? "传感器漂移" : undefined,
iconBg: `linear-gradient(135deg, #30cfd0 0%, #330867 100%)`,
parameters: [{ label: "当前压力", value: (0.5 + Math.random() * 0.3).toFixed(2), unit: "MPa" }, { label: "信号强度", value: "-52", unit: "dBm" }]
parameters: [
{
label: "当前压力",
value: (0.5 + Math.random() * 0.3).toFixed(2),
unit: "MPa",
},
{ label: "信号强度", value: "-52", unit: "dBm" },
],
});
}
for (let i = 3; i <= 5; i++) {
this.deviceList.push({
code: `EM-00${i}`,
@ -446,7 +759,18 @@ export default {
installDate: "2020-06-15",
status: "running",
iconBg: `linear-gradient(135deg, #${meterIcons[0]} 0%, #${meterIcons[1]} 100%)`,
parameters: [{ label: "有功电能", value: Math.floor(250000 + Math.random() * 50000), unit: "kWh" }, { label: "功率", value: Math.floor(480 + Math.random() * 80), unit: "kW" }]
parameters: [
{
label: "有功电能",
value: Math.floor(250000 + Math.random() * 50000),
unit: "kWh",
},
{
label: "功率",
value: Math.floor(480 + Math.random() * 80),
unit: "kW",
},
],
});
}
},
@ -455,7 +779,7 @@ export default {
running: "运行中",
offline: "离线",
fault: "故障",
standby: "待机"
standby: "待机",
};
return statusMap[status] || status;
},
@ -467,7 +791,7 @@ export default {
coolingTower: "冷却塔",
tempSensor: "温度",
pressureSensor: "压力",
meter: "电表"
meter: "电表",
};
return iconMap[type] || "设备";
},
@ -479,7 +803,7 @@ export default {
coolingPump: "冷却泵",
coolingTower: "冷却塔",
sensor: "传感器",
meter: "电表"
meter: "电表",
};
return iconMap[value] || "设备";
},
@ -512,8 +836,8 @@ export default {
closeDetailDialog() {
this.detailDialogVisible = false;
this.selectedDevice = null;
}
}
},
},
};
</script>
@ -597,7 +921,7 @@ export default {
}
&.el-button--success {
background: linear-gradient(135deg, #91CC75 0%, #66BB6A 100%);
background: linear-gradient(135deg, #91cc75 0%, #66bb6a 100%);
border: none;
.btn-icon {
@ -608,7 +932,7 @@ export default {
}
&:hover {
background: linear-gradient(135deg, #7CB342 0%, #558B2F 100%);
background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%);
}
}
}
@ -629,27 +953,47 @@ export default {
border-radius: 0.08rem;
&.total {
background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(84, 112, 198, 0.2) 0%,
rgba(115, 192, 222, 0.2) 100%
);
border: 1px solid rgba(84, 112, 198, 0.3);
}
&.running {
background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(145, 204, 117, 0.2) 0%,
rgba(102, 187, 106, 0.2) 100%
);
border: 1px solid rgba(145, 204, 117, 0.3);
}
&.offline {
background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(238, 102, 102, 0.2) 0%,
rgba(229, 57, 53, 0.2) 100%
);
border: 1px solid rgba(238, 102, 102, 0.3);
}
&.fault {
background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(250, 200, 88, 0.2) 0%,
rgba(255, 179, 0, 0.2) 100%
);
border: 1px solid rgba(250, 200, 88, 0.3);
}
&.standby {
background: linear-gradient(135deg, rgba(250, 112, 154, 0.2) 0%, rgba(254, 225, 64, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(250, 112, 154, 0.2) 0%,
rgba(254, 225, 64, 0.2) 100%
);
border: 1px solid rgba(250, 112, 154, 0.3);
}
@ -782,19 +1126,19 @@ export default {
}
&.running {
border-left: 3px solid #91CC75;
border-left: 3px solid #91cc75;
}
&.offline {
border-left: 3px solid #EE6666;
border-left: 3px solid #ee6666;
}
&.fault {
border-left: 3px solid #FAC858;
border-left: 3px solid #fac858;
}
&.standby {
border-left: 3px solid #5470C6;
border-left: 3px solid #5470c6;
}
.card-header {
@ -803,8 +1147,8 @@ export default {
margin-bottom: 0.15rem;
.device-icon {
width: 0.5rem;
height: 0.5rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
display: flex;
align-items: center;
@ -812,6 +1156,11 @@ export default {
margin-right: 0.12rem;
font-size: 0.24rem;
color: #ffffff;
background: linear-gradient(
135deg,
rgb(67, 233, 123) 0%,
rgb(56, 249, 215) 100%
);
}
.device-header-info {
@ -838,25 +1187,25 @@ export default {
&.running {
background: rgba(145, 204, 117, 0.2);
color: #91CC75;
color: #91cc75;
border: 1px solid rgba(145, 204, 117, 0.3);
}
&.offline {
background: rgba(238, 102, 102, 0.2);
color: #EE6666;
color: #ee6666;
border: 1px solid rgba(238, 102, 102, 0.3);
}
&.fault {
background: rgba(250, 200, 88, 0.2);
color: #FAC858;
color: #fac858;
border: 1px solid rgba(250, 200, 88, 0.3);
}
&.standby {
background: rgba(84, 112, 198, 0.2);
color: #5470C6;
color: #5470c6;
border: 1px solid rgba(84, 112, 198, 0.3);
}
}
@ -1017,22 +1366,22 @@ export default {
&.running {
background: rgba(145, 204, 117, 0.2);
color: #91CC75;
color: #91cc75;
}
&.offline {
background: rgba(238, 102, 102, 0.2);
color: #EE6666;
color: #ee6666;
}
&.fault {
background: rgba(250, 200, 88, 0.2);
color: #FAC858;
color: #fac858;
}
&.standby {
background: rgba(84, 112, 198, 0.2);
color: #5470C6;
color: #5470c6;
}
}
}
@ -1092,15 +1441,15 @@ export default {
color: #ffffff;
&.running {
color: #91CC75;
color: #91cc75;
}
&.offline {
color: #EE6666;
color: #ee6666;
}
&.fault {
color: #FAC858;
color: #fac858;
}
}
}

2
src/views/newCenterairC/energyManage/carbonEmissionsAnalysis/index.vue

@ -140,7 +140,7 @@
<div class="table-section">
<div class="section-header">
<div class="section-title">碳减排量详情</div>
<el-button type="primary" size="small" @click="exportData">导出数据</el-button>
<div class="primary-btn"><el-button type="primary" size="small" @click="exportData">导出数据</el-button></div>
</div>
<div class="table-container">
<table class="data-table">

9
src/views/newCenterairC/energyManage/energyConsumptionEfficiencyTrend/index.vue

@ -309,7 +309,8 @@
<td>{{ alarm.impactDuration }}h</td>
<td>
<div class="action-buttons">
<el-button
<div class="primary-btn">
<el-button
size="small"
type="primary"
@click="viewAlarmDetail(alarm)"
@ -317,8 +318,9 @@
>
详情
</el-button>
<el-button
v-if="alarm.status === 'pending' || alarm.status === 'processing'"
</div>
<div class="success-btn" v-if="alarm.status === 'pending' || alarm.status === 'processing'">
<el-button
size="small"
type="success"
@click="handleAlarmResolve(alarm)"
@ -326,6 +328,7 @@
>
处理
</el-button>
</div>
<el-dropdown @command="(cmd) => handleAlarmCommand(cmd, alarm)" class="action-dropdown">
<el-button size="small" class="action-btn">
更多

476
src/views/newCenterairC/energyManage/retrofitEffectivenessCompariso/index.vue

@ -19,8 +19,14 @@
</div>
<div class="range-divider">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="range-item">
@ -46,17 +52,29 @@
<div class="indicator-row">
<div class="indicator-card before">
<div class="card-title">改造前总能耗</div>
<div class="card-value">{{ comparisonIndicators.beforeEnergy }} <span class="unit">kWh</span></div>
<div class="card-value">
{{ comparisonIndicators.beforeEnergy }}
<span class="unit">kWh</span>
</div>
</div>
<div class="indicator-arrow">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="indicator-card after">
<div class="card-title">改造后总能耗</div>
<div class="card-value">{{ comparisonIndicators.afterEnergy }} <span class="unit">kWh</span></div>
<div class="card-value">
{{ comparisonIndicators.afterEnergy }}
<span class="unit">kWh</span>
</div>
</div>
</div>
</div>
@ -67,26 +85,45 @@
<div class="indicator-card success">
<div class="card-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="card-content">
<div class="card-label">节能量</div>
<div class="card-value">{{ comparisonIndicators.energySaving }} <span class="unit">kWh</span></div>
<div class="card-percent">{{ comparisonIndicators.energySavingRate }}%</div>
<div class="card-value">
{{ comparisonIndicators.energySaving }}
<span class="unit">kWh</span>
</div>
<div class="card-percent">
{{ comparisonIndicators.energySavingRate }}%
</div>
</div>
</div>
<div class="indicator-card warning">
<div class="card-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M672 464H352c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="card-content">
<div class="card-label">节能金额</div>
<div class="card-value">¥{{ comparisonIndicators.costSaving }}</div>
<div class="card-value">
¥{{ comparisonIndicators.costSaving }}
</div>
<div class="card-percent">年均节省</div>
</div>
</div>
@ -99,27 +136,50 @@
<div class="indicator-card info">
<div class="card-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
fill="currentColor"
/>
</svg>
</div>
<div class="card-content">
<div class="card-label">EER提升</div>
<div class="card-value">{{ comparisonIndicators.eerImprovement }}</div>
<div class="card-percent">{{ comparisonIndicators.beforeEer }} {{ comparisonIndicators.afterEer }}</div>
<div class="card-value">
{{ comparisonIndicators.eerImprovement }}
</div>
<div class="card-percent">
{{ comparisonIndicators.beforeEer }}
{{ comparisonIndicators.afterEer }}
</div>
</div>
</div>
<div class="indicator-card primary">
<div class="card-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
<path
d="M688 592H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="card-content">
<div class="card-label">碳减排量</div>
<div class="card-value">{{ comparisonIndicators.carbonReduction }} <span class="unit">tCO₂e</span></div>
<div class="card-value">
{{ comparisonIndicators.carbonReduction }}
<span class="unit">tCO₂e</span>
</div>
<div class="card-percent">累计减排</div>
</div>
</div>
@ -133,11 +193,11 @@
<div class="chart-title">能耗趋势对比</div>
<div class="chart-legend">
<div class="legend-item">
<span class="legend-dot" style="background: #EE6666;"></span>
<span class="legend-dot" style="background: #ee6666"></span>
<span>改造前</span>
</div>
<div class="legend-item">
<span class="legend-dot" style="background: #91CC75;"></span>
<span class="legend-dot" style="background: #91cc75"></span>
<span>改造后</span>
</div>
</div>
@ -145,27 +205,31 @@
<div class="chart" ref="energyComparisonChartRef"></div>
</div>
<!-- 能效对比图 -->
<div class="chart-section half-width">
<div class="chart-header">
<div class="chart-title">能效对比</div>
<div class="chart-context">
<!-- 能效对比图 -->
<div class="chart-section half-width">
<div class="chart-header">
<div class="chart-title">能效对比</div>
</div>
<div class="chart" ref="eerComparisonChartRef"></div>
</div>
<div class="chart" ref="eerComparisonChartRef"></div>
</div>
<!-- 节能贡献分析 -->
<div class="chart-section half-width">
<div class="chart-header">
<div class="chart-title">节能贡献分析</div>
<!-- 节能贡献分析 -->
<div class="chart-section half-width">
<div class="chart-header">
<div class="chart-title">节能贡献分析</div>
</div>
<div class="chart" ref="savingContributionChartRef"></div>
</div>
<div class="chart" ref="savingContributionChartRef"></div>
</div>
<!-- 改造成效详情表格 -->
<div class="table-section">
<div class="section-header">
<div class="section-title">改造成效详情</div>
<el-button type="primary" size="small" @click="exportReport">导出报告</el-button>
<div class="primary-btn"><el-button type="primary" size="small" @click="exportReport"
>导出报告</el-button
></div>
</div>
<div class="table-container">
<table class="data-table">
@ -185,13 +249,15 @@
<td>{{ item.before }}</td>
<td>{{ item.after }}</td>
<td :class="item.change >= 0 ? 'positive' : 'negative'">
{{ item.change >= 0 ? '+' : '' }}{{ item.change }}
{{ item.change >= 0 ? "+" : "" }}{{ item.change }}
</td>
<td :class="item.changeRate >= 0 ? 'positive' : 'negative'">
{{ item.changeRate >= 0 ? '+' : '' }}{{ item.changeRate }}%
{{ item.changeRate >= 0 ? "+" : "" }}{{ item.changeRate }}%
</td>
<td>
<span class="effect-tag" :class="item.effectClass">{{ item.effect }}</span>
<span class="effect-tag" :class="item.effectClass">{{
item.effect
}}</span>
</td>
</tr>
</tbody>
@ -205,7 +271,11 @@
<div class="section-title">设备运行效率对比</div>
</div>
<div class="device-grid">
<div class="device-item" v-for="device in deviceEfficiency" :key="device.name">
<div
class="device-item"
v-for="device in deviceEfficiency"
:key="device.name"
>
<div class="device-header">
<div class="device-name">{{ device.name }}</div>
</div>
@ -255,29 +325,102 @@ export default {
beforeEer: 4.5,
afterEer: 6.8,
eerImprovement: 2.3,
carbonReduction: 1529.4
carbonReduction: 1529.4,
},
//
effectivenessDetail: [
{ name: "总能耗", before: "856万kWh", after: "562万kWh", change: "-294万kWh", changeRate: -34.3, effect: "显著改善", effectClass: "excellent" },
{ name: "平均EER", before: "4.5", after: "6.8", change: "+2.3", changeRate: 51.1, effect: "显著改善", effectClass: "excellent" },
{ name: "平均COP", before: "3.8", after: "5.2", change: "+1.4", changeRate: 36.8, effect: "显著改善", effectClass: "excellent" },
{ name: "碳排放", before: "4451.2tCO₂e", after: "2921.8tCO₂e", change: "-1529.4tCO₂e", changeRate: -34.4, effect: "显著改善", effectClass: "excellent" },
{ name: "运行费用", before: "102.72万元", after: "67.44万元", change: "-35.28万元", changeRate: -34.3, effect: "显著改善", effectClass: "excellent" },
{ name: "制冷量", before: "18.5万RT", after: "19.85万RT", change: "+1.35万RT", changeRate: 7.3, effect: "改善", effectClass: "good" }
{
name: "总能耗",
before: "856万kWh",
after: "562万kWh",
change: "-294万kWh",
changeRate: -34.3,
effect: "显著改善",
effectClass: "excellent",
},
{
name: "平均EER",
before: "4.5",
after: "6.8",
change: "+2.3",
changeRate: 51.1,
effect: "显著改善",
effectClass: "excellent",
},
{
name: "平均COP",
before: "3.8",
after: "5.2",
change: "+1.4",
changeRate: 36.8,
effect: "显著改善",
effectClass: "excellent",
},
{
name: "碳排放",
before: "4451.2tCO₂e",
after: "2921.8tCO₂e",
change: "-1529.4tCO₂e",
changeRate: -34.4,
effect: "显著改善",
effectClass: "excellent",
},
{
name: "运行费用",
before: "102.72万元",
after: "67.44万元",
change: "-35.28万元",
changeRate: -34.3,
effect: "显著改善",
effectClass: "excellent",
},
{
name: "制冷量",
before: "18.5万RT",
after: "19.85万RT",
change: "+1.35万RT",
changeRate: 7.3,
effect: "改善",
effectClass: "good",
},
],
//
deviceEfficiency: [
{ name: "主机", before: "COP 3.8", after: "COP 5.2", improvement: 36.8 },
{ name: "冷冻泵", before: "效率 65%", after: "效率 82%", improvement: 26.2 },
{ name: "冷却泵", before: "效率 68%", after: "效率 85%", improvement: 25.0 },
{ name: "冷却塔", before: "效率 72%", after: "效率 88%", improvement: 22.2 },
{ name: "系统整体", before: "EER 4.5", after: "EER 6.8", improvement: 51.1 }
{
name: "主机",
before: "COP 3.8",
after: "COP 5.2",
improvement: 36.8,
},
{
name: "冷冻泵",
before: "效率 65%",
after: "效率 82%",
improvement: 26.2,
},
{
name: "冷却泵",
before: "效率 68%",
after: "效率 85%",
improvement: 25.0,
},
{
name: "冷却塔",
before: "效率 72%",
after: "效率 88%",
improvement: 22.2,
},
{
name: "系统整体",
before: "EER 4.5",
after: "EER 6.8",
improvement: 51.1,
},
],
//
energyComparisonChart: null,
eerComparisonChart: null,
savingContributionChart: null
savingContributionChart: null,
};
},
mounted() {
@ -304,61 +447,76 @@ export default {
},
//
initEnergyComparisonChart() {
this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
this.energyComparisonChart = echarts.init(
this.$refs.energyComparisonChartRef
);
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
type: "cross",
},
},
legend: {
data: ["改造前", "改造后"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "万kWh",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -375,15 +533,15 @@ export default {
colorStops: [
{
offset: 0,
color: "#EE6666"
color: "#EE6666",
},
{
offset: 1,
color: "#E53935"
}
]
}
}
color: "#E53935",
},
],
},
},
},
{
name: "改造后",
@ -399,17 +557,17 @@ export default {
colorStops: [
{
offset: 0,
color: "#91CC75"
color: "#91CC75",
},
{
offset: 1,
color: "#66BB6A"
}
]
}
}
}
]
color: "#66BB6A",
},
],
},
},
},
],
};
this.energyComparisonChart.setOption(option);
},
@ -418,55 +576,68 @@ export default {
this.eerComparisonChart = echarts.init(this.$refs.eerComparisonChartRef);
const option = {
tooltip: {
trigger: "axis"
trigger: "axis",
},
legend: {
data: ["改造前EER", "改造后EER"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "EER",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -475,13 +646,13 @@ export default {
smooth: true,
data: [4.2, 4.3, 4.5, 4.4, 4.1, 4.0, 4.0, 4.1, 4.2, 4.4, 4.5, 4.5],
itemStyle: {
color: "#EE6666"
color: "#EE6666",
},
lineStyle: {
color: "#EE6666",
width: 2,
type: "dashed"
}
type: "dashed",
},
},
{
name: "改造后EER",
@ -489,11 +660,11 @@ export default {
smooth: true,
data: [6.3, 6.5, 6.8, 6.6, 6.2, 6.1, 6.0, 6.1, 6.3, 6.5, 6.7, 6.8],
itemStyle: {
color: "#91CC75"
color: "#91CC75",
},
lineStyle: {
color: "#91CC75",
width: 3
width: 3,
},
areaStyle: {
color: {
@ -505,34 +676,37 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(145, 204, 117, 0.5)"
color: "rgba(145, 204, 117, 0.5)",
},
{
offset: 1,
color: "rgba(145, 204, 117, 0)"
}
]
}
}
}
]
color: "rgba(145, 204, 117, 0)",
},
],
},
},
},
],
};
this.eerComparisonChart.setOption(option);
},
//
initSavingContributionChart() {
this.savingContributionChart = echarts.init(this.$refs.savingContributionChartRef);
this.savingContributionChart = echarts.init(
this.$refs.savingContributionChartRef
);
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}% ({d}%)"
formatter: "{b}: {c}% ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
left: "15%",
top: "10%",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
series: [
{
@ -545,13 +719,13 @@ export default {
{ value: 25, name: "控制优化", itemStyle: { color: "#91CC75" } },
{ value: 18, name: "管路改造", itemStyle: { color: "#FAC858" } },
{ value: 8, name: "智能调度", itemStyle: { color: "#EE6666" } },
{ value: 4, name: "其他", itemStyle: { color: "#73C0DE" } }
{ value: 4, name: "其他", itemStyle: { color: "#73C0DE" } },
],
label: {
formatter: "{b}\n{d}%"
}
}
]
formatter: "{b}\n{d}%",
},
},
],
};
this.savingContributionChart.setOption(option);
},
@ -564,8 +738,8 @@ export default {
if (this.energyComparisonChart) this.energyComparisonChart.resize();
if (this.eerComparisonChart) this.eerComparisonChart.resize();
if (this.savingContributionChart) this.savingContributionChart.resize();
}
}
},
},
};
</script>
@ -719,22 +893,38 @@ export default {
background: rgba(255, 255, 255, 0.05);
&.success {
background: linear-gradient(135deg, rgba(145, 204, 117, 0.2) 0%, rgba(102, 187, 106, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(145, 204, 117, 0.2) 0%,
rgba(102, 187, 106, 0.2) 100%
);
border: 1px solid rgba(145, 204, 117, 0.3);
}
&.warning {
background: linear-gradient(135deg, rgba(250, 200, 88, 0.2) 0%, rgba(255, 179, 0, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(250, 200, 88, 0.2) 0%,
rgba(255, 179, 0, 0.2) 100%
);
border: 1px solid rgba(250, 200, 88, 0.3);
}
&.info {
background: linear-gradient(135deg, rgba(84, 112, 198, 0.2) 0%, rgba(115, 192, 222, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(84, 112, 198, 0.2) 0%,
rgba(115, 192, 222, 0.2) 100%
);
border: 1px solid rgba(84, 112, 198, 0.3);
}
&.primary {
background: linear-gradient(135deg, rgba(238, 102, 102, 0.2) 0%, rgba(229, 57, 53, 0.2) 100%);
background: linear-gradient(
135deg,
rgba(238, 102, 102, 0.2) 0%,
rgba(229, 57, 53, 0.2) 100%
);
border: 1px solid rgba(238, 102, 102, 0.3);
}
@ -779,14 +969,20 @@ export default {
.card-percent {
font-size: 0.11rem;
color: #91CC75;
color: #91cc75;
}
}
}
}
}
}
.chart-context {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.chart-section {
background: rgba(255, 255, 255, 0.03);
border-radius: 0.08rem;
@ -900,11 +1096,11 @@ export default {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
&.positive {
color: #EE6666;
color: #ee6666;
}
&.negative {
color: #91CC75;
color: #91cc75;
}
.effect-tag {
@ -914,13 +1110,13 @@ export default {
&.excellent {
background: rgba(145, 204, 117, 0.3);
color: #91CC75;
color: #91cc75;
border: 1px solid rgba(145, 204, 117, 0.5);
}
&.good {
background: rgba(84, 112, 198, 0.3);
color: #5470C6;
color: #5470c6;
border: 1px solid rgba(84, 112, 198, 0.5);
}
}
@ -988,11 +1184,11 @@ export default {
font-weight: bold;
&.before {
color: #EE6666;
color: #ee6666;
}
&.after {
color: #91CC75;
color: #91cc75;
}
}
@ -1013,7 +1209,7 @@ export default {
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #91CC75, #15e1fd);
background: linear-gradient(90deg, #91cc75, #15e1fd);
border-radius: 0.04rem;
transition: width 1s ease-in-out;
}

479
src/views/newCenterairC/home/index.vue

@ -44,30 +44,44 @@
<!-- 关键指标统计 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">关键指标统计</div>
<div class="time-tabs">
<div
v-for="(tab, index) in timeTabs"
:key="index"
:class="['time-tab', { active: activeTimeTab === index }]"
@click="handleTimeTabChange(index)"
>
{{ tab }}
<div class="special-title">
关键指标统计
<div class="time-tabs">
<div
v-for="(tab, index) in timeTabs"
:key="index"
:class="['time-tab', { active: activeTimeTab === index }]"
@click="handleTimeTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
<div class="key-indicators">
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
"
>
<span class="icon-text">节能</span>
</div>
<div class="indicator-content">
<div class="indicator-value">{{ keyIndicators.energySavingRate }}%</div>
<div class="indicator-value">
{{ keyIndicators.energySavingRate }}%
</div>
<div class="indicator-label">节能率</div>
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
"
>
<span class="icon-text">金额</span>
</div>
<div class="indicator-content">
@ -76,16 +90,28 @@
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
"
>
<span class="icon-text">减碳</span>
</div>
<div class="indicator-content">
<div class="indicator-value">{{ keyIndicators.carbonReduction }}t</div>
<div class="indicator-value">
{{ keyIndicators.carbonReduction }}t
</div>
<div class="indicator-label">综合减碳量</div>
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
"
>
<span class="icon-text">EER</span>
</div>
<div class="indicator-content">
@ -94,25 +120,44 @@
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
"
>
<span class="icon-text">用电</span>
</div>
<div class="indicator-content">
<div class="indicator-value">{{ keyIndicators.totalElectricity }}kWh</div>
<div class="indicator-value">
{{ keyIndicators.totalElectricity }}kWh
</div>
<div class="indicator-label">总用电量</div>
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
"
>
<span class="icon-text">制冷</span>
</div>
<div class="indicator-content">
<div class="indicator-value">{{ keyIndicators.totalCooling }}RT</div>
<div class="indicator-value">
{{ keyIndicators.totalCooling }}RT
</div>
<div class="indicator-label">总制冷量</div>
</div>
</div>
<div class="indicator-item">
<div class="indicator-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
<div
class="indicator-icon"
style="
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
"
>
<span class="icon-text">设备</span>
</div>
<div class="indicator-content">
@ -129,7 +174,10 @@
<div class="special-title">能效状态</div>
</div>
<div class="efficiency-status">
<div class="efficiency-badge" :class="'efficiency-' + efficiencyStatus.level">
<div
class="efficiency-badge"
:class="'efficiency-' + efficiencyStatus.level"
>
<div class="badge-icon">{{ efficiencyStatus.icon }}</div>
<div class="badge-text">{{ efficiencyStatus.text }}</div>
</div>
@ -138,19 +186,31 @@
<div class="value-number">{{ efficiencyStatus.eerValue }}</div>
</div>
<div class="efficiency-scale">
<div class="scale-item excellent" :class="{ active: efficiencyStatus.level === 'excellent' }">
<div
class="scale-item excellent"
:class="{ active: efficiencyStatus.level === 'excellent' }"
>
<div class="scale-label">优秀</div>
<div class="scale-value">6.5</div>
</div>
<div class="scale-item good" :class="{ active: efficiencyStatus.level === 'good' }">
<div
class="scale-item good"
:class="{ active: efficiencyStatus.level === 'good' }"
>
<div class="scale-label">良好</div>
<div class="scale-value">6.5-5.5</div>
</div>
<div class="scale-item normal" :class="{ active: efficiencyStatus.level === 'normal' }">
<div
class="scale-item normal"
:class="{ active: efficiencyStatus.level === 'normal' }"
>
<div class="scale-label">一般</div>
<div class="scale-value">5.5-4.5</div>
</div>
<div class="scale-item poor" :class="{ active: efficiencyStatus.level === 'poor' }">
<div
class="scale-item poor"
:class="{ active: efficiencyStatus.level === 'poor' }"
>
<div class="scale-label">急需改善</div>
<div class="scale-value">&lt;4.5</div>
</div>
@ -164,15 +224,17 @@
<!-- 用能趋势图 -->
<div class="special-div chart-card">
<div class="special-top">
<div class="special-title">用能趋势</div>
<div class="time-switch">
<div
v-for="(type, index) in timeTypes"
:key="index"
:class="['switch-item', { active: activeTimeType === index }]"
@click="handleTimeTypeChange(index)"
>
{{ type }}
<div class="special-title">
用能趋势
<div class="time-switch">
<div
v-for="(type, index) in timeTypes"
:key="index"
:class="['switch-item', { active: activeTimeType === index }]"
@click="handleTimeTypeChange(index)"
>
{{ type }}
</div>
</div>
</div>
</div>
@ -206,7 +268,9 @@
<div class="status-dot online"></div>
<div class="status-title">系统实时用电量</div>
</div>
<div class="status-value">{{ operationStatus.realtimeElectricity }}kW</div>
<div class="status-value">
{{ operationStatus.realtimeElectricity }}kW
</div>
<div class="status-chart-mini" ref="miniChart1"></div>
</div>
<div class="status-card">
@ -214,7 +278,9 @@
<div class="status-dot cooling"></div>
<div class="status-title">系统实时制冷量</div>
</div>
<div class="status-value">{{ operationStatus.realtimeCooling }}RT</div>
<div class="status-value">
{{ operationStatus.realtimeCooling }}RT
</div>
<div class="status-chart-mini" ref="miniChart2"></div>
</div>
<div class="status-card">
@ -222,15 +288,23 @@
<div class="status-dot heating"></div>
<div class="status-title">系统实时散热量</div>
</div>
<div class="status-value">{{ operationStatus.realtimeHeating }}kW</div>
<div class="status-value">
{{ operationStatus.realtimeHeating }}kW
</div>
<div class="status-chart-mini" ref="miniChart3"></div>
</div>
<div class="status-card">
<div class="status-header">
<div class="status-dot warning" :class="getHeatBalanceClass(operationStatus.heatImbalanceRate)"></div>
<div
class="status-dot warning"
:class="getHeatBalanceClass(operationStatus.heatImbalanceRate)"
></div>
<div class="status-title">热不平衡率</div>
</div>
<div class="status-value" :class="getHeatBalanceClass(operationStatus.heatImbalanceRate)">
<div
class="status-value"
:class="getHeatBalanceClass(operationStatus.heatImbalanceRate)"
>
{{ operationStatus.heatImbalanceRate }}%
</div>
<div class="status-indicator">
@ -246,7 +320,11 @@
</div>
<!-- 设备运行状态 -->
<div class="device-status-grid">
<div class="device-status-item" v-for="device in deviceStatus" :key="device.name">
<div
class="device-status-item"
v-for="device in deviceStatus"
:key="device.name"
>
<div class="device-status-icon" :class="device.status"></div>
<div class="device-info">
<div class="device-name">{{ device.name }}</div>
@ -275,7 +353,7 @@ export default {
manager: "张三",
installDate: "2020-06-15",
electricPrice: 1.2,
chillerCount: 2
chillerCount: 2,
},
//
timeTabs: ["近七日", "当月", "当年", "自定义"],
@ -288,14 +366,14 @@ export default {
eer: 6.8,
totalElectricity: 1256800,
totalCooling: 45680,
deviceCount: 48
deviceCount: 48,
},
//
efficiencyStatus: {
level: "excellent",
text: "优秀",
icon: "★",
eerValue: 6.8
eerValue: 6.8,
},
//
timeTypes: ["日", "周", "月"],
@ -305,22 +383,42 @@ export default {
realtimeElectricity: 1256,
realtimeCooling: 850,
realtimeHeating: 1580,
heatImbalanceRate: 12.5
heatImbalanceRate: 12.5,
},
//
deviceStatus: [
{ name: "主机", status: "running", statusText: "运行中", value: "3/4" },
{ name: "冷冻泵", status: "running", statusText: "运行中", value: "4/4" },
{ name: "冷却泵", status: "running", statusText: "运行中", value: "4/4" },
{ name: "冷却塔", status: "running", statusText: "运行中", value: "3/3" },
{
name: "冷冻泵",
status: "running",
statusText: "运行中",
value: "4/4",
},
{
name: "冷却泵",
status: "running",
statusText: "运行中",
value: "4/4",
},
{
name: "冷却塔",
status: "running",
statusText: "运行中",
value: "3/3",
},
{ name: "风机", status: "running", statusText: "运行中", value: "6/6" },
{ name: "控制柜", status: "running", statusText: "运行中", value: "2/2" }
{
name: "控制柜",
status: "running",
statusText: "运行中",
value: "2/2",
},
],
//
energyTrendChart: null,
deviceEnergyChart: null,
loadDistributionChart: null,
miniCharts: []
miniCharts: [],
};
},
mounted() {
@ -335,7 +433,7 @@ export default {
if (this.energyTrendChart) this.energyTrendChart.dispose();
if (this.deviceEnergyChart) this.deviceEnergyChart.dispose();
if (this.loadDistributionChart) this.loadDistributionChart.dispose();
this.miniCharts.forEach(chart => chart && chart.dispose());
this.miniCharts.forEach((chart) => chart && chart.dispose());
},
watch: {
activeTimeType() {
@ -343,7 +441,7 @@ export default {
},
activeTimeTab() {
this.updateKeyIndicators();
}
},
},
methods: {
//
@ -368,21 +466,32 @@ export default {
//
updateEnergyTrendChart() {
const dataMap = {
0: { //
xData: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
0: {
//
xData: [
"00:00",
"04:00",
"08:00",
"12:00",
"16:00",
"20:00",
"24:00",
],
electricity: [320, 280, 650, 980, 1050, 890, 420],
cooling: [220, 180, 480, 720, 780, 650, 310]
cooling: [220, 180, 480, 720, 780, 650, 310],
},
1: { //
1: {
//
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
electricity: [6500, 6800, 7200, 6900, 7100, 5800, 5200],
cooling: [4800, 5100, 5400, 5200, 5300, 4300, 3900]
cooling: [4800, 5100, 5400, 5200, 5300, 4300, 3900],
},
2: { //
2: {
//
xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
electricity: [28000, 32000, 35000, 33000, 31000, 29000, 27000],
cooling: [21000, 24000, 26000, 25000, 23000, 22000, 20000]
}
cooling: [21000, 24000, 26000, 25000, 23000, 22000, 20000],
},
};
const currentData = dataMap[this.activeTimeType];
@ -392,57 +501,57 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
type: "cross",
},
},
legend: {
data: ["用电量", "制冷量"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: currentData.xData,
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: unit,
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -451,10 +560,10 @@ export default {
smooth: true,
data: currentData.electricity,
itemStyle: {
color: "#15e1fd"
color: "#15e1fd",
},
lineStyle: {
color: "#15e1fd"
color: "#15e1fd",
},
areaStyle: {
color: {
@ -466,15 +575,15 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(21, 225, 253, 0.5)"
color: "rgba(21, 225, 253, 0.5)",
},
{
offset: 1,
color: "rgba(21, 225, 253, 0)"
}
]
}
}
color: "rgba(21, 225, 253, 0)",
},
],
},
},
},
{
name: "制冷量",
@ -482,10 +591,10 @@ export default {
smooth: true,
data: currentData.cooling,
itemStyle: {
color: "#91CC75"
color: "#91CC75",
},
lineStyle: {
color: "#91CC75"
color: "#91CC75",
},
areaStyle: {
color: {
@ -497,17 +606,17 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(145, 204, 117, 0.5)"
color: "rgba(145, 204, 117, 0.5)",
},
{
offset: 1,
color: "rgba(145, 204, 117, 0)"
}
]
}
}
}
]
color: "rgba(145, 204, 117, 0)",
},
],
},
},
},
],
};
this.energyTrendChart.setOption(option);
},
@ -517,14 +626,16 @@ export default {
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}% ({d}%)"
formatter: "{b}: {c}% ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
top: "15%",
left:"10%"
},
series: [
{
@ -536,81 +647,88 @@ export default {
{ value: 45, name: "主机", itemStyle: { color: "#5470C6" } },
{ value: 20, name: "冷冻泵", itemStyle: { color: "#91CC75" } },
{ value: 18, name: "冷却泵", itemStyle: { color: "#FAC858" } },
{ value: 12, name: "冷却塔风机", itemStyle: { color: "#EE6666" } },
{ value: 5, name: "其他", itemStyle: { color: "#73C0DE" } }
{
value: 12,
name: "冷却塔风机",
itemStyle: { color: "#EE6666" },
},
{ value: 5, name: "其他", itemStyle: { color: "#73C0DE" } },
],
label: {
formatter: "{b}\n{d}%"
formatter: "{b}\n{d}%",
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
this.deviceEnergyChart.setOption(option);
},
//
initLoadDistributionChart() {
this.loadDistributionChart = echarts.init(this.$refs.loadDistributionChartRef);
this.loadDistributionChart = echarts.init(
this.$refs.loadDistributionChartRef
);
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
type: "shadow",
},
},
legend: {
data: ["冷负荷", "热负荷"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
top:"5%"
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
data: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "kW",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -627,15 +745,15 @@ export default {
colorStops: [
{
offset: 0,
color: "#15e1fd"
color: "#15e1fd",
},
{
offset: 1,
color: "#208fff"
}
]
}
}
color: "#208fff",
},
],
},
},
},
{
name: "热负荷",
@ -651,17 +769,17 @@ export default {
colorStops: [
{
offset: 0,
color: "#FAC858"
color: "#FAC858",
},
{
offset: 1,
color: "#EE6666"
}
]
}
}
}
]
color: "#EE6666",
},
],
},
},
},
],
};
this.loadDistributionChart.setOption(option);
},
@ -670,13 +788,13 @@ export default {
const chartRefs = [
this.$refs.miniChart1,
this.$refs.miniChart2,
this.$refs.miniChart3
this.$refs.miniChart3,
];
const dataSeries = [
[1200, 1220, 1240, 1230, 1250, 1256, 1248],
[820, 830, 840, 845, 850, 850, 848],
[1550, 1560, 1570, 1575, 1580, 1580, 1578]
[1550, 1560, 1570, 1575, 1580, 1580, 1578],
];
chartRefs.forEach((ref, index) => {
@ -687,16 +805,16 @@ export default {
left: 0,
right: 0,
top: 0,
bottom: 0
bottom: 0,
},
xAxis: {
type: "category",
show: false,
data: ["1", "2", "3", "4", "5", "6", "7"]
data: ["1", "2", "3", "4", "5", "6", "7"],
},
yAxis: {
type: "value",
show: false
show: false,
},
series: [
{
@ -706,7 +824,12 @@ export default {
showSymbol: false,
lineStyle: {
width: 2,
color: index === 0 ? "#15e1fd" : index === 1 ? "#91CC75" : "#FAC858"
color:
index === 0
? "#15e1fd"
: index === 1
? "#91CC75"
: "#FAC858",
},
areaStyle: {
color: {
@ -718,17 +841,27 @@ export default {
colorStops: [
{
offset: 0,
color: index === 0 ? "rgba(21, 225, 253, 0.3)" : index === 1 ? "rgba(145, 204, 117, 0.3)" : "rgba(250, 200, 88, 0.3)"
color:
index === 0
? "rgba(21, 225, 253, 0.3)"
: index === 1
? "rgba(145, 204, 117, 0.3)"
: "rgba(250, 200, 88, 0.3)",
},
{
offset: 1,
color: index === 0 ? "rgba(21, 225, 253, 0)" : index === 1 ? "rgba(145, 204, 117, 0)" : "rgba(250, 200, 88, 0)"
}
]
}
}
}
]
color:
index === 0
? "rgba(21, 225, 253, 0)"
: index === 1
? "rgba(145, 204, 117, 0)"
: "rgba(250, 200, 88, 0)",
},
],
},
},
},
],
};
chart.setOption(option);
this.miniCharts.push(chart);
@ -747,7 +880,7 @@ export default {
eer: 6.8,
totalElectricity: 1256800,
totalCooling: 45680,
deviceCount: 48
deviceCount: 48,
},
1: {
energySavingRate: 30.2,
@ -756,7 +889,7 @@ export default {
eer: 7.0,
totalElectricity: 5600000,
totalCooling: 198500,
deviceCount: 48
deviceCount: 48,
},
2: {
energySavingRate: 27.8,
@ -765,7 +898,7 @@ export default {
eer: 6.5,
totalElectricity: 68000000,
totalCooling: 2456000,
deviceCount: 48
deviceCount: 48,
},
3: {
energySavingRate: 29.1,
@ -774,8 +907,8 @@ export default {
eer: 6.7,
totalElectricity: 1050000,
totalCooling: 38200,
deviceCount: 48
}
deviceCount: 48,
},
};
this.keyIndicators = { ...dataMap[this.activeTimeTab] };
@ -785,9 +918,9 @@ export default {
if (this.energyTrendChart) this.energyTrendChart.resize();
if (this.deviceEnergyChart) this.deviceEnergyChart.resize();
if (this.loadDistributionChart) this.loadDistributionChart.resize();
this.miniCharts.forEach(chart => chart && chart.resize());
}
}
this.miniCharts.forEach((chart) => chart && chart.resize());
},
},
};
</script>
@ -1095,7 +1228,7 @@ export default {
margin-right: 0.1rem;
&.online {
background: #91CC75;
background: #91cc75;
}
&.cooling {
@ -1103,19 +1236,19 @@ export default {
}
&.heating {
background: #FAC858;
background: #fac858;
}
&.good {
background: #91CC75;
background: #91cc75;
}
&.warning {
background: #FAC858;
background: #fac858;
}
&.danger {
background: #EE6666;
background: #ee6666;
}
}
@ -1133,15 +1266,15 @@ export default {
margin-bottom: 0.1rem;
&.good {
color: #91CC75;
color: #91cc75;
}
&.warning {
color: #FAC858;
color: #fac858;
}
&.danger {
color: #EE6666;
color: #ee6666;
}
}
@ -1164,15 +1297,15 @@ export default {
transition: all 0.3s;
&.good {
background: linear-gradient(90deg, #91CC75, #66BB6A);
background: linear-gradient(90deg, #91cc75, #66bb6a);
}
&.warning {
background: linear-gradient(90deg, #FAC858, #FFB300);
background: linear-gradient(90deg, #fac858, #ffb300);
}
&.danger {
background: linear-gradient(90deg, #EE6666, #E53935);
background: linear-gradient(90deg, #ee6666, #e53935);
}
}
}
@ -1200,16 +1333,16 @@ export default {
margin-right: 0.12rem;
&.running {
background: #91CC75;
background: #91cc75;
box-shadow: 0 0 0.1rem rgba(145, 204, 117, 0.5);
}
&.stopped {
background: #EE6666;
background: #ee6666;
}
&.standby {
background: #FAC858;
background: #fac858;
}
}

12
src/views/newCenterairC/reportManage/base/index.vue

@ -42,7 +42,7 @@
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" @click="generateReport" class="custom-btn">
<div class="primary-btn"><el-button type="primary" @click="generateReport" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
<path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
@ -50,16 +50,16 @@
<path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
</svg>
生成报表
</el-button>
<el-button type="success" @click="exportToExcel" class="custom-btn">
</el-button></div>
<div class="success-btn"><el-button type="success" @click="exportToExcel" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
<path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
</svg>
导出Excel
</el-button>
<el-button type="warning" @click="exportToPDF" class="custom-btn">
</el-button></div>
<div class="warning-btn"><el-button type="warning" @click="exportToPDF" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
@ -67,7 +67,7 @@
<path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
</svg>
导出PDF
</el-button>
</el-button></div>
</div>
</div>
</div>

12
src/views/newCenterairC/reportManage/machine/index.vue

@ -42,7 +42,7 @@
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" @click="generateReport" class="custom-btn">
<div class="primary-btn"> <el-button type="primary" @click="generateReport" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
<path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
@ -50,16 +50,16 @@
<path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
</svg>
生成报表
</el-button>
<el-button type="success" @click="exportToExcel" class="custom-btn">
</el-button></div>
<div class="success-btn"><el-button type="success" @click="exportToExcel" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M688 336H336c-8.8 0-16 7.2-16 16v256c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V352c0-8.8-7.2-16-16-16zm-16 256H352V368h320v224z" fill="currentColor"/>
<path d="M576 464H448c-8.8 0-16 7.2-16 16s7.2 16 16 16h128c8.8 0 16-7.2 16-16s-7.2-16-16-16z" fill="currentColor"/>
</svg>
导出Excel
</el-button>
<el-button type="warning" @click="exportToPDF" class="custom-btn">
</el-button></div>
<div class="warning-btn"><el-button type="warning" @click="exportToPDF" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
@ -67,7 +67,7 @@
<path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
</svg>
导出PDF
</el-button>
</el-button></div>
</div>
</div>
</div>

17
src/views/newLifeWater/alarmManage/index.vue

@ -112,18 +112,18 @@
</div>
</div>
<div class="config-actions">
<el-button type="primary" @click="testConnection" class="custom-btn">
<div class="primary-btn"><el-button type="primary" @click="testConnection" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
</svg>
测试连接
</el-button>
<el-button type="success" @click="saveConfig" class="custom-btn">
</el-button></div>
<div class="success-btn"><el-button type="success" @click="saveConfig" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
</svg>
保存配置
</el-button>
</el-button></div>
</div>
</div>
</div>
@ -179,9 +179,9 @@
clearable
class="search-input custom-input"
></el-input>
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
<div class="success-btn"> <el-button type="success" @click="handleExport" class="custom-btn">导出</el-button></div>
</div>
</div>
@ -238,15 +238,14 @@
</td>
<td class="action-cell">
<div class="action-buttons">
<el-button
v-if="!alarm.workOrderId"
<div class="primary-btn" v-if="!alarm.workOrderId"><el-button
type="primary"
size="small"
@click="createWorkOrder(alarm)"
class="action-btn"
>
创建工单
</el-button>
</el-button></div>
<el-button
size="small"
@click="viewAlarmDetail(alarm)"

6
src/views/newLifeWater/deviceManage/info/index.vue

@ -54,14 +54,14 @@
</div>
</div>
<div class="action-group">
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">
<div class="success-btn"><el-button type="success" @click="handleExport" class="custom-btn">
<svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
</svg>
导出列表
</el-button>
</el-button></div>
</div>
</div>

747
src/views/newLifeWater/energyManage/energyConsumptionEfficiencyTrend/index.vue

File diff suppressed because it is too large Load Diff

4
src/views/newLifeWater/energyManage/energyWater/index.vue

@ -222,8 +222,8 @@
</td>
<td>
<div class="action-buttons">
<el-button size="small" type="primary" @click="viewAnomalyDetail(anomaly)" class="action-btn">详情</el-button>
<el-button size="small" @click="handleAnomaly(anomaly)" v-if="anomaly.status === 'pending'" class="action-btn">处理</el-button>
<div class="primary-btn"><el-button size="small" type="primary" @click="viewAnomalyDetail(anomaly)" class="action-btn">详情</el-button></div>
<div class="success-btn" v-if="anomaly.status === 'pending'"><el-button size="small" type="success" @click="handleAnomaly(anomaly)" class="action-btn">处理</el-button></div>
</div>
</td>
</tr>

4
src/views/newLifeWater/energyManage/retrofitEffectivenessCompariso/index.vue

@ -38,7 +38,7 @@
</div>
</div>
<div class="selector-actions">
<el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
<div class="primary-btn"><el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button></div>
<el-button size="small" @click="exportData">导出数据</el-button>
</div>
</div>
@ -248,7 +248,7 @@
<div class="section-header">
<div class="section-title">改造成效详情</div>
<div class="section-actions">
<el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
<div class="primary-btn"><el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button></div>
<el-button size="small" @click="exportData">导出数据</el-button>
</div>
</div>

9
src/views/newLifeWater/energyManage/warning/index.vue

@ -113,9 +113,9 @@
clearable
class="search-input custom-input"
></el-input>
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
<div class="success-btn"><el-button type="success" @click="handleExport" class="custom-btn">导出</el-button></div>
</div>
</div>
@ -170,15 +170,14 @@
</td>
<td class="action-cell">
<div class="action-buttons">
<el-button
v-if="warning.status === 'pending'"
<span class="priamry-btn" v-if="warning.status === 'pending'"><el-button
type="primary"
size="small"
@click="handleWarning(warning)"
class="action-btn"
>
处理
</el-button>
</el-button></span>
<el-button
size="small"
@click="viewDetail(warning)"

654
src/views/newLifeWater/home/index.vue

File diff suppressed because it is too large Load Diff

8
src/views/newLifeWater/reportManage/base/index.vue

@ -42,7 +42,7 @@
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" @click="generateReport" class="custom-btn">
<div class="primary-btn"><el-button type="primary" @click="generateReport" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
<path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
@ -50,7 +50,7 @@
<path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
</svg>
生成报表
</el-button>
</el-button></div>
<el-button type="success" @click="exportToExcel" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
@ -59,7 +59,7 @@
</svg>
导出Excel
</el-button>
<el-button type="warning" @click="exportToPDF" class="custom-btn">
<div class="warning-btn"><el-button type="warning" @click="exportToPDF" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
@ -67,7 +67,7 @@
<path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
</svg>
导出PDF
</el-button>
</el-button></div>
</div>
</div>
</div>

17
src/views/newLighting/alarmManage/index.vue

@ -112,18 +112,18 @@
</div>
</div>
<div class="config-actions">
<el-button type="primary" @click="testConnection" class="custom-btn">
<div class="primary-btn"><el-button type="primary" @click="testConnection" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
</svg>
测试连接
</el-button>
<el-button type="success" @click="saveConfig" class="custom-btn">
</el-button></div>
<div class="success-btn"><el-button type="success" @click="saveConfig" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M864 256H160c-17.7 0-32 14.3-32 32v448c0 17.7 14.3 32 32 32h704c17.7 0 32-14.3 32-32V288c0-17.7-14.3-32-32-32zm0 64H192V384h672v-64z" fill="currentColor"/>
</svg>
保存配置
</el-button>
</el-button></div>
</div>
</div>
</div>
@ -179,9 +179,9 @@
clearable
class="search-input custom-input"
></el-input>
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
<div class="success-btn"><el-button type="success" @click="handleExport" class="custom-btn">导出</el-button></div>
</div>
</div>
@ -238,15 +238,14 @@
</td>
<td class="action-cell">
<div class="action-buttons">
<el-button
v-if="!alarm.workOrderId"
<div class="primary-btn" v-if="!alarm.workOrderId"><el-button
type="primary"
size="small"
@click="createWorkOrder(alarm)"
class="action-btn"
>
创建工单
</el-button>
</el-button></div>
<el-button
size="small"
@click="viewAlarmDetail(alarm)"

6
src/views/newLighting/deviceManage/info/index.vue

@ -54,14 +54,14 @@
</div>
</div>
<div class="action-group">
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">
<div class="success-btn"><el-button type="success" @click="handleExport" class="custom-btn">
<svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M384 704h256v-192h192l-320-320-320 320h192v192zM128 768h768v64H128v-64z" fill="currentColor"/>
</svg>
导出列表
</el-button>
</el-button></div>
</div>
</div>

503
src/views/newLighting/deviceManage/strategy/index.vue

@ -4,10 +4,13 @@
<div class="strategy-overview">
<div class="overview-title">策略总览</div>
<div class="strategy-grid">
<div
v-for="(strategy, index) in strategies"
<div
v-for="(strategy, index) in strategies"
:key="index"
:class="['strategy-card', { active: currentStrategy === index, 'custom': strategy.isCustom }]"
:class="[
'strategy-card',
{ active: currentStrategy === index, custom: strategy.isCustom },
]"
@click="selectStrategy(index)"
>
<div class="strategy-header">
@ -19,59 +22,80 @@
<div class="strategy-desc">{{ strategy.description }}</div>
</div>
<div class="strategy-status" :class="{ active: strategy.enabled }">
{{ strategy.enabled ? '已启用' : '未启用' }}
{{ strategy.enabled ? "已启用" : "未启用" }}
</div>
</div>
<div class="strategy-params">
<div class="param-item">
<span class="param-label">低亮亮度:</span>
<span class="param-value">{{ strategy.config.lowBrightness }}%</span>
<span class="param-value"
>{{ strategy.config.lowBrightness }}%</span
>
</div>
<div class="param-item">
<span class="param-label">中亮亮度:</span>
<span class="param-value">{{ strategy.config.mediumBrightness }}%</span>
<span class="param-value"
>{{ strategy.config.mediumBrightness }}%</span
>
</div>
<div class="param-item">
<span class="param-label">高亮亮度:</span>
<span class="param-value">{{ strategy.config.highBrightness }}%</span>
<span class="param-value"
>{{ strategy.config.highBrightness }}%</span
>
</div>
<div class="param-item">
<span class="param-label">高亮时长:</span>
<span class="param-value">{{ strategy.config.highDuration }}s</span>
<span class="param-value"
>{{ strategy.config.highDuration }}s</span
>
</div>
</div>
<div class="strategy-actions">
<el-button
v-if="!strategy.isCustom"
:type="strategy.enabled ? 'default' : 'primary'"
size="small"
@click.stop="toggleStrategy(index)"
<div
:class="strategy.enabled ? '' : 'primary-btn'"
v-if="!strategy.isCustom"
>
{{ strategy.enabled ? '禁用' : '启用' }}
</el-button>
<el-button
v-if="strategy.isCustom"
type="primary"
size="small"
@click.stop="editStrategy(index)"
>
编辑
</el-button>
<el-button
v-if="strategy.isCustom"
type="danger"
size="small"
@click.stop="deleteStrategy(index)"
>
删除
</el-button>
<el-button
:type="strategy.enabled ? 'default' : 'primary'"
size="small"
@click.stop="toggleStrategy(index)"
>
{{ strategy.enabled ? "禁用" : "启用" }}
</el-button>
</div>
<div class="primary-btn" v-if="strategy.isCustom">
<el-button
type="primary"
size="small"
@click.stop="editStrategy(index)"
>
编辑
</el-button>
</div>
<div class="danger-btn">
<el-button
v-if="strategy.isCustom"
type="danger"
size="small"
@click.stop="deleteStrategy(index)"
>
删除
</el-button>
</div>
</div>
</div>
<div class="strategy-card add-strategy" @click="openAddDialog">
<div class="add-icon">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="add-text">添加策略</div>
@ -84,19 +108,31 @@
<div class="section-header">
<div class="section-title">场景配置</div>
<div class="section-actions">
<el-button type="primary" size="small" @click="openSceneDialog">
<svg class="btn-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
</svg>
添加场景
</el-button>
<div class="primary-btn">
<el-button type="primary" size="small" @click="openSceneDialog">
<svg
class="btn-icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
添加场景
</el-button>
</div>
</div>
</div>
<div class="scene-grid">
<div
v-for="(scene, index) in scenes"
<div
v-for="(scene, index) in scenes"
:key="index"
:class="['scene-card', { active: currentStrategy === scene.strategyIndex }]"
:class="[
'scene-card',
{ active: currentStrategy === scene.strategyIndex },
]"
@click="applyScene(index)"
>
<div class="scene-header">
@ -109,15 +145,40 @@
</div>
</div>
<div class="scene-time">
<svg class="time-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<svg
class="time-icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
<span>{{ scene.timeRange }}</span>
</div>
<div class="scene-actions">
<el-button size="small" @click.stop="editScene(index)">编辑</el-button>
<el-button type="danger" size="small" @click.stop="deleteScene(index)" v-if="scene.isCustom">删除</el-button>
<div class="primary-btn">
<el-button
type="primary"
size="small"
@click.stop="editScene(index)"
>编辑</el-button
>
</div>
<div class="danger-btn">
<el-button
type="danger"
size="small"
@click.stop="deleteScene(index)"
v-if="scene.isCustom"
>删除</el-button
>
</div>
</div>
</div>
</div>
@ -129,9 +190,19 @@
<div class="section-title">策略执行状态</div>
<div class="status-refresh">
<el-button size="small" @click="refreshStatus">
<svg class="refresh-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<svg
class="refresh-icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
刷新
</el-button>
@ -141,8 +212,14 @@
<div class="status-card">
<div class="status-icon current">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="status-info">
@ -153,8 +230,14 @@
<div class="status-card">
<div class="status-icon devices">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="status-info">
@ -165,8 +248,14 @@
<div class="status-card">
<div class="status-icon online">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="status-info">
@ -177,8 +266,14 @@
<div class="status-card">
<div class="status-icon success">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
<path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
fill="currentColor"
/>
<path
d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z"
fill="currentColor"
/>
</svg>
</div>
<div class="status-info">
@ -197,39 +292,52 @@
class="custom-dialog"
@close="closeStrategyDialog"
>
<el-form :model="strategyForm" :rules="strategyRules" ref="strategyFormRef" label-width="120px">
<el-form
:model="strategyForm"
:rules="strategyRules"
ref="strategyFormRef"
label-width="120px"
>
<el-form-item label="策略名称" prop="name">
<el-input v-model="strategyForm.name" placeholder="请输入策略名称"></el-input>
<el-input
v-model="strategyForm.name"
placeholder="请输入策略名称"
></el-input>
</el-form-item>
<el-form-item label="策略描述" prop="description">
<el-input v-model="strategyForm.description" type="textarea" rows="2" placeholder="请输入策略描述"></el-input>
<el-input
v-model="strategyForm.description"
type="textarea"
rows="2"
placeholder="请输入策略描述"
></el-input>
</el-form-item>
<div class="form-section-title">亮度配置</div>
<el-form-item label="低亮亮度" prop="config.lowBrightness">
<el-input-number
v-model="strategyForm.config.lowBrightness"
:min="0"
:max="100"
<el-input-number
v-model="strategyForm.config.lowBrightness"
:min="0"
:max="100"
:step="5"
controls-position="right"
></el-input-number>
<span class="unit">%</span>
</el-form-item>
<el-form-item label="中亮亮度" prop="config.mediumBrightness">
<el-input-number
v-model="strategyForm.config.mediumBrightness"
:min="0"
:max="100"
<el-input-number
v-model="strategyForm.config.mediumBrightness"
:min="0"
:max="100"
:step="5"
controls-position="right"
></el-input-number>
<span class="unit">%</span>
</el-form-item>
<el-form-item label="高亮亮度" prop="config.highBrightness">
<el-input-number
v-model="strategyForm.config.highBrightness"
:min="0"
:max="100"
<el-input-number
v-model="strategyForm.config.highBrightness"
:min="0"
:max="100"
:step="5"
controls-position="right"
></el-input-number>
@ -237,20 +345,20 @@
</el-form-item>
<div class="form-section-title">时间配置</div>
<el-form-item label="高亮时长" prop="config.highDuration">
<el-input-number
v-model="strategyForm.config.highDuration"
:min="1"
:max="3600"
<el-input-number
v-model="strategyForm.config.highDuration"
:min="1"
:max="3600"
:step="10"
controls-position="right"
></el-input-number>
<span class="unit"></span>
</el-form-item>
<el-form-item label="缓亮时长" prop="config.fadeDuration">
<el-input-number
v-model="strategyForm.config.fadeDuration"
:min="1"
:max="300"
<el-input-number
v-model="strategyForm.config.fadeDuration"
:min="1"
:max="300"
:step="1"
controls-position="right"
></el-input-number>
@ -258,19 +366,19 @@
</el-form-item>
<div class="form-section-title">感应配置</div>
<el-form-item label="亮灯距离" prop="config.detectDistance">
<el-input-number
v-model="strategyForm.config.detectDistance"
:min="1"
:max="20"
<el-input-number
v-model="strategyForm.config.detectDistance"
:min="1"
:max="20"
:step="0.5"
controls-position="right"
></el-input-number>
<span class="unit"></span>
</el-form-item>
<el-form-item label="感应灵敏度" prop="config.sensitivity">
<el-slider
v-model="strategyForm.config.sensitivity"
:min="1"
<el-slider
v-model="strategyForm.config.sensitivity"
:min="1"
:max="100"
show-input
></el-slider>
@ -291,19 +399,32 @@
class="custom-dialog"
@close="closeSceneDialog"
>
<el-form :model="sceneForm" :rules="sceneRules" ref="sceneFormRef" label-width="100px">
<el-form
:model="sceneForm"
:rules="sceneRules"
ref="sceneFormRef"
label-width="100px"
>
<el-form-item label="场景名称" prop="name">
<el-input v-model="sceneForm.name" placeholder="请输入场景名称"></el-input>
<el-input
v-model="sceneForm.name"
placeholder="请输入场景名称"
></el-input>
</el-form-item>
<el-form-item label="场景描述" prop="description">
<el-input v-model="sceneForm.description" type="textarea" rows="2" placeholder="请输入场景描述"></el-input>
<el-input
v-model="sceneForm.description"
type="textarea"
rows="2"
placeholder="请输入场景描述"
></el-input>
</el-form-item>
<el-form-item label="绑定策略" prop="strategyIndex">
<el-select v-model="sceneForm.strategyIndex" placeholder="请选择策略">
<el-option
v-for="(strategy, index) in strategies"
<el-option
v-for="(strategy, index) in strategies"
:key="index"
:label="strategy.name"
:label="strategy.name"
:value="index"
></el-option>
</el-select>
@ -364,19 +485,35 @@ export default {
highDuration: 600,
fadeDuration: 3,
detectDistance: 5,
sensitivity: 70
}
sensitivity: 70,
},
},
strategyRules: {
name: [{ required: true, message: "请输入策略名称", trigger: "blur" }],
description: [{ required: true, message: "请输入策略描述", trigger: "blur" }],
"config.lowBrightness": [{ required: true, message: "请输入低亮亮度", trigger: "blur" }],
"config.mediumBrightness": [{ required: true, message: "请输入中亮亮度", trigger: "blur" }],
"config.highBrightness": [{ required: true, message: "请输入高亮亮度", trigger: "blur" }],
"config.highDuration": [{ required: true, message: "请输入高亮时长", trigger: "blur" }],
"config.fadeDuration": [{ required: true, message: "请输入缓亮时长", trigger: "blur" }],
"config.detectDistance": [{ required: true, message: "请输入亮灯距离", trigger: "blur" }],
"config.sensitivity": [{ required: true, message: "请输入感应灵敏度", trigger: "blur" }]
description: [
{ required: true, message: "请输入策略描述", trigger: "blur" },
],
"config.lowBrightness": [
{ required: true, message: "请输入低亮亮度", trigger: "blur" },
],
"config.mediumBrightness": [
{ required: true, message: "请输入中亮亮度", trigger: "blur" },
],
"config.highBrightness": [
{ required: true, message: "请输入高亮亮度", trigger: "blur" },
],
"config.highDuration": [
{ required: true, message: "请输入高亮时长", trigger: "blur" },
],
"config.fadeDuration": [
{ required: true, message: "请输入缓亮时长", trigger: "blur" },
],
"config.detectDistance": [
{ required: true, message: "请输入亮灯距离", trigger: "blur" },
],
"config.sensitivity": [
{ required: true, message: "请输入感应灵敏度", trigger: "blur" },
],
},
sceneForm: {
name: "",
@ -384,28 +521,36 @@ export default {
strategyIndex: 0,
timeRange: ["09:00", "18:00"],
weekdays: ["1", "2", "3", "4", "5"],
enabled: true
enabled: true,
},
sceneRules: {
name: [{ required: true, message: "请输入场景名称", trigger: "blur" }],
description: [{ required: true, message: "请输入场景描述", trigger: "blur" }],
strategyIndex: [{ required: true, message: "请选择绑定策略", trigger: "change" }],
timeRange: [{ required: true, message: "请选择时间段", trigger: "change" }],
weekdays: [{ required: true, message: "请选择执行日期", trigger: "change" }]
description: [
{ required: true, message: "请输入场景描述", trigger: "blur" },
],
strategyIndex: [
{ required: true, message: "请选择绑定策略", trigger: "change" },
],
timeRange: [
{ required: true, message: "请选择时间段", trigger: "change" },
],
weekdays: [
{ required: true, message: "请选择执行日期", trigger: "change" },
],
},
strategies: [],
scenes: [],
executionStats: {
deviceCount: 120,
onlineCount: 105,
successRate: 98.5
}
successRate: 98.5,
},
};
},
computed: {
currentStrategyName() {
return this.strategies[this.currentStrategy]?.name || "无";
}
},
},
mounted() {
this.initStrategies();
@ -428,8 +573,8 @@ export default {
highDuration: 600,
fadeDuration: 3,
detectDistance: 5,
sensitivity: 70
}
sensitivity: 70,
},
},
{
name: "会议模式",
@ -445,8 +590,8 @@ export default {
highDuration: 900,
fadeDuration: 2,
detectDistance: 3,
sensitivity: 80
}
sensitivity: 80,
},
},
{
name: "节能模式",
@ -462,8 +607,8 @@ export default {
highDuration: 300,
fadeDuration: 5,
detectDistance: 8,
sensitivity: 60
}
sensitivity: 60,
},
},
{
name: "深夜模式",
@ -479,8 +624,8 @@ export default {
highDuration: 180,
fadeDuration: 8,
detectDistance: 10,
sensitivity: 50
}
sensitivity: 50,
},
},
{
name: "自定义策略1",
@ -496,9 +641,9 @@ export default {
highDuration: 720,
fadeDuration: 4,
detectDistance: 6,
sensitivity: 75
}
}
sensitivity: 75,
},
},
];
},
initScenes() {
@ -512,7 +657,7 @@ export default {
timeRange: ["08:00", "12:00"],
weekdays: ["1", "2", "3", "4", "5"],
enabled: true,
isCustom: false
isCustom: false,
},
{
name: "下午办公",
@ -523,7 +668,7 @@ export default {
timeRange: ["13:00", "18:00"],
weekdays: ["1", "2", "3", "4", "5"],
enabled: true,
isCustom: false
isCustom: false,
},
{
name: "午休时间",
@ -534,7 +679,7 @@ export default {
timeRange: ["12:00", "13:00"],
weekdays: ["1", "2", "3", "4", "5"],
enabled: true,
isCustom: false
isCustom: false,
},
{
name: "夜间节能",
@ -545,7 +690,7 @@ export default {
timeRange: ["19:00", "07:00"],
weekdays: ["0", "1", "2", "3", "4", "5", "6"],
enabled: true,
isCustom: false
isCustom: false,
},
{
name: "周末节能",
@ -556,8 +701,8 @@ export default {
timeRange: ["00:00", "23:59"],
weekdays: ["0", "6"],
enabled: true,
isCustom: false
}
isCustom: false,
},
];
},
selectStrategy(index) {
@ -584,20 +729,34 @@ export default {
this.$confirm("确定要删除该策略吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.strategies.splice(index, 1);
this.$message.success("策略删除成功");
}).catch(() => {});
type: "warning",
})
.then(() => {
this.strategies.splice(index, 1);
this.$message.success("策略删除成功");
})
.catch(() => {});
},
saveStrategy() {
this.$refs.strategyFormRef.validate((valid) => {
if (valid) {
if (this.isEditStrategy) {
this.strategies[this.editStrategyIndex] = { ...this.strategyForm, icon: "⚙", iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", enabled: false, isCustom: true };
this.strategies[this.editStrategyIndex] = {
...this.strategyForm,
icon: "⚙",
iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)",
enabled: false,
isCustom: true,
};
this.$message.success("策略更新成功");
} else {
this.strategies.push({ ...this.strategyForm, icon: "⚙", iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", enabled: false, isCustom: true });
this.strategies.push({
...this.strategyForm,
icon: "⚙",
iconBg: "linear-gradient(135deg, #30cfd0 0%, #330867 100%)",
enabled: false,
isCustom: true,
});
this.$message.success("策略添加成功");
}
this.closeStrategyDialog();
@ -620,8 +779,8 @@ export default {
highDuration: 600,
fadeDuration: 3,
detectDistance: 5,
sensitivity: 70
}
sensitivity: 70,
},
};
},
openSceneDialog() {
@ -639,11 +798,13 @@ export default {
this.$confirm("确定要删除该场景吗?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.scenes.splice(index, 1);
this.$message.success("场景删除成功");
}).catch(() => {});
type: "warning",
})
.then(() => {
this.scenes.splice(index, 1);
this.$message.success("场景删除成功");
})
.catch(() => {});
},
applyScene(index) {
const scene = this.scenes[index];
@ -654,10 +815,20 @@ export default {
this.$refs.sceneFormRef.validate((valid) => {
if (valid) {
if (this.isEditScene) {
this.scenes[this.editSceneIndex] = { ...this.sceneForm, icon: "🎯", iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)", isCustom: true };
this.scenes[this.editSceneIndex] = {
...this.sceneForm,
icon: "🎯",
iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)",
isCustom: true,
};
this.$message.success("场景更新成功");
} else {
this.scenes.push({ ...this.sceneForm, icon: "🎯", iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)", isCustom: true });
this.scenes.push({
...this.sceneForm,
icon: "🎯",
iconBg: "linear-gradient(135deg, #F093FB 0%, #F5576C 100%)",
isCustom: true,
});
this.$message.success("场景添加成功");
}
this.closeSceneDialog();
@ -676,18 +847,18 @@ export default {
strategyIndex: 0,
timeRange: ["09:00", "18:00"],
weekdays: ["1", "2", "3", "4", "5"],
enabled: true
enabled: true,
};
},
refreshStatus() {
this.executionStats = {
deviceCount: 120 + Math.floor(Math.random() * 10),
onlineCount: 105 + Math.floor(Math.random() * 10),
successRate: (95 + Math.random() * 4).toFixed(1)
successRate: (95 + Math.random() * 4).toFixed(1),
};
this.$message.success("状态刷新成功");
}
}
},
},
};
</script>
@ -738,7 +909,7 @@ export default {
}
&.custom {
border-left: 0.04rem solid #F093FB;
border-left: 0.04rem solid #f093fb;
}
.strategy-header {
@ -786,7 +957,7 @@ export default {
&.active {
background: rgba(145, 204, 117, 0.3);
color: #91CC75;
color: #91cc75;
}
}
}
@ -1037,19 +1208,35 @@ export default {
}
&.current {
background: linear-gradient(135deg, rgba(21, 225, 253, 0.3) 0%, rgba(21, 225, 253, 0.1) 100%);
background: linear-gradient(
135deg,
rgba(21, 225, 253, 0.3) 0%,
rgba(21, 225, 253, 0.1) 100%
);
}
&.devices {
background: linear-gradient(135deg, rgba(84, 112, 198, 0.3) 0%, rgba(84, 112, 198, 0.1) 100%);
background: linear-gradient(
135deg,
rgba(84, 112, 198, 0.3) 0%,
rgba(84, 112, 198, 0.1) 100%
);
}
&.online {
background: linear-gradient(135deg, rgba(145, 204, 117, 0.3) 0%, rgba(145, 204, 117, 0.1) 100%);
background: linear-gradient(
135deg,
rgba(145, 204, 117, 0.3) 0%,
rgba(145, 204, 117, 0.1) 100%
);
}
&.success {
background: linear-gradient(135deg, rgba(250, 200, 88, 0.3) 0%, rgba(250, 200, 88, 0.1) 100%);
background: linear-gradient(
135deg,
rgba(250, 200, 88, 0.3) 0%,
rgba(250, 200, 88, 0.1) 100%
);
}
}
@ -1075,7 +1262,11 @@ export default {
::v-deep .custom-dialog {
.el-dialog {
background: linear-gradient(135deg, rgba(11, 30, 48, 0.98) 0%, rgba(20, 45, 65, 0.98) 100%);
background: linear-gradient(
135deg,
rgba(11, 30, 48, 0.98) 0%,
rgba(20, 45, 65, 0.98) 100%
);
border: 1px solid rgba(21, 225, 253, 0.3);
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
}

4
src/views/newLighting/energyManage/retrofitEffectivenessCompariso/index.vue

@ -38,8 +38,8 @@
</div>
</div>
<div class="selector-actions">
<el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button>
<el-button size="small" @click="exportData">导出数据</el-button>
<div class="primary-btn"><el-button type="primary" size="small" @click="generateReport">生成分析报告</el-button></div>
<div class="success-btn"><el-button type="success" size="small" @click="exportData">导出数据</el-button></div>
</div>
</div>

9
src/views/newLighting/energyManage/warning/index.vue

@ -103,9 +103,9 @@
clearable
class="search-input custom-input"
></el-input>
<el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button>
<div class="primary-btn"><el-button type="primary" @click="handleSearch" class="custom-btn">查询</el-button></div>
<el-button @click="handleReset" class="custom-btn">重置</el-button>
<el-button type="success" @click="handleExport" class="custom-btn">导出</el-button>
<div class="success-btn"><el-button type="success" @click="handleExport" class="custom-btn">导出</el-button></div>
</div>
</div>
@ -158,15 +158,14 @@
</td>
<td class="action-cell">
<div class="action-buttons">
<el-button
v-if="warning.status === 'pending'"
<div class="primary-btn" v-if="warning.status === 'pending'"><el-button
type="primary"
size="small"
@click="handleWarning(warning)"
class="action-btn"
>
处理
</el-button>
</el-button></div>
<el-button
size="small"
@click="viewDetail(warning)"

8
src/views/newLighting/reportManage/base/index.vue

@ -42,7 +42,7 @@
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" @click="generateReport" class="custom-btn">
<div class="primary-btn"><el-button type="primary" @click="generateReport" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M960 512H64c-17.7 0-32 14.3-32 32s14.3 32 32 32h896c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="currentColor"/>
<path d="M416 768H160c-17.7 0-32-14.3-32-32V288c0-17.7 14.3-32 32-32h256c17.7 0 32 14.3 32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V288c0-52.9-43.1-96-96-96H160c-52.9 0-96 43.1-96 96v448c0 52.9 43.1 96 96 96h256c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64z" fill="currentColor"/>
@ -50,7 +50,7 @@
<path d="M736 672v64c0 17.7-14.3 32-32 32H560c-17.7 0-32 14.3-32 32s14.3 32 32 32h144c52.9 0 96-43.1 96-96v-64c0-17.7-14.3-32-32-32s-32 14.3-32 32z" fill="currentColor"/>
</svg>
生成报表
</el-button>
</el-button></div>
<el-button type="success" @click="exportToExcel" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
@ -59,7 +59,7 @@
</svg>
导出Excel
</el-button>
<el-button type="warning" @click="exportToPDF" class="custom-btn">
<div class="warning-btn"><el-button type="warning" @click="exportToPDF" class="custom-btn">
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-32 736H176V176h672v672z" fill="currentColor"/>
<path d="M448 352h128c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
@ -67,7 +67,7 @@
<path d="M448 576h192c17.7 0 32-14.3 32-32s-14.3-32-32-32H448c-17.7 0-32 14.3-32 32s14.3 32 32 32z" fill="currentColor"/>
</svg>
导出PDF
</el-button>
</el-button></div>
</div>
</div>
</div>

341
src/views/newSystem/systemDevice.vue

@ -3,23 +3,29 @@
<!-- 关键指标统计 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">关键指标统计</div>
<div class="time-tabs">
<div
v-for="(tab, index) in deviceTimeTabs"
:key="index"
:class="['time-tab', { active: activeDeviceTab === index }]"
@click="handleDeviceTabChange(index)"
>
{{ tab }}
<div class="special-title">
关键指标统计
<div class="time-tabs">
<div
v-for="(tab, index) in deviceTimeTabs"
:key="index"
:class="['time-tab', { active: activeDeviceTab === index }]"
@click="handleDeviceTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
<div class="device-indicators">
<div class="indicator-card" v-for="device in deviceIndicators" :key="device.name">
<div
class="indicator-card"
v-for="device in deviceIndicators"
:key="device.name"
>
<div class="indicator-header" :style="{ background: device.bg }">
<div class="indicator-icon">
<img :src="device.icon" :alt="device.name" />
<img :src="device.icon" />
</div>
<div class="indicator-name">{{ device.name }}</div>
</div>
@ -44,15 +50,17 @@
<!-- 设备在线数量趋势 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">全系统设备在线数量趋势</div>
<div class="time-tabs">
<div
v-for="(tab, index) in trendTimeTabs"
:key="index"
:class="['time-tab', { active: activeTrendTab === index }]"
@click="handleTrendTabChange(index)"
>
{{ tab }}
<div class="special-title">
全系统设备在线数量趋势
<div class="time-tabs">
<div
v-for="(tab, index) in trendTimeTabs"
:key="index"
:class="['time-tab', { active: activeTrendTab === index }]"
@click="handleTrendTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
@ -62,15 +70,17 @@
<!-- 网关在线数量趋势 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">网关在线数量趋势</div>
<div class="time-tabs">
<div
v-for="(tab, index) in gatewayTimeTabs"
:key="index"
:class="['time-tab', { active: activeGatewayTab === index }]"
@click="handleGatewayTabChange(index)"
>
{{ tab }}
<div class="special-title">
网关在线数量趋势
<div class="time-tabs">
<div
v-for="(tab, index) in gatewayTimeTabs"
:key="index"
:class="['time-tab', { active: activeGatewayTab === index }]"
@click="handleGatewayTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
@ -139,61 +149,61 @@ export default {
total: 1250,
online: 1180,
offline: 70,
icon: "",
bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
icon: require("../../assets/images/temp1.png"),
bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
},
{
name: "空调系统",
total: 86,
online: 78,
offline: 8,
icon: "",
bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
icon: require("../../assets/images/temp2.png"),
bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
},
{
name: "水泵系统",
total: 156,
online: 148,
offline: 8,
icon: "",
bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
icon: require("../../assets/images/temp3.png"),
bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
},
{
name: "电梯系统",
total: 24,
online: 22,
offline: 2,
icon: "",
bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
icon: require("../../assets/images/temp4.png"),
bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
},
{
name: "风机系统",
total: 328,
online: 305,
offline: 23,
icon: "",
bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
icon: require("../../assets/images/temp5.png"),
bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
},
{
name: "监控系统",
total: 189,
online: 175,
offline: 14,
icon: "",
bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
}
icon: require("../../assets/images/temp6.png"),
bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
},
],
//
overview: {
online: 2008,
offline: 125,
warning: 32,
fault: 15
fault: 15,
},
//
deviceTrendChart: null,
gatewayTrendChart: null,
statusPieChart: null
statusPieChart: null,
};
},
mounted() {
@ -232,77 +242,98 @@ export default {
// 线
updateDeviceTrendChart() {
const dataMap = {
0: { //
0: {
//
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
onlineData: [1985, 1990, 1988, 1995, 2000, 1992, 2008],
offlineData: [148, 143, 145, 138, 133, 141, 125]
offlineData: [148, 143, 145, 138, 133, 141, 125],
},
1: { //
1: {
//
xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
onlineData: [1950, 1965, 1980, 1975, 1990, 1998, 2008],
offlineData: [183, 168, 153, 158, 143, 135, 125]
offlineData: [183, 168, 153, 158, 143, 135, 125],
},
2: {
//
xData: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
onlineData: [
1800, 1820, 1850, 1880, 1920, 1950, 1980, 1990, 2000, 2005, 2008,
2010,
],
offlineData: [
333, 313, 283, 253, 213, 183, 153, 143, 133, 128, 125, 123,
],
},
2: { //
xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
onlineData: [1800, 1820, 1850, 1880, 1920, 1950, 1980, 1990, 2000, 2005, 2008, 2010],
offlineData: [333, 313, 283, 253, 213, 183, 153, 143, 133, 128, 125, 123]
}
};
const currentData = dataMap[this.activeTrendTab];
const option = {
tooltip: {
trigger: "axis"
trigger: "axis",
},
legend: {
data: ["在线", "离线"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: currentData.xData,
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "台",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -311,10 +342,10 @@ export default {
smooth: true,
data: currentData.onlineData,
itemStyle: {
color: "#91CC75"
color: "#91CC75",
},
lineStyle: {
color: "#91CC75"
color: "#91CC75",
},
areaStyle: {
color: {
@ -326,15 +357,15 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(145, 204, 117, 0.5)"
color: "rgba(145, 204, 117, 0.5)",
},
{
offset: 1,
color: "rgba(145, 204, 117, 0)"
}
]
}
}
color: "rgba(145, 204, 117, 0)",
},
],
},
},
},
{
name: "离线",
@ -342,10 +373,10 @@ export default {
smooth: true,
data: currentData.offlineData,
itemStyle: {
color: "#EE6666"
color: "#EE6666",
},
lineStyle: {
color: "#EE6666"
color: "#EE6666",
},
areaStyle: {
color: {
@ -357,17 +388,17 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(238, 102, 102, 0.5)"
color: "rgba(238, 102, 102, 0.5)",
},
{
offset: 1,
color: "rgba(238, 102, 102, 0)"
}
]
}
}
}
]
color: "rgba(238, 102, 102, 0)",
},
],
},
},
},
],
};
this.deviceTrendChart.setOption(option);
},
@ -379,77 +410,93 @@ export default {
// 线
updateGatewayTrendChart() {
const dataMap = {
0: { //
0: {
//
xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
onlineData: [45, 46, 45, 47, 48, 47, 48],
offlineData: [3, 2, 3, 1, 0, 1, 0]
offlineData: [3, 2, 3, 1, 0, 1, 0],
},
1: { //
1: {
//
xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
onlineData: [42, 44, 45, 46, 46, 47, 48],
offlineData: [6, 4, 3, 2, 2, 1, 0]
offlineData: [6, 4, 3, 2, 2, 1, 0],
},
2: { //
xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
2: {
//
xData: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
onlineData: [40, 41, 42, 43, 44, 45, 46, 47, 47, 48, 48, 48],
offlineData: [8, 7, 6, 5, 4, 3, 2, 1, 1, 0, 0, 0]
}
offlineData: [8, 7, 6, 5, 4, 3, 2, 1, 1, 0, 0, 0],
},
};
const currentData = dataMap[this.activeGatewayTab];
const option = {
tooltip: {
trigger: "axis"
trigger: "axis",
},
legend: {
data: ["在线", "离线"],
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: currentData.xData,
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "台",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -458,10 +505,10 @@ export default {
smooth: true,
data: currentData.onlineData,
itemStyle: {
color: "#5470C6"
color: "#5470C6",
},
lineStyle: {
color: "#5470C6"
color: "#5470C6",
},
areaStyle: {
color: {
@ -473,15 +520,15 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(84, 112, 198, 0.5)"
color: "rgba(84, 112, 198, 0.5)",
},
{
offset: 1,
color: "rgba(84, 112, 198, 0)"
}
]
}
}
color: "rgba(84, 112, 198, 0)",
},
],
},
},
},
{
name: "离线",
@ -489,10 +536,10 @@ export default {
smooth: true,
data: currentData.offlineData,
itemStyle: {
color: "#FAC858"
color: "#FAC858",
},
lineStyle: {
color: "#FAC858"
color: "#FAC858",
},
areaStyle: {
color: {
@ -504,17 +551,17 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(250, 200, 88, 0.5)"
color: "rgba(250, 200, 88, 0.5)",
},
{
offset: 1,
color: "rgba(250, 200, 88, 0)"
}
]
}
}
}
]
color: "rgba(250, 200, 88, 0)",
},
],
},
},
},
],
};
this.gatewayTrendChart.setOption(option);
},
@ -523,14 +570,14 @@ export default {
this.statusPieChart = echarts.init(this.$refs.statusPieRef);
const option = {
tooltip: {
trigger: "item"
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
series: [
{
@ -542,20 +589,20 @@ export default {
{ value: 2008, name: "在线", itemStyle: { color: "#91CC75" } },
{ value: 125, name: "离线", itemStyle: { color: "#EE6666" } },
{ value: 32, name: "告警", itemStyle: { color: "#FAC858" } },
{ value: 15, name: "故障", itemStyle: { color: "#5470C6" } }
{ value: 15, name: "故障", itemStyle: { color: "#5470C6" } },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
formatter: "{b}\n{d}%"
}
}
]
formatter: "{b}\n{d}%",
},
},
],
};
this.statusPieChart.setOption(option);
},
@ -564,8 +611,8 @@ export default {
if (this.deviceTrendChart) this.deviceTrendChart.resize();
if (this.gatewayTrendChart) this.gatewayTrendChart.resize();
if (this.statusPieChart) this.statusPieChart.resize();
}
}
},
},
};
</script>
@ -671,11 +718,11 @@ export default {
font-weight: bold;
&.online {
color: #91CC75;
color: #91cc75;
}
&.offline {
color: #EE6666;
color: #ee6666;
}
}
}
@ -710,19 +757,19 @@ export default {
margin-right: 0.15rem;
&.online {
background: #91CC75;
background: #91cc75;
}
&.offline {
background: #EE6666;
background: #ee6666;
}
&.warning {
background: #FAC858;
background: #fac858;
}
&.fault {
background: #5470C6;
background: #5470c6;
}
}

241
src/views/newSystem/systemEnergy.vue

@ -3,15 +3,17 @@
<!-- 项目整体用能/碳排放趋势 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">项目整体趋势</div>
<div class="time-tabs">
<div
v-for="(tab, index) in trendTimeTabs"
:key="index"
:class="['time-tab', { active: activeTrendTab === index }]"
@click="handleTrendTabChange(index)"
>
{{ tab }}
<div class="special-title">
项目整体趋势
<div class="time-tabs">
<div
v-for="(tab, index) in trendTimeTabs"
:key="index"
:class="['time-tab', { active: activeTrendTab === index }]"
@click="handleTrendTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
@ -43,22 +45,36 @@
<div class="period-stats">
<div class="stat-card">
<div class="stat-label">近七日用电量</div>
<div class="stat-value">{{ periodData.electricity }} <span class="unit">万kWh</span></div>
<div class="stat-change" :class="{ positive: periodData.electricityChange >= 0 }">
<div class="stat-value">
{{ periodData.electricity }} <span class="unit">万kWh</span>
</div>
<div
class="stat-change"
:class="{ positive: periodData.electricityChange >= 0 }"
>
<span v-if="periodData.electricityChange >= 0"></span>
<span v-else></span>
环比 {{ Math.abs(periodData.electricityChange) }}%
<span class="compare-label">| 同比 {{ Math.abs(periodData.electricityYoy) }}%</span>
<span class="compare-label"
>| 同比 {{ Math.abs(periodData.electricityYoy) }}%</span
>
</div>
</div>
<div class="stat-card">
<div class="stat-label">近七日用水量</div>
<div class="stat-value">{{ periodData.water }} <span class="unit">t</span></div>
<div class="stat-change" :class="{ positive: periodData.waterChange >= 0 }">
<div class="stat-value">
{{ periodData.water }} <span class="unit">t</span>
</div>
<div
class="stat-change"
:class="{ positive: periodData.waterChange >= 0 }"
>
<span v-if="periodData.waterChange >= 0"></span>
<span v-else></span>
环比 {{ Math.abs(periodData.waterChange) }}%
<span class="compare-label">| 同比 {{ Math.abs(periodData.waterYoy) }}%</span>
<span class="compare-label"
>| 同比 {{ Math.abs(periodData.waterYoy) }}%</span
>
</div>
</div>
</div>
@ -100,14 +116,14 @@ export default {
electricityYoy: -1.5,
water: 456.8,
waterChange: -2.1,
waterYoy: 5.3
waterYoy: 5.3,
},
//
electricTrendChart: null,
carbonTrendChart: null,
barChart: null,
electricRingChart: null,
waterRingChart: null
waterRingChart: null,
};
},
mounted() {
@ -139,51 +155,51 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
type: "line"
}
type: "line",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "万kWh",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -192,10 +208,10 @@ export default {
smooth: true,
data: [1.8, 2.1, 1.9, 2.3, 2.5, 1.5, 1.4],
itemStyle: {
color: "#15e1fd"
color: "#15e1fd",
},
lineStyle: {
color: "#15e1fd"
color: "#15e1fd",
},
areaStyle: {
color: {
@ -207,17 +223,17 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(21, 225, 253, 0.5)"
color: "rgba(21, 225, 253, 0.5)",
},
{
offset: 1,
color: "rgba(21, 225, 253, 0)"
}
]
}
}
}
]
color: "rgba(21, 225, 253, 0)",
},
],
},
},
},
],
};
this.electricTrendChart.setOption(option);
},
@ -226,50 +242,50 @@ export default {
this.carbonTrendChart = echarts.init(this.$refs.carbonTrendChartRef);
const option = {
tooltip: {
trigger: "axis"
trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "tCO₂e",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -278,10 +294,10 @@ export default {
smooth: true,
data: [0.9, 1.1, 0.95, 1.15, 1.25, 0.75, 0.7],
itemStyle: {
color: "#91CC75"
color: "#91CC75",
},
lineStyle: {
color: "#91CC75"
color: "#91CC75",
},
areaStyle: {
color: {
@ -293,17 +309,17 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(145, 204, 117, 0.5)"
color: "rgba(145, 204, 117, 0.5)",
},
{
offset: 1,
color: "rgba(145, 204, 117, 0)"
}
]
}
}
}
]
color: "rgba(145, 204, 117, 0)",
},
],
},
},
},
],
};
this.carbonTrendChart.setOption(option);
},
@ -314,52 +330,59 @@ export default {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
containLabel: true,
},
xAxis: {
type: "category",
data: ["照明系统", "空调系统", "水泵系统", "电梯系统", "风机系统", "监控系统"],
data: [
"照明系统",
"空调系统",
"水泵系统",
"电梯系统",
"风机系统",
"监控系统",
],
axisLabel: {
color: "rgba(255, 255, 255, 0.8)",
interval: 0,
rotate: 20
rotate: 20,
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
axisTick: {
show: false
}
show: false,
},
},
yAxis: {
type: "value",
name: "kWh",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLabel: {
color: "rgba(255, 255, 255, 0.8)"
color: "rgba(255, 255, 255, 0.8)",
},
axisLine: {
lineStyle: {
color: "#365576"
}
color: "#365576",
},
},
splitLine: {
lineStyle: {
color: "#1a3d62",
type: "dashed"
}
}
type: "dashed",
},
},
},
series: [
{
@ -377,17 +400,17 @@ export default {
colorStops: [
{
offset: 0,
color: "#15e1fd"
color: "#15e1fd",
},
{
offset: 1,
color: "#208fff"
}
]
}
}
}
]
color: "#208fff",
},
],
},
},
},
],
};
this.barChart.setOption(option);
},
@ -396,14 +419,14 @@ export default {
this.electricRingChart = echarts.init(this.$refs.electricRingRef);
const option = {
tooltip: {
trigger: "item"
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
series: [
{
@ -416,13 +439,13 @@ export default {
{ value: 25, name: "空调系统" },
{ value: 18, name: "水泵系统" },
{ value: 12, name: "电梯系统" },
{ value: 10, name: "其他系统" }
{ value: 10, name: "其他系统" },
],
label: {
formatter: "{b}\n{d}%"
}
}
]
formatter: "{b}\n{d}%",
},
},
],
};
this.electricRingChart.setOption(option);
},
@ -431,14 +454,14 @@ export default {
this.waterRingChart = echarts.init(this.$refs.waterRingRef);
const option = {
tooltip: {
trigger: "item"
trigger: "item",
},
legend: {
orient: "vertical",
left: "left",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
},
series: [
{
@ -450,13 +473,13 @@ export default {
{ value: 40, name: "生活用水" },
{ value: 25, name: "冷却补水" },
{ value: 20, name: "绿化用水" },
{ value: 15, name: "其他用水" }
{ value: 15, name: "其他用水" },
],
label: {
formatter: "{b}\n{d}%"
}
}
]
formatter: "{b}\n{d}%",
},
},
],
};
this.waterRingChart.setOption(option);
},
@ -467,8 +490,8 @@ export default {
if (this.barChart) this.barChart.resize();
if (this.electricRingChart) this.electricRingChart.resize();
if (this.waterRingChart) this.waterRingChart.resize();
}
}
},
},
};
</script>
@ -559,7 +582,7 @@ export default {
.stat-change {
font-size: 0.14rem;
color: #91CC75;
color: #91cc75;
&.positive {
color: #ee5e5e;

180
src/views/newSystem/systemHome.vue

@ -8,23 +8,33 @@
<div class="comprehensive-indicators">
<div class="indicator-item">
<div class="indicator-label">综合节能率</div>
<div class="indicator-value">{{ comprehensiveData.energySavingRate }}%</div>
<div class="indicator-value">
{{ comprehensiveData.energySavingRate }}%
</div>
</div>
<div class="indicator-item">
<div class="indicator-label">节电金额</div>
<div class="indicator-value">¥{{ comprehensiveData.electricSavingAmount }}</div>
<div class="indicator-value">
¥{{ comprehensiveData.electricSavingAmount }}
</div>
</div>
<div class="indicator-item">
<div class="indicator-label">减碳量</div>
<div class="indicator-value">{{ comprehensiveData.carbonReduction }}t</div>
<div class="indicator-value">
{{ comprehensiveData.carbonReduction }}t
</div>
</div>
<div class="indicator-item">
<div class="indicator-label">累计用电</div>
<div class="indicator-value">{{ comprehensiveData.totalElectricity }}kWh</div>
<div class="indicator-value">
{{ comprehensiveData.totalElectricity }}kWh
</div>
</div>
<div class="indicator-item">
<div class="indicator-label">节电量</div>
<div class="indicator-value">{{ comprehensiveData.electricSaving }}kWh</div>
<div class="indicator-value">
{{ comprehensiveData.electricSaving }}kWh
</div>
</div>
</div>
</div>
@ -32,22 +42,28 @@
<!-- 设备规模指标 -->
<div class="special-div">
<div class="special-top">
<div class="special-title">设备规模</div>
<div class="time-tabs">
<div
v-for="(tab, index) in timeTabs"
:key="index"
:class="['time-tab', { active: activeTab === index }]"
@click="handleTabChange(index)"
>
{{ tab }}
<div class="special-title">
设备规模
<div class="time-tabs">
<div
v-for="(tab, index) in timeTabs"
:key="index"
:class="['time-tab', { active: activeTab === index }]"
@click="handleTabChange(index)"
>
{{ tab }}
</div>
</div>
</div>
</div>
<div class="device-scale">
<div class="device-item" v-for="device in deviceList" :key="device.name">
<div
class="device-item"
v-for="device in deviceList"
:key="device.name"
>
<div class="device-icon" :style="{ background: device.bg }">
<img :src="device.icon" :alt="device.name" />
<img :src="device.icon" />
</div>
<div class="device-info">
<div class="device-name">{{ device.name }}</div>
@ -128,37 +144,67 @@ export default {
electricSavingAmount: 125.6,
carbonReduction: 89.3,
totalElectricity: 45680,
electricSaving: 7890
electricSaving: 7890,
},
//
timeTabs: ["近七日", "当月", "当年", "自定义"],
activeTab: 0,
//
deviceList: [
{ name: "照明系统", count: 1250, icon: "", bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)" },
{ name: "空调系统", count: 86, icon: "", bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)" },
{ name: "水泵系统", count: 156, icon: "", bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)" },
{ name: "电梯系统", count: 24, icon: "", bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)" },
{ name: "风机系统", count: 328, icon: "", bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)" },
{ name: "监控系统", count: 189, icon: "", bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)" }
{
name: "照明系统",
count: 1250,
icon: require("../../assets/images/temp1.png"),
bg: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
},
{
name: "空调系统",
count: 86,
icon: require("../../assets/images/temp2.png"),
bg: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
},
{
name: "水泵系统",
count: 156,
icon: require("../../assets/images/temp3.png"),
bg: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
},
{
name: "电梯系统",
count: 24,
icon: require("../../assets/images/temp4.png"),
bg: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
},
{
name: "风机系统",
count: 328,
icon: require("../../assets/images/temp5.png"),
bg: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
},
{
name: "监控系统",
count: 189,
icon: require("../../assets/images/temp6.png"),
bg: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
},
],
//
energySaving: {
daySaving: 328,
totalSaving: 7890
totalSaving: 7890,
},
//
energyLegend: [
{ name: "照明系统", color: "#5470C6" },
{ name: "空调系统", color: "#91CC75" },
{ name: "水泵系统", color: "#FAC858" },
{ name: "其他系统", color: "#EE6666" }
{ name: "其他系统", color: "#EE6666" },
],
//
compareType: "yoy",
//
ringChart: null,
pieChart: null
pieChart: null,
};
},
mounted() {
@ -174,7 +220,7 @@ export default {
watch: {
compareType() {
this.updateRingChart();
}
},
},
methods: {
//
@ -189,27 +235,28 @@ export default {
},
//
updateRingChart() {
const data = this.compareType === "yoy"
? [
{ value: 35, name: "照明系统" },
{ value: 28, name: "空调系统" },
{ value: 22, name: "水泵系统" },
{ value: 15, name: "其他系统" }
]
: [
{ value: 32, name: "照明系统" },
{ value: 30, name: "空调系统" },
{ value: 25, name: "水泵系统" },
{ value: 13, name: "其他系统" }
];
const data =
this.compareType === "yoy"
? [
{ value: 35, name: "照明系统" },
{ value: 28, name: "空调系统" },
{ value: 22, name: "水泵系统" },
{ value: 15, name: "其他系统" },
]
: [
{ value: 32, name: "照明系统" },
{ value: 30, name: "空调系统" },
{ value: 25, name: "水泵系统" },
{ value: 13, name: "其他系统" },
];
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}% ({d}%)"
formatter: "{b}: {c}% ({d}%)",
},
legend: {
show: false
show: false,
},
series: [
{
@ -220,18 +267,18 @@ export default {
avoidLabelOverlap: false,
label: {
show: true,
formatter: "{b}\n{d}%"
formatter: "{b}\n{d}%",
},
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: "bold"
}
fontWeight: "bold",
},
},
data: data
}
]
data: data,
},
],
};
this.ringChart.setOption(option);
},
@ -241,40 +288,41 @@ export default {
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}% ({d}%)"
formatter: "{b}: {c}% ({d}%)",
},
legend: {
orient: "vertical",
left: "left",
orient: "horizontal",
left: "center",
textStyle: {
color: "#ffffff"
}
color: "#ffffff",
},
top: "8%", // 75%
},
series: [
{
name: "用能类型",
type: "pie",
radius: "60%",
center: ["60%", "50%"],
center: ["50%", "70%"],
data: [
{ value: 28, name: "生活用水" },
{ value: 35, name: "空调用电" },
{ value: 18, name: "照明用电" },
{ value: 12, name: "动力用电" },
{ value: 7, name: "其他" }
{ value: 7, name: "其他" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
label: {
formatter: "{b}\n{d}%"
}
}
]
formatter: "{b}\n{d}%",
},
},
],
};
this.pieChart.setOption(option);
},
@ -282,8 +330,8 @@ export default {
handleResize() {
if (this.ringChart) this.ringChart.resize();
if (this.pieChart) this.pieChart.resize();
}
}
},
},
};
</script>
@ -452,7 +500,7 @@ export default {
display: flex;
justify-content: center;
gap: 0.2rem;
margin-top: 0.1rem;
margin: 0.2rem 0;
.compare-tab {
padding: 0.05rem 0.2rem;
@ -468,7 +516,7 @@ export default {
}
&.active {
background: linear-gradient(135deg, #5470C6 0%, #91CC75 100%);
background: linear-gradient(135deg, #5470c6 0%, #91cc75 100%);
opacity: 1;
}
}
@ -478,7 +526,7 @@ export default {
.energy-type {
.pie-chart {
width: 100%;
height: 3.2rem;
height: 4rem;
}
}

Loading…
Cancel
Save