This commit is contained in:
duyufeng
2024-08-07 16:04:08 +08:00
93 changed files with 4715 additions and 2883 deletions

View File

@@ -1,31 +1,24 @@
const prefix = '/carbon-smart';
// 照明系统及相关接口
export enum lightingManage {
// 主页 ========================================================
// 获得分区与线路
getTree = '/carbon-smart/api/illuminationCtrl/getCtrlPanelTree',
getTree = prefix + '/illuminationCtrl/getCtrlPanelTree',
// 修改线路的可用/禁用状态
setDisable = '/carbon-smart/api/illuminationCtrl/changePanelStatus',
// 获得设备 - 小灯泡
getBulbs = '/carbon-smart/api/illuminationCtrl/getLightState',
getBulbs = prefix + '/illuminationCtrl/getDeviceState',
// 控制面板tab页 ================================================
// 主页 > 抽屉 > 控制面板 =======================================
// 获取当前修改的内容对比数据
getChangeList = '/carbon-smart/api/illuminationCtrl/getLightSceneChangeInfo',
getChangeList = prefix + '/illuminationCtrl/getSceneChangeInfo',
// 提交当前修改
submitChangeList = '/carbon-smart/api/illuminationCtrl/changeLightScene',
submitChangeList = prefix + '/illuminationCtrl/changeToSceneMode',
// 计划列表tab页 ================================================
// 主页 > 抽屉 > 计划列表 =======================================
// 获得计划列表tab页的表格数据
getPlanTable = '/carbon-smart/api/illuminationInfo/selectPanelPlan',
// 获得计划列表tab页的穿梭框左侧数据
getLeftPlan = '/carbon-smart/api/illuminationInfo/getPlan',
// 提交穿梭框被选择的数据
submitLeftPlan = '/carbon-smart/api/illuminationInfo/joinPlan',
// 删除表格中的计划
deletePlan = '/carbon-smart/api/illuminationInfo/deletePlan',
// 重启表格计划
restartPlan = '/carbon-smart/api/illuminationInfo/enable',
// 右侧表格修改数据提交
submitTableData = prefix + '/illuminationCtrl/refreshPlanStatus',
}

View File

@@ -17,12 +17,6 @@ export enum airConditionControl {
// 主页 > 抽屉 > 计划列表 =======================================
// 穿梭框来源数据
getTransData = prefix + '/airConditioningInfo/getDeActivatedPlanList',
// 右侧表格数据
getTableData = prefix + '/airConditioningInfo/getActivatedPlanList',
// 穿梭框结果数据提交
submitTransData = prefix + '/airConditioningInfo/activePlanByIdList',
// 右侧表格修改数据提交
submitTableData = prefix + '/airConditioningCtrl/refreshPlanStatus',
}

View File

@@ -0,0 +1,8 @@
export enum alarmOverviewApi {
getAlarmEquipment = '/carbon-smart/api/AlarmOverview/alarmEquipment', //设备告警 数量
getAlarmEnergyConsumption = '/carbon-smart/api/AlarmOverview/alarmEnergyConsumption', //能碳告警 数量
getAlarmGateway = '/carbon-smart/api/AlarmOverview/alarmGateway', //网关告警 数量
getPriority = '/carbon-smart/api/AlarmOverview/priority', //优先级 数量
getProcessProgress = '/carbon-smart/api/AlarmOverview/processProgress', //进度 数量
getAlarmTrend = '/carbon-smart/api/AlarmOverview/alarmTrend', //30天告警 数量
}

View File

