<template>
|
<div class="Manualcontrol">
|
<div class="button">
|
<div class="button_l">
|
<el-button
|
@click="handleAutoPickAndDrop('伸出')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !AutoPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !AutoPickColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">定位伸按钮</span>
|
</el-button>
|
<el-button
|
@click="handleAutoPickAndDrop('缩回')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !AutoDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !AutoDropColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">定位缩按钮</span>
|
</el-button>
|
<el-button
|
@click="handlePouse"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !pouseColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !pouseColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">暂停</span>
|
</el-button>
|
</div>
|
<el-button
|
@click="jumpRouter('/PickAndDrop')"
|
class="btn"
|
type="primary"
|
size="small"
|
style="width: 27.52rem; height: 4.29rem; color: rgba(255, 255, 255, 1)"
|
>
|
<span class="Aspan" style="font-size: 2.25rem; text-align: center"
|
>返回</span
|
>
|
</el-button>
|
</div>
|
<div v-if="isMobile" class="content">
|
<div class="content_l">
|
<div class="model">
|
<div class="model_btn">
|
<el-button
|
@click="handManualOperation('左', '伸出')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !leftPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !leftPickColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">伸出</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('左', '缩回')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !leftDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !leftDropColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">缩回</span>
|
</el-button>
|
<div style="color: #fff; font-size: 2rem; margin-left: 13rem">
|
左侧伸缩杆位置:{{
|
leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.leftPosition }}</div>
|
<!-- ruleForm.leftPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.manualExtend }}</div>
|
<div class="item">缩回速度:{{ ruleForm.manualExtend }}</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<div class="pulse2"></div>
|
<div class="pulse3"></div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: column; align-items: center">
|
<div class="video_l">
|
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
|
>视频监控左侧</span
|
>
|
<img src="@/assets/imgs/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="content_r">
|
<div class="model">
|
<div class="model_btn">
|
<el-button
|
@click="handManualOperation('右', '伸出')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !rightPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !rightPickColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">伸出</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('右', '缩回')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !rightDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !rightDropColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">缩回</span>
|
</el-button>
|
<div style="color: #fff; font-size: 2rem; margin-left: 13rem">
|
右侧伸缩杆位置:{{
|
rightposition.Rightvalue
|
? parseInt(rightposition.Rightvalue)
|
: 0
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.rightPosition }}</div>
|
<!-- ruleForm.rightPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.manualRetraction }}</div>
|
<div class="item">缩回速度:{{ ruleForm.manualRetraction }}</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<div class="pulse2"></div>
|
<div class="pulse3"></div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: column; align-items: center">
|
<div class="video_r">
|
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
|
>视频监控右侧</span
|
>
|
<img src="@/assets/imgs/right.png" alt="" />
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="content_mobile">
|
<div class="content_l">
|
<div class="model">
|
<div class="model_btn">
|
<el-button
|
@click="handManualOperation('左', '伸出')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !leftPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !leftPickColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">点动伸</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('左', '缩回')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !leftDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !leftDropColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">点动缩</span>
|
</el-button>
|
</div>
|
<div style="color: #fff; font-size: 2rem">左侧伸缩杆</div>
|
<span style="color: #fff; font-size: 2rem"
|
>当前伸缩杆位置：{{
|
leftposition.Liftvalue ? parseInt(leftposition.Liftvalue) : 0
|
}}</span
|
>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.leftPosition }}</div>
|
<!-- ruleForm.leftPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.manualExtend }}</div>
|
<div class="item">缩回速度:{{ ruleForm.manualExtend }}</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<div class="pulse2"></div>
|
<div class="pulse3"></div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: column; align-items: center">
|
<div class="video_l">
|
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
|
>视频监控左侧</span
|
>
|
<img src="@/assets/imgs/left.png" alt="" />
|
</div>
|
</div>
|
</div>
|
<div class="content_r">
|
<div class="model">
|
<div class="model_btn">
|
<el-button
|
@click="handManualOperation('右', '伸出')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !rightPickColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !rightPickColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">点动伸</span>
|
</el-button>
|
<el-button
|
@click="handManualOperation('右', '缩回')"
|
type="primary"
|
size="small"
|
:style="{
|
width: '14.69rem',
|
height: '5.06rem',
|
color: !rightDropColor ? 'rgba(64, 253, 240, 1)' : '#fff',
|
backgroundColor: !rightDropColor
|
? 'rgba(6, 229, 231, 0.3)'
|
: 'rgba(205, 208, 214,0.5)',
|
border: 'none',
|
borderTop: '0.25rem solid rgba(6, 229, 231, 1)',
|
}"
|
>
|
<div class="btnicon">
|
<span
|
style="
|
width: 1rem;
|
height: 1rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 50% 50%;
|
border: 0.1rem solid rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
font-size: 0.75rem;
|
margin-left: 0.1rem;
|
"
|
>i</span
|
>
|
</div>
|
<span style="font-size: 2.25rem; text-align: center">点动缩</span>
|
</el-button>
|
</div>
|
<div style="color: #fff; font-size: 2rem">右侧伸缩杆</div>
|
<span style="color: #fff; font-size: 2rem"
|
>当前伸缩杆位置：{{
|
rightposition.Rightvalue ? parseInt(rightposition.Rightvalue) : 0
|
}}</span
|
>
|
</div>
|
<div class="operate">
|
<div class="item">伸到位:{{ ruleForm.rightPosition }}</div>
|
<!-- ruleForm.rightPosition -->
|
<div class="item">缩到位:{{ 0 }}</div>
|
<div class="item">伸出速度:{{ ruleForm.manualRetraction }}</div>
|
<div class="item">缩回速度:{{ ruleForm.manualRetraction }}</div>
|
<div class="open">
|
<div class="city">
|
<div class="dotted"></div>
|
<div class="pulse1"></div>
|
<div class="pulse2"></div>
|
<div class="pulse3"></div>
|
</div>
|
</div>
|
</div>
|
<div style="display: flex; flex-direction: column; align-items: center">
|
<div class="video_r">
|
<span style="color: #fff; font-size: 1.25rem; font-weight: bold"
|
>视频监控右侧</span
|
>
|
<!-- <div id="video-container"></div> -->
|
<img src="@/assets/imgs/right.png" alt="" />
|
<!-- <div
|
id="playWnd"
|
class="playWnd"
|
style="left: 109px; top: 133px"
|
ref="playWnd"
|
></div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import { ref, onMounted, nextTick, onUnmounted } from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import {
|
ManualOperation,
|
GetPosition,
|
AutoPickAndDrop,
|
Pouse,
|
GetParameter,
|
} from "@/api/newapi/Parameters.js";
|
// import EZUIKit from "ezuikit-js";
|
|
const router = useRouter();
|
const isMobile = ref(false);
|
const Position = ref({
|
lift: 0,
|
right: 0,
|
});
|
const rightposition = ref({});
|
const leftposition = ref({});
|
const tableData = ref([]);
|
const isStart = ref(false); // 是否开始
|
const timer = ref(null);
|
const client = ref(null);
|
|
const pouseColor = ref(false);
|
const AutoPickColor = ref(false); // 伸出时颜色为默认颜色
|
const AutoDropColor = ref(false); // 缩回时颜色为变色
|
const rightPickColor = ref(false); // 右侧伸出时颜色为默认颜色
|
const rightDropColor = ref(false); // 右侧缩回时颜色为变色
|
const leftPickColor = ref(false); // 左侧伸出时颜色为默认颜色
|
const leftDropColor = ref(false); // 左侧缩回时颜色为变色
|
const jumpRouter = (path) => {
|
router.push(path);
|
};
|
const handManualOperation = throttle(async (position, ExtendedState) => {
|
if (position == "右") {
|
if (ExtendedState == "伸出") {
|
rightPickColor.value = true; // 右侧伸出时颜色为默认颜色
|
} else {
|
rightDropColor.value = true; // 右侧缩回时颜色为变色
|
}
|
} else {
|
if (ExtendedState == "伸出") {
|
leftPickColor.value = true; // 左侧伸出时颜色为默认颜色
|
} else {
|
leftDropColor.value = true; // 左侧缩回时颜色为变色
|
}
|
}
|
setTimeout(() => {
|
if (position == "右") {
|
if (ExtendedState == "伸出") {
|
rightPickColor.value = false; // 右侧伸出时颜色为默认颜色
|
} else {
|
rightDropColor.value = false; // 右侧缩回时颜色为变色
|
}
|
} else {
|
if (ExtendedState == "伸出") {
|
leftPickColor.value = false; // 左侧伸出时颜色为默认颜色
|
} else {
|
leftDropColor.value = false; // 左侧缩回时颜色为变色
|
}
|
}
|
}, 2000);
|
try {
|
const res = await ManualOperation({
|
position: position,
|
ExtendedState: ExtendedState,
|
});
|
if (res.code === 0) {
|
ElMessage({
|
message: `${position}侧${ExtendedState}成功，${position}PLC手动${ExtendedState}速度为${res.data.manualExtend}`,
|
type: "success",
|
});
|
} else {
|
ElMessage({
|
message: `${position}侧${ExtendedState}失败，${position}PLC手动${ExtendedState}速度为${res.data.manualExtend}`,
|
type: "error",
|
});
|
}
|
} catch (error) {
|
ElMessage({
|
message: "操作失败",
|
type: "error",
|
});
|
}
|
}, 2000);
|
const handleAutoPickAndDrop = throttle(async (val) => {
|
if (val == "伸出") {
|
AutoPickColor.value = true; // 伸出时颜色为默认颜色
|
} else {
|
AutoDropColor.value = true; // 缩回时颜色为变色
|
}
|
setTimeout(() => {
|
if (val == "伸出") {
|
AutoPickColor.value = false; // 伸出时颜色为默认颜色
|
} else {
|
AutoDropColor.value = false; // 缩回时颜色为变色
|
}
|
}, 2000);
|
try {
|
const response = await AutoPickAndDrop({
|
ExtendedState: val,
|
});
|
if (response.code === 0) {
|
ElMessage.success(`${val}成功`);
|
} else {
|
ElMessage.error(`${val}失败`);
|
}
|
} catch (error) {
|
console.error(error);
|
ElMessage.error("操作失败");
|
}
|
}, 2000);
|
const handlePouse = throttle(async () => {
|
pouseColor.value = !pouseColor.value; // 切换颜色
|
setTimeout(() => {
|
pouseColor.value = !pouseColor.value; // 切换颜色
|
}, 2000);
|
try {
|
const response = await Pouse();
|
if (response.code === 0) {
|
ElMessage.success(response.message);
|
} else {
|
ElMessage.error(response.message);
|
}
|
console.log("Pouse response:", response);
|
} catch (error) {
|
console.error(error);
|
ElMessage.error(error);
|
}
|
// 5秒后恢复原来的颜色
|
}, 2000);
|
|
//获取当前位置
|
// const getPosition = () => {
|
// GetPosition().then((res) => {
|
// if (res.code == 0) {
|
// Position.value.lift = res.data.lift;
|
// Position.value.right = res.data.right;
|
// }
|
// });
|
// };
|
|
function throttle(func, wait) {
|
// 上一次执行函数的时间戳，初始值为 0
|
let lastTime = 0;
|
// 返回一个闭包函数，作为节流后的函数
|
return function (...args) {
|
// 获取当前时间戳
|
const now = Date.now();
|
// 如果当前时间与上一次执行时间的差值大于等于 wait，则执行函数
|
if (now - lastTime >= wait) {
|
// 更新上一次执行函数的时间戳
|
lastTime = now;
|
// 调用原始函数，并传入参数
|
func(...args);
|
}
|
};
|
}
|
|
const ruleForm = ref({
|
creater: "string",
|
createDate: "2025-03-27T05:48:57.698Z",
|
modifier: "string",
|
modifyDate: "2025-03-27T05:48:57.698Z",
|
id: 0,
|
extendSpeed: 0,
|
retractionSpeed: 0,
|
manualExtend: 0,
|
manualRetraction: 0,
|
// depid: userInfo.depid,
|
// account: userInfo.userName,
|
leftPosition: 0,
|
rightPosition: 0,
|
});
|
|
//获取参数
|
const getParameter = () => {
|
GetParameter().then((res) => {
|
if (res.code == 0) {
|
ruleForm.value.extendSpeed = res.data == null ? 0 : res.data.extendSpeed;
|
ruleForm.value.retractionSpeed =
|
res.data == null ? 0 : res.data.retractionSpeed;
|
ruleForm.value.manualExtend =
|
res.data == null ? 0 : res.data.manualExtend;
|
ruleForm.value.manualRetraction =
|
res.data == null ? 0 : res.data.manualRetraction;
|
ruleForm.value.leftPosition =
|
res.data == null ? 0 : res.data.leftPosition;
|
ruleForm.value.rightPosition =
|
res.data == null ? 0 : res.data.rightPosition;
|
}
|
});
|
};
|
|
const createSocket = (url) => {
|
clearInterval(timer.value);
|
// 创建WebSocket连接
|
//"ws://127.0.0.1:9295/admin"
|
//192.168.1.103
|
client.value = new WebSocket("ws://192.168.1.103:5173/");
|
client.value.onopen = function () {
|
console.log("WebSocket 连接成功");
|
};
|
client.value.onmessage = function (event) {
|
let data = JSON.parse(event.data);
|
if (data.Status) {
|
tableData.value = data.Data;
|
} else if (data.device == "右Plc") {
|
rightposition.value = data;
|
} else if (data.device == "左Plc") {
|
leftposition.value = data;
|
}
|
|
console.log("WebSocket 接收到消息", data);
|
};
|
client.value.onclose = function () {
|
console.log("WebSocket 连接关闭");
|
if (isStart.value) {
|
timer.value = setTimeout(createSocket, 1000);
|
}
|
};
|
|
client.value.onerror = function () {};
|
};
|
onMounted(() => {
|
isStart.value = true; // 设置为开始状态
|
createSocket();
|
getParameter();
|
// initPlugin();
|
// initWebVideoCtrl();
|
// 监听窗口大小变化
|
window.addEventListener("resize", () => {
|
nextTick(() => {
|
if (window.innerWidth > 1200) {
|
isMobile.value = true;
|
} else {
|
isMobile.value = false;
|
}
|
});
|
});
|
// 初始化时判断窗口大小
|
if (window.innerWidth > 1200) {
|
// 如果窗口宽度小于1080px，执行相应的操作
|
isMobile.value = true;
|
} else {
|
// 如果窗口宽度小于等于1080px，执行相应的操作
|
isMobile.value = false;
|
}
|
// getPosition();
|
});
|
|
onUnmounted(() => {
|
isStart.value = false;
|
clearInterval(timer.value);
|
if (client.value) {
|
client.value.close();
|
}
|
clearInterval(timer.value);
|
});
|
</script>
|
<style lang="scss" scoped>
|
.Manualcontrol {
|
display: flex;
|
flex-direction: column;
|
|
// background-color: rgba(0, 0, 0, 0.3);
|
.button {
|
height: 7.83rem;
|
display: flex;
|
justify-content: space-between;
|
|
.btn {
|
position: relative;
|
background-color: rgba($color: #000000, $alpha: 0);
|
background-image: url("@/assets/index/icon/btnbg.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
border: none;
|
|
.Aspan {
|
position: relative;
|
color: rgba(255, 255, 255, 1);
|
font-size: 2.25rem;
|
text-align: center;
|
}
|
|
.Aspan::before {
|
content: "";
|
position: absolute;
|
height: 0.66rem;
|
/* 设置边框的长度 */
|
width: 0.66rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
left: -11.8rem;
|
top: -0.25rem;
|
border-radius: 50%;
|
}
|
|
.Aspan::after {
|
content: "";
|
position: absolute;
|
height: 0.66rem;
|
/* 设置边框的长度 */
|
width: 0.66rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
right: -11.8rem;
|
top: -0.25rem;
|
border-radius: 50%;
|
}
|
}
|
|
.btn::after {
|
content: "";
|
position: absolute;
|
left: 50%;
|
height: 0.25rem;
|
/* 设置边框的长度 */
|
width: 20rem;
|
/* 设置边框的宽度 */
|
background-color: rgba(102, 255, 255, 1);
|
/* 设置边框的颜色 */
|
transform: translateX(-50%);
|
bottom: 0;
|
border-radius: 0.25rem;
|
}
|
|
.btn::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
height: 1.01rem;
|
/* 设置边框的长度 */
|
width: 27.57rem;
|
/* 设置边框的宽度 */
|
background-image: url("@/assets/index/icon/border.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
/* 设置边框的颜色 */
|
transform: translateX(-50%);
|
top: 0;
|
border-radius: 0.25rem;
|
}
|
}
|
|
.content {
|
display: flex;
|
.content_l {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 50%;
|
height: 45rem;
|
background-color: rgba(9, 48, 104, 1);
|
color: rgba(16, 16, 16, 1);
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
.model {
|
display: flex;
|
.model_btn {
|
display: flex;
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
height: 3.19rem;
|
border-radius: 0.31rem;
|
background: linear-gradient(
|
90deg,
|
rgba(0, 224, 255, 0.74) 0%,
|
rgba(0, 224, 255, 0.4) 60%,
|
rgba(235, 242, 243, 0.13) 100%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.video_l {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 80%;
|
border: 0.25rem solid rgba(255, 255, 255, 0.8);
|
img {
|
width: 6rem;
|
height: 8rem;
|
}
|
}
|
}
|
|
.content_r {
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
width: 50%;
|
height: 45rem;
|
background-color: rgba(9, 48, 104, 1);
|
color: rgba(16, 16, 16, 1);
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
margin-left: 3rem;
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
|
.model {
|
display: flex;
|
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
align-items: flex-end;
|
flex-direction: column;
|
padding: 0.58rem 0.58rem;
|
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
height: 3.19rem;
|
border-radius: 0.31rem;
|
background: linear-gradient(
|
90deg,
|
rgba(0, 224, 255, 0.74) 0%,
|
rgba(0, 224, 255, 0.4) 60%,
|
rgba(235, 242, 243, 0.13) 100%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.video_r {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 80%;
|
border: 0.25rem solid rgba(255, 255, 255, 0.8);
|
img {
|
width: 6rem;
|
height: 8rem;
|
}
|
}
|
}
|
}
|
|
.content_mobile {
|
display: flex;
|
flex-direction: column;
|
|
.content_l {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 100%;
|
background-color: rgba(9, 48, 104, 1);
|
color: rgba(16, 16, 16, 1);
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
|
.model {
|
display: flex;
|
justify-content: space-between;
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
padding: 0.58rem 0.58rem;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
height: 4.19rem;
|
border-radius: 0.31rem;
|
background: linear-gradient(
|
90deg,
|
rgba(0, 224, 255, 0.74) 0%,
|
rgba(0, 224, 255, 0.4) 60%,
|
rgba(235, 242, 243, 0.13) 100%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.video_l {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 70rem;
|
border: 0.75rem solid rgba(255, 255, 255, 0.8);
|
}
|
}
|
|
.content_r {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
width: 100%;
|
background-color: rgba(9, 48, 104, 1);
|
color: rgba(16, 16, 16, 1);
|
box-shadow: 0rem 0.13rem 0.38rem 0rem rgba(6, 229, 231, 1);
|
border: 0.06rem solid rgba(6, 229, 231, 1);
|
padding: 0.88rem 0.88rem;
|
box-sizing: border-box;
|
margin-top: 10%;
|
|
.model {
|
display: flex;
|
justify-content: space-between;
|
.model_btn {
|
display: flex;
|
|
.btnicon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
width: 1.56rem;
|
height: 1.75rem;
|
background-image: url("@/assets/index/icon/icon7.png");
|
background-repeat: no-repeat;
|
background-size: cover;
|
margin-right: 1.25rem;
|
}
|
}
|
}
|
|
.operate {
|
display: flex;
|
flex-direction: column;
|
padding: 0.88rem 0.88rem;
|
align-items: flex-end;
|
.item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 8.75rem;
|
height: 4.19rem;
|
border-radius: 0.31rem;
|
background: linear-gradient(
|
90deg,
|
rgba(0, 224, 255, 0.74) 0%,
|
rgba(0, 224, 255, 0.4) 60%,
|
rgba(235, 242, 243, 0.13) 100%
|
);
|
color: rgba(16, 16, 16, 1);
|
color: rgb(255, 255, 255);
|
font-size: 1.13rem;
|
padding-left: 0.69rem;
|
margin-top: 0.88rem;
|
}
|
|
.open {
|
width: 10rem;
|
height: 10rem;
|
position: relative;
|
margin-top: 1rem;
|
}
|
|
.open::before {
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
width: 4.19rem;
|
height: 0.06rem;
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.open::after {
|
content: "";
|
position: absolute;
|
left: -12%;
|
top: 12%;
|
width: 4.19rem;
|
height: 0.06rem;
|
transform: skew(30deg, -30deg);
|
background-color: rgba(0, 224, 255, 1);
|
}
|
|
.city {
|
position: absolute;
|
top: 2.5rem;
|
left: -3rem;
|
}
|
|
.dotted {
|
width: 1rem;
|
height: 1rem;
|
background-color: #3be7fa;
|
border-radius: 50%;
|
}
|
|
/* 标签选择器之属性匹配选择 */
|
.city div[class^="pulse"] {
|
/* 保证小盒子水平垂直居中 */
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 1rem;
|
height: 1rem;
|
box-shadow: 0 0 12px #3be7fa;
|
border-radius: 50%;
|
animation: pulse 3s linear infinite;
|
}
|
|
.city .pulse1 {
|
animation-delay: 0s !important;
|
}
|
|
.city .pulse2 {
|
animation-delay: 1s !important;
|
}
|
|
.city .pulse3 {
|
animation-delay: 2s !important;
|
}
|
|
@keyframes pulse {
|
0% {
|
width: 1rem;
|
height: 1rem;
|
}
|
|
40% {
|
width: 2.5rem;
|
height: 2.5rem;
|
opacity: 1;
|
}
|
|
100% {
|
width: 4.375rem;
|
height: 4.375rem;
|
opacity: 0;
|
}
|
}
|
}
|
.video_r {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
width: 70rem;
|
border: 0.75rem solid rgba(255, 255, 255, 0.8);
|
}
|
}
|
}
|
}
|
</style>
|
