chenpingsen
3 weeks ago
9 changed files with 2258 additions and 19 deletions
@ -0,0 +1,429 @@ |
|||
<template> |
|||
<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 |
|||
:style="{ color: row.ctrlResult == 1 ? 'red' : 'white' }" |
|||
v-for="(row, index) in dataSource" |
|||
:key="index" |
|||
@click="handleRowClick(row.id, index)" |
|||
:class="index === trIndex ? 'isTrIndex' : ''"> |
|||
<td>{{ index + 1 }}</td> |
|||
<td>{{ row.startTime }}</td> |
|||
<td>{{ row.operationContent }}</td> |
|||
<td>{{ row.createUser }}</td> |
|||
<td>{{ row.ctrlResult ? '失败' : '成功' }}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<a-pagination |
|||
style="margin-top: 10px; text-align: right" |
|||
v-model:current="pagination.pageNum" |
|||
v-model:pageSize="pagination.pageSize" |
|||
show-size-changer |
|||
:total="pagination.total" |
|||
@change="getTable(true)" /> |
|||
<div style="width: 100%; height: 40px"></div> |
|||
|
|||
<div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible"> |
|||
<div class="content"> |
|||
<div> |
|||
<div class="div-operation"></div> |
|||
<span class="text-operation">变更内容 </span> |
|||
</div> |
|||
<div> |
|||
<button :class="{ btn: true, selected: activeButton == 1 }" @click="changeBtn(1)" |
|||
>阀门</button |
|||
> |
|||
<button :class="{ btn: true, selected: activeButton == 2 }" @click="changeBtn(2)" |
|||
>水泵</button |
|||
> |
|||
</div> |
|||
<div class="device-list" v-if="activeButton == 1"> |
|||
<div class="device-list-item" v-for="(item, index) in valveLogList" :key="index"> |
|||
<div class="list-item-title"> |
|||
<div class="item-title"> |
|||
<img src="../images/device1.png" alt="" /> |
|||
<span>{{ item.deviceGroupName }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="list-item-main"> |
|||
<div> |
|||
<div class="info">开度</div> |
|||
<div class="text"> |
|||
<span>{{ item.openPercentBefore + '%' }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.openPercentAfter + '%' }}</span> |
|||
</div> |
|||
</div> |
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
<a-empty style="margin-top: 100px" v-if="valveLogList.length == 0"> |
|||
<template #description> <span style="color: white">暂无数据</span></template> |
|||
</a-empty> |
|||
</div> |
|||
<div class="device-list" v-if="activeButton == 2"> |
|||
<div class="device-list-item" v-for="(item, index) in pumpLogList" :key="index"> |
|||
<div class="list-item-title"> |
|||
<div class="item-title"> |
|||
<img src="../images/device2.png" alt="" /> |
|||
<span>{{ item.deviceGroupName }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="list-item-main"> |
|||
<div> |
|||
<div class="info">频率</div> |
|||
<div class="text"> |
|||
<span>{{ item.frequencyBefore + 'MHz' }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.frequencyAfter + 'MHz' }}</span> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div class="info">开关</div> |
|||
<div class="text"> |
|||
<span>{{ item.switchStatusBefore.label }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.switchStatusAfter.label }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a-empty style="margin-top: 100px" v-if="pumpLogList.length == 0"> |
|||
<template #description> <span style="color: white">暂无数据</span></template> |
|||
</a-empty> |
|||
</div> |
|||
</div> |
|||
<div style="width: 100%; height: 160px"></div> |
|||
<div class="button-box"> |
|||
<button class="cancel" @click="logModalVisible = false">关闭</button> |
|||
</div> |
|||
</div> |
|||
<div class="div-add"> |
|||
<button class="add" @click="reset">刷新</button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { Pagination } from 'ant-design-vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { waterSys } from '/@/api/waterSystem'; |
|||
// 全局变量 |
|||
import { items } from '/@/store/item'; |
|||
|
|||
// 初始化 ======================================================= |
|||
|
|||
// 组件 |
|||
defineOptions({ |
|||
components: { |
|||
'a-pagination': Pagination, |
|||
}, |
|||
}); |
|||
// 初始化 |
|||
onMounted(() => { |
|||
getTable(); |
|||
}); |
|||
|
|||
// 全局变量 |
|||
const state = items(); |
|||
|
|||
// 日志业务 ====================================================== |
|||
|
|||
// 分页设置 |
|||
const pagination = ref({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
total: 0, |
|||
}); |
|||
// 表格数据 |
|||
const dataSource = ref([]); |
|||
// 当前选中表格行 |
|||
let trIndex = ref(-1); |
|||
// 获得表格数据 |
|||
const getTable = (changePage = false) => { |
|||
state.setLoading(true); |
|||
// 如果是切换页面，则清除当前序列、关闭弹窗 |
|||
if (changePage) { |
|||
trIndex.value = -1; |
|||
logModalVisible.value = false; |
|||
pumpLogList.value.length = 0; |
|||
valveLogList.value.length = 0; |
|||
} |
|||
http |
|||
.get(waterSys.getLog, { |
|||
pageSize: pagination.value.pageSize, |
|||
pageNum: pagination.value.pageNum, |
|||
}) |
|||
.then((res) => { |
|||
state.setLoading(false); |
|||
let data = res.data; |
|||
dataSource.value = data.records; |
|||
pagination.value.total = data.total; |
|||
}) |
|||
.catch(() => { |
|||
state.setLoading(false); |
|||
}); |
|||
}; |
|||
// 刷新功能（右下角） |
|||
const reset = () => { |
|||
trIndex.value = -1; |
|||
logModalVisible.value = false; |
|||
pagination.value = { |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
total: 0, |
|||
}; |
|||
getTable(); |
|||
}; |
|||
// 点击日志行事件 |
|||
const handleRowClick = (id: any, index: any) => { |
|||
trIndex.value = index; |
|||
getLogDetail(id); |
|||
}; |
|||
|
|||
// 日志详情业务 ================================================== |
|||
|
|||
// 日志详情显隐 |
|||
const logModalVisible = ref(false); |
|||
const getLogDetail = (id: any) => { |
|||
state.setLoading(true); |
|||
http |
|||
.get(waterSys.getLogDetail, { logId: id }) |
|||
.then((res) => { |
|||
state.setLoading(false); |
|||
const data = res.data; |
|||
if (data.pumpLogList.length || data.valveLogList.length) { |
|||
// 显示模态框 |
|||
logModalVisible.value = true; |
|||
pumpLogList.value = data.pumpLogList; |
|||
valveLogList.value = data.valveLogList; |
|||
} else { |
|||
return message.info('返回值无效'); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
state.setLoading(false); |
|||
}); |
|||
}; |
|||
// 当前选中的设备类型 阀门=1/水泵=2 |
|||
const activeButton = ref(1); |
|||
// 切换设备类型 |
|||
const changeBtn = (key: number) => { |
|||
activeButton.value = key; |
|||
}; |
|||
// 水泵数据 |
|||
const pumpLogList = ref<any>([]); |
|||
// 水阀数据 |
|||
const valveLogList = ref<any>([]); |
|||
|
|||
// 向外暴露方法 |
|||
defineExpose({ |
|||
reset, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
@import '../../style/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; |
|||
min-height: 60px; |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
cursor: pointer; |
|||
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; |
|||
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); |
|||
} |
|||
|
|||
.tabReboot { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.isTrIndex { |
|||
background: rgba(67, 136, 251, 1); |
|||
} |
|||
} |
|||
|
|||
::v-deep(.ant-transfer) { |
|||
// 屏蔽自带的hover效果 |
|||
.ant-transfer-list-content-item:hover { |
|||
background: black; |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
width: 92px; |
|||
height: 40px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
margin-top: 10px; |
|||
margin-left: 15px; |
|||
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; |
|||
} |
|||
.device-list { |
|||
margin-left: 15px; |
|||
margin-top: 15px; |
|||
width: calc(100% - 15px); |
|||
font-size: 13px; |
|||
height: auto; |
|||
display: flex; |
|||
gap: 15px; |
|||
flex-direction: column; |
|||
.device-list-item { |
|||
width: calc(100% - 15px); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
border: 2px solid #03407e; |
|||
border-radius: 4px; |
|||
background: rgba(0, 177, 255, 0.2); |
|||
display: flex; |
|||
gap: 10px; |
|||
flex-direction: column; |
|||
.list-item-title { |
|||
color: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.item-title { |
|||
img { |
|||
width: 25px; |
|||
} |
|||
span { |
|||
margin-left: 10px; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
.revoke { |
|||
text-align: center; |
|||
border: none; |
|||
border-radius: 4px; |
|||
padding: 5px 15px; |
|||
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; |
|||
} |
|||
} |
|||
.list-item-main { |
|||
display: flex; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
gap: 8px; |
|||
> .info { |
|||
text-align: center; |
|||
width: 6em; |
|||
height: 2.5em; |
|||
line-height: 2.5em; |
|||
border-radius: 4px; |
|||
color: white; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(86, 221, 253, 1) 0%, |
|||
rgba(25, 176, 255, 1) 100% |
|||
); |
|||
} |
|||
> .text { |
|||
:first-child { |
|||
color: white; |
|||
line-height: 2.5em; |
|||
} |
|||
img { |
|||
padding: 0 5px; |
|||
} |
|||
:last-child { |
|||
line-height: 2.5em; |
|||
color: red; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,381 @@ |
|||
<template> |
|||
<div class="div-add"> |
|||
<button class="add" @click="addModal">添加</button> |
|||
<a-popconfirm |
|||
title="是否提交以上修改？" |
|||
placement="bottomLeft" |
|||
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> |
|||
<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" v-show="row.executeStatus.value != 0" :key="index"> |
|||
<td>{{ index + 1 }}</td> |
|||
<td>{{ row.startTime }}</td> |
|||
<td>{{ row.planName }}</td> |
|||
<td> |
|||
<button |
|||
: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="startPlan(row)">启用</div> |
|||
<a-popconfirm |
|||
title="此操作将移除该数据" |
|||
ok-text="确定" |
|||
cancel-text="取消" |
|||
placement="topRight" |
|||
@confirm="deletePlan(row)"> |
|||
<div class="tabDelete">删除</div> |
|||
</a-popconfirm> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="out-dialog" v-if="addVisible"> |
|||
<div class="content"> |
|||
<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 { planManage } from '/@/api/planManage'; |
|||
import { waterSys } from '/@/api/waterSystem'; |
|||
import { message } from 'ant-design-vue'; |
|||
import { getEnum } from '/@/api'; |
|||
// 全局变量 |
|||
import { items } from '/@/store/item'; |
|||
|
|||
// 初始化 =========================================================== |
|||
|
|||
onMounted(() => { |
|||
// 获得枚举 |
|||
getStateEnum(); |
|||
// 获得穿梭框 与 表格数据 |
|||
reset(); |
|||
}); |
|||
// 全局变量 |
|||
const state = items(); |
|||
// 获得任务状态枚举 |
|||
const getStateEnum = async () => { |
|||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } }); |
|||
stateList.value = enumData.data; |
|||
}; |
|||
/** |
|||
* @method resetAll 刷新3个tab中的全部数据（修改计划，会影响tab1数据信息，生成tab3日志） |
|||
*/ |
|||
const emit = defineEmits(['resetAll']); |
|||
|
|||
// 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) => { |
|||
// 执行中 无法修改为待执行 |
|||
if (state == 1) { |
|||
if (item.executeStatus.value != 2) { |
|||
item.executeStatus.value = state; |
|||
} |
|||
// 任何状态都可以修改为 暂停 |
|||
} else { |
|||
item.executeStatus.value = state; |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 表格数据 |
|||
const dataSource = ref([]); |
|||
// 获得表格数据 |
|||
const getTable = () => { |
|||
http |
|||
.get(planManage.getTableData, { |
|||
projectId: state.projectId, |
|||
siteId: state.siteId, |
|||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6给排水) |
|||
ctrlType: 6, |
|||
}) |
|||
.then((res) => { |
|||
dataSource.value = res.data; |
|||
}); |
|||
}; |
|||
// 删除表格中的计划（将当前任意状态，修改为未启用 =0） |
|||
const deletePlan = (row: any) => { |
|||
row.executeStatus.value = 0; |
|||
}; |
|||
// 重启表格中的计划（将当前任意状态，修改为待执行 = 1） |
|||
const startPlan = (row: any) => { |
|||
if (row.executeStatus.value == 1) { |
|||
return message.info('该数据已是待执行状态，无需再次修改'); |
|||
} |
|||
if (row.executeStatus.value == 2) { |
|||
return message.info('执行中的状态已被启用，无需修改'); |
|||
} |
|||
row.executeStatus.value = 1; |
|||
}; |
|||
// 将对表格的修改统一发送 |
|||
const sendTable = () => { |
|||
if (!dataSource.value.length) { |
|||
return message.info('没有任何数据可以提交'); |
|||
} |
|||
state.setLoading(true); |
|||
http |
|||
.post( |
|||
waterSys.submitTableData + |
|||
`?projectId=${state.projectId}${state.siteId ? `&siteId=${state.siteId}` : ''}`, |
|||
dataSource.value, |
|||
) |
|||
.then((res) => { |
|||
state.setLoading(false); |
|||
if (res.retcode == 0) { |
|||
message.success('操作成功'); |
|||
// 刷新数据 |
|||
emit('resetAll'); |
|||
} else { |
|||
message.info(res.msg); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
state.setLoading(false); |
|||
}); |
|||
}; |
|||
|
|||
const reset = () => { |
|||
// 计划表格 |
|||
getTable(); |
|||
// 穿梭框原始数据 |
|||
getLeftPlan(); |
|||
}; |
|||
|
|||
// tab页弹窗部分 ==================================================== |
|||
|
|||
// 添加弹窗控制变量 |
|||
const addVisible = ref(false); |
|||
// 打开弹窗 |
|||
const addModal = () => { |
|||
addVisible.value = true; |
|||
}; |
|||
|
|||
// 穿梭框部分 ======================================================= |
|||
|
|||
// 穿梭框数据 |
|||
const transferData = ref([]) as any; |
|||
// 获得穿梭框原始数据 |
|||
const getLeftPlan = () => { |
|||
http |
|||
.get(planManage.getTransData, { |
|||
projectId: state.projectId, |
|||
siteId: state.siteId, |
|||
// 设备类型(1照明,2空调,3排风扇,4风幕机,5电动窗,6给排水) |
|||
ctrlType: 6, |
|||
}) |
|||
.then((res) => { |
|||
let arr: Array<Object> = []; |
|||
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(planManage.submitTransData, targetKeys.value).then(() => { |
|||
message.success('添加成功'); |
|||
// 如果发送成功，则刷新表格 |
|||
reset(); |
|||
}); |
|||
}; |
|||
|
|||
const filterOption = (inputValue: string, option: any) => { |
|||
return option.description.indexOf(inputValue) > -1; |
|||
}; |
|||
|
|||
// 向外暴露方法 |
|||
defineExpose({ |
|||
reset, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
@import '../../style/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; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
position: fixed; |
|||
bottom: 0; |
|||
right: 0; |
|||
margin-right: 10px; |
|||
.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: 40px; |
|||
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 { |
|||
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> |
|||
@ -0,0 +1,282 @@ |
|||
import { ref } from 'vue'; |
|||
// 流动线条样式与定位
|
|||
export const linePosition = [ |
|||
// 雨水池 - 控制阀
|
|||
{ |
|||
left: '4%', |
|||
top: '44%', |
|||
transform: 'rotateZ(-30deg)', |
|||
transformOrigin: 'left', |
|||
zIndex: '6', |
|||
width: '6%', |
|||
}, |
|||
{ |
|||
left: '4%', |
|||
top: '84%', |
|||
transform: 'rotateZ(-30deg)', |
|||
transformOrigin: 'left', |
|||
zIndex: '6', |
|||
width: '6%', |
|||
}, |
|||
// 控制阀 - 进水阀
|
|||
{ left: '12%', top: '34%', width: '10%' }, |
|||
{ left: '12%', top: '74%', width: '10%' }, |
|||
// 进水阀 - 集水池
|
|||
{ left: '23%', top: '34%', width: '8%' }, |
|||
{ left: '23%', top: '74%', width: '8%' }, |
|||
// 集水池 - 排水泵 - 横线
|
|||
{ left: '35%', top: '34%', width: '4%' }, |
|||
{ left: '35%', top: '74%', width: '4%' }, |
|||
// 上半集水池右侧分线
|
|||
{ left: '39%', top: '34%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '4%' }, |
|||
{ left: '39%', top: '34%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '4%' }, |
|||
// 下半集水池右侧分线
|
|||
{ left: '39%', top: '74%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '4%' }, |
|||
{ left: '39%', top: '74%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '4%' }, |
|||
// 上半-左侧水泵分线
|
|||
{ left: '39%', top: '25%', width: '8%' }, |
|||
{ left: '39%', top: '43%', width: '8%' }, |
|||
// 下半-左侧水泵分线
|
|||
{ left: '39%', top: '65%', width: '8%' }, |
|||
{ left: '39%', top: '83%', width: '8%' }, |
|||
// 水泵右侧合线 下半
|
|||
{ left: '47%', top: '83%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '14%' }, |
|||
// 水泵右侧合线 上半
|
|||
{ left: '47%', top: '25%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '12%' }, |
|||
// 汇入总闸连线
|
|||
{ left: '47%', top: '52%', width: '4%' }, |
|||
// 汇入总集水池
|
|||
{ left: '51%', top: '52%', transform: 'rotateZ(-25deg)', transformOrigin: 'left', width: '7%' }, |
|||
// 汇入总排水闸
|
|||
{ left: '58%', top: '45%', width: '9%' }, |
|||
// 汇入市政管道 - 途径水泵2
|
|||
{ left: '68%', top: '45%', width: '28%' }, |
|||
// 总排水闸 - 总排水泵1 上半
|
|||
{ left: '75%', top: '45%', transform: 'rotateZ(-90deg)', transformOrigin: 'left', width: '10%' }, |
|||
{ left: '75%', top: '23%', width: '11%' }, |
|||
{ left: '86%', top: '22.5%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '10%' }, |
|||
// 总排水闸 - 总排水泵3 下半
|
|||
{ left: '75%', top: '45%', transform: 'rotateZ(90deg)', transformOrigin: 'left', width: '9%' }, |
|||
{ left: '75%', top: '65%', width: '11%' }, |
|||
{ |
|||
left: '86%', |
|||
top: '65%', |
|||
transform: 'rotateZ(-90deg)', |
|||
transformOrigin: 'left', |
|||
width: '9%', |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 1. 设备数量是固定的 |
|||
* 2. 设备顺序是固定的 |
|||
* 3. 此处数据用于渲染设备图标，后端返回数据后，将依次插入 |
|||
* @param icon 决定调用的设备图标：污水池=1/集水池=2/控制阀=3//进水阀=4//排水泵=5
|
|||
* @param type 设备类型：污水池=1/阀门=2/集水池=3/水泵=4 |
|||
* @param open 水泵的开关状态 开=true/关=false |
|||
* @param control 是否可以被操作（是否显示顶部按钮，水池为false） |
|||
* @param edited 是否已经被编辑（决定显示编辑 或 撤销） |
|||
*/ |
|||
// 污水池
|
|||
export const device1 = ref([ |
|||
{ |
|||
control: false, |
|||
type: 1, |
|||
icon: 1, |
|||
styleObject: { |
|||
left: '1%', |
|||
top: '40%', |
|||
zIndex: '9', |
|||
}, |
|||
}, |
|||
{ |
|||
control: false, |
|||
type: 1, |
|||
icon: 1, |
|||
styleObject: { |
|||
left: '1%', |
|||
top: '80%', |
|||
zIndex: '9', |
|||
}, |
|||
}, |
|||
]); |
|||
// 阀门
|
|||
export const device2 = ref([ |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 2, |
|||
icon: 3, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '8%', |
|||
top: '28%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: false, |
|||
type: 2, |
|||
icon: 3, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '8%', |
|||
top: '68%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 2, |
|||
icon: 4, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '20%', |
|||
top: '28%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 2, |
|||
icon: 4, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '20%', |
|||
top: '68%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 2, |
|||
icon: 3, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '48%', |
|||
top: '46%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 2, |
|||
icon: 3, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '65%', |
|||
top: '38%', |
|||
}, |
|||
}, |
|||
]); |
|||
// 集水池
|
|||
export const device3 = ref([ |
|||
{ |
|||
control: false, |
|||
type: 3, |
|||
icon: 2, |
|||
styleObject: { |
|||
left: '30%', |
|||
top: '68%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: false, |
|||
type: 3, |
|||
icon: 2, |
|||
styleObject: { |
|||
left: '30%', |
|||
top: '28%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: false, |
|||
type: 3, |
|||
icon: 2, |
|||
styleObject: { |
|||
left: '56%', |
|||
top: '40%', |
|||
}, |
|||
}, |
|||
]); |
|||
// 水泵
|
|||
export const device4 = ref([ |
|||
{ |
|||
control: true, |
|||
open: false, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '40%', |
|||
top: '20%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '40%', |
|||
top: '40%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '40%', |
|||
top: '60%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '40%', |
|||
top: '80%', |
|||
}, |
|||
}, |
|||
// 右上3水泵
|
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '78%', |
|||
top: '20%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '78%', |
|||
top: '40%', |
|||
}, |
|||
}, |
|||
{ |
|||
control: true, |
|||
open: true, |
|||
type: 4, |
|||
icon: 5, |
|||
edited: false, |
|||
styleObject: { |
|||
left: '78%', |
|||
top: '60%', |
|||
}, |
|||
}, |
|||
]); |
|||
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<div class="left-top"> |
|||
<div class="info"> |
|||
<div class="title-item"> |
|||
<div class="title-back">设备状态</div> |
|||
</div> |
|||
<div class="info-item"> |
|||
<div v-for="(item, index) in deviceState" :key="index"> |
|||
<img v-if="item.type == props.state" :src="item.icon" alt="" /> |
|||
<img v-else :src="item.default" alt="" /> |
|||
<div class="mode-item-text">{{ item.name }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mode"> |
|||
<div class="title-item"> |
|||
<div class="title-back">控制模式</div> |
|||
<div class="title-button">计划启用</div> |
|||
</div> |
|||
<div class="mode-item"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
// 全局变量 |
|||
import { items } from '/@/store/item'; |
|||
// 图像资源引入 |
|||
import type1 from './images/type1.png'; |
|||
import type2 from './images/type2.png'; |
|||
import type3 from './images/type3.png'; |
|||
import type1off from './images/type1off.png'; |
|||
import type2off from './images/type2off.png'; |
|||
import type3off from './images/type3off.png'; |
|||
// 传入的值 |
|||
const props = defineProps({ |
|||
// 设备状态 |
|||
state: { |
|||
type: Number, |
|||
}, |
|||
}); |
|||
const deviceState = [ |
|||
{ |
|||
icon: type1, |
|||
default: type1off, |
|||
name: '运行', |
|||
type: 1, |
|||
}, |
|||
{ |
|||
icon: type2, |
|||
default: type2off, |
|||
name: '故障', |
|||
type: 2, |
|||
}, |
|||
{ |
|||
icon: type3, |
|||
default: type3off, |
|||
name: '强排', |
|||
type: 3, |
|||
}, |
|||
]; |
|||
//页面 创建 |
|||
onMounted(() => {}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.left-top { |
|||
--pad: 12px; |
|||
position: absolute; |
|||
left: var(--pad); |
|||
top: var(--pad); |
|||
width: auto; |
|||
height: 110px; |
|||
display: flex; |
|||
z-index: 99; |
|||
gap: var(--pad); |
|||
> div { |
|||
background: black; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 3px; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
.title-item { |
|||
padding: 5px; |
|||
position: relative; |
|||
.title-back { |
|||
margin-left: 10px; |
|||
padding-left: 5px; |
|||
background: linear-gradient(to right, #1aaefb, transparent); |
|||
width: 7em; |
|||
color: white; |
|||
position: relative; |
|||
font-size: 14px; |
|||
vertical-align: middle; |
|||
} |
|||
.title-back::before { |
|||
position: absolute; |
|||
content: ''; |
|||
display: block; |
|||
width: 5px; |
|||
height: 100%; |
|||
left: -12px; |
|||
background: #1aaefb; |
|||
} |
|||
.title-button { |
|||
position: absolute; |
|||
right: 2px; |
|||
top: 2px; |
|||
padding: 3px 8px; |
|||
color: white; |
|||
border-radius: 4px; |
|||
user-select: none; |
|||
cursor: pointer; |
|||
background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%); |
|||
} |
|||
} |
|||
} |
|||
// 设备状态 |
|||
.info { |
|||
width: 230px; |
|||
.info-item { |
|||
display: flex; |
|||
padding-top: 3px; |
|||
div { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 5px; |
|||
align-items: center; |
|||
.mode-item-text { |
|||
color: white; |
|||
user-select: none; |
|||
} |
|||
img { |
|||
width: 23px; |
|||
display: block; |
|||
user-select: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 控制模式 |
|||
.mode { |
|||
width: 200px; |
|||
.mode-item { |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<template> |
|||
<div class="deviceItem" :style="info.styleObject"> |
|||
<!-- 点击编辑弹出框 --> |
|||
<a-popover |
|||
color="rgba(0, 0, 0, 0.8)" |
|||
placement="right" |
|||
v-model:visible="visible" |
|||
trigger="click"> |
|||
<template #content> |
|||
<div class="item-box"> |
|||
<div class="item-box-title"> |
|||
<img v-if="info.type == 2" src="./images/device1.png" alt="" /> |
|||
<img v-if="info.type == 4" src="./images/device2.png" alt="" /> |
|||
<span>{{ info.name }}</span> |
|||
</div> |
|||
<!-- 开关 --> |
|||
<div v-if="info.type == 4" class="item-box-switch"> |
|||
<div>开关</div> |
|||
<a-switch style="margin-top: 3px" size="small" v-model:checked="info.open" /> |
|||
</div> |
|||
<div v-if="info.type == 2" class="item-box-range"> |
|||
<div>开度</div> |
|||
<!-- <a-slider v-model:value="info.value" :tooltip-visible="true" :marks="range" :step="1"> --> |
|||
<a-slider v-model:value="info.value" :marks="range" :step="1"> |
|||
<template #mark="{ label, point }"> |
|||
<template v-if="point === 100"> |
|||
<strong>{{ label }}</strong> |
|||
</template> |
|||
<template v-else>{{ label }}</template> |
|||
</template> |
|||
</a-slider> |
|||
</div> |
|||
<div v-if="info.type == 4" class="item-box-range"> |
|||
<div>频率</div> |
|||
<a-slider v-model:value="info.value" :marks="range" :step="1"> |
|||
<template #mark="{ label, point }"> |
|||
<template v-if="point === 100"> |
|||
<strong>{{ label }}</strong> |
|||
</template> |
|||
<template v-else>{{ label }}</template> |
|||
</template> |
|||
</a-slider> |
|||
</div> |
|||
<div class="item-box-button"> |
|||
<a-button class="item-btn" @click="refresh">刷新</a-button> |
|||
<a-popconfirm |
|||
title="此操作只保存修改，需右下角按钮提交" |
|||
ok-text="确定" |
|||
cancel-text="取消" |
|||
@confirm="editDevice"> |
|||
<a-button class="item-btn" type="primary">执行</a-button> |
|||
</a-popconfirm> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<div v-if="!info.edited && info.control" class="device-button-back"> |
|||
<img src="./images/edit.png" alt="" /> |
|||
编辑</div |
|||
> |
|||
</a-popover> |
|||
|
|||
<a-popconfirm |
|||
title="撤销将移除已保存的修改" |
|||
ok-text="确定" |
|||
cancel-text="取消" |
|||
@confirm="backConfirm"> |
|||
<div v-if="info.edited && info.control" class="device-button"> |
|||
<img src="./images/back.png" alt="" /> |
|||
撤销</div |
|||
> |
|||
</a-popconfirm> |
|||
<!-- 设备图标 - 当前共5种单位 --> |
|||
<img v-if="info.icon == 1" src="./images/pond1.png" alt="" /> |
|||
<img v-if="info.icon == 2" src="./images/pond2.png" alt="" /> |
|||
<img v-if="info.icon == 3" src="./images/valve1.png" alt="" /> |
|||
<img v-if="info.icon == 4" src="./images/valve2.png" alt="" /> |
|||
<img v-if="info.icon == 5" style="width: 70px; height: 70px" src="./images/pump.png" alt="" /> |
|||
<div class="info-name"> |
|||
<span>{{ info.name }}</span> |
|||
<div class="img-box"> |
|||
<img |
|||
v-if="(info.type == 2 || info.type == 4) && info.state == 0" |
|||
src="./images/alarm1.png" |
|||
alt="" /> |
|||
<img |
|||
v-if="(info.type == 2 || info.type == 4) && info.state > 0" |
|||
src="./images/alarm2.png" |
|||
alt="" /> |
|||
</div> |
|||
</div> |
|||
<!-- 只有水池会显示容量 --> |
|||
<div class="info-value" v-if="info.type == 1 || info.type == 3"> |
|||
容量 : {{ info.value + info.unit }}</div |
|||
> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, computed } from 'vue'; |
|||
import { message } from 'ant-design-vue'; |
|||
// 图像资源引入 |
|||
|
|||
// 初始化 =============================================================== |
|||
|
|||
//页面 创建 |
|||
onMounted(() => {}); |
|||
// 传入的值 |
|||
const props = defineProps({ |
|||
// 设备类型 |
|||
info: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}); |
|||
// 父组件传递的数据 |
|||
const info = computed(() => props.info); |
|||
|
|||
// 组件交互 ============================================================= |
|||
|
|||
// 用于控制弹窗的显示状态 |
|||
const visible = ref(false); |
|||
// 滑动条显示规则 |
|||
const range = ref({ |
|||
0: { |
|||
style: { |
|||
color: '#0DFFFF', |
|||
}, |
|||
label: 'min', |
|||
}, |
|||
100: { |
|||
style: { |
|||
color: '#0DFFFF', |
|||
}, |
|||
label: 'max', |
|||
}, |
|||
}); |
|||
// 刷新事件 |
|||
const refresh = () => { |
|||
info.value.value = info.value.oldVal; |
|||
}; |
|||
// 撤销事件 |
|||
const backConfirm = () => { |
|||
info.value.value = info.value.oldVal; |
|||
info.value.edited = false; |
|||
// 如果为水泵 |
|||
if (info.value.type == 4) { |
|||
console.log(info.value); |
|||
info.value.open = info.value.opened; |
|||
} |
|||
}; |
|||
// 编辑-执行事件 |
|||
const editDevice = () => { |
|||
// 未产生修改 |
|||
if (info.value.value == info.value.oldVal && info.value.open === info.value.opened) { |
|||
return message.info('未产生任何修改'); |
|||
} |
|||
// 产生修改 |
|||
visible.value = false; |
|||
info.value.edited = true; |
|||
message.success('保存成功'); |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
// 设备的图像 |
|||
.deviceItem { |
|||
--size: 90px; |
|||
width: var(--size); |
|||
height: var(--size); |
|||
position: absolute; |
|||
top: 20%; |
|||
text-align: center; |
|||
// 默认使用3 |
|||
z-index: 3; |
|||
> img { |
|||
user-select: none; |
|||
} |
|||
// 设备名 |
|||
.info-name { |
|||
color: white; |
|||
font-size: 15px; |
|||
text-align: center; |
|||
position: relative; |
|||
> span { |
|||
vertical-align: middle; |
|||
} |
|||
.img-box { |
|||
display: inline-block; |
|||
position: absolute; |
|||
margin-left: 8px; |
|||
width: 22px; |
|||
> img { |
|||
width: 22px; |
|||
} |
|||
} |
|||
} |
|||
// 设备容量（仅水池） |
|||
.info-value { |
|||
text-align: center; |
|||
color: #23fdab; |
|||
font-size: 13px; |
|||
} |
|||
// 撤销按钮 |
|||
.device-button { |
|||
position: absolute; |
|||
top: -35px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
width: 5em; |
|||
padding: 5px 0; |
|||
text-align: center; |
|||
border-radius: 4px; |
|||
font-weight: 700; |
|||
cursor: pointer; |
|||
background: linear-gradient(#ffd700, #ffa403); |
|||
color: #674330; |
|||
user-select: none; |
|||
> img { |
|||
width: 13px; |
|||
} |
|||
} |
|||
// 编辑按钮 |
|||
.device-button-back { |
|||
position: absolute; |
|||
top: -35px; |
|||
left: 0; |
|||
right: 0; |
|||
margin: auto; |
|||
width: 5em; |
|||
padding: 5px 0; |
|||
text-align: center; |
|||
border-radius: 4px; |
|||
font-weight: 700; |
|||
cursor: pointer; |
|||
background: linear-gradient(#00f92c, #00fe9f); |
|||
color: #003d5a; |
|||
user-select: none; |
|||
> img { |
|||
width: 13px; |
|||
} |
|||
} |
|||
> img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
// 弹出框样式 |
|||
.ant-popover-inner { |
|||
// 弹出框内部容器 |
|||
.item-box { |
|||
width: 250px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
color: white; |
|||
img { |
|||
width: 20px; |
|||
margin-right: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
} |
|||
// 开关控件 |
|||
.item-box-switch { |
|||
padding: 10px 15px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
border-radius: 4px; |
|||
background: rgba(67, 136, 251, 0.3); |
|||
.ant-switch-checked { |
|||
background: linear-gradient(180deg, rgba(1, 206, 255, 1) 0%, rgba(0, 150, 229, 1) 100%); |
|||
} |
|||
} |
|||
// 滑动条控件 |
|||
.item-box-range { |
|||
padding: 10px 15px 10px 15px; |
|||
box-sizing: border-box; |
|||
border-radius: 4px; |
|||
background: rgba(67, 136, 251, 0.3); |
|||
.ant-slider-handle { |
|||
border: 2px solid red !important; |
|||
} |
|||
} |
|||
// 底部按钮区 |
|||
.item-box-button { |
|||
text-align: right; |
|||
.item-btn { |
|||
text-align: center; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,30 @@ |
|||
<template> |
|||
<div class="line-item" :style="position"></div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { computed } from 'vue'; |
|||
|
|||
// 传入的值 |
|||
const props = defineProps({ |
|||
// 线条 |
|||
position: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}); |
|||
const position = computed(() => { |
|||
return props.position; |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.line-item { |
|||
position: absolute; |
|||
height: 10px; |
|||
width: 250px; |
|||
z-index: 1; |
|||
background-image: url(./images/back.gif); |
|||
background-color: rgba(13, 255, 164, 0.3); |
|||
background-size: 200px 10px; |
|||
border-radius: 5px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,663 @@ |
|||
<template> |
|||
<div class="main"> |
|||
<!-- 左上角设备信息面板 --> |
|||
<deviceInfo :state="deviceState" /> |
|||
<!-- 示意图 --> |
|||
<div class="map"> |
|||
<!-- 污水池图标 --> |
|||
<deviceItem v-for="(item, index) in device1" :key="index" :info="item" /> |
|||
<!-- 阀门图标 --> |
|||
<deviceItem v-for="(item, index) in device2" :key="index" :info="item" /> |
|||
<!-- 集水池图标 --> |
|||
<deviceItem v-for="(item, index) in device3" :key="index" :info="item" /> |
|||
<!-- 排水泵图标 --> |
|||
<deviceItem v-for="(item, index) in device4" :key="index" :info="item" /> |
|||
<!-- 市政管道图标 --> |
|||
<div class="pipe"> |
|||
<div>市政管道</div> |
|||
<img src="./images/pipe.png" alt="" /> |
|||
</div> |
|||
<!-- 设备图标底部连线 --> |
|||
<deviceLine v-for="(item, index) in linePosition" :key="index" :position="item" /> |
|||
</div> |
|||
<!-- 右下角按钮 --> |
|||
<div class="buttons"> |
|||
<a-button type="primary" @click="openDrawer1">执行</a-button> |
|||
<a-button type="primary" @click="resetAll">全部撤销</a-button> |
|||
</div> |
|||
<!-- 页面右侧抽屉开关 --> |
|||
<div class="right-button"> |
|||
<div>计划与日志</div> |
|||
<img @click="visible = true" src="./images/open.png" alt="" /> |
|||
</div> |
|||
<!-- 右侧 计划日志抽屉 --> |
|||
<a-drawer |
|||
v-model:visible="visible" |
|||
class="drawer-item" |
|||
width="496" |
|||
placement="right" |
|||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" |
|||
:closable="false" |
|||
id="drawer" |
|||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="计划列表" force-render> |
|||
<planTab ref="tabs1Ref" @reset-all="resetDrawer" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="日志"> |
|||
<logTab ref="tabs2Ref" @reset-all="resetDrawer" /> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
<!-- 右侧 操作队列 --> |
|||
<a-drawer |
|||
v-model:visible="visible1" |
|||
class="drawer-item" |
|||
width="496" |
|||
placement="right" |
|||
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" |
|||
:closable="false" |
|||
id="drawer" |
|||
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"> |
|||
<a-tabs v-model:activeKey="activeKey1"> |
|||
<a-tab-pane key="1" tab="操作队列" force-render> |
|||
<div> |
|||
<a-badge :offset="[-5, 12]" :count="valveList.length"> |
|||
<button :class="{ btn: true, selected: activeButton == 1 }" @click="changeBtn(1)" |
|||
>阀门</button |
|||
> |
|||
</a-badge> |
|||
<a-badge :offset="[-5, 12]" :count="pumpList.length"> |
|||
<button :class="{ btn: true, selected: activeButton == 2 }" @click="changeBtn(2)" |
|||
>水泵</button |
|||
> |
|||
</a-badge> |
|||
</div> |
|||
<div class="device-list" v-if="activeButton == 1"> |
|||
<div class="device-list-item" v-for="(item, index) in valveList" :key="index"> |
|||
<div class="list-item-title"> |
|||
<div class="item-title"> |
|||
<img src="./images/device1.png" alt="" /> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
<div class="revoke" @click="revoke(item.id, index, 1)">撤销</div> |
|||
</div> |
|||
<div class="list-item-main"> |
|||
<div> |
|||
<div class="info">开度</div> |
|||
<div class="text"> |
|||
<span>{{ item.oldVal + item.unit }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.value + item.unit }}</span> |
|||
</div> |
|||
</div> |
|||
<div></div> |
|||
</div> |
|||
</div> |
|||
<a-empty style="margin-top: 100px" v-if="valveList.length == 0"> |
|||
<template #description> <span style="color: white">暂无数据</span></template> |
|||
</a-empty> |
|||
</div> |
|||
<div class="device-list" v-if="activeButton == 2"> |
|||
<div class="device-list-item" v-for="(item, index) in pumpList" :key="index"> |
|||
<div class="list-item-title"> |
|||
<div class="item-title"> |
|||
<img src="./images/device2.png" alt="" /> |
|||
<span>{{ item.name }}</span> |
|||
</div> |
|||
<div class="revoke" @click="revoke(item.id, index, 2)">撤销</div> |
|||
</div> |
|||
<div class="list-item-main"> |
|||
<div> |
|||
<div class="info">频率</div> |
|||
<div class="text"> |
|||
<span>{{ item.oldVal + item.unit }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.value + item.unit }}</span> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div class="info">开关</div> |
|||
<div class="text"> |
|||
<span>{{ item.opened ? '开' : '关' }}</span> |
|||
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
|||
<span>{{ item.open == 1 ? '开' : '关' }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<a-empty style="margin-top: 100px" v-if="pumpList.length == 0"> |
|||
<template #description> <span style="color: white">暂无数据</span></template> |
|||
</a-empty> |
|||
</div> |
|||
<div style="width: 100%; height: 100px"></div> |
|||
<div class="button-box"> |
|||
<button class="cancel" @click="visible1 = false">取消</button> |
|||
<a-popconfirm |
|||
title="此操作将提交以上修改内容" |
|||
ok-text="确定" |
|||
cancel-text="取消" |
|||
placement="bottomRight" |
|||
@confirm="submitChange"> |
|||
<button class="execute">执行</button> |
|||
</a-popconfirm> |
|||
</div> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { Modal, message } from 'ant-design-vue'; |
|||
|
|||
import deviceInfo from './deviceInfo.vue'; |
|||
import deviceLine from './deviceLine.vue'; |
|||
import deviceItem from './deviceItem.vue'; |
|||
import planTab from './component/planTab.vue'; |
|||
import logTab from './component/logTab.vue'; |
|||
import { linePosition, device1, device2, device3, device4 } from './device'; |
|||
// 网络请求 |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { waterSys } from '/@/api/waterSystem'; |
|||
// 全局变量 |
|||
import { items } from '/@/store/item'; |
|||
|
|||
// 初始化 =========================================================================================== |
|||
|
|||
const state = items(); |
|||
onMounted(() => { |
|||
// 获得所有设备状态 |
|||
getAllDevice(); |
|||
}); |
|||
const deviceState = 1; |
|||
|
|||
// 计划与日志 抽屉业务 ========================================================================================= |
|||
|
|||
// 计划与日志 |
|||
const visible = ref(false); |
|||
// 当前选中的tab |
|||
const activeKey = ref('1'); |
|||
|
|||
// 执行 抽屉业务 ========================================================================================= |
|||
|
|||
// 执行 |
|||
const visible1 = ref(false); |
|||
// 当前选中的tab |
|||
const activeKey1 = '1'; |
|||
// 当前选中的设备类型 阀门=1/水泵=2 |
|||
const activeButton = ref(1); |
|||
// 切换设备类型 |
|||
const changeBtn = (key: number) => { |
|||
activeButton.value = key; |
|||
}; |
|||
// 当前修改的水泵数据 |
|||
const pumpList = ref<any>([]); |
|||
// 当前修改的水阀数据 |
|||
const valveList = ref<any>([]); |
|||
|
|||
// 打开右侧抽屉 |
|||
const openDrawer1 = () => { |
|||
valveList.value = device2.value.filter((item: any) => { |
|||
return item.edited; |
|||
}); |
|||
pumpList.value = device4.value.filter((item: any) => { |
|||
return item.edited; |
|||
}); |
|||
if (valveList.value.length || pumpList.value.length) { |
|||
visible1.value = true; |
|||
} else { |
|||
message.info('未产生任何修改'); |
|||
} |
|||
}; |
|||
// 右侧抽屉 - 撤回 |
|||
const revoke = (id: any, index: number, type: number) => { |
|||
if (type == 1) { |
|||
valveList.value.splice(index, 1); |
|||
device2.value.forEach((item: any) => { |
|||
if (item.id == id) { |
|||
item.value = item.oldVal; |
|||
item.edited = false; |
|||
} |
|||
}); |
|||
} else if (type == 2) { |
|||
pumpList.value.splice(index, 1); |
|||
device4.value.forEach((item: any) => { |
|||
if (item.id == id) { |
|||
item.value = item.oldVal; |
|||
item.open = item.opened; |
|||
item.edited = false; |
|||
} |
|||
}); |
|||
} |
|||
}; |
|||
const submitChange = () => { |
|||
let valveList = []; |
|||
device2.value.forEach((item: any) => { |
|||
if (item.edited) { |
|||
valveList.push({ |
|||
deviceGroup: item.id, |
|||
openPercent: item.value, |
|||
}); |
|||
} |
|||
}); |
|||
let pumpList = []; |
|||
device4.value.forEach((item: any) => { |
|||
if (item.edited) { |
|||
pumpList.push({ |
|||
deviceGroup: item.id, |
|||
frequency: item.value, |
|||
switchStatus: +item.open, |
|||
}); |
|||
} |
|||
}); |
|||
state.setLoading(true); |
|||
http |
|||
.post(waterSys.submitList, { |
|||
projectId: state.projectId, |
|||
siteId: state.siteId, |
|||
valveList, |
|||
pumpList, |
|||
}) |
|||
.then((res) => { |
|||
let data = res.data; |
|||
state.setLoading(false); |
|||
// 修改请求发送了，但操作时产生了失败结果 |
|||
if (res.retcode != 0) { |
|||
// 直接提示并跳出 |
|||
return message.warning(res.msg); |
|||
} |
|||
// 所有修改均生效 |
|||
if (data.allSucceed) { |
|||
message.success('修改完成'); |
|||
// allSucceed不为true，则至少有一条数据修改失败 |
|||
} else { |
|||
message.info(`${data.successList.length}条修改成功，${data.failList.length}条修改失败`); |
|||
} |
|||
// 将所有已修改状态的数据还原 |
|||
resetEdit(); |
|||
visible1.value = false; |
|||
getAllDevice(); |
|||
}); |
|||
}; |
|||
|
|||
const resetEdit = () => { |
|||
device2.value.forEach((item) => { |
|||
item.edited = false; |
|||
}); |
|||
device4.value.forEach((item) => { |
|||
item.edited = false; |
|||
}); |
|||
}; |
|||
|
|||
// 设备数据业务 ========================================================================================== |
|||
|
|||
// 当其中一个tab产生了数据修改，可以调用该方法重置所有tab |
|||
const resetDrawer = () => { |
|||
try { |
|||
// tab1重置 |
|||
tabs1Ref.value.reset(); |
|||
} catch {} |
|||
try { |
|||
// tab2重置 |
|||
tabs2Ref.value.reset(); |
|||
} catch {} |
|||
}; |
|||
// 抽屉tab1组件的引用 |
|||
const tabs1Ref = ref(); |
|||
// 抽屉tab2组件的引用 |
|||
const tabs2Ref = ref(); |
|||
// 撤销所有修改 |
|||
const resetAll = () => { |
|||
Modal.confirm({ |
|||
title: '提示信息', |
|||
content: '该操作将还原已编辑内容', |
|||
onOk() { |
|||
// 水阀 |
|||
device2.value.forEach((item: any) => { |
|||
if (item.edited) { |
|||
item.value = item.oldVal; |
|||
item.edited = false; |
|||
} |
|||
}); |
|||
// 水泵 水泵包含 |
|||
device4.value.forEach((item: any) => { |
|||
if (item.edited) { |
|||
item.value = item.oldVal; |
|||
item.open = item.opened; |
|||
item.edited = false; |
|||
} |
|||
}); |
|||
}, |
|||
onCancel() {}, |
|||
}); |
|||
}; |
|||
// 获得所有设备状态 |
|||
const getAllDevice = () => { |
|||
getDevice(1); |
|||
getDevice(2); |
|||
getDevice(3); |
|||
getDevice(4); |
|||
}; |
|||
/** |
|||
* 获取一个设备类型的数据 |
|||
* @param type 污水池=1/阀门=2/集水池=3/水泵=4 |
|||
*/ |
|||
const getDevice = (type: number) => { |
|||
// 请求地址 |
|||
let url = ''; |
|||
if (type == 1) { |
|||
url = waterSys.getPool1; |
|||
} else if (type == 2) { |
|||
url = waterSys.getValve; |
|||
} else if (type == 3) { |
|||
url = waterSys.getPool2; |
|||
} else if (type == 4) { |
|||
url = waterSys.getPump; |
|||
} |
|||
http |
|||
.get(url, { |
|||
projectId: state.projectId, |
|||
siteId: state.siteId, |
|||
}) |
|||
.then((res) => { |
|||
let data = res.data; |
|||
// 污水池数据 |
|||
if (type == 1) { |
|||
device1.value.forEach((item: any, index: number) => { |
|||
let result = data[index]; |
|||
// 污水池名称 |
|||
item.name = result.deviceInfoName; |
|||
// 污水池容量 |
|||
item.value = result.record.capacity ? result.record.capacity : '--'; |
|||
// 单位 |
|||
item.unit = result.record.capacityUnit ? result.record.capacityUnit : ''; |
|||
}); |
|||
} |
|||
// 阀门数据 |
|||
if (type == 2) { |
|||
device2.value.forEach((item: any, index: number) => { |
|||
let result = data[index]; |
|||
// 阀门名称 |
|||
item.name = result.deviceGroupName; |
|||
// 阀门ID |
|||
item.id = result.deviceGroup; |
|||
// 编辑状态重置 |
|||
item.edited = false; |
|||
// 设备状态（是否正常） |
|||
item.state = result.record.runStatus.value != null ? result.record.runStatus.value : -1; |
|||
// 开度-新值 |
|||
item.value = result.record.openPercent ? result.record.openPercent : 0; |
|||
// 开度-旧值（用于判断旧值是否被修改） |
|||
item.oldVal = result.record.openPercent ? result.record.openPercent : null; |
|||
// 单位 |
|||
item.unit = result.record.openPercentUnit ? result.record.openPercentUnit : ''; |
|||
}); |
|||
} |
|||
// 集水池数据 |
|||
if (type == 3) { |
|||
device3.value.forEach((item: any, index: number) => { |
|||
let result = data[index]; |
|||
// 集水池名称 |
|||
item.name = result.deviceInfoName; |
|||
// 集水池容量 |
|||
item.value = result.record.capacity ? result.record.capacity : '--'; |
|||
// 单位 |
|||
item.unit = result.record.capacityUnit ? result.record.capacityUnit : ''; |
|||
}); |
|||
} |
|||
// 水泵数据 |
|||
if (type == 4) { |
|||
device4.value.forEach((item: any, index: number) => { |
|||
let result = data[index]; |
|||
// 水泵名称 |
|||
item.name = result.deviceGroupName; |
|||
// 水泵ID |
|||
item.id = result.deviceGroup; |
|||
// 编辑状态重置 |
|||
item.edited = false; |
|||
// 水泵的开启状态-新值 |
|||
item.open = result.record.switchStatus.value == 1 ? true : false; |
|||
// 水泵的开启状态-旧值（用于判断是否被修改） |
|||
item.opened = result.record.switchStatus.value == 1 ? true : false; |
|||
// 设备状态（是否正常） |
|||
item.state = result.record.runStatus.value != null ? result.record.runStatus.value : -1; |
|||
// 频率-新值 |
|||
item.value = result.record.frequency ? result.record.frequency : 0; |
|||
// 频率-旧值（用于判断是否被修改） |
|||
item.oldVal = result.record.frequency ? result.record.frequency : null; |
|||
// 单位 |
|||
item.unit = result.record.frequencyUnit ? result.record.frequencyUnit : ''; |
|||
}); |
|||
} |
|||
}); |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.main { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: relative; |
|||
background: linear-gradient(to bottom, rgb(35, 102, 165), rgb(1, 19, 81)); |
|||
// 图例区域 |
|||
.map { |
|||
width: 85vw; |
|||
height: 38vw; |
|||
position: relative; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
// 右侧 市政管道 |
|||
.pipe { |
|||
width: 120px; |
|||
height: 120px; |
|||
position: absolute; |
|||
text-align: center; |
|||
left: 92%; |
|||
top: 40%; |
|||
z-index: 3; |
|||
transform: translateY(-60px); |
|||
img { |
|||
height: 100%; |
|||
} |
|||
div { |
|||
width: inherit; |
|||
color: white; |
|||
position: absolute; |
|||
top: -1.5em; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
// 右下角按钮 |
|||
.buttons { |
|||
position: absolute; |
|||
right: 15px; |
|||
bottom: 15px; |
|||
display: flex; |
|||
gap: 15px; |
|||
height: 40px; |
|||
> button { |
|||
height: 40px; |
|||
} |
|||
} |
|||
.right-button { |
|||
height: 25px; |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
right: 10px; |
|||
margin: auto; |
|||
display: flex; |
|||
z-index: 99; |
|||
gap: 10px; |
|||
color: #0dffff; |
|||
> img { |
|||
width: 25px; |
|||
height: 25px; |
|||
border-radius: 2px; |
|||
vertical-align: middle; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
} |
|||
} |
|||
.drawer-item { |
|||
width: 100px; |
|||
height: 100px; |
|||
border: 2px solid red; |
|||
} |
|||
} |
|||
// 抽屉顶部tab按钮样式 |
|||
:deep(.ant-tabs-tab-btn) { |
|||
color: white; |
|||
} |
|||
.btn { |
|||
width: 92px; |
|||
height: 40px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
margin-top: 10px; |
|||
margin-left: 15px; |
|||
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; |
|||
} |
|||
.device-list { |
|||
margin-left: 15px; |
|||
margin-top: 15px; |
|||
width: 100%; |
|||
height: auto; |
|||
display: flex; |
|||
gap: 15px; |
|||
flex-direction: column; |
|||
.device-list-item { |
|||
width: calc(100% - 15px); |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
border: 2px solid #03407e; |
|||
border-radius: 4px; |
|||
background: rgba(0, 177, 255, 0.2); |
|||
display: flex; |
|||
gap: 10px; |
|||
flex-direction: column; |
|||
.list-item-title { |
|||
color: white; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.item-title { |
|||
img { |
|||
width: 25px; |
|||
} |
|||
span { |
|||
margin-left: 10px; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
.revoke { |
|||
text-align: center; |
|||
border: none; |
|||
border-radius: 4px; |
|||
padding: 5px 15px; |
|||
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; |
|||
} |
|||
} |
|||
.list-item-main { |
|||
display: flex; |
|||
font-size: 13px; |
|||
> div { |
|||
flex: 1; |
|||
display: flex; |
|||
gap: 8px; |
|||
> .info { |
|||
text-align: center; |
|||
width: 6em; |
|||
height: 2.5em; |
|||
line-height: 2.5em; |
|||
border-radius: 4px; |
|||
color: white; |
|||
background: linear-gradient( |
|||
180deg, |
|||
rgba(86, 221, 253, 1) 0%, |
|||
rgba(25, 176, 255, 1) 100% |
|||
); |
|||
} |
|||
> .text { |
|||
:first-child { |
|||
color: white; |
|||
line-height: 2.5em; |
|||
} |
|||
img { |
|||
padding: 0 5px; |
|||
} |
|||
:last-child { |
|||
line-height: 2.5em; |
|||
color: red; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.button-box { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 10px; |
|||
height: 60px; |
|||
position: absolute; |
|||
background-color: transparent; |
|||
text-align: right; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
.execute, |
|||
.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; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue