<template>
<div style="width: 100%"onselectstart="return false;">
<div>
<h1>基本功能操作 {{ currentTask.id }}: {{ currentTask.name }}</h1>
<h2 class="pre-wrap">特别说明:{{ currentTask.specialExplain }}</h2>
<p class="pre-wrap">操作提示:{{ currentTask.details }}</p>
</div>
<div style="position: relative;">
<img id="mapAll" ref="mapAll" src="../../../assets/UTA2070Image/Front.png" usemap="#image-map"/>
<img ref="knob" src="../../../assets/UTA2070Image/knob.png" style="position: absolute;top: 317px; left: 937px;" @wheel="rotateKnob($event)"/>
<img src="../../../assets/UTA2070Image/screen.png" style="position: absolute;top: 138px; left: 131px;" v-show="ScreenVisible"/>
<map name="image-map">
<area v-for="(area, index) in allHotspots" :key="index" :id="area.id" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)" :class="{ 'disabled': !area.clickable }">
</map>
</div>
<div style="margin-top: 20px">
<button style="margin-right: 10px;width: 20%" @click="previousTask" :disabled="currentTaskIndex === 0">上一个任务</button>
<button style="width: 20%" @click="nextTask" :disabled="currentTaskIndex === tasks.length - 1 ">下一个任务</button>
</div>
</div>
</template>
<script>
import $ from "jquery"
import 'jquery/dist/jquery.maphilight'
export default {
data() {
return{
rotationAngle: 0, // 记录当前旋转的角度
ScreenVisible:false,
powerOn: false, // 开关状态,默认为关闭
allHotspots: [
{ id: 1, title: 'Power', coords: '150,597,207,641', shape: 'rect', clickable: false },
{ id: 2, title: 'FREQ', coords: '922,77,982,112', shape: 'rect', clickable: false },
{ id: 3, title: 'SPAN', coords: '920,125,982,158', shape: 'rect', clickable: false },
{ id: 4, title: 'AMPT', coords: '920,171,982,207', shape: 'rect', clickable: false },
{ id: 5, title: 'AUTO', coords: '918,221,984,255', shape: 'rect', clickable: false },
{ id: 6, title: 'BW', coords: '1005,76,1053,110', shape: 'rect', clickable: false },
{ id: 7, title: 'Sweep', coords: '1005,126,1052,159', shape: 'rect', clickable: false },
{ id: 8, title: 'Trip', coords: '1005,171,1054,206', shape: 'rect', clickable: false },
{ id: 9, title: 'Meas', coords: '1005,223,1054,256', shape: 'rect', clickable: false },
{ id: 10, title: 'Trace', coords: '1073,77,1122,110', shape: 'rect', clickable: false },
{ id: 11, title: 'Detector', coords: '1073,126,1122,157', shape: 'rect', clickable: false },
{ id: 12, title: 'Display', coords: '1073,174,1122,207', shape: 'rect', clickable: false },
{ id: 13, title: 'MeasSetup', coords: '1073,222,1122,255', shape: 'rect', clickable: false },
{ id: 14, title: 'Marker', coords: '1139,76,1188,109', shape: 'rect', clickable: false },
{ id: 15, title: 'MakerFctn', coords: '1141,126,1190,159', shape: 'rect', clickable: false },
{ id: 16, title: 'Maker→', coords: '1139,174,1190,207', shape: 'rect', clickable: false },
{ id: 17, title: 'Peak', coords: '1139,222,1190,254', shape: 'rect', clickable: false },
{ id: 18, title: 'System', coords: '1213,75,1262,110', shape: 'rect', clickable: false },
{ id: 19, title: 'File', coords: '1214,123,1263,158', shape: 'rect', clickable: false },
{ id: 20, title: 'Save', coords: '1214,170,1263,207', shape: 'rect', clickable: false },
{ id: 21, title: 'Source', coords: '1214,222,1263,257', shape: 'rect', clickable: false },
{ id: 22, title: 'Preset', coords: '1282,75,1331,110', shape: 'rect', clickable: false },
{ id: 23, title: 'PrintSetup', coords: '1282,123,1333,158', shape: 'rect', clickable: false },
{ id: 24, title: 'Help', coords: '1280,171,1331,206', shape: 'rect', clickable: false },
{ id: 25, title: 'Demod', coords: '1280,218,1335,255', shape: 'rect', clickable: false },
{ id: 26, title: 'Cancel(Esc)', coords: '1095,303,1143,334', shape: 'rect', clickable: false },
{ id: 27, title: 'BkSp', coords: '1188,303,1239,334', shape: 'rect', clickable: false },
{ id: 28, title: 'Enter', coords: '1282,299,1333,334', shape: 'rect', clickable: false },
{ id: 29, title: '7', coords: '1093,348,1138,383', shape: 'rect', clickable: false },
{ id: 30, title: '8', coords: '1154,350,1198,383', shape: 'rect', clickable: false },
{ id: 31, title: '9', coords: '1214,350,1259,383', shape: 'rect', clickable: false },
{ id: 32, title: '4', coords: '1093,400,1138,433', shape: 'rect', clickable: false },
{ id: 33, title: '5', coords: '1154,400,1198,433', shape: 'rect', clickable: false },
{ id: 34, title: '6', coords: '1215,400,1260,435', shape: 'rect', clickable: false },
{ id: 35, title: '1', coords: '1093,449,1137,484', shape: 'rect', clickable: false },
{ id: 36, title: '2', coords: '1153,449,1198,484', shape: 'rect', clickable: false },
{ id: 37, title: '3', coords: '1215,449,1260,484', shape: 'rect', clickable: false },
{ id: 38, title: '0', coords: '1093,499,1137,534', shape: 'rect', clickable: false },
{ id: 39, title: '.', coords: '1153,501,1198,534', shape: 'rect', clickable: false },
{ id: 40, title: '+/-', coords: '1215,499,1260,536', shape: 'rect', clickable: false },
{ id: 41, title: 'GHz', coords: '1293,348,1334,383', shape: 'rect', clickable: false },
{ id: 42, title: 'MHz', coords: '1292,400,1335,435', shape: 'rect', clickable: false },
{ id: 43, title: 'kHz', coords: '1292,451,1335,482', shape: 'rect', clickable: false },
{ id: 44, title: 'Hz', coords: '1292,499,1333,532', shape: 'rect', clickable: false },
{ id: 45, title: '↓', coords: '941,499,984,536', shape: 'rect', clickable: false },
{ id: 46, title: '↑', coords: '1001,499,1044,534', shape: 'rect', clickable: false }
],
//任务总数组
tasks: [
{
id: 1,
name: '设备开机',
details: '打开电源',
hotspots: [13], // 指定当前任务能够点击的热区ID
sequence: [13], // 要求的点击顺序
initialSequence: [13], // 保存初始的点击顺序
completed: false,
requiresSequence: false, // 此任务需要按顺序点击
specialExplain:"此任务为固定式任务,请按规定步骤完成任务"
},
{
id: 2,
name: '设备开机',
details: '打开电源',
hotspots: [13], // 指定当前任务能够点击的热区ID
sequence: [13], // 要求的点击顺序
initialSequence: [13], // 保存初始的点击顺序
completed: false,
requiresSequence: false, // 此任务需要按顺序点击
specialExplain:"此任务为固定式任务,请按规定步骤完成任务"
},
{
id: 3,
name: '设备开机',
details: '打开电源',
hotspots: [13], // 指定当前任务能够点击的热区ID
sequence: [13], // 要求的点击顺序
initialSequence: [13], // 保存初始的点击顺序
completed: false,
requiresSequence: false, // 此任务需要按顺序点击
specialExplain:"此任务为固定式任务,请按规定步骤完成任务"
}
],
//所需要做的任务信息
currentTask: {},
//任务索引
currentTaskIndex: 0,
//所需要点击的热区
currentHotspots: [],
}
},
methods:{
//初始化一些任务的值
initAllTask(index){
},
//初始化任务
setCurrentTask(index) {
//初始化任务
this.initAllTask(index);
this.currentTaskIndex = index;
this.currentTask = this.tasks[index];
this.currentHotspots = this.allHotspots.filter(area => this.currentTask.hotspots.includes(area.id));
this.allHotspots.forEach(area => {
area.clickable = this.currentHotspots.some(hotspot => hotspot.id === area.id);
});
},
goToTask(index) {
if (index >= 0 && index < this.tasks.length) {
this.currentTaskIndex = index;
this.setCurrentTask(index);
}
},
// 上一个任务按钮点击事件处理程序
previousTask() {
this.goToTask(this.currentTaskIndex - 1);
},
// 下一个任务按钮点击事件处理程序
nextTask() {
this.goToTask(this.currentTaskIndex + 1);
},
//点击效果
handleHighlight(id) {
const escapedId = id;
const $element = $(`#${escapedId}`);
const data = $element.mouseout().data('maphilight') || {};
data.alwaysOn = true;
data.fillColor = "feeeed";
$element.data('maphilight', data).trigger('alwaysOn.maphilight');
setTimeout(() => {
const data = $element.mouseout().data('maphilight') || {};
data.fillColor = "ff0000";
data.alwaysOn = false;
$element.data('maphilight', data).trigger('alwaysOn.maphilight');
}, 300);
},
handleClick(area){
if (area.clickable==true){
this.handleHighlight(area.id);
}
else if(area.clickable==false){
this.$vs.notification({
duration:2000,
position:'top-center',
progress: 'auto',
title: '操作提示',
color:"danger",
text: `操作错误,此区域在这步骤不能点击`
})
}
},
//滚轮调整数值
rotateKnob(event) {
// 阻止默认的滚轮事件,以避免页面滚动
event.preventDefault();
// 检查滚轮方向
const delta = Math.sign(event.deltaY);
const rotateIncrement = 45; // 每次旋转的增量角度
// 根据滚轮方向进行旋转和数值变化
if (delta == 1) {
this.rotationAngle -= rotateIncrement; //记得写rotationAngle: 0, // 记录当前旋转的角度
this.$refs.knob.style.transform = `rotate(${this.rotationAngle}deg)`;
}
else if (delta == -1) {
this.rotationAngle += rotateIncrement;
this.$refs.knob.style.transform = `rotate(${this.rotationAngle}deg)`;
}
},
},
mounted() {
this.setCurrentTask(0);
$(function() {
$('#mapAll').maphilight({
fillColor: 'ff0000',
strokeColor: "FFFFFF",
strokeWidth: 3,
fillOpacity: 0.6,
});
});
},
}
</script>
<style scoped>
</style>
Vue虚拟仿真实验模板,包含图片热区、任务、设计思路、特效、上一步、下一步、初始化
于 2024-04-10 15:26:27 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)