@@ -52,7 +52,7 @@ export enum carbonInventoryCheck {
update = '/carbon-smart/api/carbon/inventory/update',
del = '/carbon-smart/api/carbon/inventory/del',
// 获取排放源表格数据
findUnitById = '/carbon-smartapi/carbon/inventory/findById',
findUnitById = '/carbon-smart/api/carbon/inventory/findById',
getDetailsList = '/carbon-smart/api/carbon/inventory/details/getDetailsList',
updateTable = '/carbon-smart/api/carbon/inventory/details/update',
// 排放统计接口
@@ -79,7 +79,15 @@ export enum uploadPic {
// 碳规划
export enum carbonPlanning {
// 全部
whole = '/carbon-smart/api/carbon/planning/whole',
// 详情
searchListByYear = '/carbon-smart/api/carbon/planning/searchListByYear',
searchListByMonth = '/carbon-smart/api/carbon/planning/searchListByMonth',
yearAndMonthAchievement = '/carbon-smart/api/carbon/planning/yearAndMonthAchievement',
annualElectricityConsumption = '/carbon-smart/api/carbon/planning/annualElectricityConsumption',
electricityUsageBackThen = '/carbon-smart/api/carbon/planning/electricityUsageBackThen',
detailedStatisticalDataTable = '/carbon-smart/api/carbon/planning/detailedStatisticalDataTable',
detailedStatisticalDataChart = '/carbon-smart/api/carbon/planning/detailedStatisticalDataChart',
batchOrUpdate = '/carbon-smart/api/carbon/planning/batchOrUpdate',
addNodes = '/carbon-smart/api/carbon/planning/addNodes',
}

View File

@@ -29,4 +29,9 @@ export enum group {
dropGroupFilter = `${BASE_URL}/deviceGroup/dropGroupFilter`, // 分组列表查询
dropGroupInfoFilter = `${BASE_URL}/deviceGroup/dropGroupInfoFilter`, // 计算列表查询
queryDeviceToEnergy = `${BASE_URL}/deviceGroup/queryDeviceToEnergy`, // 能耗监测用查询设备(能耗监测设备树)
getCarbonGroupList = `${BASE_URL}/deviceGroup/carbonEmissions/getGroupList`, // 分组管理-碳排放-分组查询设备
deleteCarbonDevice = `${BASE_URL}/deviceGroup/carbonEmissions/deleteDevice`, // 分组管理-碳排放-删除设备
addCarbonDevice = `${BASE_URL}/deviceGroup/carbonEmissions/addDevice`, // 分组管理-碳排放-添加设备
updateCarbonFactor = `${BASE_URL}/deviceGroup/carbonEmissions/updateFactor`, // 分组管理-碳排放-设置因子
}

View File

@@ -0,0 +1,13 @@
const prefix = '/carbon-smart';
// 照明系统及相关接口
export enum planManage {
/**
* @param deviceType 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
*/
// 获得未激活的计划
getTransData = prefix + '/deviceCtrlPlan/getDeActivatedPlanList',
// 获得激活的计划
getTableData = prefix + '/deviceCtrlPlan/getActivatedPlanList',
// 提交计划状态修改
submitTransData = prefix + '/deviceCtrlPlan/activePlanByIdList',
}

View File

@@ -98,6 +98,7 @@ export const appConfig = {
adminFlag: 'adminFlag',
});
sessionStorage.setItem('ORGID', info.orgId);
sessionStorage.setItem('LINKLIST', JSON.stringify(info.linkList));
sessionStorage.setItem('ISADMIN', trD?.adminFlag === '1');
selectDefaultDisabled.value = info?.adminFlag === '1';
selectDefaultValue.value = info.orgId;

View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.72705078125" height="20.530746459960938" viewBox="0 0 16.72705078125 20.530746459960938" fill="none">
<path d="M8.83553 0.223206C8.71956 0.0818939 8.54638 0 8.36358 0C8.18079 0 8.00761 0.0818939 7.89164 0.223206L0.139786 9.14842C-0.120087 9.44533 -0.00717926 9.69086 0.391891 9.69086L3.29167 9.69086C3.69073 9.69086 4.01572 10.0111 4.01572 10.4054L4.01572 15.5251C4.01572 15.9194 4.3413 16.242 4.73977 16.242L11.988 16.242C12.3865 16.242 12.7121 15.9194 12.7121 15.5251L12.7121 10.4054C12.7121 10.0111 13.037 9.69086 13.4361 9.69086L16.3335 9.69086C16.7326 9.69086 16.8479 9.44533 16.588 9.14842L8.83553 0.223206Z" fill="#F36163" >
</path>
<path d="M4.55933 20.5308L12.1678 20.5308C12.4977 20.5308 12.7652 20.2633 12.7652 19.9334L12.7652 18.1411C12.7652 17.8112 12.4977 17.5437 12.1678 17.5437L4.55933 17.5437C4.22937 17.5437 3.96191 17.8112 3.96191 18.1411L3.96191 19.9334C3.96191 20.2633 4.2294 20.5308 4.55933 20.5308Z" fill="#F36163" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.72705078125" height="20.530746459960938" viewBox="0 0 16.72705078125 20.530746459960938" fill="none">
<path d="M8.83553 0.223206C8.71956 0.0818939 8.54638 0 8.36358 0C8.18079 0 8.00761 0.0818939 7.89164 0.223206L0.139786 9.14842C-0.120087 9.44533 -0.00717926 9.69086 0.391891 9.69086L3.29167 9.69086C3.69073 9.69086 4.01572 10.0111 4.01572 10.4054L4.01572 15.5251C4.01572 15.9194 4.3413 16.242 4.73977 16.242L11.988 16.242C12.3865 16.242 12.7121 15.9194 12.7121 15.5251L12.7121 10.4054C12.7121 10.0111 13.037 9.69086 13.4361 9.69086L16.3335 9.69086C16.7326 9.69086 16.8479 9.44533 16.588 9.14842L8.83553 0.223206Z" fill="#F36163" >
</path>
<path d="M4.55933 20.5308L12.1678 20.5308C12.4977 20.5308 12.7652 20.2633 12.7652 19.9334L12.7652 18.1411C12.7652 17.8112 12.4977 17.5437 12.1678 17.5437L4.55933 17.5437C4.22937 17.5437 3.96191 17.8112 3.96191 18.1411L3.96191 19.9334C3.96191 20.2633 4.2294 20.5308 4.55933 20.5308Z" fill="#F36163" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -29,11 +29,11 @@ const equipmentControl = {
name: 'liftSystem',
meta: { title: '电梯系统', hideChildren: true, icon: 'shebeiqunkong' },
component: Base,
redirect: { name: 'liftSystem' },
redirect: { name: 'liftSystemIndex' },
children: [
{
path: 'index',
name: 'liftSystem',
name: 'liftSystemIndex',
component: () => import('/@/view/equipmentControl/liftSystem/index.vue'),
meta: {
title: '电梯系统',
@@ -81,25 +81,25 @@ const equipmentControl = {
},
],
},
// {
// path: 'ventilationSystem',
// name: 'ventilationSystem',
// meta: { title: '通风系统', hideChildren: true, icon: 'shebeiqunkong' },
// component: Base,
// redirect: { name: 'ventilationSystemIndex' },
// children: [
// {
// path: 'index',
// name: 'ventilationSystemIndex',
// component: () => import('/@/view/equipmentControl/ventilationSystem/index.vue'),
// meta: {
// title: '通风系统',
// keepAlive: false,
// // backApi: [],
// },
// },
// ],
// },
{
path: 'ventilationSystem',
name: 'ventilationSystem',
meta: { title: '通风系统', hideChildren: true, icon: 'shebeiqunkong' },
component: Base,
redirect: { name: 'ventilationSystemIndex' },
children: [
{
path: 'index',
name: 'ventilationSystemIndex',
component: () => import('/@/view/equipmentControl/ventilationSystem/index.vue'),
meta: {
title: '通风系统',
keepAlive: false,
// backApi: [],
},
},
],
},
{
path: 'airConditionControlSystem',
name: 'airConditionControlSystem',

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

View File

@@ -1,60 +1,141 @@
<template>
<div class="box">
<div class="box-top">
<div v-for="index in 3" :key="index" class="box-top-item">
<div class="item-box">
<div class="item-box-left">
<div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
<div class="iem-box-left-number">
10 / 13
<span
style="
color: #04d919;
font-size: 14px;
margin-left: 5px;
font-weight: 700;
font-style: normal;
"
>+10%</span
>
</div>
<div v-for="(item, index) in infoObject" :key="index" class="box-top-item">
<div
class="item-box"
:style="{
'background-image': 'url(' + item.url + ')',
'background-position': 'center right',
'background-repeat': 'no-repeat',
'background-clip': 'content-box',
'background-origin': 'content-box',
}">
<div class="item-box-icon">
<img style="width: 34px; height: 34px" src="./img/icon.png" />
</div>
<div class="item-box-right">
<img width="48px" height="48px" src="../../../../src/icon/gaojingtonglan.svg" />
<div class="item-box-left">
<div class="iem-box-left-number">
{{ item.todayProcessing }} / {{ item.total }}
<span
v-if="item.liftRatio"
style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal"
:style="{
color: item.liftRatio > 0 ? 'rgba(243, 97, 99, 1)' : 'rgba(0, 170, 124, 1)',
}"
><span v-if="item.liftRatio > 0">+</span>{{ item.liftRatio }}%</span
>
<img
v-if="item.liftRatio"
style="width: 12px; margin-top: 6px"
:src="item.liftRatio > 0 ? rise : decline" />
<span
v-if="item.liftRatio === 0"
style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal">
-
</span>
</div>
<div class="item-box-left-title"
><span style="color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: 700">{{
item.title
}}</span>
<span style="margin-left: 6px; font-size: 13px"> 今日处理 / 总数</span>
</div>
</div>
</div>
</div>
</div>
<div style="flex: 4; width: 100%; display: flex; gap: 5px">
<div
style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
<div ref="echartPieOne" style="width: 100%; height: 100%"></div>
<div class="box-center">
<div class="box-center-item">
<div class="box-center-item-top">
<img style="display: flex; position: absolute; top: 5px" :src="priority" />
<div class="box-center-item-top-title">
<span style="font-size: 18px">优先级</span>
</div>
<div
style="
width: auto;
height: 40px;
display: flex;
position: absolute;
left: 128px;
top: 13px;
color: rgba(102, 102, 102, 1);
font-size: 12px;
">
( 近30天 )
</div>
</div>
<div ref="echartPieOne" style="width: 100%; height: calc(100% - 40px)"></div>
</div>
<div style="flex: 1; height: 100%; background-color: white; border-radius: 4px">
<div ref="echartPieTow" style="width: 100%; height: 100%"></div>
<div class="box-center-item">
<div class="box-center-item-top">
<img style="display: flex; position: absolute; top: 5px" :src="priority" />
<div class="box-center-item-top-title">
<span style="font-size: 18px">处理进度</span>
</div>
<div
style="
width: auto;
height: 40px;
display: flex;
position: absolute;
left: 148px;
top: 13px;
color: rgba(102, 102, 102, 1);
font-size: 12px;
">
( 近30天 )
</div>
</div>
<div ref="echartPieTow" style="width: 100%; height: calc(100% - 40px)"></div>
</div>
</div>
<!-- 告警矩形 echarts -->
<div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
<div ref="graphChart" style="width: 100%; height: 100%"></div>
<div class="box-bottom">
<div class="box-bottom-top">
<img style="display: flex; position: absolute; top: 5px" :src="priority" />
<div class="box-bottom-top-title">
<span style="font-size: 18px">处理进度</span>
</div>
<div class="box-bottom-top-unit"> ( 近30天 ) </div>
</div>
<div ref="graphChart" style="width: 100%; height: calc(100% - 40px)"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
import * as echarts from 'echarts';
import gatewayAlarm from './img/gatewayAlarm.png';
import equipmentAlarm from './img/equipmentAlarm.png';
import energyAlarm from './img/energyAlarm.png';
import rise from './img/rise.png';
import decline from './img/decline.png';
import priority from './img/priority.png';
import { alarmOverviewApi } from '/@/api/alarmManagement/alarmOverview.ts';
import { http } from '/nerv-lib/util';
defineOptions({
name: 'alarmOverviewIndex', // 与页面路由name一致缓存才可生效
});
//组织树
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const infoObject = ref([
{ title: '设备告警', url: gatewayAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
{ title: '网关告警', url: equipmentAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
{ title: '能源告警', url: energyAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
]);
let chartInstance: echarts.ECharts | null = null;
let chartInstanceOne: echarts.ECharts | null = null;
let chartInstanceTow: echarts.ECharts | null = null;
const graphChart = ref(null);
const echartPieOne = ref(null);
const echartPieTow = ref(null);
const getGraphChart = () => {
const getGraphChart = async () => {
let dayData = [];
// 能源告警
let energyAlarm = [];
@@ -63,21 +144,28 @@
// 设备告警
let equipmentAlarm = [];
let total = [];
// Extend data for 30 days
for (let i = 1; i < 30; i++) {
dayData.push(`3/${i}`);
energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
total.push(0); // Assuming the same value for simplicity
}
await http
.post(alarmOverviewApi.getAlarmTrend, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
res.data.forEach((item: any, index) => {
energyAlarm.push(item.alarmEnergyConsumptionNum);
wgAlarm.push(item.alarmGatewayNum);
equipmentAlarm.push(item.alarmEquipmentNum);
total.push(0);
dayData.push(item.createTime);
});
}
});
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphChart.value);
const option = {
title: {
show: false,
text: '告警趋势/ 近30天',
textStyle: {
fontSize: 16,
@@ -126,7 +214,7 @@
legend: [
{
top: 5,
left: 'center', // 将图例居中显示
left: 'right', // 将图例居中显示
textStyle: {
color: 'rgb(89, 89, 89)',
fontSize: '14',
@@ -136,13 +224,6 @@
itemGap: 30, // 这里可以调整图例项之间的间距,单位为像素
},
],
// toolbox: {
// show: true,
// feature: {
// restore: {},
// saveAsImage: {},
// },
// },
calculable: true,
xAxis: [
{
@@ -194,12 +275,12 @@
name: '能源告警',
type: 'bar',
stack: '能源告警',
barMaxWidth: 40,
barMaxWidth: 20,
barGap: '10%',
itemStyle: {
normal: {
barBorderRadius: 0,
color: 'rgb(246, 189, 22)',
color: 'rgba(85, 125, 255, 1)',
},
},
data: energyAlarm,
@@ -208,12 +289,12 @@
name: '网关告警',
type: 'bar',
stack: '能源告警',
barMaxWidth: 40,
barMaxWidth: 20,
barGap: '10%',
itemStyle: {
normal: {
barBorderRadius: 0,
color: 'rgb(91, 143, 249)',
color: 'rgba(255, 232, 139, 1)',
},
},
data: wgAlarm,
@@ -222,12 +303,12 @@
name: '设备告警',
type: 'bar',
stack: '能源告警',
barMaxWidth: 40,
barMaxWidth: 20,
barGap: '10%',
itemStyle: {
normal: {
barBorderRadius: 0,
color: 'rgb(48, 191, 120)',
color: 'rgba(47, 213, 135, 1)',
},
},
data: equipmentAlarm,
@@ -236,7 +317,7 @@
name: '总数',
type: 'bar',
stack: '能源告警',
barMaxWidth: 40,
barMaxWidth: 20,
barHight: 0,
itemStyle: {
normal: {
@@ -264,38 +345,42 @@
chartInstance = echarts.init(graphChart.value);
chartInstance.setOption(option);
};
const getEchartPieOne = () => {
const getEchartPieOne = async () => {
if (chartInstanceOne) {
chartInstanceOne.dispose();
}
chartInstanceOne = echarts.init(echartPieOne.value);
// 获取接口数据
var m2R2Data = [
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
{ value: 0, name: '紧急', itemStyle: { color: 'rgba(243, 97, 99, 1)' } },
{ value: 0, name: '重要', itemStyle: { color: 'rgba(255, 116, 44, 1)' } },
{ value: 0, name: '一般', itemStyle: { color: 'rgba(255, 224, 158, 1)' } },
];
var total = 0;
await http
.post(alarmOverviewApi.getPriority, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
m2R2Data[0].value = res.data.emergent;
m2R2Data[1].value = res.data.important;
m2R2Data[2].value = res.data.general;
total = res.data.prioritySum;
}
});
chartInstanceOne = echarts.init(echartPieOne.value);
const option = {
title: [
{
text: '优先级 / 近30天',
text: total,
subtext: '优先级',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#aaaaaa',
},
left: '2%',
top: '2%',
},
{
text: '优先级',
subtext: 12312 + '个',
textStyle: {
fontSize: 24,
fontSize: 22,
color: 'black',
},
subtextStyle: {
fontSize: 24,
fontWeight: '700',
fontSize: 18,
color: 'black',
},
textAlign: 'center',
@@ -305,8 +390,8 @@
],
tooltip: {
trigger: 'item',
formatter: function (parms) {
var str = parms.marker + ' :' + parms.data.value;
formatter: function (parms: any) {
var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value;
return str;
},
},
@@ -316,9 +401,9 @@
top: 'center',
orient: 'vertical',
// 图例图标设置为圆形
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
// icon: 'circle',
itemWidth: 16,
itemHeight: 16,
itemGap: 16,
textStyle: {
fontSize: 14,
@@ -345,12 +430,25 @@
return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
},
},
// emphasis: {
// show: true, // 鼠标悬停时显示标签
// position: 'outside', // 标签位置
// textStyle: {
// fontSize: 14,
// },
// formatter: function (params) {
// return '[ ' + params.data.name + ' ] : ' + params.data.value;
// },
// },
},
labelLine: {
show: true, // 控制标签线是否显示
length: 10, // 标签线长度
length2: 0, // 标签线引出部分长度
// 其他样式属性,如 lineStyle
show: true, // 显示标签线
length: 15, // 标签线长度
length2: 10, // 标签线引出部分长度
lineStyle: {
width: 2, // 标签线的宽度
type: 'solid', // 标签线的样式
},
},
data: m2R2Data,
},
@@ -359,38 +457,44 @@
chartInstanceOne = echarts.init(echartPieOne.value);
chartInstanceOne.setOption(option);
};
const getEchartPieTow = () => {
const getEchartPieTow = async () => {
if (chartInstanceTow) {
chartInstanceTow.dispose();
}
chartInstanceTow = echarts.init(echartPieTow.value);
var m2R2Data = [
{ value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
{ value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
{ value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
{ value: 0, name: '待处理', itemStyle: { color: '#f36163' } },
{ value: 310, name: '处理中', itemStyle: { color: '#2778ff' } },
{ value: 234, name: '已完成', itemStyle: { color: '#62daab' } },
{ value: 234, name: '超时', itemStyle: { color: '#ffbc46' } },
{ value: 234, name: '关闭', itemStyle: { color: '#5e87d2' } },
];
var total = 0;
await http
.post(alarmOverviewApi.getProcessProgress, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
m2R2Data[0].value = res.data.pendingProcessing;
m2R2Data[1].value = res.data.processing;
m2R2Data[2].value = res.data.completed;
m2R2Data[3].value = res.data.timeout;
m2R2Data[4].value = res.data.close;
total = res.data.processSum;
}
});
const option = {
title: [
{
text: '优先级 / 近30天',
text: total,
subtext: '进度',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#aaaaaa',
},
left: '2%',
top: '2%',
},
{
text: '优先级',
subtext: 12312 + '个',
textStyle: {
fontSize: 24,
fontSize: 22,
color: 'black',
},
subtextStyle: {
fontSize: 24,
fontWeight: '700',
fontSize: 18,
color: 'black',
},
textAlign: 'center',
@@ -400,8 +504,8 @@
],
tooltip: {
trigger: 'item',
formatter: function (parms) {
var str = parms.marker + ' :' + parms.data.value;
formatter: function (parms: any) {
var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value;
return str;
},
},
@@ -410,10 +514,8 @@
right: 50,
top: 'center',
orient: 'vertical',
// 图例图标设置为圆形
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
itemWidth: 16,
itemHeight: 16,
itemGap: 16,
textStyle: {
fontSize: 14,
@@ -444,7 +546,7 @@
labelLine: {
show: true, // 控制标签线是否显示
length: 10, // 标签线长度
length2: 0, // 标签线引出部分长度
length2: 10, // 标签线引出部分长度
// 其他样式属性,如 lineStyle 等
},
data: m2R2Data,
@@ -454,7 +556,47 @@
chartInstanceTow = echarts.init(echartPieTow.value);
chartInstanceTow.setOption(option);
};
const getTotal = () => {
// 获取设备告警数据
http
.post(alarmOverviewApi.getAlarmEquipment, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
infoObject.value[0].total = res.data.total;
infoObject.value[0].liftRatio = res.data.liftRatio;
infoObject.value[0].todayProcessing = res.data.todayProcessing;
}
});
// 获取网关告警数据
http
.post(alarmOverviewApi.getAlarmGateway, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
infoObject.value[1].total = res.data.total;
infoObject.value[1].liftRatio = res.data.liftRatio;
infoObject.value[1].todayProcessing = res.data.todayProcessing;
}
});
// 获取能碳告警数据
http
.post(alarmOverviewApi.getAlarmEnergyConsumption, {
orgId: orgId.value,
})
.then((res) => {
if (res.msg === 'success') {
infoObject.value[2].total = res.data.total;
infoObject.value[2].liftRatio = res.data.liftRatio;
infoObject.value[2].todayProcessing = res.data.todayProcessing;
}
});
};
onMounted(() => {
// 获取三个告警数量
getTotal();
//渲染第三个图表
getGraphChart();
//优先级
@@ -469,36 +611,41 @@
// border: 1px solid red;
display: flex;
flex-direction: column;
gap: 5px;
gap: 12px;
background-color: #f0f1f4;
box-sizing: border-box;
.box-top {
flex: 1;
flex: 1.5;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
gap: 5px;
gap: 12px;
.box-top-item {
height: 100%;
flex: 1;
gap: 5px;
gap: 12px;
background-color: white;
border-radius: 4px;
padding: 20px;
.item-box {
width: 100%;
height: 100%;
display: flex;
.item-box-left {
flex: 9;
.item-box-icon {
flex: 1.5;
height: 100%;
padding: 0px !important;
display: flex;
align-items: center;
justify-content: center;
}
.item-box-left {
flex: 8.5;
height: 100%;
padding: 20px 4px;
.item-box-left-title {
color: rgba(0, 0, 0, 0.45);
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #aaaaaa;
font-kerning: normal;
font-family: '微软雅黑', sans-serif;
@@ -512,13 +659,71 @@
}
}
.item-box-right {
flex: 1;
flex: 5;
height: 100%;
display: grid;
place-items: center;
}
}
}
}
.box-center {
flex: 4;
width: 100%;
display: flex;
gap: 12px;
.box-center-item {
flex: 1;
height: 100%;
background-color: white;
border-radius: 4px;
padding: 12px;
.box-center-item-top {
width: 100%;
height: 40px;
padding: 0px 12px;
display: flex;
position: relative;
.box-center-item-top-title {
width: auto;
height: 40px;
display: flex;
position: absolute;
left: 62px;
top: 5px;
}
}
}
}
.box-bottom {
flex: 3.5;
width: 100%;
background-color: white;
border-radius: 4px;
padding: 12px;
.box-bottom-top {
width: 100%;
height: 40px;
padding: 0px 12px;
display: flex;
position: relative;
.box-bottom-top-title {
width: auto;
height: 40px;
display: flex;
position: absolute;
left: 62px;
top: 5px;
}
.box-bottom-top-unit {
width: auto;
height: 40px;
display: flex;
position: absolute;
left: 148px;
top: 13px;
color: rgba(102, 102, 102, 1);
font-size: 12px;
}
}
}
}
</style>

View File

@@ -346,4 +346,3 @@
background-color: grey !important;
}
</style>
../../../api/alarmManagement/alarmSettings/deviceAlarms../../../api/alarmManagement/alarmSettings/energyAlarm../../../api/alarmManagement/alarmSettings/notificationManagements

View File

@@ -2,7 +2,7 @@
<ns-view-list-table v-bind="config" ref="mainRef">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'alarmTitle'">
<div style="color: #2778ff">{{ record.alarmTitle }}</div>
<div style="color: rgba(255, 118, 54, 1)">{{ record.alarmTitle }}</div>
{{ record.abnormalDescription }}
</template>
<template v-if="column.dataIndex === 'priority'">

View File

@@ -2,7 +2,7 @@
<ns-view-list-table v-bind="config" ref="mainRef">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'alarmTitle'">
<div style="color: #2778ff">{{ record.alarmTitle }}</div>
<div style="color: rgba(255, 118, 54, 1)">{{ record.alarmTitle }}</div>
{{ record.abnormalDescription }}
</template>
<template v-if="column.dataIndex === 'priority'">

View File

@@ -148,7 +148,7 @@
<div class="moneyImg"
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-4.svg"
/></div>
<div class="moneyTitle">全国碳账户估值CNY</div>
<div class="moneyTitle">碳资产总估值CNY</div>
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{ whole.whole }}</div>
</div>
<div class="title" style="justify-content: center">

View File

@@ -191,7 +191,7 @@ export const formConfig = (disabled) => {
},
{
label: '参考文献',
field: 'reference',
field: 'bibliography',
component: 'NsTextarea',
componentProps: {
placeholder: '请输入参考文献',

View File

@@ -686,7 +686,7 @@
},
{
title: '参考文献',
dataIndex: 'reference',
dataIndex: 'bibliography',
},
{
title: '引用数量',
@@ -824,7 +824,7 @@
},
},
{
field: 'reference',
field: 'bibliography',
label: '文献关键字',
component: 'NsInput',
componentProps: {

View File

@@ -54,7 +54,6 @@
// 年份选择改变触发
const changeYearData = () => {
debugger
queryParams.value.year = selectYear.value;
getTableList();
};

View File

@@ -1163,6 +1163,8 @@
let chartInstance: echarts.ECharts | null = null;
const drawEcharts = () => {
chartInstance = echarts.init(tplxChart.value);
let listData = datalist.value;
let linkDatas = linksData.value;
let Color = [
'#61FEFF',
'#937FE6',
@@ -1180,6 +1182,8 @@
'#bbc951',
'#FFC14B',
'#b785a6',
'#c23531',
'#2f4554',
];
let Color1 = [
'#04E0F3',
@@ -1198,6 +1202,8 @@
'#bbc951',
'#FFC14B',
'#b785a6',
'#c23531',
'#2f4554',
];
let sourceLabel = [
'right',
@@ -1219,16 +1225,16 @@
];
let itemStyleColor = [];
let labelSource = [];
for (let i = 0; i < datalist.value.length; i++) {
datalist.value[i].label = {
for (let i = 0; i < listData.length; i++) {
listData[i].label = {
normal: {
position: sourceLabel[i],
},
};
labelSource.push(sourceLabel[i]);
}
for (let d = 0; d < datalist.value.length; d++) {
datalist.value[d].itemStyle = {
for (let d = 0; d < listData.length; d++) {
listData[d].itemStyle = {
normal: {
color: {
type: 'linear',
@@ -1250,7 +1256,7 @@
},
},
};
itemStyleColor.push(datalist.value[d]);
itemStyleColor.push(listData[d]);
}
const option = {
backgroundColor: 'transparent',
@@ -1270,7 +1276,7 @@
nodeWidth: 25,
focusNodeAdjacency: 'allEdges',
data: itemStyleColor,
links: linksData.value,
links: linkDatas,
label: {
normal: {
color: '#fff',

View File

@@ -3,8 +3,20 @@
<div class="ns-form-title">
<div class="title">
<span>查询</span>
<a-date-picker v-if="selectedTime" style="margin-left: 5%" :value="value5" picker="year" />
<a-date-picker v-else style="margin-left: 5%" :value="value5" picker="month" />
<a-date-picker
v-if="selectedTime"
style="margin-left: 5%"
valueFormat="YYYY"
v-model:value="selectYear"
@change="changeYear"
picker="year" />
<a-date-picker
v-else
style="margin-left: 5%"
valueFormat="YYYY-MM"
v-model:value="selectMonth"
@change="changeMonth"
picker="month" />
</div>
<div class="operation">
<div class="month" :style="monthStyles" @click="changeToMonth"><span></span></div>
@@ -13,136 +25,178 @@
</div>
<div class="contant">
<div class="chartsPart">
<div class="electricityConsumption" ref="ydlChart"></div>
<div class="electricityConsumption" ref="ydlChart"></div>
<div class="electricityConsumption" ref="ydlChart"></div>
<div class="electricityConsumption" ref="ydlChart"></div>
<div class="electricityConsumption" ref="ydlChart"></div>
<template v-for="(item, index) in data" :key="index">
<div class="electricityConsumption">
<div :id="'ydlChart_' + index" style="height: 100%; width: 100%"></div>
</div>
</template>
</div>
<div class="tablePart">
<a-table :columns="columns" :data-source="data" bordered :pagination="false"> </a-table>
<a-table
:columns="columns"
:data-source="data"
bordered
:pagination="false"
:scroll="{ x: 1300, y: 300 }">
</a-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref,defineExpose } from 'vue';
import type { Dayjs } from 'dayjs';
import { ref, defineExpose } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import * as echarts from 'echarts';
import { http } from '/nerv-lib/util/http';
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
defineOptions({
energyType: 'all', // 与页面路由name一致缓存才可生效
});
const value5 = ref<Dayjs>();
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }) => {
return http.post(api, params);
};
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const selectMonth = ref<Dayjs>(dayjs().startOf('year').month(0));
// 年/月切换
const monthStyles = ref('background: #f2f2f2');
const yearStyles = ref('background: #2778ff');
const selectedTime = ref(true);
const changeMonth = () => {
queryParams.value.yearMonth = selectMonth.value;
getTableData();
};
const changeToMonth = () => {
monthStyles.value = 'background: #2778ff';
yearStyles.value = 'background: #f2f2f2';
queryParams.value.yearAndMonth = 'month';
queryParams.value.yearMonth = selectMonth.value.format('YYYY-DD');
columns.value[2].title = '月份';
columns.value[2].dataIndex = 'month';
columns.value[2].dataIndex = 'yearMonth';
selectedTime.value = false;
getTableData();
};
const changeYear = () => {
queryParams.value.year = selectYear.value;
getTableData();
};
const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2';
yearStyles.value = 'background: #2778ff';
queryParams.value.yearAndMonth = 'year';
delete queryParams.value.yearMonth;
// queryParams.value.year = selectYear.value;
columns.value[2].title = '年份';
columns.value[2].dataIndex = 'year';
selectedTime.value = true;
getTableData();
};
// 用电量
const ydlChart = ref(null);
const ydlChart = ref({});
let chartInstance: echarts.ECharts | null = null;
const drawEcharts = () => {
chartInstance = echarts.init(ydlChart.value);
const handred = 100;
let point = 66;
const option = {
backgroundColor: 'transparent',
title: [
{
text: point + '%',
x: 'center',
y: '35%',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
fontStyle: 'normal',
},
},
{
text: '用电量预算达成率',
x: 'center',
y: '85%',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
fontStyle: 'normal',
},
},
],
tooltip: {
formatter: function (params) {
return params.name + '' + params.percent + ' %';
},
},
series: [
{
name: 'circle',
type: 'pie',
clockWise: true,
radius: ['40%', '50%'],
center: ['50%', '40%'],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
data.value.forEach((item, index) => {
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
const handred = 100;
let point = parseInt(item.budgetAchievement.replace('%', ''));
const option = {
backgroundColor: 'transparent',
title: [
{
text: point + '%',
x: 'center',
y: '35%',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
fontStyle: 'normal',
},
},
hoverAnimation: false,
data: [
{
value: point,
name: '占比',
itemStyle: {
normal: {
color: '#4FADFD',
label: {
show: false,
},
labelLine: {
show: false,
},
{
text: item.budgetAchievementName,
x: 'center',
y: '85%',
textStyle: {
fontSize: 14,
fontWeight: 'normal',
fontStyle: 'normal',
},
},
],
// tooltip: {
// formatter: function (params) {
// return params.name + '' + params.percent + ' %';
// },
// },
series: [
{
name: 'circle',
type: 'pie',
clockWise: true,
radius: ['40%', '50%'],
center: ['50%', '40%'],
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
{
name: '剩余',
value: handred - point,
itemStyle: {
normal: {
color: '#E1E8EE',
hoverAnimation: false,
data: [
{
value: point,
name: '占比',
itemStyle: {
normal: {
color: '#4FADFD',
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
},
},
],
},
],
};
chartInstance = echarts.init(ydlChart.value);
chartInstance.setOption(option);
{
name: '剩余',
value: handred - point,
itemStyle: {
normal: {
color: '#E1E8EE',
},
},
},
],
},
],
};
chart.setOption(option);
});
};
defineExpose({
drawEcharts,
});
// 表格
const queryParams = ref({
orgId: orgId.value,
year: selectYear.value.format('YYYY'),
yearAndMonth: 'year',
});
const getTableData = () => {
fetch(carbonPlanning.whole, queryParams.value).then((res) => {
data.value = res.data;
setTimeout(() => {
drawEcharts();
}, 500);
});
};
const columns = ref([
{
title: '序号',
@@ -152,58 +206,43 @@
},
{
title: '名称',
dataIndex: 'name',
dataIndex: 'itemizeName',
},
{
title: '年份',
dataIndex: 'name',
dataIndex: 'year',
},
{
title: '计量单位',
dataIndex: 'name',
dataIndex: 'unitMeasurement',
},
{
title: '总实际用量',
dataIndex: 'money',
dataIndex: 'actualUsage',
},
{
title: '总预算量',
dataIndex: 'address',
dataIndex: 'budget',
},
{
title: '基准值',
dataIndex: 'address',
dataIndex: 'referenceValue',
},
{
title: '节能量',
dataIndex: 'address',
dataIndex: 'energyConservation',
},
{
title: '预算达成率',
dataIndex: 'address',
dataIndex: 'budgetAchievement',
},
]);
const data = [
{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park',
},
];
const data = ref([]);
getTableData();
defineExpose({
getTableData,
});
</script>
<style lang="less" scoped>

View File

@@ -13,23 +13,49 @@
<div class="chart" ref="chartRef"></div>
<div class="contrast">
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">2023年实际用量</div>
<div class="quantity">
<span>{{ lastYearActualUsage }}</span>
kwh
</div>
<div class="quantityTitle">{{ Number(props.year) - 1 }}年实际用量</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">2024年实际用量</div>
<div class="quantity">
<span>{{ actualUsage }}</span>
kwh
</div>
<div class="quantityTitle">{{ props.year }}年实际用量</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantityTitle">2024年预算</div>
<div class="quantity">
<span>{{ budget }}</span>
kwh
</div>
<div class="quantityTitle">{{ props.year }}年预算</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantity">
<span>{{ referenceValue }}</span>
kwh
</div>
<div class="quantityTitle">基准值</div>
</div>
<div class="model">
<div class="quantity"><span>12,500.00</span>kwh</div>
<div class="quantity">
<img
width="20px"
height="28px"
v-if="count < 0"
src="../../../../../src/icon/carbonPlanningDown.svg" />
<span v-if="count < 0" style="margin-left: 5px">{{ Math.abs(count) }}%</span>
<img
width="20px"
height="28px"
v-if="count > 0"
src="../../../../../src/icon/carbonPlanningUp.svg" />
<span v-if="count > 0" style="margin-left: 5px">{{ count }}%</span>
<span v-if="count === 0" style="margin-left: 5px">{{ count }}%</span>
</div>
<div class="quantityTitle">实际|预算</div>
</div>
</div>
@@ -64,6 +90,7 @@
selectedRowKeys: selectedRowKeys,
onChange: onSelectionChange,
}"
:scroll="{ x: 1300, y: 400 }"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
@@ -75,26 +102,26 @@
</a-table>
</a-card>
</div>
<!-- 设置 -->
<!-- 批量设置 -->
<a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel">
<a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
<a-form-item label="是否按去年折算">
<a-select ref="select" :value="formState.value1">
<a-select-option value="1"></a-select-option>
<a-select-option value="0"></a-select-option>
<a-select ref="select" v-model:value="formState.isLastYear" @change="selectChange">
<a-select-option :value="1"></a-select-option>
<a-select-option :value="0"></a-select-option>
</a-select>
</a-form-item>
<a-form-item label="计算方式">
<a-select ref="select" :value="formState.value2">
<a-select-option value="1">手动</a-select-option>
<a-select-option value="0">自动</a-select-option>
<!-- <a-form-item label="计算方式">
<a-select ref="select" v-model:value="formState.countMethod">
<a-select-option value="0">手动</a-select-option>
<a-select-option value="1">自动</a-select-option>
</a-select>
</a-form-item>
</a-form-item> -->
<a-form-item label="折算率">
<a-input :value="formState.name" suffix="%" disabled />
<a-input v-model:value="formState.conversionRate" suffix="%" :disabled="disabled" />
</a-form-item>
<a-form-item label="预算值">
<a-input :value="formState.email" suffix="kWh" disabled />
<a-input v-model:value="formState.budget" suffix="kWh" :disabled="!disabled" />
</a-form-item>
</a-form>
</a-modal>
@@ -105,7 +132,7 @@
:width="500"
@close="onClose"
:footer-style="{ textAlign: 'right' }">
<div> 节点站台照明 </div>
<div> 节点{{ props.nodeName }} </div>
<a-table
:columns="drawerColumns"
:data-source="newTableData"
@@ -134,15 +161,34 @@
</template>
<script lang="ts" setup>
import { ref, defineEmits, reactive } from 'vue';
import { ref, defineEmits, reactive, toRaw } from 'vue';
import { http } from '/nerv-lib/util/http';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
import * as echarts from 'echarts';
import { any, string } from 'vue-types';
// 父组件id
const props = defineProps({
parentId: {
type: Number,
},
year: {
type: string,
},
type: {
type: Number,
},
nodeName: {
type: string,
},
});
console.log(props, 'xxy');
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }) => {
return http.post(api, params);
};
// 点击返回
const emit = defineEmits(['change-data']);
const changeParentData = () => {
@@ -152,7 +198,20 @@
const selectedRowKeys = ref([]);
const onSelectionChange = (selectedKeys, selectedRows) => {
selectedRowKeys.value = selectedKeys;
formState.value.ids = selectedKeys;
};
const queryParams = ref({
orgId: orgId.value,
year: props.year,
itemizeId: props.parentId,
type: props.type,
});
const getTableData = () => {
fetch(carbonPlanning.detailedStatisticalDataTable, queryParams.value).then((res) => {
data.value = res.data;
});
};
getTableData();
const columns = ref([
{
title: '序号',
@@ -162,35 +221,31 @@
},
{
title: '日期',
dataIndex: 'name',
dataIndex: 'yearMonth',
},
{
title: '2023年实际用量',
dataIndex: 'name',
title: Number(props.year) - 1 + '年实际用量',
dataIndex: 'lastYearActualUsage',
},
{
title: '2024年实际用量',
dataIndex: 'name',
title: props.year + '年实际用量',
dataIndex: 'actualUsage',
},
{
title: '基准值',
dataIndex: 'money',
dataIndex: 'referenceValue',
},
{
title: '是否按去年折算',
dataIndex: 'address',
},
{
title: '计算方式',
dataIndex: 'address',
dataIndex: 'lastYear',
},
{
title: '折算率',
dataIndex: 'address',
dataIndex: 'conversionRate',
},
{
title: '2024年预算',
dataIndex: 'address',
dataIndex: 'budget',
},
{
title: '操作',
@@ -198,35 +253,50 @@
},
]);
const data = [
{
key: '1',
name: 'John Brown',
money: '¥300,000.00',
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
money: '¥1,256,000.00',
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
money: '¥120,000.00',
address: 'Sidney No. 1 Lake Park',
},
];
const data = ref([]);
const open = ref(false);
const formRef = ref();
const formState = ref({});
const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
const editData = () => {
const editData = (record) => {
open.value = true;
if (record) {
formState.value.ids = [record.id];
if (record.lastYear === '是') {
formState.value.isLastYear = 1;
} else {
formState.value.isLastYear = 0;
}
formState.value.conversionRate = record.conversionRate;
formState.value.budget = record.budget;
}
};
const disabled = ref(true);
const selectChange = (value) => {
if (value === 1) {
disabled.value = false;
} else {
disabled.value = true;
}
};
const handleOk = () => {
formRef.value
.validate()
.then(() => {
console.log('values', formState, toRaw(formState));
fetch(carbonPlanning.batchOrUpdate, formState.value).then((res) => {
open.value = false;
formState.value = {};
getTableData();
});
})
.catch((error) => {
console.log('error', error);
});
};
const onCancel = () => {
formState.value = {};
open.value = false;
};
const visible = ref(false);
@@ -258,6 +328,33 @@
// echarts图
const chartRef = ref(null);
let chartInstance: echarts.ECharts | null = null;
const XData = ref([]);
const actualUsageList = ref([]);
const lastYearActualUsageList = ref([]);
const budgetList = ref([]);
const referenceValueList = ref();
const actualUsage = ref();
const budget = ref();
const referenceValue = ref();
const lastYearActualUsage = ref();
const count = ref();
const getChartData = () => {
fetch(carbonPlanning.detailedStatisticalDataChart, queryParams.value).then((res) => {
console.log(res);
XData.value = res.data.yearMonth;
actualUsageList.value = res.data.actualUsageList;
lastYearActualUsageList.value = res.data.lastYearActualUsageList;
budgetList.value = res.data.budgetList;
referenceValueList.value = res.data.referenceValueList;
actualUsage.value = res.data.actualUsage;
budget.value = res.data.budget;
referenceValue.value = res.data.referenceValue;
lastYearActualUsage.value = res.data.lastYearActualUsage;
count.value = res.data.count;
chart();
});
};
getChartData();
const chart = () => {
chartInstance = echarts.init(chartRef.value);
const option = {
@@ -278,7 +375,12 @@
bottom: '10%',
},
legend: {
data: ['昨日总人数', '今日实时人数', '昨日使用率', '今日使用率'],
data: [
Number(props.year) - 1 + '年实际用量',
props.year + '年实际用量',
props.year + '年预算',
'基准值',
],
top: '0',
left: '0',
textStyle: {
@@ -289,7 +391,7 @@
itemHeight: 10, // 图例标记的高度
},
xAxis: {
data: ['2020', '2021', '2022', '2023', '2024'],
data: XData.value,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
@@ -337,7 +439,7 @@
],
series: [
{
name: '昨日总人数',
name: Number(props.year) - 1 + '年实际用量',
type: 'bar',
barWidth: 18,
itemStyle: {
@@ -345,10 +447,10 @@
color: '#6395f9',
},
},
data: [24, 45, 43, 35, 76],
data: lastYearActualUsageList.value,
},
{
name: '今日实时人数',
name: props.year + '年实际用量',
type: 'bar',
barWidth: 18,
itemStyle: {
@@ -356,10 +458,10 @@
color: '#62daab',
},
},
data: [133, 23, 114, 67, 89],
data: actualUsageList.value,
},
{
name: '昨日使用率',
name: props.year + '年预算',
type: 'line',
smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆
@@ -367,10 +469,10 @@
color: '#f4664a',
width: 2,
},
data: [4.2, 3.5, 2.9, 7.8, 2],
data: budgetList.value,
},
{
name: '今日使用率',
name: '基准值',
type: 'line',
smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆
@@ -378,16 +480,13 @@
color: '#f4664a',
width: 2,
},
data: [4, 6, 9, 8, 5],
data: referenceValueList.value,
},
],
};
chartInstance = echarts.init(chartRef.value);
chartInstance.setOption(option);
};
setTimeout(() => {
chart();
}, 500);
// 点击隐藏/展开
const showPart = ref(true);
const hideTopPart = () => {
@@ -395,6 +494,7 @@
};
const showTopPart = () => {
showPart.value = true;
getChartData();
};
</script>

View File

@@ -48,13 +48,28 @@
</div>
</div>
<div class="totalContant" v-else>
<categoryDeatil @change-data="updateData" :parentId="parentId" />
<categoryDeatil @change-data="updateData" :parentId="parentId" :year="year" :type="type" :nodeName="nodeName" />
</div>
<!-- 新增节点 -->
<a-drawer :visible="visible" :width="500" @close="onClose" :footer-style="{ textAlign: 'right' }">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<a-tree
:expanded-keys="expandedKeys"
:selectedKeys="selectedKeys"
:checkedKeys="treeCheckedKeys"
:tree-data="treeData"
v-if="treeData && treeData.length > 0"
class="draggable-tree"
@check="checkTreeNode"
checkable
block-node>
<template #title="data">
<div class="treeRow">
<div>
<span>{{ data.pointName }}</span>
</div>
</div>
</template>
</a-tree>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="onSubmit">确定</a-button>
@@ -68,11 +83,24 @@
import * as echarts from 'echarts';
import { http } from '/nerv-lib/util/http';
import categoryDeatil from './categoryDeatil.vue';
import { group } from '/@/api/deviceManage';
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary';
import type { TreeProps } from 'ant-design-vue';
import 'echarts-liquidfill';
defineOptions({
energyType: 'all', // 与页面路由name一致缓存才可生效
});
// 父组件id
const props = defineProps({
tabId: {
type: Number,
},
energyType: {
type: String,
},
});
console.log(props, 'xxy');
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
@@ -80,7 +108,7 @@
return http.post(api, params);
};
const selectYearValue = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const selectMonthValue = ref<Dayjs>();
const selectMonthValue = ref<Dayjs>(dayjs().startOf('year').month(0));
const electricTotal = ref(true);
// 年/月切换
const monthStyles = ref('background: #f2f2f2');
@@ -90,9 +118,12 @@
monthStyles.value = 'background: #2778ff';
yearStyles.value = 'background: #f2f2f2';
columns.value[2].title = '月份';
columns.value[2].dataIndex = 'month';
columns.value[2].dataIndex = 'yearMonth';
selectedTime.value = false;
getMonthData();
getBallQuery.value.yearAndMonth = 'month';
getBallData();
getMonthPillarData();
};
const changeToYear = () => {
monthStyles.value = 'background: #f2f2f2';
@@ -101,10 +132,40 @@
columns.value[2].dataIndex = 'year';
selectedTime.value = true;
getYearData();
getBallQuery.value.yearAndMonth = 'year';
getBallData();
getYearPillarData();
};
// echarts图
const pillarChartRef = ref(null);
let chartInstance: echarts.ECharts | null = null;
const getPillarQuery = ref({
orgId: orgId.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
});
const xAxisData = ref([]);
const referenceValue = ref([]);
const budget = ref([]);
const actualUsage = ref([]);
const getYearPillarData = () => {
fetch(carbonPlanning.annualElectricityConsumption, getPillarQuery.value).then((res) => {
xAxisData.value = res.data.year;
referenceValue.value = res.data.referenceValue;
budget.value = res.data.budget;
actualUsage.value = res.data.actualUsage;
drawPillarChart();
});
};
const getMonthPillarData = () => {
fetch(carbonPlanning.electricityUsageBackThen, getPillarQuery.value).then((res) => {
xAxisData.value = res.data.year;
referenceValue.value = res.data.referenceValue;
budget.value = res.data.budget;
actualUsage.value = res.data.actualUsage;
drawPillarChart();
});
};
const drawPillarChart = () => {
chartInstance = echarts.init(pillarChartRef.value);
const option = {
@@ -125,7 +186,7 @@
bottom: '10%',
},
legend: {
data: ['昨日总人数', '今日实时人数', '昨日使用率'],
data: ['实际用量', '预算量', '基准线'],
top: '0',
left: '0',
textStyle: {
@@ -134,7 +195,7 @@
},
},
xAxis: {
data: ['2020', '2021', '2022', '2023', '2024'],
data: xAxisData.value,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
@@ -182,7 +243,7 @@
],
series: [
{
name: '昨日总人数',
name: '实际用量',
type: 'bar',
barWidth: 18,
itemStyle: {
@@ -190,10 +251,10 @@
color: '#6395f9',
},
},
data: [24, 45, 43, 35, 76],
data: actualUsage.value,
},
{
name: '今日实时人数',
name: '预算量',
type: 'bar',
barWidth: 18,
itemStyle: {
@@ -201,10 +262,10 @@
color: '#62daab',
},
},
data: [133, 23, 114, 67, 89],
data: budget.value,
},
{
name: '昨日使用率',
name: '基准线',
type: 'line',
smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆
@@ -212,7 +273,7 @@
color: '#f4664a',
width: 2,
},
data: [4.2, 3.5, 2.9, 7.8, 2],
data: referenceValue.value,
},
],
};
@@ -220,29 +281,109 @@
chartInstance.setOption(option);
};
const ballChartRef = ref(null);
const getBallQuery = ref({
orgId: orgId.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
yearAndMonth: 'year',
});
const ballValue = ref();
const getBallData = () => {
fetch(carbonPlanning.yearAndMonthAchievement, getBallQuery.value).then((res) => {
ballValue.value = res.data;
drawSQ();
});
};
let ballChartInstance: echarts.ECharts | null = null;
const drawSQ = () => {
ballChartInstance = echarts.init(ballChartRef.value);
let ballData = (Number(ballValue.value) / 100).toFixed(2);
const option = {
series: [
{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '80%',
radius: '78.1%',
center: ['50%', '50%'],
color: ['#ecf3fe', '#c8dcfe', '#5594fa'],
data: [ballData, ballData, ballData], // data个数代表波浪数
amplitude: 5,
// 图形样式
itemStyle: {
opacity: 1, // 波浪的透明度
shadowBlur: 0, // 波浪的阴影范围
},
label: {
show: true,
textStyle: {
color: '#5594fa',
insideColor: '#12786f',
fontSize: 40,
},
formatter: (params) => {
// return `${(params.value * 100).toFixed(2)}%`;
return `${Number(params.value * 100).toFixed(2)}%`;
},
},
outline: {
show: true,
borderDistance: 5,
itemStyle: {
borderColor: 'rgba(68, 197, 253,1)',
borderWidth: 2,
},
},
},
],
};
ballChartInstance = echarts.init(ballChartRef.value);
ballChartInstance.setOption(option);
};
setTimeout(() => {
drawPillarChart();
drawSQ();
}, 500);
// 新增节点
const visible = ref(false);
const getTreeData = ref({
orgId: orgId.value,
energyType: props.energyType,
});
const addNode = () => {
visible.value = true;
fetch(group.queryDeviceGroupTree, getTreeData.value).then((res) => {
treeData.value = res.data;
// 格式化树节点数据并设置 key
treeData.value = formatTreeData(treeData.value);
});
};
const genData: TreeProps['treeData'] = [];
const treeData = ref<TreeProps['treeData']>(genData);
const expandedKeys = ref<string[]>();
const selectedKeys = ref<string[]>([]);
const treeCheckedKeys = ref<string[]>([]);
const checkTreeNode = (checkedKeys, info) => {
treeCheckedKeys.value = checkedKeys;
addTreeNode.value.itemizeIds = treeCheckedKeys.value;
};
const formatTreeData = (treeData) => {
return treeData.map((node) => {
const newNode = { ...node };
newNode.key = String(node.id); // 将 id 转换为字符串作为 key
if (node.children) {
newNode.children = formatTreeData(node.children);
}
return newNode;
});
};
const addTreeNode = ref({
orgId: orgId.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
});
const onSubmit = () => {
fetch(carbonPlanning.addNodes, addTreeNode.value).then((res) => {
data.value = res.data;
visible.value = false;
changeToYear();
});
};
const onClose = () => {
visible.value = false;
@@ -293,23 +434,29 @@
// 获取年数据
const yearQueryParams = ref({
orgId: orgId.value,
type: 1,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
});
const changeYear = () => {
yearQueryParams.value.year = selectYearValue.value;
year.value = selectYearValue.value;
addTreeNode.value.year = selectYearValue.value;
getYearData();
};
const getYearData = () => {
fetch(carbonPlanning.searchListByYear, yearQueryParams.value).then((res) => {
data.value = res.data;
res.data.forEach((item) => {
treeCheckedKeys.value.push((item.itemizeId).toString());
});
});
};
// 获取月数据
const monthQueryParams = ref({
orgId: orgId.value,
type: 1,
yearMonth: selectMonthValue.value,
type: props.tabId,
year: selectYearValue.value.format('YYYY'),
yearMonth: selectMonthValue.value.format('YYYY-DD'),
});
const changeMonth = () => {
monthQueryParams.value.yearMonth = selectMonthValue.value;
@@ -321,16 +468,23 @@
});
};
defineExpose({
getYearData,
changeToYear,
electricTotal,
});
const parentId = ref();
const year = ref(selectYearValue.value.format('YYYY'));
const type = ref();
const nodeName = ref();
const detailData = (record) => {
electricTotal.value = false;
parentId.value = record.id;
parentId.value = record.itemizeId;
type.value = props.tabId;
nodeName.value = record.itemizeName;
};
// 子页面点击返回
const updateData = (type) => {
electricTotal.value = type;
changeToYear();
};
</script>

View File

@@ -1,34 +1,34 @@
<template>
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
<a-tab-pane key="1" tab="全部">
<a-tab-pane key="1" tab="全部">
<all ref="allRef" />
</a-tab-pane>
<a-tab-pane key="2" tab="用电量" force-render>
<category ref="electricRef" />
<a-tab-pane key="2" tab="用电量">
<category ref="electricRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="3" tab="用水量">
<category ref="useWaterRef" />
<category ref="useWaterRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="4" tab="供水量">
<category ref="provideWaterRef" />
<category ref="provideWaterRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="5" tab="碳排">
<category ref="carbonEmissionsRef" />
<category ref="carbonEmissionsRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
<a-tab-pane key="6" tab="供热量">
<category ref="provideHotRef" />
<category ref="provideHotRef" :tabId="tabId" :energyType="energyType" />
</a-tab-pane>
</a-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, nextTick } from 'vue';
import all from './all/index.vue';
import category from './category/index.vue';
defineOptions({
name: 'carbonPlanning', // 与页面路由name一致缓存才可生效
components: {
all,
category
category,
},
});
const activeKey = ref('1');
@@ -39,33 +39,62 @@
const carbonEmissionsRef = ref<InstanceType<typeof category> | null>(null);
const provideHotRef = ref<InstanceType<typeof category> | null>(null);
// 切换tab页的回调
const tabId = ref(1);
const energyType = ref();
const handleTabChange = (key) => {
console.log('Tab changed:', key);
// 在这里可以执行需要在页面切换时执行的逻辑
if (key === '1') {
if (allRef.value) {
allRef.value.drawEcharts();
}
nextTick(() => {
if (allRef.value) {
allRef.value.getTableData();
}
});
} else if (key === '2') {
if (electricRef.value) {
electricRef.value.getYearData(); // 调用子组件的方法
}
tabId.value = 1;
energyType.value = 'ELECTRICITY_USAGE'
nextTick(() => {
if (electricRef.value) {
electricRef.value.electricTotal = true
electricRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '3') {
if (useWaterRef.value) {
useWaterRef.value.getYearData();
}
}else if (key === '4') {
if (provideWaterRef.value) {
provideWaterRef.value.getYearData();
}
}else if (key === '5') {
if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.getYearData();
}
}else if (key === '6') {
if (provideHotRef.value) {
provideHotRef.value.getYearData();
}
tabId.value = 2;
energyType.value = 'WATER_USAGE'
nextTick(() => {
if (useWaterRef.value) {
useWaterRef.value.electricTotal = true
useWaterRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '4') {
tabId.value = 3;
energyType.value = 'gongshuiliang'
nextTick(() => {
if (provideWaterRef.value) {
provideWaterRef.value.electricTotal = true
provideWaterRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '5') {
tabId.value = 4;
energyType.value = 'CARBON_EMISSIONS'
nextTick(() => {
if (carbonEmissionsRef.value) {
carbonEmissionsRef.value.electricTotal = true
carbonEmissionsRef.value.changeToYear(); // 调用子组件的方法
}
});
} else if (key === '6') {
tabId.value = 5;
energyType.value = 'HEAT_SUPPLY'
nextTick(() => {
if (provideHotRef.value) {
provideHotRef.value.electricTotal = true
provideHotRef.value.changeToYear(); // 调用子组件的方法
}
});
}
};
</script>

View File

@@ -45,7 +45,12 @@
border: 2px solid transparent;
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
.title-img {
padding-top: 6px;
margin-top: 6px;
}
.title-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.imgText {

View File

@@ -121,6 +121,7 @@
treeData.value = area;
// 默认选择第一项
treeData.value[0].selected = true;
tabs1Ref.value.changeArea(treeData.value[0]);
};
// 分区业务 =====================================================

View File

@@ -34,7 +34,7 @@
</template>
</div>
</div>
<!-- 照明回路部分 -->
<!-- 空调分组部分 -->
<div>
<div class="circuit-area">
<div class="circuit-tab"></div>
@@ -136,7 +136,7 @@
title="刷新将会取消已作出的修改"
ok-text="确定"
cancel-text="取消"
@confirm="refresh"
@confirm="refresh(false)"
@cancel="changeCancel">
<button class="flushed">刷新</button>
</a-popconfirm>
@@ -186,7 +186,7 @@
<div class="btn-item">
<div class="left"> 亮度 </div>
<div class="right">
<!-- 由于数字0也会被判为false故只判断undefined null -->
<!-- 数字0也会被判为false故只判断undefined null -->
<span>{{
item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
}}</span>
@@ -231,7 +231,7 @@
title="此操作将提交以上修改内容"
ok-text="确定"
cancel-text="取消"
@click="submitChangeList"
@confirm="submitChangeList"
@cancel="changeCancel">
<button class="execute">执行</button>
</a-popconfirm>
@@ -320,7 +320,7 @@
const togglePlan2 = () => {
// 如果未交互任何按钮
if (handleButton.value == '') {
return message.info('请选择照明回路');
return message.info('请选择空调分组');
}
// 获取最近交互过的按钮
const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
@@ -399,7 +399,6 @@
});
// 照明回路的按钮切换
const changeLine = (button: any) => {
console.log(button, 'button2mmmm');
// 存储一次按钮ID用于禁用/启用交互
handleButton.value = button.id;
// 根据按钮状态,展示禁用/启用按钮文本
@@ -482,7 +481,7 @@
// 操作线路总数
let sum = 0;
// 没有这个选项的线路
let nofind = 0;
// let nofind = 0;
// 修改无效的数量
let checked = 0;
// 可修改的数量
@@ -515,19 +514,20 @@
return (checked += 1);
// 修改
} else {
alert(v.treePid + '---' + before + '---' + after);
changed += 1;
resetScene(item.childList);
changeScene(v1, before, after);
changeScene(v1, before, after, item);
v1.executeStatus.value = 1;
}
// 不符合条件的全部重置
} else {
v1.executeStatus.value = 0;
}
});
}
});
}
});
alert(`共修改${sum}${checked}条无需修改,${nofind}条不具有该选项,${changed}`);
message.info(`共修改${sum}数据,其中${checked}条无需修改,${changed}修改有`);
// 如果是单选模式
} else {
// 如果按钮已经被选择
@@ -565,15 +565,15 @@
/** 控制场景 - 按钮切换通用方法(单选 & 多选)
* @param button 当前被选中的场景(单选 & 多选)
* @param before 当前回路场景的初始值(撤回时需使用)
* @param after 修改后的值(修改时使用)
* @param anyButton 多选时使用
*/
const changeScene = (button: any, before: string | undefined, after: string) => {
console.log(changeList.value, 'vvvvvvvvvvvvvv-----', button, 'bbbbbbbb---------');
const changeScene = (button: any, before: string | undefined, after: string, line = null) => {
// 通过分组ID查询之前是否修改过
const result = changeList.value.find((item: any, index: number) => {
item.index = index;
return item.deviceGroup == button.treePid.split('_')[0];
});
console.log(result, 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr');
// 如果已产生过修改
if (result) {
// 改回了原有的值,则从数组中移除
@@ -587,12 +587,20 @@
}
// 如果未产生过修改
} else {
let nowButton;
// 多选,则使用第四个参数
if (line) {
nowButton = line;
// 如果是单选则使用thisbotton2
} else {
nowButton = thisButton2.value;
}
changeList.value.push({
// 回路
deviceGroup: thisButton2.value.dataCode,
deviceGroupName: thisButton2.value.name,
deviceGroup: nowButton.dataCode,
deviceGroupName: nowButton.name,
// 分区
region: thisButton2.value.treePid,
region: nowButton.treePid,
regionName: '',
// 修改前
before,
@@ -608,7 +616,7 @@
// 执行按钮loading
const buttonLoading = ref(false);
// 刷新
const refresh = () => {
const refresh = (reload = false) => {
// 关闭执行弹窗
executeVisible.value = false;
// 设置当前选中的序列
@@ -616,10 +624,12 @@
// 重置选中样式 和 按钮选中状态
emit('changeArea', ['1']);
emit('reset');
// 将所有修改改回
changeList.value.forEach((item: any) => {
resetChangeList(item);
});
// 如果是中途刷新(对应提交后刷新),需要将所有修改改回
if (!reload) {
changeList.value.forEach((item: any) => {
resetChangeList(item);
});
}
changeList.value = [];
// 默认选择第一个楼层
let data = props.treeData[0];
@@ -644,6 +654,10 @@
if (item.scene == v3.dataCode) {
v3.executeStatus.value = 0;
}
if (!item.before) {
console.log(item, '没有这个选项');
v3.executeStatus.value = 0;
}
// 旧值选中
if (item.before == v3.dataCode) {
v3.executeStatus.value = 1;
@@ -695,6 +709,7 @@
const diffList = ref([]);
//撤销
const delBtn = (obj: any) => {
console.log(obj, '当前选择的修改内容');
// 将treeData对应回路的数据改回数据以后端为准
obj.scene = obj.stateAfter.scene.value;
obj.before = obj.stateBefore.scene.value;
@@ -722,9 +737,9 @@
projectId: state.projectId,
siteId: state.siteId,
})
.then((res) => {
.then(() => {
emit('reload');
refresh();
refresh(true);
});
};

View File

@@ -1,7 +1,9 @@
<template>
<div class="div-add">
<button class="add" @click="addModal">添加</button>
<button class="add" style="margin-left: 20px" @click="sendTable">执行</button>
<a-popconfirm title="是否提交以上修改?" ok-text="确定" cancel-text="取消" @confirm="sendTable">
<button class="add" style="margin-left: 20px">执行</button>
</a-popconfirm>
</div>
<div class="buttons">
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
@@ -81,6 +83,7 @@
import { ref, onMounted } from 'vue';
// 请求
import { http } from '/nerv-lib/util/http';
import { planManage } from '/@/api/planManage';
import { airConditionControl } from '/@/api/airConditionControlSystem';
import { message } from 'ant-design-vue';
import { getEnum } from '/@/api';
@@ -138,7 +141,12 @@
// 获得表格数据
const getTable = () => {
http
.get(airConditionControl.getTableData, { projectId: state.projectId, siteId: state.siteId })
.get(planManage.getTableData, {
projectId: state.projectId,
siteId: state.siteId,
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
deviceType: 2,
})
.then((res) => {
dataSource.value = res.data;
});
@@ -156,7 +164,7 @@
};
// 将对表格的修改统一发送
const sendTable = () => {
http.post(airConditionControl.submitTableData, dataSource.value).then((res) => {
http.post(airConditionControl.submitTableData, dataSource.value).then(() => {
message.success('操作成功');
getTable();
getLeftPlan();
@@ -179,7 +187,12 @@
// 获得穿梭框原始数据
const getLeftPlan = () => {
http
.get(airConditionControl.getTransData, { projectId: state.projectId, siteId: state.siteId })
.get(planManage.getTransData, {
projectId: state.projectId,
siteId: state.siteId,
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
deviceType: 2,
})
.then((res) => {
let arr = [];
res.data.forEach((item: any) => {
@@ -205,7 +218,7 @@
if (targetKeys.value.length < 1) {
return message.info('没有选择任何计划');
}
http.post(airConditionControl.submitTransData, targetKeys.value).then(() => {
http.post(planManage.submitTransData, targetKeys.value).then(() => {
message.success('添加成功');
// 如果发送成功,则刷新表格
getTable();

View File

@@ -2,14 +2,13 @@
<div style="width: 100%; height: 100%; display: flex; overflow: hidden">
<div class="legend-box">
<template v-for="(item, index) in legend" :key="index">
<div
class="legend-box-item"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}"
@click="selectLegend(item, index)">
<div class="legend-box-item-img">
<img style="width: 42px" :src="item.url" />
<div class="legend-box-item" @click="selectLegend(item, index)">
<div
class="legend-box-item-img"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}">
<img :src="item.url" />
</div>
<div class="legend-box-item-name">
{{ item.name }}
@@ -169,11 +168,11 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
/* 图片 */
import temperature from '../image/airConditioningSystem/temperature.png';
import people from '../image/airConditioningSystem/people.png';
import freshAir from '../image/airConditioningSystem/freshAir.png';
import airConditioner from '../image/airConditioningSystem/airConditioner.png';
import floorHeating from '../image/airConditioningSystem/floorHeating.png';
import temperature from '../image/airConditioningSystem/temperature.svg';
import people from '../image/airConditioningSystem/people.svg';
import freshAir from '../image/airConditioningSystem/freshAir.svg';
import airConditioner from '../image/airConditioningSystem/airConditioner.svg';
import floorHeating from '../image/airConditioningSystem/floorHeating.svg';
import selectImg from '../image/airConditioningSystem/selectImg.png';
// 温泉颜色
import sunRed from '../image/airConditioningSystem/sunRed.png';
@@ -524,36 +523,71 @@
</script>
<style lang="less">
.legend-box {
width: 5%;
width: 80px;
height: 100%;
background-color: rgba(33, 40, 54, 0.95);
border-radius: 4px 0px 0px 4px;
padding: 4px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 5px;
.legend-box-item {
width: 100%;
height: 90px;
padding: 10px 0;
cursor: pointer;
background-size: 75%;
background-repeat: no-repeat;
background-position: center; /* 把图片背景居中 */
display: flex;
flex-direction: column;
align-items: center;
width: 70px;
height: 70px;
.legend-box-item-img {
width: 100%;
height: 50px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 50px;
height: 60px;
padding-top: 5px;
flex: 1;
cursor: pointer;
background-size: 100% 100%;
text-align: center;
img {
transition: all ease 0.2s;
}
img:hover {
transform: scale(1.1);
}
}
.legend-box-item-name {
width: 100%;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
transform: translateY(-5px);
text-align: center;
color: white;
font-size: 12px;
margin-top: 6px;
font-size: 13px;
}
}
// .legend-box-item {
// border: 1px solid red;
// width: 100%;
// height: 60px;
// padding: 0px 0;
// cursor: pointer;
// .legend-box-item-img {
// border: 2px solid orange;
// width: 100%;
// height: 50px;
// display: flex;
// justify-content: center; /* 水平居中 */
// align-items: center; /* 垂直居中 */
// position: relative;
// background-size: 150% 150%;
// background-repeat: no-repeat;
// img {
// position: absolute;
// transform: scale(1.2);
// }
// }
// .legend-box-item-name {
// width: 100%;
// display: flex;
// justify-content: center; /* 水平居中 */
// align-items: center; /* 垂直居中 */
// color: white;
// font-size: 12px;
// }
// }
}
.map-box {
width: 95%;

View File

@@ -1,7 +1,7 @@
<template>
<div class="map-box">
<!-- 开关按钮 -->
<div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
<div class="drawer-box-ins" v-if="!visible" @click="toggleDrawer">
<DoubleLeftOutlined class="drawer-icon" style="color: white" />
</div>
<!-- 门位置 -->
@@ -262,7 +262,7 @@
// 总容器与抽屉按钮
// 抽屉打开按钮
.drawer-box-in {
.drawer-box-ins {
width: 24px;
height: 24px;
border-radius: 2px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23616" data-name="组 23616" transform="translate(-1080.919 -410.333)">
<g id="组_23408" data-name="组 23408" transform="translate(179.349 -27.487)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
</g>
</g>
<g id="组_23601" data-name="组 23601" transform="translate(914.719 359.997)">
<path id="路径_30239" data-name="路径 30239" d="M190.167,59.733H180.114a.9.9,0,0,0-.914.914V74.966a.917.917,0,0,0,.914.914h10.023a.9.9,0,0,0,.914-.914V60.647a.873.873,0,0,0-.883-.914Zm-6.58,10.054h-.792a.457.457,0,0,1,0-.914h.792a.457.457,0,0,1,0,.914Zm6.58-3.96H180.114V60.647h10.054Z" transform="translate(0)" fill="#0dffff"/>
<path id="路径_30240" data-name="路径 30240" d="M356.236,231.314h-.792a.457.457,0,0,1,0-.914h.792a.457.457,0,1,1,0,.914Z" transform="translate(-172.649 -167.62)" fill="#0dffff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="哇哇哇哇" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<path id="路径_30969" data-name="路径 30969" d="M2.538,0A1.015,1.015,0,0,0,1.523,1.015V12.2a1.015,1.015,0,1,0,2.03,0V1.015A1.015,1.015,0,0,0,2.538,0M5.075,0H4.994A1.015,1.015,0,0,0,3.979,1.015V12.2a1.015,1.015,0,0,0,1.015,1.015h.081A1.015,1.015,0,0,0,6.09,12.2V1.015A1.015,1.015,0,0,0,5.075,0M7.613,0A1.015,1.015,0,0,0,6.6,1.015V12.2a1.015,1.015,0,1,0,2.03,0V1.015A1.015,1.015,0,0,0,7.613,0m2.538,0A1.015,1.015,0,0,0,9.135,1.015V12.2a1.015,1.015,0,1,0,2.03,0V1.015A1.015,1.015,0,0,0,10.151,0m2.538,0a1.015,1.015,0,0,0-1.015,1.015V12.2a1.015,1.015,0,0,0,2.03,0V1.015A1.015,1.015,0,0,0,12.688,0M0,4.06A1.015,1.015,0,0,0,1.015,5.075V3.045A1.015,1.015,0,0,0,0,4.06m0,5.6a1.015,1.015,0,0,0,1.015,1.015V8.641A1.015,1.015,0,0,0,0,9.656M14.23,8.641v2.03a1.015,1.015,0,0,0,0-2.03Zm0-5.59V5.075a1.015,1.015,0,0,0,0-2.03" transform="translate(12 10.76)" fill="#0dffff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="_123" data-name="123" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<g id="组_23600" data-name="组 23600" transform="translate(11.099 9.004)">
<path id="路径_30237" data-name="路径 30237" d="M17.206,13.929l-6.519-5.9a1.272,1.272,0,0,0-1.745,0l-6.519,5.9a.859.859,0,0,0,.565,1.489h.667v6.468a1.03,1.03,0,0,0,1.027,1.027h9.855a1.03,1.03,0,0,0,1.027-1.027V15.418h1.129a.836.836,0,0,0,.513-1.489Zm-4.414,5.39a3.505,3.505,0,0,1-3.285,1.54V18.7a1.3,1.3,0,0,1-.77-.308L7.35,19.884S5.862,19.216,5.862,16.7H8.018a1.3,1.3,0,0,1,.308-.873l-1.54-1.437A3.625,3.625,0,0,1,10.071,12.9v2.156a1.668,1.668,0,0,1,.873.359l1.489-1.54s1.386.821,1.386,3.285H11.662a.976.976,0,0,1-.257.667l1.386,1.489Z" transform="translate(-2.147 -7.68)" fill="#0dffff"/>
<path id="路径_30238" data-name="路径 30238" d="M454.795,567.435m-.821,0a.821.821,0,1,0,.821-.821A.821.821,0,0,0,453.974,567.435Z" transform="translate(-447.179 -558.208)" fill="#0dffff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23408" data-name="组 23408" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<path id="减去_1091" data-name="减去 1091" d="M12.737,15.289H5.349A3.124,3.124,0,0,1,2.395,11.15l.388-1.128A4.462,4.462,0,0,1,7,7.012h5.45a3.968,3.968,0,0,1,2.5.8l.083.06a.155.155,0,0,1-.081.279l-.043,0a1.558,1.558,0,0,0-.412-.044h-.1a3.783,3.783,0,0,0-1.664,7.182Zm1.8-.511h-.073a2.9,2.9,0,0,1,0-5.794h.073a2.9,2.9,0,0,1,0,5.795Zm-1.249-4.239h0l-1.439.869.655.106a3.87,3.87,0,0,0-.065.741,2.024,2.024,0,0,0,2.122,1.787,1.96,1.96,0,0,0,.44-.048,2.256,2.256,0,0,1-1.545-1.934,1.36,1.36,0,0,1,.025-.328l.853.111-.524-.652-.521-.652ZM14.5,12.212h0l.546.63.546.63.717-.459.675-.433-.652-.087a2.783,2.783,0,0,0,.041-.741,2.161,2.161,0,0,0-2.611-1.676,2.227,2.227,0,0,1,1.586,1.893,1.816,1.816,0,0,1,0,.328l-.848-.086ZM1.484,10.4h0l-.086,0a.722.722,0,0,1-.269-.068,1.7,1.7,0,0,1-1.078-2L.089,8.2.3,7.6A2.387,2.387,0,0,1,2.4,5.987l.161-.005H4.781l.054.008a.211.211,0,0,1,.055.386A6.621,6.621,0,0,0,2.641,8.324a7.045,7.045,0,0,0-.832,1.844.311.311,0,0,1-.263.229Zm8.153-4.19a3.1,3.1,0,1,1,3.1-3.1A3.109,3.109,0,0,1,9.637,6.209ZM4.068,5.553A1.665,1.665,0,1,1,5.733,3.888,1.667,1.667,0,0,1,4.068,5.553Z" transform="translate(10.784 9.438)" fill="#0dffff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" transform="translate(0 0)" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23608" data-name="组 23608" transform="translate(-901.57 -437.538)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.538)">
<g id="蒙版组_396" data-name="蒙版组 396" transform="translate(0 0)" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.286)">
<g id="组_23217" data-name="组 23217" transform="translate(0 50.198) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.42.794a.8.8,0,0,0-.689.4L.9,13.1a.8.8,0,0,0,0,.79L7.731,25.806a.8.8,0,0,0,.689.4H22.064a.8.8,0,0,0,.689-.4l6.831-11.911a.8.8,0,0,0,0-.79L22.753,1.193a.8.8,0,0,0-.689-.4H8.42M8.42,0H22.064a1.588,1.588,0,0,1,1.378.8l6.831,11.911a1.588,1.588,0,0,1,0,1.58L23.442,26.2a1.588,1.588,0,0,1-1.378.8H8.42a1.588,1.588,0,0,1-1.378-.8L.21,14.289a1.588,1.588,0,0,1,0-1.58L7.042.8A1.588,1.588,0,0,1,8.42,0Z" transform="translate(5.148 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.593,1a1,1,0,0,0-.867.5L1.131,16.487a1,1,0,0,0,0,.994L9.726,32.466a1,1,0,0,0,.867.5H27.759a1,1,0,0,0,.867-.5l8.595-14.986a1,1,0,0,0,0-.994L28.626,1.5a1,1,0,0,0-.867-.5H10.593m0-1H27.759a2,2,0,0,1,1.733,1L38.087,15.99a2,2,0,0,1,0,1.988L29.493,32.964a2,2,0,0,1-1.733,1H10.593a2,2,0,0,1-1.733-1L.265,17.978a2,2,0,0,1,0-1.988L8.86,1A2,2,0,0,1,10.593,0Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M18.9,0l8.595,14.986a2,2,0,0,1,0,1.988L18.9,31.96a2,2,0,0,1-1.733,1H0Z" transform="translate(9.676 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.8" rx="0.4" transform="translate(20.999 41.226)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.8" rx="0.4" transform="translate(20.999 8.226)" fill="#14ffff"/>
</g>
</g>
<path id="路径_30559" data-name="路径 30559" d="M16.349,8.773a.493.493,0,0,1-.493-.493A7.578,7.578,0,0,0,8.5.99.495.495,0,0,1,8.5,0h.094a8.555,8.555,0,0,1,8.235,8.165.517.517,0,0,1,0,.115.493.493,0,0,1-.493.493Zm-3.635-.2A4.428,4.428,0,1,1,8.287,4.14a4.428,4.428,0,0,1,4.428,4.436Zm-8.9-3.7L2.627,3.7a.591.591,0,1,1,.821-.821L4.632,4.058a.591.591,0,1,1-.821.821ZM3.132,8.535a.591.591,0,0,1-.587.591H.873a.591.591,0,0,1,0-1.183H2.545a.587.587,0,0,1,.587.587ZM3.81,12.19a.591.591,0,0,1,.821.821l-1.171,1.2a.591.591,0,1,1-.821-.821L3.822,12.2ZM8.287,13.7a.591.591,0,0,1,.591.591v1.676a.591.591,0,1,1-1.179,0v-1.68a.591.591,0,0,1,.587-.591Zm4.481-1.516,1.183,1.183a.591.591,0,0,1-.821.821l-1.2-1.171a.591.591,0,0,1,.821-.821Zm1.027-4.054V8.083h-.029A5.508,5.508,0,0,0,8.583,3.064a.542.542,0,0,1,.049-1.08.55.55,0,0,1,.144,0,6.97,6.97,0,0,1,6.1,5.992v.148a.542.542,0,1,1-1.08,0Z" transform="translate(11.218 9.308)" fill="#0dffff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.6513671875" height="14.65087890625" viewBox="0 0 14.6513671875 14.65087890625" fill="none">
<path d="M12.6509 -1.17188e-05L1.99995 -1.17188e-05C0.895384 -1.17188e-05 -4.68751e-05 0.895419 -4.68751e-05 1.99999L-4.68751e-05 12.6509C-4.68751e-05 13.7555 0.895384 14.6509 1.99995 14.6509L12.6509 14.6509C13.7555 14.6509 14.6509 13.7555 14.6509 12.6509L14.6509 1.99999C14.6509 0.895419 13.7555 -1.17188e-05 12.6509 -1.17188e-05ZM6.76406 4.16484C6.23629 4.16484 5.80858 3.73709 5.80855 3.20936L5.80858 3.20936C5.80858 2.68167 6.23629 2.25389 6.76406 2.25389C7.29173 2.25389 7.71953 2.68167 7.71953 3.20936C7.71953 3.73709 7.29173 4.16484 6.76406 4.16484ZM5.80855 7.5471L5.80855 5.12019C5.80855 4.79533 6.05697 4.54689 6.38183 4.54689L7.1462 4.54689C7.47106 4.54689 7.71953 4.79533 7.71953 5.12019L7.71953 5.63612L5.80858 7.5471L5.80855 7.5471ZM3.40053 11.6944L5.17775 11.6944C5.4835 11.6944 5.77012 11.5606 5.98034 11.3503L10.3183 7.01241L11.4839 7.01241C12.1146 7.01241 12.6306 6.49651 12.6306 5.86587C12.6306 5.23525 12.1146 4.71929 11.4839 4.71929L9.84051 4.71929C9.55385 4.71929 9.24811 4.85308 9.0379 5.06328L4.69998 9.40117L3.40053 9.40117C2.76991 9.40117 2.25395 9.91717 2.25395 10.5478C2.25395 11.1784 2.76991 11.6944 3.40053 11.6944Z" fill-rule="evenodd" fill="rgba(255, 188, 70, 1)" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.6513671875" height="14.65087890625" viewBox="0 0 14.6513671875 14.65087890625" fill="none">
<path d="M12.6509 -1.17188e-05L1.99995 -1.17188e-05C0.895384 -1.17188e-05 -4.68751e-05 0.895419 -4.68751e-05 1.99999L-4.68751e-05 12.6509C-4.68751e-05 13.7555 0.895384 14.6509 1.99995 14.6509L12.6509 14.6509C13.7555 14.6509 14.6509 13.7555 14.6509 12.6509L14.6509 1.99999C14.6509 0.895419 13.7555 -1.17188e-05 12.6509 -1.17188e-05ZM6.76406 4.16484C6.23629 4.16484 5.80858 3.73709 5.80855 3.20936L5.80858 3.20936C5.80858 2.68167 6.23629 2.25389 6.76406 2.25389C7.29173 2.25389 7.71953 2.68167 7.71953 3.20936C7.71953 3.73709 7.29173 4.16484 6.76406 4.16484ZM5.80855 7.5471L5.80855 5.12019C5.80855 4.79533 6.05697 4.54689 6.38183 4.54689L7.1462 4.54689C7.47106 4.54689 7.71953 4.79533 7.71953 5.12019L7.71953 5.63612L5.80858 7.5471L5.80855 7.5471ZM3.40053 11.6944L5.17775 11.6944C5.4835 11.6944 5.77012 11.5606 5.98034 11.3503L10.3183 7.01241L11.4839 7.01241C12.1146 7.01241 12.6306 6.49651 12.6306 5.86587C12.6306 5.23525 12.1146 4.71929 11.4839 4.71929L9.84051 4.71929C9.55385 4.71929 9.24811 4.85308 9.0379 5.06328L4.69998 9.40117L3.40053 9.40117C2.76991 9.40117 2.25395 9.91717 2.25395 10.5478C2.25395 11.1784 2.76991 11.6944 3.40053 11.6944Z" fill-rule="evenodd" fill="rgba(167, 66, 255, 1)" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z" fill="rgba(243, 97, 99, 1)" >
</path>
<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z" fill="rgba(243, 97, 99, 1)" >
</path>
<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z" fill="rgba(243, 97, 99, 1)" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z" fill="#FF7636" >
</path>
<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z" fill="#FF7636" >
</path>
<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z" fill="#FF7636" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z" fill="rgba(0, 255, 210, 1)" >
</path>
<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z" fill="rgba(0, 255, 210, 1)" >
</path>
<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z" fill="rgba(0, 255, 210, 1)" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z" fill="rgba(255, 188, 70, 1)" >
</path>
<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z" fill="rgba(255, 188, 70, 1)" >
</path>
<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z" fill=" rgba(255, 188, 70, 1)" >
</path>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_234qqqq08" data-name="组 234qqqq08" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<g id="组_23420" data-name="组 23420" transform="translate(10.561 10.596)">
<path id="路径_30582" data-name="路径 30582" d="M507.613,476.587q-.542,0-.541.85v1.32q0,.842.527.843.555,0,.554-.811v-1.3q0-.905-.541-.9Z" transform="translate(-498.084 -470.787)" fill="#0dffff"/>
<path id="路径_30583" data-name="路径 30583" d="M17.08,155.462a4.156,4.156,0,0,0-1.754-1.375,6.2,6.2,0,0,0-12-.233,4.118,4.118,0,0,0,.792,8.16h9.637a4.116,4.116,0,0,0,3.323-6.552Zm-9.71,2.891a.977.977,0,0,1-.894.408,1.226,1.226,0,0,1-1.04-.388,2.169,2.169,0,0,1-.289-1.286v-.862a2.181,2.181,0,0,1,.3-1.334,1.179,1.179,0,0,1,.965-.374,1.1,1.1,0,0,1,.9.332,1.583,1.583,0,0,1,.276,1.026H6.839a1.516,1.516,0,0,0-.077-.559.288.288,0,0,0-.291-.183q-.539,0-.538.849v1.32a1.16,1.16,0,0,0,.138.65.466.466,0,0,0,.406.194.312.312,0,0,0,.3-.2,1.842,1.842,0,0,0,.1-.708h.761a2.077,2.077,0,0,1-.261,1.119Zm3.484-1.261a2.189,2.189,0,0,1-.289,1.286,1.2,1.2,0,0,1-1.026.382,1.277,1.277,0,0,1-1.027-.366,2.069,2.069,0,0,1-.31-1.307v-.811A2.266,2.266,0,0,1,8.51,154.9a1.244,1.244,0,0,1,1.019-.377,1.158,1.158,0,0,1,1.061.424,2.585,2.585,0,0,1,.265,1.334v.816ZM12.7,158.3v.373H11.3a2.02,2.02,0,0,1,.082-.573,1.83,1.83,0,0,1,.411-.576l.224-.235a1.139,1.139,0,0,0,.191-.237.53.53,0,0,0,.049-.254c0-.2-.076-.3-.23-.3a.211.211,0,0,0-.213.1.988.988,0,0,0-.047.373h-.446v-.1q0-.746.7-.746a.7.7,0,0,1,.534.191.658.658,0,0,1,.177.469.976.976,0,0,1-.315.7l-.363.378a.7.7,0,0,0-.248.435H12.7Z" transform="translate(0 -149.333)" fill="#0dffff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23408qqww" data-name="组 23408qqww" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<g id="组_23422" data-name="组 23422" transform="translate(10.89 11.753)">
<path id="路径_30586" data-name="路径 30586" d="M625.319,233.15a3.208,3.208,0,0,1,2.849.653,1.78,1.78,0,0,0,.649-1.392c0-.958-.471-1.817-1.751-1.5a2.31,2.31,0,0,0-2.062-1.8,2.015,2.015,0,0,0-1.918,1.211A4.347,4.347,0,0,1,625.319,233.15Z" transform="translate(-612.688 -229.111)" fill="#0dffff"/>
<path id="路径_30587" data-name="路径 30587" d="M134.91,271.951c-.528-1.99-2.212-3.967-4.426-3.967-2.572,0-4.418,1.836-4.6,4.761a2.971,2.971,0,0,0-3.007,3.056c0,1.836,1.23,3.357,2.746,3.357h9.66a3.666,3.666,0,0,0,3.383-3.859C138.668,273.186,137.659,271.257,134.91,271.951Zm-7.624,5.308a.977.977,0,1,1,.977-.977A.977.977,0,0,1,127.285,277.259Zm2.194-4.111a.811.811,0,1,1,.811-.811A.811.811,0,0,1,129.479,273.148Zm2.829,2.617a.673.673,0,1,1,.673-.673A.673.673,0,0,1,132.308,275.766ZM135.635,277a1.032,1.032,0,1,1,1.032-1.032A1.032,1.032,0,0,1,135.635,277Z" transform="translate(-122.88 -267.176)" fill="#0dffff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

View File

@@ -0,0 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.3984375" height="51.1376953125" viewBox="0 0 49.3984375 51.1376953125" fill="none">
<g mask="url(#mask-160_6332)">
<path d="M17.107 38.1809C17.2488 38.4336 17.5132 38.5901 17.7969 38.5892L31.5281 38.5487C31.809 38.5478 32.0712 38.3922 32.2124 38.1423L39.1121 25.9313C39.2546 25.679 39.255 25.3653 39.1131 25.1126L32.2909 12.9583C32.149 12.7056 31.8846 12.5492 31.6009 12.5499L17.8698 12.5905C17.5888 12.5913 17.3267 12.7471 17.1856 12.9969L10.2858 25.2078C10.1433 25.4602 10.1428 25.7739 10.2846 26.0266L17.107 38.1809ZM16.4193 38.5892L9.59699 26.435C9.31249 25.9282 9.31334 25.3035 9.59925 24.7974L16.4989 12.5864C16.7824 12.0848 17.3034 11.7754 17.8675 11.7738L31.5986 11.7332C32.1676 11.7315 32.694 12.0431 32.9785 12.5499L39.8009 24.7042C40.0854 25.211 40.0846 25.8357 39.7986 26.3418L32.8989 38.5528C32.6154 39.0544 32.0945 39.3638 31.5304 39.3654L17.7992 39.406C17.2302 39.4077 16.7038 39.0961 16.4193 38.5892Z" fill="url(#linear_fill_160_6335)" >
</path>
<g opacity="0.2">
<path d="M15.1473 41.4354C15.3258 41.7534 15.6584 41.9503 16.0154 41.9492L33.2907 41.8982C33.6442 41.8972 33.974 41.7013 34.1517 41.387L42.8322 26.0242C43.0116 25.7067 43.0121 25.312 42.8337 24.994L34.2504 9.7026C34.0719 9.38465 33.7393 9.18777 33.3823 9.18881L16.107 9.23982C15.7536 9.24083 15.4237 9.43675 15.2461 9.75103L6.56549 25.1139C6.38611 25.4313 6.38558 25.826 6.56405 26.144L15.1473 41.4354ZM14.2821 41.9493L5.69887 26.6578C5.34089 26.0201 5.34199 25.2341 5.70175 24.5976L14.3824 9.23474C14.739 8.60353 15.3944 8.21429 16.1042 8.21223L33.3795 8.16128C34.0954 8.15912 34.7577 8.55108 35.1156 9.18876L43.6989 24.4802C44.0569 25.1179 44.0557 25.9039 43.696 26.5405L35.0154 41.9034C34.6588 42.5345 34.0034 42.9237 33.2936 42.9258L16.0183 42.9768C15.3024 42.9789 14.6401 42.5869 14.2821 41.9493Z" fill="url(#linear_fill_160_6336)" >
</path>
</g>
<g opacity="0.61">
<path d="M5.70189 24.5976L14.3825 9.23475C14.7391 8.60359 15.3946 8.21444 16.1043 8.21229L33.3796 8.16128C34.0955 8.15917 34.7579 8.55122 35.1157 9.1889L43.6991 24.4803L5.70189 24.5976Z" fill="url(#linear_fill_160_6337)" >
</path>
</g>
<rect x="21.4013671875" y="42.1572265625" width="7" height="0.822857141494751" rx="0.4114285707473755" fill="#14FFFF" >
</rect>
<rect x="21.4013671875" y="8.2138671875" width="7" height="0.822857141494751" rx="0.4114285707473755" fill="#14FFFF" >
</rect>
</g>
<path fill="#0DFFFF" d="M24.9021 31.407C22.2896 31.407 20.1733 29.2494 20.1733 26.5868C20.1733 23.9249 24.9017 18.2322 24.9017 18.2322C24.9017 18.2322 29.6308 23.9245 29.6308 26.5864C29.6323 29.2475 27.5145 31.4066 24.9024 31.4066M24.9024 16.8799C24.9024 16.8799 19.1592 23.3742 19.1592 26.593C19.1592 29.8118 21.7304 32.42 24.9021 32.42C28.0737 32.42 30.6446 29.8106 30.6446 26.5934C30.6446 23.3762 24.9021 16.8807 24.9021 16.8807">
</path>
<path fill="#0DFFFF" d="M24.9021 31.0677C22.4768 31.0677 20.5107 29.1154 20.5107 26.7072C20.5107 24.2986 22.7932 25.5179 24.902 26.7072C27.0199 27.9008 29.293 24.2986 29.293 26.7072C29.293 29.1154 27.3269 31.0677 24.902 31.0677">
</path>
<defs>
<mask id="mask-160_6332" style="mask-type:alpha" maskUnits="userSpaceOnUse">
<rect x="5.4013671875" y="7.7001953125" width="39" height="36" fill="#FFFFFF" >
</rect>
</mask>
<linearGradient id="linear_fill_160_6335" x1="9.627471923828125" y1="25.517822265625" x2="39.83018493652344" y2="25.6212158203125" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#04DFF8" />
<stop offset="0.25519099831581116" stop-color="#0B4975" />
<stop offset="0.7028830051422119" stop-color="#1A5A80" />
<stop offset="1" stop-color="#02E4FB" />
</linearGradient>
<linearGradient id="linear_fill_160_6336" x1="5.73724365234375" y1="25.50390625" x2="43.735755920410156" y2="25.634033203125" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#06E6FF" />
<stop offset="0.175805002450943" stop-color="#004FBF" />
<stop offset="0.8368269801139832" stop-color="#0055CC" />
<stop offset="1" stop-color="#44D2FF" />
</linearGradient>
<linearGradient id="linear_fill_160_6337" x1="25.498855590820312" y1="23.3702392578125" x2="25.194908142089844" y2="8.79345703125" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#06CAF2" stop-opacity="0" />
<stop offset="1" stop-color="#1491FF" />
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1,41 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23614" data-name="组 23614" transform="translate(-19 -377)">
<g id="组_23408" data-name="组 23408" transform="translate(19 377)">
<g id="组_23223" data-name="组 23223">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
</g>
</g>
<path id="路径_30610" data-name="路径 30610" d="M96,68.934v3.947h12.829V68.934Zm11.348,2.96H103.4v-.987h3.947ZM96,64v3.947h12.829V64Zm11.348,2.96H103.4v-.987h3.947ZM96,73.868v3.947h12.829V73.868Zm11.348,2.96H103.4v-.987h3.947Z" transform="translate(-64 323.665)" fill="#0dffff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="_123344" data-name="123344" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<g id="组_23421" data-name="组 23421" transform="translate(13.758 9.179)">
<path id="路径_30584" data-name="路径 30584" d="M133.743,15.756a4.774,4.774,0,0,1-4.729-4.82c0-2.662,4.728-8.355,4.728-8.355s4.729,5.692,4.729,8.354a4.774,4.774,0,0,1-4.728,4.82m0-14.527S128,7.723,128,10.942a5.743,5.743,0,1,0,11.485,0c0-3.217-5.742-9.713-5.742-9.713" transform="translate(-128 -1.229)" fill="#0dffff"/>
<path id="路径_30585" data-name="路径 30585" d="M221.3,562.257a4.376,4.376,0,0,1-4.391-4.361c0-2.409,2.282-1.189,4.391,0s4.391-2.409,4.391,0a4.376,4.376,0,0,1-4.391,4.361" transform="translate(-215.557 -548.069)" fill="#0dffff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -0,0 +1,39 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_2qqq3408" data-name="组 2qqq3408" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<path id="路径_30609" data-name="路径 30609" d="M27.721,2.752c.3.058.6.1.884.178A3.385,3.385,0,0,1,31.09,5.724a5.688,5.688,0,0,1-.153,2.612,2.122,2.122,0,0,0-2.79.568,3.226,3.226,0,0,0-1.624-1.71A2.694,2.694,0,0,1,25.2,5.549a2.341,2.341,0,0,1,2.023-2.742c.123-.007.246-.035.368-.054Zm3.389,9.762a2.147,2.147,0,0,0,.963-2.736,3.566,3.566,0,0,0,2.4-.6,3.8,3.8,0,0,1,1.19-.354,2.148,2.148,0,0,1,2.282,1.814A2.766,2.766,0,0,1,36.6,13.5a3.49,3.49,0,0,1-4.016.057A16.776,16.776,0,0,1,31.11,12.514Zm-3.651-1.966a2.144,2.144,0,0,0,1.894,2.189,3.576,3.576,0,0,0-.687,2.337,3.805,3.805,0,0,1-.33,1.324,2.282,2.282,0,0,1-3.831.157,3.561,3.561,0,0,1,1.343-5.281c.5-.277,1.041-.472,1.611-.725Zm2.4,1.322a1.387,1.387,0,1,1,.989-.408A1.383,1.383,0,0,1,29.86,11.869Z" transform="translate(-10.357 7.208)" fill="#0dffff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="36" viewBox="0 0 39 36">
<defs>
<clipPath id="clip-path">
<rect id="矩形_16511" data-name="矩形 16511" width="39" height="36" fill="none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#04dff8"/>
<stop offset="0.255" stop-color="#0b4975"/>
<stop offset="0.703" stop-color="#1a5a80"/>
<stop offset="1" stop-color="#02e4fb"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="0.743" y1="0.024" x2="0.256" y2="0.978" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06e6ff"/>
<stop offset="0.176" stop-color="#004fbf"/>
<stop offset="0.837" stop-color="#05c"/>
<stop offset="1" stop-color="#44d2ff"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="0.357" y1="0.535" x2="0.811" y2="0.747" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#06caf2" stop-opacity="0"/>
<stop offset="1" stop-color="#1491ff"/>
</linearGradient>
</defs>
<g id="组_23408qqq" data-name="组 23408qqq" transform="translate(-901.57 -437.82)">
<g id="组_23223" data-name="组 23223" transform="translate(901.57 437.82)">
<g id="蒙版组_396" data-name="蒙版组 396" clip-path="url(#clip-path)">
<g id="组_23218" data-name="组 23218" transform="translate(-4.999 -7.947)">
<g id="组_23217" data-name="组 23217" transform="translate(0 51.632) rotate(-90)">
<path id="多边形_141" data-name="多边形 141" d="M8.61.9a.792.792,0,0,0-.7.393L1.081,13.209a.793.793,0,0,0,.01.8L8.216,26.086a.839.839,0,0,0,.709.41l13.937.169a.792.792,0,0,0,.7-.393L30.39,14.36a.793.793,0,0,0-.01-.8L23.255,1.483a.839.839,0,0,0-.709-.41L8.61.9M8.6.1,22.537.273a1.674,1.674,0,0,1,1.417.821l7.125,12.081a1.581,1.581,0,0,1,.02,1.592l-6.83,11.912a1.58,1.58,0,0,1-1.4.787L8.934,27.3a1.674,1.674,0,0,1-1.417-.821L.392,14.394A1.581,1.581,0,0,1,.372,12.8L7.2.891A1.58,1.58,0,0,1,8.6.1Z" transform="translate(5.296 20.226) rotate(-30)" fill="url(#linear-gradient)"/>
<path id="多边形_141-2" data-name="多边形 141" d="M10.832,1.137a1,1,0,0,0-.879.495L1.36,16.618a1,1,0,0,0,.012,1l8.964,15.2a1.056,1.056,0,0,0,.891.516l17.534.212a1,1,0,0,0,.879-.495l8.594-14.986a1,1,0,0,0-.012-1l-8.964-15.2a1.056,1.056,0,0,0-.891-.516L10.832,1.137M10.82.131,28.354.343a2.106,2.106,0,0,1,1.783,1.033l8.964,15.2a1.989,1.989,0,0,1,.025,2L30.532,33.564a1.988,1.988,0,0,1-1.758.99L11.24,34.341a2.106,2.106,0,0,1-1.783-1.033L.493,18.11a1.989,1.989,0,0,1-.025-2L9.062,1.121A1.988,1.988,0,0,1,10.82.131Z" transform="translate(0 19.176) rotate(-30)" opacity="0.2" fill="url(#linear-gradient-2)"/>
<path id="多边形_141-3" data-name="多边形 141" d="M19.3.234l8.964,15.2a1.989,1.989,0,0,1,.025,2L19.7,32.422a1.988,1.988,0,0,1-1.758.99L.408,33.2Z" transform="translate(9.952 14.75) rotate(-30)" opacity="0.61" fill="url(#linear-gradient-3)"/>
</g>
<rect id="矩形_16509" data-name="矩形 16509" width="7" height="0.823" rx="0.411" transform="translate(20.999 42.404)" fill="#14ffff"/>
<rect id="矩形_16510" data-name="矩形 16510" width="7" height="0.823" rx="0.411" transform="translate(20.999 8.461)" fill="#14ffff"/>
</g>
</g>
<g id="组_23486" data-name="组 23486" transform="translate(12.814 10.981)">
<path id="路径_30568" data-name="路径 30568" d="M195.274,14.038a.938.938,0,0,1-.965-.965V12.9h8.745a.315.315,0,0,0,.292-.292V1.316a.315.315,0,0,0-.292-.292H195.6a.315.315,0,0,0-.292.292v.79c0,.2-.088.292-.292.292h-.585c-.2,0-.292-.088-.292-.292V.965A.938.938,0,0,1,195.1,0h8.218a.953.953,0,0,1,1.024.965V12.927a.982.982,0,0,1-.175.731.9.9,0,0,1-.673.38h-8.218Z" transform="translate(-192.613 0)" fill="#0dffff"/>
<path id="路径_30569" data-name="路径 30569" d="M90.161,113.63H83.317l-.117-.117,3.159-11,.088-.117h6.727c.234,0,.234.117.234.117Zm0,0" transform="translate(-83.2 -100.996)" fill="#0dffff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@@ -1,44 +1,143 @@
<template>
<div class="map-box">
<div class="map">
<liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
</div>
<div class="left-box">
<liftInfo
v-for="(item, index) in liftBox"
:key="index"
:liftInfo="item"
@click="clickLift(item)" />
<a-drawer
v-model:visible="visible"
class="left-item"
:width="600"
:forceRender="preload"
placement="right"
:body-style="{
backgroundColor: 'rgba(0, 0, 0, 1)',
overflow: 'hidden',
position: 'relative',
}"
:closable="false"
id="drawer"
:maskStyle="{ 'background-color': 'rgba(0, 0, 0,0.5)' }">
<a-tabs :activeKey="'1'">
<a-tab-pane key="1" tab="日志">
<liftPage ref="leftPage" @clickDrawer="clickDrawer" />
</a-tab-pane>
</a-tabs>
</a-drawer>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import liftInfo from './liftInfo.vue';
import liftPage from './liftPage.vue';
// 请求
// 初始化 ===========================================================
//弹窗
const visible = ref(false);
// 预加载flag获得分区数据后预加载抽屉防止获取ref报错
const preload = ref(false);
//选择的电梯
const selctLeft = ref({});
// table页面 ref
const leftPage = ref(null);
// 初始化 ===========================================================
onMounted(() => {});
// tab页部分 ========================================================
const liftBox = ref([
{
name: '办公区域扶梯A',
name: '1站台西侧扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '245px', bottom: '230px' },
styleText: { left: '10%', bottom: '33%' },
},
{
name: '办公区域扶梯B',
name: '2站台西侧扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '3%', bottom: '52%' },
},
{
name: '2站台东侧扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '48%', bottom: '69%' },
},
{
name: '1站台东侧扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '65%', bottom: '62%' },
},
{
name: '办公东区扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '78%', bottom: '42%' },
},
{
name: '办公西区扶梯',
workState: 1,
faultState: 2,
direction: 1,
type: 2,
isLeft: true,
styleText: { left: '15%', bottom: '15%' },
},
{
name: '1站台直梯',
workState: 0,
faultState: 3,
direction: 0,
type: 1,
isLeft: false,
styleText: { left: '700px', bottom: '360px' },
styleText: { left: '35%', bottom: '50%' },
},
{
name: '2站台直梯',
workState: 0,
faultState: 3,
direction: 0,
type: 1,
isLeft: false,
styleText: { left: '52%', bottom: '52%' },
},
]);
//点击获取详情
const clickLift = (item: any) => {
visible.value = true;
console.log(item, '获取详细日志');
selctLeft.value = item;
setTimeout(() => {
leftPage.value.toggle(selctLeft.value);
}, 100);
// 开始预加载
preload.value = true;
};
const clickDrawer = () => {
visible.value = false;
};
</script>
<style lang="less" scoped>
.map-box {
.left-box {
// 颜色变量,用于区别颜色
// 正常 - 开启 - 上行 -下行
--on: #0dffa4;
@@ -56,10 +155,24 @@
--size: 40px;
width: 100%;
height: 100%;
.map {
width: 1280px;
height: 720px;
background-image: url(../image/bg.jpg);
}
position: relative;
border-radius: 4px;
background-image: url(../image/bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
}
:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
color: white !important;
}
:deep(.ant-tabs-ink-bar) {
background: linear-gradient(180deg, rgba(86, 221, 253, 1) 0%, rgba(25, 176, 255, 1) 100%);
}
:deep(.ant-tabs-tabpane) {
color: white;
padding: 20px 20px 0px 20px;
width: 100%;
height: 950px;
overflow: hidden;
}
</style>

View File

@@ -26,26 +26,73 @@
</div>
</div>
<!-- 是否故障 -->
<!-- 维修故障告警 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
<img
:src="
{ '0': stateNormal, '1': stateRepair, '2': stateFault, '3': stateAlarm }[3]
"
alt="" />
</div>
</div>
</div>
<div class="item-text">开启</div>
<div
class="item-text"
:style="{
color: {
'0': 'rgba(0, 255, 210, 1)', //正常
'1': 'rgba(255, 188, 70, 1)', //维修
'2': 'rgba(255, 118, 54, 1)', //故障
'3': 'rgba(243, 97, 99, 1)', //告警
}[3],
}"
>{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[3] }}</div
>
</div>
<!-- 如何运行 -->
<!-- 上行 下行 暂停 急停 未知 -->
<div class="item">
<div class="item-box">
<div class="icon">
<div class="icon-item">
<img src="../image/liftState/lift-normal.svg" alt="" />
<img
:src="
{
'0': liftNormal,
'1': liftNormal,
'2': liftPause,
'3': liftStop,
'4': liftUnknown,
}[2]
"
alt="" />
</div>
</div>
</div>
<div class="item-text">开启</div>
<div
class="item-text"
:style="{
color: {
'0': 'rgba(0, 255, 210, 1)', //上行
'1': 'rgba(0, 255, 210, 1)', //下行
'2': 'rgba(255, 188, 70, 1)', //暂停
'3': 'rgba(243, 97, 99, 1)', //急停
'4': 'rgba(167, 66, 255, 1)', //未知
}[2],
}"
>{{
{
'0': '上行', //上行
'1': '下行', //下行
'2': '暂停', //暂停
'3': '急停', //急停
'4': '未知', //未知
}[2]
}}</div
>
</div>
</div>
</div>
@@ -56,6 +103,15 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
//图片
import stateRepair from '../image/liftState/state-repair.svg'; //维修
import stateFault from '../image/liftState/state-fault.svg'; //故障
import stateAlarm from '../image/liftState/state-alarm.svg'; //告警
import stateNormal from '../image/liftState/state-normal.svg'; //正常
import liftNormal from '../image/liftState/lift-normal.svg'; //上下行
import liftStop from '../image/liftState/lift-stop.svg'; //急停
import liftUnknown from '../image/liftState/lift-unknown.svg'; //未知
import liftPause from '../image/liftState/lift-pause.svg'; //暂停
// 请求
@@ -118,8 +174,8 @@
.info-box {
// 字体颜色变量
--text: rgb(20, 255, 255);
width: 250px;
height: 130px;
width: 224.54px;
height: 110px;
display: flex;
gap: 5px;
flex-direction: column;
@@ -138,8 +194,9 @@
.dot {
display: inline-block;
width: 2px;
height: 16px;
height: 12px;
vertical-align: middle;
margin-top: -4px;
background: var(--text);
}
// 标题
@@ -165,22 +222,22 @@
justify-content: center;
// border: 1px solid red;
.icon {
width: 55px;
height: 55px;
width: 45px;
height: 45px;
background-image: url(../image/box.svg);
background-size: 130% 130%;
background-repeat: no-repeat;
background-position: left -8px top -8px;
background-position: left -6.5px top -3px;
// border: 1px solid red;
position: relative;
.icon-item {
position: absolute;
width: 20px;
height: 20px;
left: 0;
width: 16px;
height: 16px;
left: 1px;
right: 0;
bottom: 0;
top: 0;
top: -1px;
margin: auto;
img {
width: 100%;
@@ -190,6 +247,7 @@
}
}
.item-text {
margin-top: 2px;
height: 20px;
text-align: center;
font-size: 12px;

View File

@@ -0,0 +1,279 @@
<template>
<div style="width: 100%; height: 100%; overflow: hidden">
<div style="width: 100%; height: 50px; display: flex">
<img
v-if="selctLeft.type == 1"
style="width: 42px; height: 42px; margin-left: -6px"
src="../image/liftState/straightLadder.png"
alt="" />
<img
v-else-if="selctLeft.type == 2"
style="width: 42px; height: 42px; margin-left: -6px"
src="../image/liftState/escalator.png"
alt="" />
<div style="margin-left: 6px; font-size: 20px; line-height: 28px">
{{ selctLeft.name }}
</div>
</div>
<!-- 左侧抽屉的关闭按钮 -->
<div class="drawer-box-out" @click="clickDrawer()">
<DoubleRightOutlined class="drawer-icon" style="color: white" />
</div>
<div style="width: 100%; height: calc(100% - 50px); display: flex; position: relative">
<a-table
style="width: 100%"
:columns="column"
:data-source="dataSource"
:pagination="pagination">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'switch'">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
:style="{
border: {
'0': '1px solid rgba(0, 255, 210, 1)', //2
'1': '1px solid rgba(191, 205, 226, 1)', //关闭
}[record.switch],
color: {
'0': 'rgba(0, 255, 210, 1)', //正常
'1': 'rgba(191, 205, 226, 1)', //关闭
}[record.switch],
}"
>{{ { '0': '开启', '1': '关闭' }[record.switch] }}</a-tag
>
</template>
<template v-if="column.dataIndex === 'state'">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
:style="{
border: {
'0': '1px solid rgba(0, 255, 210, 1)', //正常
'1': '1px solid rgba(255, 188, 70, 1)', //维修
'2': '1px solid rgba(255, 118, 54, 1)', //故障
'3': '1px solid rgba(243, 97, 99, 1)', //告警
}[record.state],
color: {
'0': 'rgba(0, 255, 210, 1)', //正常
'1': 'rgba(255, 188, 70, 1)', //维修
'2': 'rgba(255, 118, 54, 1)', //故障
'3': 'rgba(243, 97, 99, 1)', //告警
}[record.state],
}"
>{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[record.state] }}</a-tag
>
</template>
<template v-if="column.dataIndex === 'lift'">
<a-tag
style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
:style="{
border: {
'0': '1px solid rgba(0, 255, 210, 1)', //上行
'1': '1px solid rgba(0, 255, 210, 1)', //下行
'2': '1px solid rgba(255, 188, 70, 1)', //暂停
'3': '1px solid rgba(243, 97, 99, 1)', //急停
'4': '1px solid rgba(167, 66, 255, 1)', //未知
}[record.lift],
color: {
'0': 'rgba(0, 255, 210, 1)', //上行
'1': 'rgba(0, 255, 210, 1)', //下行
'2': 'rgba(255, 188, 70, 1)', //暂停
'3': 'rgba(243, 97, 99, 1)', //急停
'4': 'rgba(167, 66, 255, 1)', //未知
}[record.lift],
}"
>{{
{
'0': '上行', //上行
'1': '下行', //下行
'2': '暂停', //暂停
'3': '急停', //急停
'4': '未知', //未知
}[record.lift]
}}</a-tag
>
</template>
</template>
</a-table>
</div>
</div>
</template>
<script setup lang="ts">
import { DoubleRightOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
const emit = defineEmits(['clickDrawer']);
const selctLeft = ref({});
// 改变页码
const handleChangePage = (current: number, pageSize: number) => {
pagination.value.current = current;
pagination.value.pageSize = pageSize;
};
const dataSource = ref([
{ time: '2022-03-01 10:00:00', state: '0', switch: '0', lift: 1 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 0 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 0 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
{ time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
{ time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
]);
const pagination = ref({
total: dataSource.value.length,
size: 'small',
current: 1,
pageSize: 10,
showQuickJumper: false,
showLessItems: false,
showSizeChanger: false,
responsive: true,
showTotal: (total: number, range: any) => (total && range ? `` : ''), //显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录
onChange: handleChangePage,
});
const column = [
{
title: '执行时间',
dataIndex: 'time',
key: 'time',
width: 140,
},
{
title: '开关',
dataIndex: 'switch',
key: 'switch',
width: 80,
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
width: 80,
},
{
title: '模式',
dataIndex: 'lift',
key: 'lift',
width: 80,
},
];
const toggle = (data: any) => {
pagination.value.current = 1;
selctLeft.value = data;
};
const clickDrawer = () => {
emit('clickDrawer');
};
defineExpose({
toggle,
});
</script>
<style scoped lang="less">
:deep(.ant-table-thead > tr) {
height: 30px !important;
}
:deep(.ant-table-tbody > tr) {
height: 30px !important;
}
:deep(.ant-table-thead > tr > th) {
background-color: #1a2230;
border: 1px solid rgba(163, 192, 243, 0.8);
color: white;
text-align: center;
font-weight: normal !important;
padding: 12px !important;
}
:deep(.ant-table-tbody > tr > td) {
background-color: rgba(0, 0, 0, 0.9) !important;
color: white;
border: 1px solid rgba(163, 192, 243, 0.8);
text-align: center;
padding: 12px !important;
}
:deep(.ant-table-row:hover td) {
background: rgba(0, 0, 0, 0.9) !important;
cursor: pointer;
}
:deep(.ant-tabs-tab-btn) {
font-size: 20px;
font-weight: bold;
color: #fff !important;
}
//分页
:deep(.ant-pagination-item) {
background-color: rgba(0, 0, 0, 1) !important;
border: 1px solid rgba(147, 200, 243, 1) !important;
border-radius: 2px !important;
margin: 0 8px !important;
}
:deep(.ant-pagination-item a) {
color: rgba(12, 140, 246, 1) !important;
}
:deep(.ant-pagination-item-active) {
border-radius: 2px !important;
background: rgba(12, 140, 246, 1) !important;
}
:deep(.ant-pagination-item-active a) {
color: white !important;
}
:deep(.ant-pagination-prev) {
background-color: rgba(0, 0, 0, 1) !important;
border: 1px solid rgba(147, 200, 243, 1) !important;
}
:deep(.ant-pagination-next) {
background-color: rgba(0, 0, 0, 1) !important;
border: 1px solid rgba(147, 200, 243, 1) !important;
}
:deep(.anticon) {
color: rgba(12, 140, 246, 1) !important;
}
:deep(.ant-table-pagination) {
display: flex;
position: absolute;
bottom: 0;
right: 0;
}
:deep(.ant-spin-container) {
height: 100% !important;
}
:deep(.ant-spin-nested-loading) {
height: 100% !important;
}
//分页 在右边 取消
// :deep(.ant-table-pagination-right) {
// justify-content: normal !important;
// }
// 抽屉关闭按钮
.drawer-box-out {
width: 24px;
height: 24px;
border-radius: 2px;
position: absolute;
right: 576px;
z-index: 2;
top: 50%;
margin: auto;
background: #268aff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 0 8px 8px 0;
color: white;
}
:deep(.anticon) {
color: #fff !important;
}
</style>

View File

@@ -45,7 +45,12 @@
border: 2px solid transparent;
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
.title-img {
padding-top: 6px;
margin-top: 6px;
}
.title-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.imgText {

View File

@@ -7,6 +7,7 @@
v-for="(item, index) in floorData"
:key="index"
class="btn-item"
:style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }"
@click="changeFloor(item.childList, item.dataCode)"
>{{ item.name }}</button
>
@@ -56,7 +57,12 @@
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板">
<tabs1 ref="tabs1Ref" @changeArea="changeArea" @reset="reset" :treeData="treeData" />
<tabs1
ref="tabs1Ref"
@changeArea="changeArea"
@reset="reset"
@reload="reload"
:treeData="treeData" />
</a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render>
<tabs2 />
@@ -103,9 +109,9 @@
// 所有楼层的数据
const floorData = ref([]);
// 当前选择的楼层
const thisFloor = ref(1);
const thisFloor = ref('1');
// 左上角分层切换
const changeFloor = (area: any, floor: number) => {
const changeFloor = (area: any, floor: string) => {
thisFloor.value = floor;
// 重置数据
reset();
@@ -115,6 +121,7 @@
treeData.value = area;
// 默认选择第一项
treeData.value[0].selected = true;
tabs1Ref.value.changeArea(treeData.value[0]);
};
// 分区业务 =====================================================
@@ -232,7 +239,7 @@
};
// 获得所有分区
const getAllArea = () => {
const getAllArea = (realod = false) => {
http.get(lightingManage.getTree, { projectId: state.projectId }).then((res) => {
const data = res.data;
floorData.value = data;
@@ -254,12 +261,23 @@
});
});
});
// 默认展示 线路 1-1
treeData.value = data[0].childList;
// 默认展示 线路 1-1,重载则使用thisFloor当前选中的楼层数
let index = 0;
if (realod) {
data.find((item: any, i: number) => {
if (item.dataCode == thisFloor.value) {
return (index = i);
}
});
}
treeData.value = data[index].childList;
// 开始预加载
preload.value = true;
});
};
const reload = () => {
getAllArea(true);
};
// 设备业务 小灯泡 ==============================================

View File

@@ -5,12 +5,6 @@
<div class="light-area">
<div class="light-area-tab"></div>
<span class="light-area-text"> 照明区域 </span>
<button
class="plan"
:class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
@click="togglePlan">
{{ isPlanEnabled ? '计划启用' : '计划禁用' }}
</button>
</div>
<!-- 照明区域按钮部分 -->
<div class="area">
@@ -142,7 +136,7 @@
title="刷新将会取消已作出的修改"
ok-text="确定"
cancel-text="取消"
@confirm="refresh"
@confirm="refresh(false)"
@cancel="changeCancel">
<button class="flushed">刷新</button>
</a-popconfirm>
@@ -233,7 +227,14 @@
<div style="width: 100%; height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="executeVisible = false">取消</button>
<button class="execute" @click="submitChangeList">执行</button>
<a-popconfirm
title="此操作将提交以上修改内容"
ok-text="确定"
cancel-text="取消"
@confirm="submitChangeList"
@cancel="changeCancel">
<button class="execute">执行</button>
</a-popconfirm>
</div>
</div>
</a-spin>
@@ -277,18 +278,12 @@
/** 向上传递方法
* @method changeArea 用于控制俯视图的选中状态
* @method reset 用于重置按钮区
* @method reload 用于刷新一次页面
*/
const emit = defineEmits(['changeArea', 'reset']);
const emit = defineEmits(['changeArea', 'reset', 'reload']);
// 照明区域业务 =======================================================================
// 计划启用状态
const isPlanEnabled = ref(false);
// 计划启用切换事件
const togglePlan = () => {
isPlanEnabled.value = !isPlanEnabled.value;
};
// 按钮区展开与收起状态
const showAllButtonsArea = ref(false);
// 被选中的分区 默认为1 用于选中样式渲染
@@ -396,15 +391,9 @@
// 储存当前选中的回路
const thisButton2 = ref({
code: '',
dataCode: '',
name: '',
pcode: '',
mode: {
value: -1,
},
scene: {
value: -1,
},
treePid: '',
childList: [],
});
// 照明回路的按钮切换
@@ -443,11 +432,15 @@
// 发生了选中事件
thisButton2.value = button;
// 获得启动模式
thisButton3.value = button.childList.find((item: any) => {
if (item.selectAble) {
return item.childList ? item.childList : [];
}
});
if (button.childList) {
thisButton3.value = button.childList.find((item: any) => {
if (item.selectAble) {
return item.childList ? item.childList : [];
}
});
} else {
thisButton3.value = { childList: [] };
}
} else {
// 未发生选中 或 多选的其中一个按钮被取消
resetMode();
@@ -479,52 +472,113 @@
// 控制场景业务 =====================================================================
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
// 当前选中的回路数据
const data = thisButton2.value;
// 修改前的数据
let before = data.scene.value;
// 修改后的数据
let after = button4.value;
const selectButton4 = (button4: any) => {
const after = button4.dataCode;
let before = '';
// 如果是多选模式
if (!singleSelection.value) {
// 操作线路总数
let sum = 0;
// 没有这个选项的线路
// let nofind = 0;
// 修改无效的数量
let checked = 0;
// 可修改的数量
let changed = 0;
buttons2.value.forEach((item: any) => {
// 取出当前选中的值 before
if (item.childList) {
let mode = item.childList.find((lv3: any) => {
return lv3.selectAble;
});
if (mode.childList) {
mode.childList.forEach((mode: any) => {
// 取出当前选中的模式
if (mode.executeStatus.value == 1) {
before = mode.dataCode;
}
});
}
}
// 查看当前回路,哪些被选中
if (item.selected) {
changeScene(item, item.scene.value, after);
item.scene.value = after;
item.childList.forEach((v: any) => {
if (v.childList) {
v.childList.forEach((v1: any) => {
// 查看是否包含当前要修改的值
if (v1.dataCode == after) {
sum += 1;
// 已经被选中,无需修改的内容
if (before == after) {
return (checked += 1);
// 修改
} else {
changed += 1;
changeScene(v1, before, after, item);
v1.executeStatus.value = 1;
}
// 不符合条件的全部重置
} else {
v1.executeStatus.value = 0;
}
});
}
});
}
});
thisButton2.value.scene.value = after;
return message.info('已修改X项');
message.info(`共修改${sum}条数据,其中${checked}条无需修改,${changed}条修改有效`);
// 如果是单选模式
} else {
// 如果没有产生实质性的修改(修改前后相同,则跳出)
if (before === after) {
// 如果按钮已经被选择
if (button4.executeStatus.value == 1) {
return message.info('未产生实际修改');
// 产生了修改
} else {
changeScene(data, before, after);
// 获得线路当前的场景
let before;
thisButton2.value.childList.find((item: any) => {
if (item.childList) {
item.childList.forEach((i: any) => {
if (i.executeStatus.value == 1) {
return (before = i.dataCode);
}
});
}
});
// 移除选中场景
resetScene(thisButton2.value.childList);
changeScene(button4, before, after);
}
}
};
// 切换场景前,需要把其他场景移除
const resetScene = (list: any) => {
list.forEach((item: any) => {
if (item.childList) {
item.childList.forEach((i: any) => {
i.executeStatus.value = 0;
});
}
});
};
/** 控制场景 - 按钮切换通用方法(单选 & 多选)
* @param button 当前被选中的回路(单选 & 多选)
* @param before 回路场景的初始值(撤回时需使用)
* @param after 回路场景被修改后的值
* @param anyButton 多选时使用
*/
const changeScene = (button: any, before: number, after: number) => {
// 查询之前是否修改过
const changeScene = (button: any, before: string | undefined, after: string, line = null) => {
// 通过分组ID查询之前是否修改过
const result = changeList.value.find((item: any, index: number) => {
item.index = index;
return item.deviceGroup == button.dataCode;
return item.deviceGroup == button.treePid.split('_')[0];
});
// 如果已产生过修改
if (result) {
// 改回了原有的值,则从数组中移除
if (after == result.before) {
changeList.value.splice(result.index, 1);
// 修改为新值,则只修改after
// 修改为新值,则只修改场景
} else {
result.scene = after;
// 临时flag用后移除
@@ -532,20 +586,27 @@
}
// 如果未产生过修改
} else {
let nowButton;
// 多选,则使用第四个参数
if (line) {
nowButton = line;
// 如果是单选则使用thisbotton2
} else {
nowButton = thisButton2.value;
}
changeList.value.push({
// 回路
deviceGroup: button.dataCode,
deviceGroupName: button.name,
deviceGroup: nowButton.dataCode,
deviceGroupName: nowButton.name,
// 分区
region: button.pcode,
region: nowButton.treePid,
regionName: '',
// 修改前
before: before,
// 修改后
before,
scene: after,
});
}
thisButton2.value.scene.value = after;
button.executeStatus.value = 1;
};
// 底部按钮区 ======================================================================
@@ -554,7 +615,7 @@
// 执行按钮loading
const buttonLoading = ref(false);
// 刷新
const refresh = () => {
const refresh = (reload = false) => {
// 关闭执行弹窗
executeVisible.value = false;
// 设置当前选中的序列
@@ -562,16 +623,51 @@
// 重置选中样式 和 按钮选中状态
emit('changeArea', ['1']);
emit('reset');
// 如果是中途刷新,需要将所有修改改回
if (!reload) {
changeList.value.forEach((item: any) => {
resetChangeList(item);
});
}
changeList.value = [];
// 默认选择第一个楼层
let data = props.treeData[0];
// 清空保存的修改
changeList.value = [];
// 默认选中
data.selected = true;
// 默认选中 1-1 分区 回路
buttons2.value = data.childList;
resetMode();
};
// 刷新时,将已修改的值改回
const resetChangeList = (item: any) => {
props.treeData.find((v: any) => {
if (item.region == v.dataCode) {
v.childList.find((v1: any) => {
// 找到被修改过的线路
if (item.deviceGroup == v1.dataCode) {
v1.childList.forEach((v2: any) => {
if (v2.childList) {
v2.childList.forEach((v3: any) => {
// 将新值移除
if (item.scene == v3.dataCode) {
v3.executeStatus.value = 0;
}
if (!item.before) {
console.log(item, '没有这个选项');
v3.executeStatus.value = 0;
}
// 旧值选中
if (item.before == v3.dataCode) {
v3.executeStatus.value = 1;
}
});
}
});
}
});
}
});
};
// 右下角的执行事件
const showModal = () => {
if (!changeList.value.length) {
@@ -580,7 +676,8 @@
buttonLoading.value = true;
http
.post(lightingManage.getChangeList, {
infoList: changeList.value,
sceneList: changeList.value,
lockList: [],
projectId: state.projectId,
siteId: state.siteId,
})
@@ -612,13 +709,9 @@
const delBtn = (obj: any) => {
console.log(obj, '当前选择的修改内容');
// 将treeData对应回路的数据改回数据以后端为准
const area = props.treeData.find((item: any) => {
return item.code == obj.region;
});
const line = area.childList.find((item: any) => {
return item.code == obj.deviceGroup;
});
line.scene.value = obj.stateBefore.scene.value;
obj.scene = obj.stateAfter.scene.value;
obj.before = obj.stateBefore.scene.value;
resetChangeList(obj);
// 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
changeList.value = changeList.value.filter((item: any) => {
return item.deviceGroup !== obj.deviceGroup;
@@ -633,22 +726,29 @@
executeVisible.value = false;
}
};
const submitChangeList = () => {};
// 提交本次修改
const submitChangeList = () => {
http
.post(lightingManage.submitChangeList, {
sceneList: changeList.value,
lockList: [],
projectId: state.projectId,
siteId: state.siteId,
})
.then(() => {
emit('reload');
refresh(true);
});
};
// 其他业务 ========================================================================
// 将当前选择的回路置空
const resetMode = () => {
thisButton2.value = {
code: '',
dataCode: '',
name: '',
pcode: '',
mode: {
value: -1,
},
scene: {
value: -1,
},
treePid: '',
childList: [],
};
};

View File

@@ -1,6 +1,18 @@
<template>
<div class="div-add">
<button class="add" @click="addModal">添加</button>
<a-popconfirm title="是否提交以上修改?" ok-text="确定" cancel-text="取消" @confirm="sendTable">
<button class="add" style="margin-left: 20px">执行</button>
</a-popconfirm>
</div>
<div class="buttons">
<span style="color: red; padding-top: 20px">*以下修改需执行后生效</span>
<div class="plans">
<button class="plan enabled" style="margin-right: 10px" @click="togglePlan(1)">
计划启用
</button>
<button class="plan disabled" @click="togglePlan(3)"> 计划禁用 </button>
</div>
</div>
<table class="custom-table table1">
<thead>
@@ -17,35 +29,25 @@
<td>{{ index + 1 }}</td>
<td>{{ row.startTime }}</td>
<td>{{ row.planName }}</td>
<td v-if="row.planStatus == '2'">
<td>
<button
style="
font-size: 12px;
background: rgba(57, 215, 187, 0.1);
color: rgb(57, 215, 187);
border: 1px solid rgb(57, 215, 187);
">
已执行
</button>
</td>
<td v-if="row.planStatus == '1'">
<button
style="
font-size: 12px;
background: rgba(243, 97, 99, 0.1);
border: 1px solid rgba(243, 97, 99);
color: rgba(243, 97, 99);
">
待执行
:style="{
'font-size': '12px',
width: '5em',
background: 'rgb(47, 47, 47)',
color: setStateColor(row.executeStatus.value),
border: '1px solid',
}">
{{ setStateText(row.executeStatus.value) }}
</button>
</td>
<td>
<div class="tabReboot" @click="restartPlan(row.id)"></div>
<div class="tabReboot" @click="startPlan(row)"></div>
<a-popconfirm
title="此操作将永久删除该数据"
title="此操作将除该数据"
ok-text="确定"
cancel-text="取消"
@confirm="deletePlan(row.id)">
@confirm="deletePlan(row)">
<div class="tabDelete">删除</div>
</a-popconfirm>
</td>
@@ -82,39 +84,90 @@
// 请求
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { planManage } from '/@/api/planManage';
import { message } from 'ant-design-vue';
import { getEnum } from '/@/api';
// 全局变量
import { items } from '/@/store/item';
// 初始化 ===========================================================
onMounted(() => {
getStateEnum();
// 计划表格
getTable();
// 穿梭框原始数据
getLeftPlan();
});
// 全局变量
const state = items();
const getStateEnum = async () => {
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
stateList.value = enumData.data;
};
// tab页部分 ========================================================
// 状态枚举
const stateList = ref([]);
// 设置枚举的颜色 与 文本
const setStateColor = (state: number) => {
if (state == 0) {
return '#ccc';
} else if (state == 1) {
return 'orange';
} else if (state == 2) {
return 'rgb(57, 215, 187)';
} else if (state == 3) {
return 'rgb(255, 0, 0)';
}
};
// 设置枚举的文本
const setStateText = (state: number) => {
const res = stateList.value.find((item) => {
return item.value == state;
});
return res.label;
};
// 计划启用/禁用事件
const togglePlan = (state: number) => {
dataSource.value.forEach((item: any) => {
item.executeStatus.value = state;
});
};
// 表格数据
const dataSource = ref([]);
// 获得表格数据
const getTable = () => {
http.get(lightingManage.getPlanTable, {}).then((res) => {
dataSource.value = res.data;
});
http
.get(planManage.getTableData, {
projectId: state.projectId,
siteId: state.siteId,
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
deviceType: 1,
})
.then((res) => {
dataSource.value = res.data;
});
};
// 删除表格中的计划
const deletePlan = (id: String) => {
http.delete(lightingManage.deletePlan, [id]).then(() => {
message.success('操作成功');
getTable();
});
};
// 重启表格中的计划
const restartPlan = (id: String) => {
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
// 删除表格中的计划(将当前任意状态,修改为未启用 =0
const deletePlan = (row: any) => {
row.executeStatus.value = 0;
};
// 重启表格中的计划(将当前任意状态,修改为待执行 = 1
const startPlan = (row: any) => {
if (row.executeStatus.value == 1) {
return message.info('该数据已是待执行状态,无需再次修改');
}
row.executeStatus.value = 1;
};
// 将对表格的修改统一发送
const sendTable = () => {
http.post(lightingManage.submitTableData, dataSource.value).then((res) => {
message.success('操作成功');
getTable();
getLeftPlan();
});
};
@@ -133,16 +186,23 @@
const transferData = ref([]) as any;
// 获得穿梭框原始数据
const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then((res) => {
let arr = [];
res.data.forEach((item: any) => {
arr.push({
key: item.id,
title: item.planName,
http
.get(planManage.getTransData, {
projectId: state.projectId,
siteId: state.siteId,
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6进水阀,7排水泵)
deviceType: 1,
})
.then((res) => {
let arr = [];
res.data.forEach((item: any) => {
arr.push({
key: item.id,
title: item.planName,
});
});
transferData.value = arr;
});
transferData.value = arr;
});
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
@@ -158,7 +218,7 @@
if (targetKeys.value.length < 1) {
return message.info('没有选择任何计划');
}
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
http.post(planManage.submitTransData, targetKeys.value).then(() => {
message.success('添加成功');
// 如果发送成功,则刷新表格
getTable();
@@ -172,7 +232,31 @@
</script>
<style lang="less" scoped>
@import './dialogStyle.less';
.buttons {
display: flex;
justify-content: space-between;
.plan {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
width: 88px;
height: 32px;
color: white;
cursor: pointer;
margin: 15px 0;
vertical-align: middle;
}
.plan.enabled {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
}
.plan.disabled {
background-color: red;
}
.plan:disabled {
cursor: not-allowed;
}
}
// 右下角添加按钮
.div-add {
height: 64px;
@@ -182,7 +266,7 @@
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
margin-right: 10px;
.add {
width: 74px;
height: 40px;
@@ -200,7 +284,7 @@
.custom-table {
border-collapse: collapse;
width: 416px;
height: 60px;
height: 40px;
color: rgba(255, 255, 255, 1);
}
.custom-table th,
@@ -211,7 +295,6 @@
text-align: center;
}
.table1 {
margin-top: 20px;
width: 100%;
border: 1px solid rgba(255, 255, 255);
border-radius: 5px;

View File

@@ -0,0 +1,131 @@
<template>
<div class="box-model">
<div class="box-model-title title">
{{ dataSource.title }}
</div>
<div class="box-model-bottom">
<div class="box-model-item">
<div style="width: 100%; height: 50%">
<img width="40" src="../../image/ventilationSystem/state-success.png" />
</div>
<!--正常 故障 维修 告警 -->
<span
:style="{
color: {
'1': '#0dffff',
'2': 'rgba(255, 118, 54, 1)',
'3': 'rgba(255, 188, 70, 1)',
'4': 'rgba(243, 97, 99, 1)',
}[1],
}">
正常
</span>
</div>
<div v-if="dataSource.type === 'fan'" class="box-model-item">
<div style="width: 100%; height: 50%">
<img width="40" src="../../image/ventilationSystem/highSpeed.png" />
</div>
<!-- 低速 中速 高速 关闭 -->
<span
:style="{
color: [
'rgba(85, 209, 255, 1)',
'rgba(0, 144, 255, 1)',
'rgba(87, 87, 255, 1)',
'rgba(191, 205, 226, 1)',
][2],
fontSize: '12px',
}">
高速启动</span
>
</div>
<div v-if="dataSource.type !== 'fan'" class="box-model-item">
<div style="width: 100%; height: 50%">
<img width="40" src="../../image/ventilationSystem/state-open.png" />
</div>
<!-- 开启 关闭 -->
<span
:style="{
color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
fontSize: '12px',
}">
开启</span
>
</div>
<div v-if="dataSource.type === 'airCurtain'" class="box-model-item">
<div style="width: 100%; height: 50%">
<img width="40" src="../../image/ventilationSystem/hotAir.png" />
</div>
<!-- 冷风 热风 -->
<span
:style="{
color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1],
fontSize: '12px',
}">
热风
</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const props = defineProps({
dataSource: {
type: Object,
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
},
});
</script>
<style lang="less" scoped>
.box-model {
min-width: 162px;
height: 110px;
background: inherit;
background-color: rgba(2, 29, 71, 0.9);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(13, 255, 255, 1);
border-radius: 8px;
.title {
position: relative;
padding-left: 9px;
&::before {
content: '';
position: absolute;
left: 10px;
top: 90%;
transform: translateY(-50%);
height: 10px;
width: 2.5px;
border-radius: 1px;
background-color: #0dffff;
}
}
.box-model-title {
width: 100%;
height: 20px;
font-size: 12px;
color: #0dffff;
padding: 12px 20px;
}
.box-model-bottom {
width: auto;
height: 70px;
margin-top: 12px;
display: flex;
color: white;
font-size: 12px;
display: flex;
}
.box-model-item {
width: 80px;
height: 100%;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
text-align: center; /* 文字水平居中 */
flex-wrap: wrap;
}
}
</style>

View File

@@ -0,0 +1,168 @@
.out-dialog {
position: fixed;
right: 496px;
width: 500px;
height: 100%;
z-index: 0;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
color: rgb(255, 83, 0);
background: black;
display: flex;
padding: 25px;
flex-direction: column;
transition: all ease 0.5s;
.content {
overflow-y: scroll;
.div-operation {
display: inline-block;
width: 3px;
height: 13px;
opacity: 1;
border-radius: 1px;
background: rgba(67, 136, 251, 1);
}
.text-operation {
display: inline-block;
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-weight: 700;
margin-left: 5px;
}
.j-box {
background-color: #000;
opacity: 1;
z-index: 99999;
overflow-y: scroll;
.journal {
padding: 1% 3%;
width: 100%;
height: 150px;
background-color: rgba(0, 0, 0);
border-radius: 12px;
border: 2px solid transparent;
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
.title-img {
padding-top: 6px;
}
}
.imgText {
display: flex;
align-items: center;
justify-content: space-between;
.ztzm {
display: flex;
align-items: center;
}
.cxbtn {
color: rgba(255, 255, 255, 1);
border: none;
border-radius: 6px;
width: 59.79px;
height: 32px;
opacity: 1;
background: linear-gradient(
180deg,
rgba(255, 187, 0, 1) 0%,
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%
);
cursor: pointer;
}
}
.btn-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-row-gap: 15px;
.btn-item {
text-align: center;
display: flex;
align-content: space-between;
.left {
width: 70px;
height: 35px;
line-height: 35px;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
);
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-weight: 400;
}
.right {
width: 140px;
height: 35px;
line-height: 35px;
:first-child {
color: white;
}
span {
vertical-align: middle;
}
img {
padding: 0 5px;
}
}
}
}
}
}
.button-box {
width: 100%;
box-sizing: border-box;
padding: 10px;
height: 60px;
position: absolute;
background-color: transparent;
bottom: 0;
left: 0;
right: 0;
.execute {
margin-right: 10px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
border: 0;
margin-left: 10px;
}.cancel {
margin-right: 10px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
border: 0;
margin-left: 10px;
}
.execute {
background: rgb(67, 136, 251);
color: white;
}
.cancel {
background: white;
color: black;
}
}
}
.fade-enter-active, .fade-leave-active {
transform: translateX(0px);
}
.fade-enter-from, .fade-leave-to {
transform: translateX(496px);
}

View File

@@ -0,0 +1,201 @@
<template>
<a-spin :spinning="isLoading">
<!-- 排风扇 -->
<div>
<div class="circuit-area">
<div class="circuit-tab"></div>
<span class="circuit-text">排风扇</span>
<div class="btn2">
<button
class="openPlan"
:class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
@click="togglePlan2">
{{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
</button>
<a-switch
v-model:checked="selectAllCheckbox"
:disabled="singleSelection"
:class="{
'blue-background': selectAllCheckbox,
'grey-background': !selectAllCheckbox,
}"
@change="toggleAllSelection" />
<button class="allBtn">全选</button>
<button class="both" @click="selectAll">
{{ singleSelection ? '多选' : '单选' }}
</button>
</div>
</div>
<div class="btnArea">
<template v-if="!showAllButtons">
<button
v-for="(button, index) in limitedButtons2"
:key="index"
:class="{ btn: true, selected: button.selected }"
class="zmhlbtn"
@click="changeLine(button)">
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
<div style="margin-top: 10px" v-if="limitedButtons2.length > 0">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
</div>
</template>
<template v-else>
<button
v-for="(button, index) in buttons2"
:key="index"
:class="{ btn: true, selected: button.selected }"
class="zmhlbtn"
@click="changeLine(button)">
<stop-outlined v-if="button.ctrlStatus" />
{{ button.name }}
</button>
<div style="margin-top: 10px" v-if="buttons2.length > 0">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
</div>
</template>
</div>
</div>
<!-- 控制模式部分 -->
<div>
<div class="control-area">
<div class="control-tab"></div>
<span class="control-text"> 控制模式 </span>
</div>
<!-- 控制模式按钮部分 -->
<div class="control-mode-btn-area" v-show="thisButton2.code">
<button
v-for="(button3, index) in controlMode"
:key="index"
class="btn"
:disabled="button3.value != 3"
:class="{ selected: thisButton2.mode.value == button3.value }"
@click="selectButton3(button3)">
{{ button3.label }}
</button>
</div>
</div>
<!-- 控制场景 -->
<div>
<div class="control-area">
<div class="control-tab"></div>
<span class="control-text"> 控制场景 </span>
</div>
<!-- 控制模式按钮部分 -->
<div class="control-mode-btn-area" v-show="thisButton2.code">
<button
v-for="(button3, index) in controlMode"
:key="index"
class="btn"
:disabled="button3.value != 3"
:class="{ selected: thisButton2.mode.value == button3.value }"
@click="selectButton3(button3)">
{{ button3.label }}
</button>
</div>
</div>
<div class="div-add">
<button class="cancel" @click="addModal">刷新</button>
<button class="add" @click="addModal">执行</button>
</div>
</a-spin>
</template>
<script setup lang="ts">
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
import { ref, computed, onMounted } from 'vue';
const isLoading = ref(false);
// 开关启用/禁用状态
const isPlanEnabled2 = ref(true);
// 按钮区展开与收起状态
const showAllButtons = ref(false);
// 全选状态
const selectAllCheckbox = ref(false);
// 控制模式枚举
const controlMode = ref([]);
// 是否单选,状态
let singleSelection = ref(true);
// 照明回路所有按钮
const buttons2 = ref([]);
// 默认最多展示8个按钮
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 开关启用/禁用切换事件
const togglePlan2 = () => {};
// 内侧弹窗显隐
const executeVisible = ref<boolean>(false);
const submitChangeList = () => {};
// 多选与单选切换事件
const selectAll = () => {
selectAllCheckbox.value = false;
singleSelection.value = !singleSelection.value;
};
// 储存当前选中的回路
const thisButton2 = ref({
code: '',
name: '',
pcode: '',
mode: {
value: -1,
},
scene: {
value: -1,
},
});
// 控制模式 - 按钮切换
const selectButton3 = (button3: any) => {
let checked = thisButton2.value.mode;
console.log(button3.value, '---', checked.value);
// 如果点击了相同的按钮,则未作出修改
if (checked.value === button3.value) {
return;
}
checked.value = button3.value;
};
// 全选切换事件switch
const toggleAllSelection = () => {};
onMounted(() => {});
</script>
<style lang="less" scoped>
@import './dialogStyle.less';
@import './tabs1.less';
.div-add {
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #606879;
width: 496px;
.add {
width: 74px;
height: 40px;
opacity: 1;
border-radius: 4px;
background: #2778ff;
border: #2778ff;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
margin-right: 20px;
}
.cancel {
width: 74px;
height: 40px;
opacity: 1;
border-radius: 4px;
background: #ffffff;
border: #ffffff;
font-size: 14px;
font-weight: 400;
color: #666666;
cursor: pointer;
margin-right: 12px;
}
}
</style>

View File

@@ -0,0 +1,248 @@
<template>
<div class="div-add">
<button class="add" @click="addModal">添加</button>
</div>
<table class="custom-table table1">
<thead>
<tr :style="{ background: 'rgba(35,45,69)' }">
<th>序号</th>
<th>执行时间</th>
<th>计划名称</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in dataSource" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ row.startTime }}</td>
<td>{{ row.planName }}</td>
<td v-if="row.planStatus == '2'">
<button
style="
font-size: 12px;
background: rgba(57, 215, 187, 0.1);
color: rgb(57, 215, 187);
border: 1px solid rgb(57, 215, 187);
">
已执行
</button>
</td>
<td v-if="row.planStatus == '1'">
<button
style="
font-size: 12px;
background: rgba(243, 97, 99, 0.1);
border: 1px solid rgba(243, 97, 99);
color: rgba(243, 97, 99);
">
待执行
</button>
</td>
<td>
<div class="tabReboot" @click="restartPlan(row.id)">重启</div>
<a-popconfirm
title="此操作将永久删除该条数据"
ok-text="确定"
cancel-text="取消"
@confirm="deletePlan(row.id)">
<div class="tabDelete">删除</div>
</a-popconfirm>
</td>
</tr>
</tbody>
</table>
<div class="out-dialog" v-if="addVisible">
<div class="content" v-if="addVisible">
<div class="div-operation"></div>
<span class="text-operation">计划库</span>
</div>
<div style="margin-top: 20px">
<a-transfer
v-model:target-keys="targetKeys"
:data-source="transferData"
show-search
:filter-option="filterOption"
:render="(item: any) => item.title"
@change="handleChange"
:style="{ color: 'rgba(255,255,255,1)' }"
@search="handleSearch"
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
</div>
<div style="width: 100%; height: 60px"></div>
<div class="button-box">
<button class="cancel" @click="addVisible = false">取消</button>
<button class="execute" @click="sendPlan">确定</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 请求
import { http } from '/nerv-lib/util/http';
import { lightingManage } from '/@/api/IlluminationInfo';
import { message } from 'ant-design-vue';
// 初始化 ===========================================================
onMounted(() => {
// 计划表格
getTable();
// 穿梭框原始数据
getLeftPlan();
});
// tab页部分 ========================================================
// 表格数据
const dataSource = ref([]);
// 获得表格数据
const getTable = () => {
http.get(lightingManage.getPlanTable, {}).then((res) => {
dataSource.value = res.data;
});
};
// 删除表格中的计划
const deletePlan = (id: String) => {
http.delete(lightingManage.deletePlan, [id]).then(() => {
message.success('操作成功');
getTable();
});
};
// 重启表格中的计划
const restartPlan = (id: String) => {
http.post(lightingManage.restartPlan, { planId: id }).then(() => {
message.success('操作成功');
getTable();
});
};
// tab页弹窗部分 ====================================================
// 添加弹窗控制变量
const addVisible = ref(false);
// 打开弹窗
const addModal = () => {
addVisible.value = true;
};
// 穿梭框部分 =======================================================
// 穿梭框数据
const transferData = ref([]) as any;
// 获得穿梭框原始数据
const getLeftPlan = () => {
http.get(lightingManage.getLeftPlan, {}).then((res) => {
let arr = [];
res.data.forEach((item: any) => {
arr.push({
key: item.id,
title: item.planName,
});
});
transferData.value = arr;
});
};
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
console.log(keys, direction, moveKeys);
};
const handleSearch = (dir: string, value: string) => {
console.log('search:', dir, value);
};
// 穿梭框选中数据
const targetKeys = ref<string[]>([]);
// 将穿梭框选中的计划提交
const sendPlan = () => {
if (targetKeys.value.length < 1) {
return message.info('没有选择任何计划');
}
http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
message.success('添加成功');
// 如果发送成功,则刷新表格
getTable();
getLeftPlan();
});
};
const filterOption = (inputValue: string, option: any) => {
return option.description.indexOf(inputValue) > -1;
};
</script>
<style lang="less" scoped>
@import './dialogStyle.less';
// 右下角添加按钮
.div-add {
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
.add {
width: 74px;
height: 40px;
opacity: 1;
border-radius: 4px;
background: rgba(67, 136, 251, 1);
border: rgba(67, 136, 251, 1);
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
}
// 表格
.custom-table {
border-collapse: collapse;
width: 416px;
height: 60px;
color: rgba(255, 255, 255, 1);
}
.custom-table th,
.custom-table td {
border: 1px solid rgba(163, 192, 243, 1);
text-align: left;
padding: 8px;
text-align: center;
}
.table1 {
margin-top: 20px;
width: 100%;
border: 1px solid rgba(255, 255, 255);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
// 表格中的操作按钮
.tabReboot,
.tabDelete {
border: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 20px;
color: rgba(67, 136, 251, 1);
cursor: pointer;
}
.tabReboot {
margin-right: 8px;
}
.tabReboot::active {
color: white !important;
}
.tabDelete::active {
color: white;
}
}
::v-deep(.ant-transfer) {
// 屏蔽自带的hover效果
.ant-transfer-list-content-item:hover {
background: black;
}
}
</style>

View File

@@ -0,0 +1,423 @@
// 抽屉
.drawer-fan {
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.light-area-tab,
.circuit-tab,
.control-tab,
.control-scene-tab,
.light-parameters-tab {
width: 5px;
height: 23px;
opacity: 1;
background: rgba(26, 174, 251, 1);
margin-right: 4px;
}
.light-area-text,
.circuit-text,
.control-text,
.control-scene-text,
.light-parameters-text {
font-size: 14px;
color: white;
padding-left: 5px;
line-height: 23px;
width: 110px;
height: 23px;
background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
user-select: none;
}
.light-area-tab,
.light-area-text {
display: inline-block;
justify-content: center;
}
.plan {
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
vertical-align: top;
margin-left: 235px;
width: 88px;
height: 32px;
color: white;
cursor: pointer;
}
.plan.enabled {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
}
.plan.disabled {
background-color: red;
}
.plan:disabled {
cursor: not-allowed;
}
.openPlan {
cursor: pointer;
border: none;
font-size: 14px;
font-weight: 400;
border-radius: 5px;
color: white;
vertical-align: top;
width: 88px;
height: 32px;
}
.openPlan.enabled2 {
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
}
.openPlan.disabled2 {
background-color: red;
}
.openPlan:disabled {
cursor: not-allowed;
}
.btn2 {
display: flex;
align-items: center;
margin-left: 80px;
}
.openzm {
cursor: pointer;
color: rgba(34, 183, 255, 1);
margin-left: 20px;
font-size: 14px;
}
.custom-checkbox {
width: 13px;
height: 13px;
}
.both {
width: 59.79px;
height: 32px;
opacity: 1;
background: linear-gradient(180deg,
rgba(255, 187, 0, 1) 0%,
rgba(255, 112, 3, 1) 91.21%,
rgba(255, 129, 3, 1) 100%);
margin-left: 8px;
font-size: 12px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn2 {
button {
margin: 0 5px;
}
}
.allBtn {
border: 0;
width: 40px;
color: white;
background-color: transparent;
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch {
background-color: grey !important;
}
.blue-background.ant-switch-checked .ant-switch-handle {
background-color: linear-gradient(180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: grey !important;
}
p {
color: white;
}
.area,
.btnArea,
.control-mode-btn-area,
.control-scene-btn-area {
margin-left: -17px;
button {
width: 21%;
padding: 0 2%;
}
}
.btn {
width: 92px;
height: 40px;
border-radius: 4px;
opacity: 1;
margin-top: 10px;
margin-left: 17px;
font-size: 14px;
font-weight: 400;
opacity: 1;
border: 1px solid rgba(207, 212, 219, 1);
line-height: 20.27px;
color: white;
text-align: center;
vertical-align: top;
background-color: rgba(255, 255, 255, 0.1);
}
.selected {
background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
color: rgba(0, 61, 90, 1);
border: 1px solid white;
}
.btn:hover {
background-color: rgba(207, 212, 219, 1);
}
.btn:active {
background-color: rgba(102, 102, 102, 1);
color: white;
}
.circuit-area,
.control-scene-area,
.light-parameters-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.circuit-tab,
.circuit-text {
display: inline-block;
}
.batch {
width: 60px;
height: 32px;
opacity: 1;
border: 1px solid rgba(67, 136, 251, 1);
color: rgba(67, 136, 251, 1);
border-radius: 5px;
background-color: white;
margin-left: 11px;
}
.control-area {
left: 51px;
width: 100%;
margin-top: 20px;
}
.control-tab,
.control-text {
display: inline-block;
}
:deep(.cell) {
text-align: center;
}
:deep(#pane-first) {
height: 100%;
}
.control-scene-tab,
.control-scene-text {
display: inline-block;
}
.light-parameters-tab,
.light-parameters-text {
display: inline-block;
}
.light-parameters-textarea>p {
height: 100%;
display: flex;
border: 1px solid rgba(236, 239, 245, 1);
justify-content: center;
align-items: center;
}
.bottom {
width: 100%;
height: 64px;
display: flex;
justify-content: flex-end;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
}
.execute {
margin-right: 20px;
width: 74px;
height: 40px;
opacity: 1;
cursor: pointer;
border-radius: 4px;
background: rgba(67, 136, 251, 1);
font-size: 14px;
font-weight: 400;
color: white;
border: 0;
margin: 0 10px;
}
.flushed {
width: 74px;
height: 40px;
cursor: pointer;
opacity: 1;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: rgba(102, 102, 102, 1);
background: white;
border: 1px solid rgba(193, 197, 204, 1);
margin: 0 10px;
}
:deep(.ant-table-pagination) {
visibility: hidden;
}
.drawer-content {
margin-left: 20px;
}
.arrow-indicator {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.drawer-title1 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
z-index: 99999;
}
.drawer-title2 {
position: fixed;
width: 33px;
height: 33px;
top: 0;
bottom: 0;
right: 495px;
margin: auto;
z-index: 99999;
}
.arrowbtn {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 1);
opacity: 0.5;
border: none;
}
:deep(.ant-tabs-tab-btn) {
color: white;
}
:deep(.ant-table) {
background-color: transparent;
}
:deep(.ant-table-bordered) {
background-color: transparent;
}
:deep(.ant-table-thead) {
background-color: transparent;
}
:deep(.ant-table-cell) {
background-color: transparent;
color: #fff;
}
.custom-table {
border-collapse: collapse;
width: 416px;
height: 60px;
color: rgba(255, 255, 255, 1);
}
.custom-table th,
.custom-table td {
border: 1px solid rgba(163, 192, 243, 1);
text-align: left;
padding: 8px;
text-align: center;
}
.table1 {
margin-top: 20px;
width: 100%;
cellspacing: 0;
cellpadding: 0;
border: 1px solid rgba(255, 255, 255);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
}
.light-area,
.circuit-area,
.control-area,
.control-scene-area,
.light-parameters-area {
width: 100%;
margin-top: 20px;
display: flex;
align-items: center;
}
.zmhlbtn {
position: relative;
}
// 禁用图标
.anticon-stop {
position: absolute;
right: 3px;
bottom: 3px;
}
}

View File

@@ -2,14 +2,13 @@
<div class="box-ventilationSystem">
<div class="legend-box">
<template v-for="(item, index) in legend" :key="index">
<div
class="legend-box-item"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}"
@click="selectLegend(item, index)">
<div class="legend-box-item-img">
<img style="width: 42px" :src="item.url" />
<div class="legend-box-item" @click="selectLegend(item, index)">
<div
class="legend-box-item-img"
:style="{
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
}">
<img :src="item.url" />
</div>
<div class="legend-box-item-name">
{{ item.name }}
@@ -65,24 +64,218 @@
</template>
</div>
</transition>
<!-- 右侧抽屉的触发按钮 -->
<div
class="drawer-box-in"
v-if="!visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
@click="toggleDrawer">
<double-left-outlined class="drawer-icon" style="color: white" />
</div>
<!-- 排风扇 -->
<transition name="zep">
<div v-if="selectIndex === 4">
<template v-for="(item, index) in fanData" :key="index">
<!-- 朝左边 -->
<template v-if="item.lineType === '1'">
<div
style="position: absolute"
:style="{
left: 'calc(' + item.styleText.left + ' - 10.6%)',
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
}">
<boxModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + ' - 1.5%)',
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
transform: 'rotateY(180deg)',
}"
src="../image/liftState/lift/line.png" />
</template>
<!-- 朝右边 -->
<template v-if="item.lineType === '2'">
<div
style="position: absolute"
:style="{
left: 'calc(' + item.styleText.left + ' + 4.3%)',
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
}">
<boxModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + ' + 1.5%)',
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
transform: 'rotate(90deg,180deg)',
}"
src="../image/liftState/lift/line.png" />
</template>
<img
style="width: 42px; height: 42px; position: absolute"
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
src="../image/ventilationSystem/fan.png" />
</template>
</div>
</transition>
<!-- 弹窗操控 -->
<a-drawer
v-if="selectIndex === 4 && visible"
:visible="selectIndex === 4"
class="drawer-fan"
:width="496"
:forceRender="preload"
placement="right"
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
:closable="false"
id="drawer"
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
<!-- 左侧抽屉的关闭按钮 -->
<div
class="drawer-box-out"
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
@click="toggleDrawer">
<double-right-outlined class="drawer-icon" style="color: white" />
</div>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render>
<fanPlant />
</a-tab-pane>
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
</a-tabs>
</a-drawer>
<!-- 风幕机 -->
<transition name="zep">
<div v-if="selectIndex === 5">
<template v-for="(item, index) in airCurtainData" :key="index">
<div
style="position: absolute"
:style="{
left: 'calc(' + item.styleText.left + ' - 15.1%)',
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
}">
<boxModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + ' - 1.5%)',
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
transform: 'rotateY(180deg)',
}"
src="../image/liftState/lift/line.png" />
<img
style="width: 42px; height: 42px; position: absolute"
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
src="../image/ventilationSystem/airCurtain.png" />
</template>
</div>
</transition>
<!-- 弹窗操控 -->
<a-drawer
v-if="selectIndex === 5 && visible"
:visible="selectIndex === 5"
class="drawer-fan"
:width="496"
:forceRender="preload"
placement="right"
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
:closable="false"
id="drawer"
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
:mask="false">
<!-- 左侧抽屉的关闭按钮 -->
<div
class="drawer-box-out"
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
@click="toggleDrawer">
<double-right-outlined class="drawer-icon" style="color: white" />
</div>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
</a-tabs>
</a-drawer>
<transition name="zep">
<div v-if="selectIndex === 6">
<template v-for="(item, index) in windowData" :key="index">
<div
style="position: absolute"
:style="{
left: 'calc(' + item.styleText.left + ' - 10.6%)',
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
}">
<boxModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + ' - 1.5%)',
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
transform: 'rotateY(180deg)',
}"
src="../image/liftState/lift/line.png" />
<img
style="width: 42px; height: 42px; position: absolute"
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
src="../image/ventilationSystem/windowIcon.png" />
</template>
</div>
</transition>
<!-- 弹窗操控 -->
<a-drawer
v-if="selectIndex === 6 && visible"
:visible="selectIndex === 6"
class="drawer-fan"
:width="496"
:forceRender="preload"
placement="right"
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
:closable="false"
id="drawer"
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
:mask="false">
<!-- 左侧抽屉的关闭按钮 -->
<div
class="drawer-box-out"
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
@click="toggleDrawer">
<double-right-outlined class="drawer-icon" style="color: white" />
</div>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
</a-tabs>
</a-drawer>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
//图片
import temperature from '../image/airConditioningSystem/temperature.png';
import humidity from '../image/ventilationSystem/humidity.png';
import PM25 from '../image/ventilationSystem/PM25.png';
import CO2 from '../image/ventilationSystem/CO2.png';
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
import window from '../image/ventilationSystem/window.png';
import fanMachine from '../image/ventilationSystem/fanMachine.png';
import temperature from '../image/airConditioningSystem/temperature.svg';
import humidity from '../image/ventilationSystem/humidity.svg';
import PM25 from '../image/ventilationSystem/PM25.svg';
import CO2 from '../image/ventilationSystem/CO2.svg';
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.svg';
import window from '../image/ventilationSystem/window.svg';
import airCurtain from '../image/ventilationSystem/fanMachine.svg';
import selectImg from '../image/airConditioningSystem/selectImg.png';
import sunRed from '../image/airConditioningSystem/sunRed.png';
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
import boxModel from './components/boxModel.vue';
import singleModel from '../components/singleModel.vue';
import fanControl from './components/fanControl.vue';
import fanPlant from './components/fanPlant.vue';
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
//图例
const legend = ref([
@@ -91,11 +284,22 @@
{ url: PM25, name: 'PM2.5' },
{ url: CO2, name: 'CO2浓度' },
{ url: ventilatingFan, name: '排风扇' },
{ url: fanMachine, name: '风幕机' },
{ url: airCurtain, name: '风幕机' },
{ url: window, name: '电动窗' },
]);
// 选择的图例
const selectIndex = ref(0);
//选择table
const activeKey = ref('1');
// 展示
const visible = ref(true);
// 预加载flag获得分区数据后预加载抽屉防止获取ref报错
const preload = ref(true);
// 抽屉 - 开关事件
const toggleDrawer = () => {
console.log('xxxx');
visible.value = !visible.value;
};
//选择方法
const selectLegend = (item: any, index: any) => {
if (selectIndex.value !== index) {
@@ -178,39 +382,132 @@
url: CO2,
},
]);
//排风扇
const fanData = ref([
{
title: '排风扇',
styleText: { left: '43.2%', bottom: '77.8%' },
type: 'fan',
lineType: '1',
},
{
title: '排风扇',
styleText: { left: '50%', bottom: '77.8%' },
type: 'fan',
lineType: '2',
},
{
title: '排风扇',
styleText: { left: '41.2%', bottom: '27.8%' },
type: 'fan',
lineType: '1',
},
{
title: '排风扇',
styleText: { left: '51.2%', bottom: '27.8%' },
type: 'fan',
lineType: '2',
},
]);
// 风幕机
const airCurtainData = ref([
{
title: '风幕机',
styleText: { left: '38%', bottom: '57.8%' },
type: 'airCurtain',
},
{
title: '风幕机',
styleText: { left: '58.5%', bottom: '57.3%' },
type: 'airCurtain',
},
{
title: '风幕机',
styleText: { left: '64.2%', bottom: '22.8%' },
type: 'airCurtain',
},
]);
// 电动窗
const windowData = ref([
{
title: '电动窗1',
styleText: { left: '32%', bottom: '28%' },
type: 'window',
},
{
title: '电动窗2',
styleText: { left: '33.5%', bottom: '42.8%' },
type: 'window',
},
{
title: '电动窗3',
styleText: { left: '35%', bottom: '57.8%' },
type: 'window',
},
{
title: '电动窗4',
styleText: { left: '36.5%', bottom: '72.8%' },
type: 'window',
},
{
title: '电动窗5',
styleText: { left: '66%', bottom: '28%' },
type: 'window',
},
{
title: '电动窗6',
styleText: { left: '64%', bottom: '42.8%' },
type: 'window',
},
{
title: '电动窗7',
styleText: { left: '62%', bottom: '57.8%' },
type: 'window',
},
{
title: '电动窗8',
styleText: { left: '60%', bottom: '72.8%' },
type: 'window',
},
]);
onMounted(() => {});
onUnmounted(() => {});
</script>
<style lang="less">
.legend-box {
width: 5%;
width: 80px;
height: 100%;
background-color: rgba(33, 40, 54, 0.9);
border-radius: 4px 0px 0px 4px;
padding: 4px;
background-color: rgba(33, 40, 54, 0.95);
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px 5px;
.legend-box-item {
width: 100%;
height: 90px;
padding: 10px 0;
cursor: pointer;
background-size: 75%;
background-repeat: no-repeat;
background-position: center; /* 把图片背景居中 */
display: flex;
flex-direction: column;
align-items: center;
width: 70px;
height: 70px;
.legend-box-item-img {
width: 100%;
height: 50px;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 50px;
height: 60px;
padding-top: 5px;
flex: 1;
cursor: pointer;
background-size: 100% 100%;
text-align: center;
img {
transition: all ease 0.2s;
}
img:hover {
transform: scale(1.1);
}
}
.legend-box-item-name {
width: 100%;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
transform: translateY(-5px);
text-align: center;
color: white;
font-size: 12px;
margin-top: 6px;
font-size: 13px;
}
}
}
@@ -257,4 +554,44 @@
opacity: 0; /* 结束时完全透明 */
}
}
.drawer-fan {
width: 496px;
// 抽屉关闭按钮
.drawer-box-out {
width: 30px;
height: 40px;
border-radius: 2px;
position: fixed;
right: 466px;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.ant-tabs-tab-btn {
color: white;
}
.ant-tabs-tabpane {
color: white;
}
}
.drawer-box-in {
width: 30px;
height: 40px;
border-radius: 2px;
position: fixed;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>

View File

@@ -1,6 +1,8 @@
import { http } from '/nerv-lib/util';
import { group } from '/@/api/deviceManage';
import { group, device } from '/@/api/deviceManage';
import { carbonEmissionFactorLibrary, quickCalculation } from '/@/api/carbonEmissionFactorLibrary';
import { dict } from '/@/api';
import { ref } from 'vue';
const tableCalKeyMap = [
{
title: '来源企业',
@@ -38,6 +40,54 @@ const tableCalKeyMap = [
},
},
];
const tableCarbonKeyMap = [
{
title: '能源类型',
dataIndex: 'energyTypeName',
// textEllipsis: true,
textNumber: 5,
},
{
title: '设备名称',
textNumber: 10,
dataIndex: 'deviceName',
// textEllipsis: true,
},
{
title: '设备id',
dataIndex: 'deviceInfoCode',
textNumber: 10,
},
{
textNumber: 5,
title: '碳排因子值',
dataIndex: 'emissionFactor',
},
{
title: '设备品牌/型号',
textNumber: 10,
dataIndex: 'deviceModel',
},
{
title: '来源企业',
textNumber: 10,
dataIndex: 'manufacturer',
},
{
title: '分组名称',
textNumber: 10,
dataIndex: 'deviceNameType',
},
{
textNumber: 5,
title: '设备状态',
dataIndex: 'status',
customRender: ({ value }) => {
return value === '0' ? '启用' : '停用';
},
},
];
const tableKeyMap = [
{
title: '来源企业',
@@ -333,11 +383,19 @@ export const tableConfig = (el, elGroup, elFormula, defaultParams) => {
};
};
export const tableConfigCal = (el, elGroup, elFormula, defaultParams) => {
export const tableConfigCal = (
el,
elGroup,
elFormula,
defaultParams,
isCarbon,
editCarbonEquipmentRef,
setFactorRef,
) => {
// 计算节点
return {
title: '点位信息',
api: group.queryGroupInfoPage,
api: isCarbon ? group.getCarbonGroupList : group.queryGroupInfoPage,
params: defaultParams.value,
headerActions: [
{
@@ -345,9 +403,32 @@ export const tableConfigCal = (el, elGroup, elFormula, defaultParams) => {
name: 'GroupPointEdit',
type: 'primary',
handle: (a, b) => {
el.value.toggle();
if (isCarbon) {
editCarbonEquipmentRef.value.toggle();
} else {
el.value.toggle();
}
},
},
isCarbon
? {
label: '关联因子值',
name: 'SetFactor',
type: 'primary',
dynamicDisabled: (data: any) => {
return data.list.length === 0;
},
handle: ({ list }) => {
// 过滤出 id 大于 0 的项
const filteredList = list.filter(({ id }) => id > 0);
// 提取出 id 值
const ids = filteredList.map(({ id }) => id);
setFactorRef.value.toggle(ids);
},
}
: {},
{
label: '批量删除',
name: 'GroupPointDelete',
@@ -355,11 +436,17 @@ export const tableConfigCal = (el, elGroup, elFormula, defaultParams) => {
dynamicDisabled: (data: any) => {
return data.list.length === 0;
},
dynamicParams: { ids: 'id[]' },
dynamicParams: isCarbon
? {
deviceInfoCodeList: 'id[]',
}
: {
ids: 'id[]',
},
confirm: true,
isReload: true,
isClearCheck: true,
api: group.delComputeList,
api: isCarbon ? group.deleteCarbonDevice : group.delComputeList,
},
{
label: '批量导出',
@@ -425,18 +512,39 @@ export const tableConfigCal = (el, elGroup, elFormula, defaultParams) => {
},
],
scroll: { x: 1400 },
columns: tableCalKeyMap,
columns: isCarbon ? tableCarbonKeyMap : tableCalKeyMap,
columnActions: {
title: '操作',
actions: [
{
label: '关联因子',
name: 'SetFactor',
dynamicDisabled: (record) => {
// 这里根据record的某个字段值判断是否禁用删除按钮
return record.id < 0;
},
handle: (row) => {
setFactorRef.value.toggle([row.id]);
},
},
{
label: '删除',
name: 'GroupPointDelete',
dynamicParams: { ids: 'id[]' },
dynamicDisabled: (record) => {
// 这里根据record的某个字段值判断是否禁用删除按钮
return record.id < 0;
},
dynamicParams: isCarbon
? {
deviceInfoCodeList: 'id[]',
}
: {
ids: 'id[]',
},
confirm: true,
isReload: true,
isClearCheck: true,
api: group.delComputeList,
api: isCarbon ? group.deleteCarbonDevice : group.delComputeList,
},
],
},
@@ -522,7 +630,338 @@ export const tableConfigCal = (el, elGroup, elFormula, defaultParams) => {
},
],
},
// pagination: { pageSizeOptions: false },
pagination: isCarbon ? false : true,
rowKey: 'id',
rowSelection: { checkStrictly: false },
};
};
export const editCarbonEquipmentConfig = (orgId) => {
return ref({
title: '设备信息',
api: device.queryDevicePage,
params: { orgId },
treeConfig: {
header: {
icon: 'deviceType',
title: '设备类别',
},
params: { orgId },
dynamicParams: { deviceCode: 'code' },
defaultExpandAll: true,
api: device.queryDeviceTree,
fieldNames: { title: 'deviceType', key: 'code' },
formConfig: {
schemas: [
{
field: 'energyType',
label: '',
component: 'NsSelectApi',
autoSubmit: true,
componentProps: {
api: () => dict({ params: { dicKey: 'ENERGY_TYPE' } }),
// params: { dicKey: 'ENERGY_TYPE' },
immediate: true,
// resultField: 'data.ENERGY_TYPE',
labelField: 'cnValue',
valueField: 'dicKey',
placeholder: '请选择能耗种类',
autoSelectFirst: true,
},
},
{
field: 'deviceType',
label: '设备名称',
component: 'NsInput',
autoSubmit: true,
componentProps: {
placeholder: '请输入设备类型',
},
},
],
},
},
// rowSelection: null,
rowSelection: true,
// scroll: { x: 2000 },
columns: [
{
title: '设备名称',
dataIndex: 'deviceName',
},
{
title: '设备型号',
dataIndex: 'deviceModel',
},
{
title: 'SN码',
dataIndex: 'snCode',
textNumber: 5,
textEllipsis: true,
},
{
title: '设备一级区域',
dataIndex: 'device1Area',
textWidth: 88,
// width: 130,
textEllipsis: true,
},
{
title: '设备二级区域',
dataIndex: 'device2Area',
textWidth: 88,
// width: 130,
textEllipsis: true,
},
{
title: '设备详细位置',
dataIndex: 'deviceAddress',
textNumber: 5,
textEllipsis: true,
},
],
formConfig: {
schemas: [
{
field: 'areas',
label: '设备区域',
component: 'NsCascader',
format: (record) => {
console.log(record);
return record?.reduce(
(pre, cur) => {
const len = cur?.length - 1;
pre[len].push(cur[len]);
return pre;
},
[[], []],
);
},
fieldMap: ['area1', 'area2'],
componentProps: {
placeholder: '请选择设备区域',
multiple: true,
loadData: (selectedOptions, options) => {
const targetOption = selectedOptions[selectedOptions.length - 1];
if (!selectedOptions.length) {
http.post(device.dropArea, { orgId, filterField: 'DEVICE_AREA' }).then((res) => {
options.value = res.data?.map((item) => {
return { label: item, value: item, children: [], isLeaf: false };
});
});
}
const value = targetOption?.value;
if (targetOption) {
targetOption.loading = true;
http
.post(device.dropArea, { device1Area: value, orgId, filterField: 'DEVICE_AREA' })
.then((res) => {
targetOption.loading = false;
targetOption.children = res.data?.map((item) => {
return { label: item, value: item, children: [], isLeaf: true };
});
});
}
},
},
},
{
field: 'deviceName',
label: '设备名称',
component: 'NsSelectApi',
componentProps: {
placeholder: '请选择设备名称',
api: (params) => {
return http.post(device.dropArea, params).then((res) => {
const result = res.data?.reduce((pre, cur) => {
!pre.includes(cur.deviceName) && pre.push(cur.deviceName);
return pre;
}, []);
return { data: result };
});
},
resultField: 'data',
params: { orgId, filterField: 'DEVICE_NAME_FACTORY' },
// labelField: 'deviceName',
// valueField: 'deviceName',
filterOption: (input: string, option: any) => {
return option.deviceName?.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},
showSearch: true,
immediate: true,
dropdownReload: true,
allowClear: true,
},
},
],
params: {},
},
// pagination: { pageSizeOptions: false },
rowKey: 'deviceInfoCode',
});
};
export const setFactorConfig = (orgId) => {
return ref({
title: '排放因子库',
// api: carbonEmissionFactorLibrary.getTableList,
api: quickCalculation.queryCarbonEmissionPage,
params: { orgId, pageNum: 1, pageSize: 9999 },
treeConfig: {
header: {
icon: 'deviceType',
title: '因子分类',
},
params: { orgId },
dynamicParams: { energyType: 'id' },
defaultExpandAll: true,
// api: carbonEmissionFactorLibrary.getCarbonFactorTree,
api: quickCalculation.carbonQuickTree,
fieldNames: { title: 'energyType', key: 'id' },
formConfig: {
schemas: [
{
field: 'deviceType',
label: '设备名称',
component: 'NsInput',
autoSubmit: true,
componentProps: {
placeholder: '请输入关键字',
},
},
],
},
},
// rowSelection: null,
rowSelection: { type: 'radio' },
// scroll: { x: 2000 },
columns: [
{
title: '序号',
textNumber: 2,
dataIndex: 'address',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '因子值',
dataIndex: 'emissionFactors',
textNumber: 3,
},
{
title: '计量单位',
dataIndex: 'carbonEmissionSuffix',
textNumber: 4,
textEllipsis: true,
},
{
title: '更新时间',
dataIndex: 'updateTime',
textWidth: 88,
// width: 130,
textEllipsis: true,
},
{
title: '启用时间',
dataIndex: 'startTime',
textWidth: 88,
// width: 130,
textEllipsis: true,
},
{
title: '结束时间',
dataIndex: 'endTime',
textNumber: 5,
textEllipsis: true,
},
{
title: '数据来源',
dataIndex: 'dataSources',
textNumber: 5,
textEllipsis: true,
},
],
// formConfig: {
// schemas: [
// {
// field: 'areas',
// label: '设备区域',
// component: 'NsCascader',
// format: (record) => {
// console.log(record);
// return record?.reduce(
// (pre, cur) => {
// const len = cur?.length - 1;
// pre[len].push(cur[len]);
// return pre;
// },
// [[], []],
// );
// },
// fieldMap: ['area1', 'area2'],
// componentProps: {
// placeholder: '请选择设备区域',
// multiple: true,
// loadData: (selectedOptions, options) => {
// const targetOption = selectedOptions[selectedOptions.length - 1];
// if (!selectedOptions.length) {
// http.post(device.dropArea, { orgId, filterField: 'DEVICE_AREA' }).then((res) => {
// options.value = res.data?.map((item) => {
// return { label: item, value: item, children: [], isLeaf: false };
// });
// });
// }
// const value = targetOption?.value;
// if (targetOption) {
// targetOption.loading = true;
// http
// .post(device.dropArea, { device1Area: value, orgId, filterField: 'DEVICE_AREA' })
// .then((res) => {
// targetOption.loading = false;
// targetOption.children = res.data?.map((item) => {
// return { label: item, value: item, children: [], isLeaf: true };
// });
// });
// }
// },
// },
// },
// {
// field: 'deviceName',
// label: '设备名称',
// component: 'NsSelectApi',
// componentProps: {
// placeholder: '请选择设备名称',
// api: (params) => {
// return http.post(device.dropArea, params).then((res) => {
// const result = res.data?.reduce((pre, cur) => {
// !pre.includes(cur.deviceName) && pre.push(cur.deviceName);
// return pre;
// }, []);
// return { data: result };
// });
// },
// resultField: 'data',
// params: { orgId, filterField: 'DEVICE_NAME_FACTORY' },
// // labelField: 'deviceName',
// // valueField: 'deviceName',
// filterOption: (input: string, option: any) => {
// return option.deviceName?.toLowerCase().indexOf(input.toLowerCase()) >= 0;
// },
// showSearch: true,
// immediate: true,
// dropdownReload: true,
// allowClear: true,
// },
// },
// ],
// params: {},
// },
// pagination: { pageSizeOptions: false },
rowKey: 'id',
});
};

View File

@@ -0,0 +1,123 @@
<template>
<a-modal
v-model:visible="visible"
width="60%"
class="custom-class"
title="添加设备"
destroyOnClose
@ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<template #header>
<div class="custom-header">
<!-- 这里可以放置任何你想要的内容或组件 -->
<h2>自定义标题</h2>
</div>
</template>
<!-- <template #header>
<div class="modal-header">
<span>Modal Title</span>
<a-select placeholder="Select an option" style="width: 150px">
<a-select-option value="option1">Option 1</a-select-option>
<a-select-option value="option2">Option 2</a-select-option>
<a-select-option value="option3">Option 3</a-select-option>
</a-select>
</div>
</template> -->
<div class="custom-select-wrapper">
<a-select
placeholder="请选择"
style="width: 200px"
:options="linkList"
:field-names="{ label: 'orgName', value: 'orgId' }"
@change="handleChange" />
</div>
<div class="drawerContainer">
<ns-view-list-table v-bind="config" ref="carbonEquipment" style="height: 500px" :key="key" />
</div>
</a-modal>
</template>
<script lang="ts" setup>
import { editCarbonEquipmentConfig } from './config';
import { computed, nextTick, ref } from 'vue';
import { NsMessage } from '/nerv-lib/saas';
import { http } from '/nerv-lib/util';
import { group, device } from '/@/api/deviceManage';
const orgId = ref('');
const key = ref(Date.now());
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
// const selectOrgId = ref(orgId.value);
const linkList = JSON.parse(sessionStorage.getItem('LINKLIST')!);
let config = editCarbonEquipmentConfig(orgId.value);
const visible = ref(false);
const carbonEquipment = ref();
// defineOptions({
// name: 'LedgerIndex', // 与页面路由name一致缓存才可生效
// });
const handleChange = (value: string) => {
// selectOrgId.value = value;
config = editCarbonEquipmentConfig(value);
debugger;
key.value = Date.now();
// carbonEquipment.value?.nsTableRef.reload();
// carbonEquipment.value?.nsTableRef.treeReload();
};
const props = defineProps({ params: Object });
const emit = defineEmits(['sure']);
const toggle = () => {
visible.value = !visible.value;
// clearData();
// visible.value && getData(currentId.value);
};
const btnClick = () => {
let selectedRowKeys = carbonEquipment.value?.nsTableRef.tableState.selectedRowKeys;
if (!selectedRowKeys || selectedRowKeys.lenght == 0) {
NsMessage.warn('请选择设备');
return;
}
if (!props.params?.hxDeviceGroupId) {
NsMessage.warn('请选择分组');
return;
}
let params = [];
for (let i = 0; i < selectedRowKeys.length; i++) {
params.push({
orgId: props.params?.orgId,
groupId: props.params?.hxDeviceGroupId,
deviceInfoCode: selectedRowKeys[i],
});
}
http.post(group.addCarbonDevice, params).then(() => {
emit('sure');
NsMessage.success('操作成功');
toggle();
});
};
defineExpose({
toggle,
});
</script>
<style lang="less" scoped>
:deep(.ns-table-search),
:deep(.ns-part-tree),
:deep(.ns-table-main) {
box-shadow: @ns-content-box-shadow;
}
.drawerContainer {
height: 100%;
display: flex;
justify-content: space-between;
}
.custom-select-wrapper {
position: absolute;
top: 10px; /* Adjust based on your modal's positioning */
right: 50px; /* Adjust based on your modal's positioning */
// z-index: 1050; /* Ensure it's above the modal's backdrop */
}
</style>

View File

@@ -4,6 +4,8 @@
<editCalDrawer ref="editDrawerCalRef" :params="defaultParams" @sure="handleOk" />
<editGroup ref="editGroupRef" :params="defaultParams" @sure="handleOk" />
<editFormula ref="editFormulaRef" :params="defaultParams" @sure="handleOk" />
<editCarbonEquipment ref="editCarbonEquipmentRef" :params="defaultParams" @sure="handleOk" />
<setFactor ref="setFactorRef" :params="defaultParams" @sure="handleOk" />
<NsModalFrom ref="modalFormRef" v-bind="nsModalFormConfig" />
<div class="groupContainer">
@@ -41,7 +43,24 @@
</ns-tree-api>
</div>
<ns-view-list-table v-show="defaultType" class="table" v-bind="config" ref="tableRef" />
<ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" ref="tableCalRef" />
<ns-view-list-table
v-show="!defaultType && !isCarbon"
class="table"
v-bind="configCal"
ref="tableCalRef" />
<ns-view-list-table
v-show="!defaultType && isCarbon"
class="table"
v-bind="configCarbon"
ref="tableCalRef">
<!-- <template #bodyCell="{ column, record }">
<template v-if="column.title === '操作'">
<a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
>设为目标值</a-button
>
</template>
</template> -->
</ns-view-list-table>
</div>
</template>
<script lang="ts" setup>
@@ -52,6 +71,9 @@
import editCalDrawer from './editCal.vue';
import editGroup from './editGroup.vue';
import editFormula from './editFormula.vue';
import editCarbonEquipment from './editCarbonEquipment.vue';
import setFactor from './setFactor.vue';
import { NsMessage, NsModal } from '/nerv-lib/component';
import NsModalFrom from '/@/components/ns-modal-form.vue';
import { group } from '/@/api/deviceManage';
@@ -68,8 +90,12 @@
const editDrawerCalRef = ref();
const editGroupRef = ref();
const editFormulaRef = ref();
const editCarbonEquipmentRef = ref();
const setFactorRef = ref();
const treeRef = ref();
const defaultType = ref(true);
const isCarbon = ref(true);
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
const defaultParams = ref({
orgId: result,
@@ -79,7 +105,26 @@
});
const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef, defaultParams);
const configCal = tableConfigCal(editDrawerCalRef, editGroupRef, editFormulaRef, defaultParams);
const configCal = tableConfigCal(
editDrawerCalRef,
editGroupRef,
editFormulaRef,
defaultParams,
false,
editCarbonEquipmentRef,
setFactorRef,
);
const configCarbon = tableConfigCal(
editDrawerCalRef,
editGroupRef,
editFormulaRef,
defaultParams,
true,
editCarbonEquipmentRef,
setFactorRef,
);
const tConfig = treeConfig(result);
const nsModalFormConfig = ref({
api: group.creatOrUpdate,
@@ -184,6 +229,12 @@
defaultType.value
? tableRef.value?.nsTableRef.reload()
: tableCalRef.value?.nsTableRef.reload();
if (energyType == 'CARBON_EMISSIONS') {
isCarbon.value = true;
} else {
isCarbon.value = false;
}
};
const handleOk = () => {

View File

@@ -0,0 +1,77 @@
<template>
<a-modal
v-model:visible="visible"
width="60%"
class="custom-class"
title="关联因子值"
destroyOnClose
@ok="btnClick"
:cancel="() => (visible = false)"
placement="right">
<div class="drawerContainer">
<ns-view-list-table v-bind="config" ref="setFactorRef" style="height: 500px" />
</div>
</a-modal>
</template>
<script lang="ts" setup>
import { setFactorConfig } from './config';
import { computed, nextTick, ref } from 'vue';
import { NsMessage } from '/nerv-lib/saas';
import { http } from '/nerv-lib/util';
import { group, device } from '/@/api/deviceManage';
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const config = setFactorConfig(orgId.value);
const visible = ref(false);
const setFactorRef = ref();
const ids = ref();
// defineOptions({
// name: 'LedgerIndex', // 与页面路由name一致缓存才可生效
// });
const props = defineProps({ params: Object });
const emit = defineEmits(['sure']);
const toggle = (idlist) => {
ids.value = idlist;
visible.value = !visible.value;
// clearData();
// visible.value && getData(currentId.value);
};
const btnClick = () => {
let selectedRowKeys = setFactorRef.value?.nsTableRef.tableState.selectedRowKeys;
if (!selectedRowKeys) {
NsMessage.warn('请选择因子');
return;
}
if (!ids.value) {
NsMessage.warn('请选择分组');
return;
}
http
.post(group.updateCarbonFactor, {
deviceInfoCodeList: ids.value,
factorId: selectedRowKeys[0],
})
.then(() => {
emit('sure');
NsMessage.success('操作成功');
toggle([]);
});
};
defineExpose({
toggle,
});
</script>
<style lang="less" scoped>
:deep(.ns-table-search),
:deep(.ns-part-tree),
:deep(.ns-table-main) {
box-shadow: @ns-content-box-shadow;
}
.drawerContainer {
height: 100%;
display: flex;
justify-content: space-between;
}
</style>