You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
653 lines
20 KiB
653 lines
20 KiB
<template>
|
|
<div class="app-container home">
|
|
<el-row :gutter="20">
|
|
<el-col :span="24" :xs="24">
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
|
|
<el-form-item label="设备名称">
|
|
<el-select v-model="queryParams.devName" placeholder="请选择设备" @change="handleDevChange">
|
|
<el-option label="所有" value="0" />
|
|
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="状态" prop="status">-->
|
|
<!-- <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 240px" @change="handleStatusChangeFun">-->
|
|
<!-- <el-option label="所有" value="" />-->
|
|
<!-- <el-option label="开启" value="1" />-->
|
|
<!-- <el-option label="停止" value="0" />-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<el-form-item label="创建日期" style="width: 308px;">
|
|
<el-date-picker v-model="queryParams.dateRange"
|
|
value-format="YYYY-MM-DD"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item class="mr30">
|
|
<el-button class="mybtn" type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
|
<el-button class="mybtn" icon="Refresh" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="dev_control_table">
|
|
<el-table :data="timingList" height="685px">
|
|
<el-table-column label="序号" type="index" width="60" :index="indexMethod1"></el-table-column>
|
|
<el-table-column label="设备名称" align="center" prop="deviceName"/>
|
|
<el-table-column label="任务描述" align="center" prop="controlContext"/>
|
|
<!-- <el-table-column label="状态" align="center">-->
|
|
<!-- <template v-slot="scope">-->
|
|
<!--<!– <el-tag class="ml-2" :type="timerStatus">暂停</el-tag>–>-->
|
|
<!-- <el-tag class="ml-2" effect="dark" :type="scope.row.timerStatus == 0 ? 'info':'success'" disable-transitions>{{ scope.row.timerStatus == 0 ? '停止' : '开启' }}</el-tag>-->
|
|
<!-- </template>-->
|
|
<!-- </el-table-column>-->
|
|
<el-table-column label="执行日期" align="center" prop="runday"/>
|
|
<el-table-column label="执行时间" align="center" prop="runtime"/>
|
|
<el-table-column label="创建者" align="center" prop="createBy"/>
|
|
<el-table-column label="创建时间" align="center" prop="createTime"/>
|
|
<el-table-column label="操作" align="center" prop="handle">
|
|
<template v-slot="scope">
|
|
<!-- <el-button size="small" :type="scope.row.timerStatus == 0 ? 'success':''" @click="getUpDateStatusFun(scope)">{{ scope.row.timerStatus == 0 ? '开启' : '停止' }}</el-button>-->
|
|
<el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[5, 10, 20, 50]"
|
|
:small="small"
|
|
:disabled="disabled"
|
|
:background="background"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"/>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
|
|
<!-- 新增对话框 -->
|
|
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
|
|
<el-form :model="timingForm" ref="userRef" label-width="80px">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="设备名称">
|
|
<el-select v-model="timingForm.dev" placeholder="请选择设备" @change="handleDevChange">
|
|
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="任务描述" prop="content">
|
|
<el-input disabled v-model="timingForm.controlContext" placeholder="请输入任务描述"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="控制指令" prop="code">
|
|
<el-radio-group v-model="timingForm.checkedRadio" @change="checkedRadio" style="display: flex; flex-wrap: wrap;">
|
|
<div style="display: flex; margin-bottom: 10px; width: 100%">
|
|
<el-radio label="启" border/>
|
|
<el-radio label="停" border/>
|
|
</div>
|
|
<!-- <div class="tempRadioBox">-->
|
|
<!-- <div class="tempRadio">-->
|
|
<!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="进水温度" border @change="radioChange"/>-->
|
|
<!-- <el-input v-model="timingForm.inTemp" class="input"/>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="tempRadio">-->
|
|
<!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="出水温度" border @change="radioChange"/>-->
|
|
<!-- <el-input v-model="timingForm.outTemp" class="input"/>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="tempRadio">-->
|
|
<!-- <el-radio v-model="timingForm.checkedRadio" class="radio" label="温度" border @change="radioChange"/>-->
|
|
<!-- <el-input v-model="timingForm.temp" class="input"/>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<el-form-item label="执行次数">
|
|
<el-radio-group v-model="timingForm.day">
|
|
<el-radio label="每天" @change="handleEveryday"/>
|
|
</el-radio-group>
|
|
<div class="collapse">
|
|
<el-collapse v-model="activeName" accordion>
|
|
<el-collapse-item title="星期几" name="1">
|
|
<el-checkbox-group v-model="week" @change="handleCheckboxClick" >
|
|
<el-checkbox style='width:90px' label="2">星期一</el-checkbox>
|
|
<el-checkbox style='width:90px' label="3">星期二</el-checkbox>
|
|
<el-checkbox style='width:90px' label="4">星期三</el-checkbox>
|
|
<el-checkbox style='width:90px' label="5">星期四</el-checkbox>
|
|
<el-checkbox style='width:90px' label="6">星期五</el-checkbox>
|
|
<el-checkbox style='width:90px' label="7">星期六</el-checkbox>
|
|
<el-checkbox style='width:90px' label="8">星期日</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-collapse-item>
|
|
|
|
<el-collapse-item title="仅此一次" name="2">
|
|
<el-date-picker v-model="value1" type="date" placeholder="请选择日期"/>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="执行时间" prop="executeTime">
|
|
<el-time-picker v-model="timingForm.executeTime" placeholder="请选择执行时间" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Index">
|
|
import {Delete,SwitchButton} from '@element-plus/icons-vue'
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
import {ref, reactive, watch, onMounted, watchEffect} from "vue";
|
|
import {getList, getAddTimer, getDeleteTimer, getUpDateStatus} from '@/api/control/timer'
|
|
import { getDevice,getControlDeviceList } from '@/api/control/manual'
|
|
|
|
|
|
/** 页面加载时*/
|
|
onMounted(()=>{
|
|
formattedDateFun()
|
|
getListFun()
|
|
getAllDev()
|
|
})
|
|
|
|
|
|
/** 格式化日期*/
|
|
const YYYYMMDD = ref();
|
|
const timer = ref()
|
|
function formattedDateFun(){
|
|
let date = new Date()
|
|
let year = date.getFullYear()
|
|
let month = (date.getMonth()+1).toString().padStart(2, '0');
|
|
let day = date.getDate().toString().padStart(2, '0');
|
|
let hours = date.getHours()
|
|
let minutes = date.getMinutes()
|
|
let seconds = date.getSeconds()
|
|
YYYYMMDD.value = `${year}-${month}-${day}`
|
|
timer.value = `${hours}:${minutes}:${seconds}`
|
|
console.log(YYYYMMDD.value)
|
|
console.log(timer.value)
|
|
}
|
|
|
|
|
|
|
|
/** 筛选处理 */
|
|
//选择的日期
|
|
// const dateRange = ref([]);
|
|
const startDate = ref()
|
|
const endDate = ref()
|
|
const data = reactive({
|
|
queryParams: {
|
|
devName:'0',
|
|
status: '',
|
|
dateRange:[],
|
|
}
|
|
});
|
|
//监听开始日期和结束日期
|
|
const wacthSelectDate = watch(()=> data.queryParams.dateRange,(val) =>{
|
|
console.log(val[0])
|
|
startDate.value = val[0]
|
|
console.log(val[1])
|
|
endDate.value = val[1]
|
|
})
|
|
//拿到选择的状态val
|
|
const statusVal = ref()
|
|
function handleStatusChangeFun(val){
|
|
console.log('状态id',val)
|
|
statusVal.value = val
|
|
}
|
|
//搜索按钮
|
|
function handleQuery(){
|
|
getListFun()
|
|
}
|
|
//重置按钮
|
|
function resetQuery(){
|
|
data.queryParams.dateRange = [];
|
|
currentPage.value = 1;
|
|
pageSize.value = 20;
|
|
startDate.value = null;
|
|
endDate.value = null;
|
|
devId.value = null;
|
|
data.queryParams.devName = '0'
|
|
statusVal.value = ''
|
|
console.log('重置后的状态值为',statusVal.value)
|
|
getListFun()
|
|
}
|
|
|
|
|
|
/** 数据表格处理 */
|
|
const timingList = ref([])
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(20)
|
|
const total = ref()
|
|
const small = ref(false)
|
|
const background = ref(false)
|
|
const disabled = ref(false)
|
|
//翻页时不刷新序号
|
|
function indexMethod1(index){
|
|
return index+(currentPage.value-1)*pageSize.value+1
|
|
}
|
|
//获取表格信息
|
|
function getListFun(){
|
|
getList({
|
|
"timerId":null,
|
|
"deviceId":devId.value,
|
|
"controlContext":null,
|
|
"timerStatus":statusVal.value,
|
|
"createStart":startDate.value,
|
|
"createEnd": endDate.value,
|
|
"pageNum": currentPage.value,
|
|
"pageSize": pageSize.value
|
|
}).then((res)=>{
|
|
total.value = res.total
|
|
timingList.value = res.rows
|
|
|
|
for(let i = 0;i < timingList.value.length;i++){
|
|
if(timingList.value[i].runday.length != 10){ // 如果不是日期类型的
|
|
let rundayArr = timingList.value[i].runday.split(','); // 将字符串拆成数组
|
|
let rundayStr = '';
|
|
for(let j = 0;j < rundayArr.length;j++){
|
|
switch(rundayArr[j]){
|
|
case '0':
|
|
rundayStr = '每天';
|
|
break;
|
|
case '1':
|
|
rundayStr += '星期一';
|
|
break;
|
|
case '2':
|
|
rundayStr += '星期二';
|
|
break;
|
|
case '3':
|
|
rundayStr += '星期三';
|
|
break;
|
|
case '4':
|
|
rundayStr += '星期四';
|
|
break;
|
|
case '5':
|
|
rundayStr += '星期五';
|
|
break;
|
|
case '6':
|
|
rundayStr += '星期六';
|
|
break;
|
|
case '7':
|
|
rundayStr += '星期日';
|
|
break;
|
|
}
|
|
if(j < rundayArr.length - 1){
|
|
rundayStr += ',';
|
|
}
|
|
}
|
|
timingList.value[i].runday = rundayStr;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleSizeChange = (val) => {
|
|
console.log(`${val}`)
|
|
getListFun()
|
|
}
|
|
const handleCurrentChange = (val) => {
|
|
console.log(`${val}`)
|
|
getListFun()
|
|
}
|
|
|
|
//开启停止按钮
|
|
// function getUpDateStatusFun(scope){
|
|
// //scope.row.timerStatus取反，传入的值取反
|
|
// scope.row.timerStatus = scope.row.timerStatus === 1 ? 0 : 1;
|
|
// getUpDateStatus(scope.row.timerId,scope.row.timerStatus).then((res)=>{
|
|
// console.log(res)
|
|
// if(res.code == 200){
|
|
// ElMessage({
|
|
// type: 'success',
|
|
// message: res.msg,
|
|
// })
|
|
// if(scope.row.timerStatus == 0){
|
|
// scope.row.timerStatus = 1
|
|
// }else{
|
|
// scope.row.timerStatus = 0
|
|
// }
|
|
// getListFun()
|
|
// }
|
|
// })
|
|
// }
|
|
//删除定时任务
|
|
|
|
//删除任务
|
|
function getDeleteTimerFun(e){
|
|
console.log(e)
|
|
ElMessageBox.confirm(
|
|
'确定要删除此条定时任务吗？',
|
|
'提示',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}).then(() => {
|
|
getDeleteTimer(e.row.timerId).then((res)=>{
|
|
if(res.code == 200){
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '删除成功！',
|
|
})
|
|
getListFun()
|
|
}
|
|
})
|
|
}).catch(() => {})
|
|
}
|
|
|
|
|
|
/** 新增定时处理 */
|
|
const open = ref(false);
|
|
const title = ref();
|
|
const activeName = ref('1')
|
|
const value1 = ref('')
|
|
const devArr = ref([])
|
|
const selectDate = ref()
|
|
const timingForm = reactive({
|
|
dev:'',
|
|
controlContext:'设备启停',
|
|
intemp:'',
|
|
outtemp:'',
|
|
checkedRadio:'',
|
|
inTemp:'',
|
|
outTemp:'',
|
|
temp:'',
|
|
day:'',
|
|
executeTime:'',
|
|
})
|
|
//拿到选择的设备id
|
|
const devId = ref()
|
|
function handleDevChange(id){
|
|
devId.value = id
|
|
console.log('设备id：',devId.value)
|
|
}
|
|
//监听：输入的任务描述
|
|
const watchContent = watch(()=> timingForm.content,(val)=>{
|
|
console.log(val)
|
|
})
|
|
//监听：选中的是哪个指令
|
|
const code = ref()
|
|
const codeValue = ref()
|
|
const watchCode = watch(()=> timingForm.checkedRadio,(val)=>{
|
|
if(val == '启'){
|
|
timingForm.inTemp = ''
|
|
timingForm.outTemp = ''
|
|
timingForm.temp = ''
|
|
code.value = 'startandstop'
|
|
codeValue.value = 1
|
|
}
|
|
if(val == '停'){
|
|
timingForm.inTemp = ''
|
|
timingForm.outTemp = ''
|
|
timingForm.temp = ''
|
|
code.value = 'startandstop'
|
|
codeValue.value = 2
|
|
}
|
|
if(val == '进水温度'){
|
|
timingForm.outTemp = ''
|
|
timingForm.temp = ''
|
|
code.value = 'inTemp'
|
|
}
|
|
if(val == '出水温度'){
|
|
timingForm.inTemp = ''
|
|
timingForm.temp = ''
|
|
code.value = 'outTemp'
|
|
}
|
|
if(val == '温度'){
|
|
timingForm.outTemp = ''
|
|
timingForm.inTemp = ''
|
|
code.value = 'temp'
|
|
}
|
|
console.log('控制指令：',code.value)
|
|
})
|
|
|
|
// //监听：输入的进水温度值
|
|
// const tempValue = ref()
|
|
// const watchInTempValue = watch(()=>timingForm.inTemp,(val)=>{
|
|
// tempValue.value = val
|
|
// console.log('进水温度',tempValue.value)
|
|
// })
|
|
// //监听：输入的出水温度值
|
|
// const watchOutTempValue = watch(()=>timingForm.outTemp,(val)=>{
|
|
// tempValue.value = val
|
|
// console.log('出水温度',tempValue.value)
|
|
// })
|
|
// //监听：输入的温度值
|
|
// const watchTempValue = watch(()=>timingForm.temp,(val)=>{
|
|
// tempValue.value = val
|
|
// console.log('温度',tempValue.value)
|
|
// })
|
|
|
|
//选中每天
|
|
function handleEveryday(val){
|
|
value1.value = '';
|
|
week.value = [];
|
|
selectDate.value = 0
|
|
console.log('选择每天：',selectDate.value)
|
|
}
|
|
|
|
//勾选的星期
|
|
const week = ref([])
|
|
function handleCheckboxClick() {
|
|
if(week.value.length === 7){
|
|
timingForm.day = '每天';
|
|
selectDate.value = 0
|
|
}else if(week.value.length < 7 && week.value.length > 0){
|
|
timingForm.day = '';
|
|
value1.value = '';
|
|
let strNum = week.value.join(',')
|
|
selectDate.value = strNum
|
|
}
|
|
console.log('选择星期：',selectDate.value)
|
|
}
|
|
|
|
//监听：选择仅此一次将每天和星期几清空
|
|
const watchValue1 = watch(()=> value1.value,(val) => {
|
|
const date = new Date(val.toLocaleString());
|
|
const year = date.getFullYear();
|
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
const day = date.getDate().toString().padStart(2, '0');
|
|
selectDate.value = `${year}-${month}-${day}`;
|
|
console.log('选择日期：',selectDate.value)
|
|
if(value1.value != null){
|
|
timingForm.day = '';
|
|
week.value = [];
|
|
}
|
|
})
|
|
|
|
//监听：选择的执行时间
|
|
const selectTimer = ref()
|
|
const watchTime = watch(()=> timingForm.executeTime, (val) => {
|
|
let date = new Date(val)
|
|
let hours = date.getHours()
|
|
let minutes = date.getMinutes()
|
|
let seconds = date.getSeconds()
|
|
selectTimer.value = `${hours}:${minutes}:${seconds}`
|
|
console.log('选择时间：',selectTimer.value)
|
|
})
|
|
//获取可控所有设备
|
|
function getAllDev(){
|
|
getControlDeviceList().then((res)=>{
|
|
devArr.value = res.data
|
|
})
|
|
}
|
|
//新增按钮
|
|
function handleAdd() {
|
|
open.value = true;
|
|
title.value = "新增定时任务";
|
|
};
|
|
//确定新增
|
|
function submitForm() {
|
|
open.value = false;
|
|
getAddTimer({
|
|
"deviceId":devId.value,
|
|
"controlKey":code.value,
|
|
"controlValue":codeValue.value,
|
|
"status":null,
|
|
"runday":selectDate.value,
|
|
"runtime":selectTimer.value
|
|
}).then((res)=>{
|
|
if(res.code == 200){
|
|
ElMessage({
|
|
message: res.msg,
|
|
type: 'success',
|
|
})
|
|
devId.value = null;
|
|
getListFun()
|
|
}
|
|
})
|
|
};
|
|
//取消新增
|
|
function cancel() {
|
|
open.value = false;
|
|
};
|
|
|
|
|
|
|
|
|
|
const { queryParams } = toRefs(data);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dev_control_table{
|
|
position: relative;
|
|
width: 100%;
|
|
//min-height: 740px;
|
|
background-color: #2F3D8A;
|
|
}
|
|
.mr30{
|
|
margin-left: 100px;
|
|
margin-top: -4px;
|
|
}
|
|
.collapse{
|
|
margin-bottom: -1px;
|
|
}
|
|
.tempInput{
|
|
width: 20%;
|
|
background-color: #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.tempRadioBox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
.tempRadio{
|
|
display: flex;
|
|
margin-right: 20px;
|
|
&:nth-child(3){
|
|
margin-right: 0px;
|
|
}
|
|
.radio{
|
|
margin-right: 0px;
|
|
border-top-right-radius: 0px;
|
|
border-bottom-right-radius: 0px;
|
|
padding-right: 2px;
|
|
border-right: 0px;
|
|
}
|
|
.input{
|
|
width: 60px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
//::v-deep .el-input__wrapper{
|
|
// border-top-left-radius: 0px;
|
|
// border-bottom-left-radius: 0px;
|
|
//}
|
|
::v-deep .el-button{
|
|
border-radius: 2px;
|
|
}
|
|
::v-deep .mb8{
|
|
margin-bottom: 12px;
|
|
}
|
|
::v-deep .el-pagination{
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
::v-deep .el-pagination__total{
|
|
color: #f3ffff;
|
|
}
|
|
::v-deep .el-pagination__jump{
|
|
color: #f3ffff;
|
|
}
|
|
::v-deep .el-pager{
|
|
margin: 0 5px;
|
|
}
|
|
::v-deep .el-table .el-table__body-wrapper{
|
|
background-color: #2F3D8A;
|
|
}
|
|
::v-deep .el-form-item__content{
|
|
display: inline-block;
|
|
}
|
|
::v-deep .el-input__inner{
|
|
//color: #f3ffff !important;
|
|
color: #606266 !important;
|
|
}
|
|
::v-deep .el-date-editor .el-range-input{
|
|
//color: #f3ffff;
|
|
color: #606266 !important;
|
|
}
|
|
::v-deep .el-scrollbar__wrap.el-scrollbar__wrap--hidden-default{
|
|
background-color: rgba(47,61,138);
|
|
}
|
|
|
|
@media (max-width:960px) {
|
|
.app-container{
|
|
padding: 8px;
|
|
}
|
|
.dev_control_table{
|
|
height: 540px !important;
|
|
}
|
|
.mb8{
|
|
margin-bottom: 0px;
|
|
}
|
|
.mybtn{
|
|
margin-bottom: 0px !important;
|
|
}
|
|
::v-deep .el-button{
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .el-form-item--default .el-form-item__label{
|
|
height: 30px;
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .el-form-item--default .el-form-item__content{
|
|
line-height: 30px;
|
|
font-size: 12px;
|
|
}
|
|
::v-deep .el-form--inline .el-form-item{
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|