|
21 | 21 | <div class="well-transparent container"> |
22 | 22 | <div class="image-frame" :style="imageFrameStyle"> |
23 | 23 | <div class="image-frame-inner1"> |
24 | | - <ElSlider v-if="isSwing" class="tilt-slider" v-model="tilt" :min="0" :max="180" vertical :show-input-controls="false" height="100%" @input="Move" /> |
| 24 | + <ElSlider v-if="isSwing" class="tilt-slider" v-model="tilt" :min="0" :max="180" vertical :show-input-controls="false" height="100%" @change="Move" @input="Move" /> |
25 | 25 | <ElTooltip :tabindex="-1" placement="top" :content="stillFullView?'clickで縮小します':'clickで拡大します'" effect="light" :open-delay="500"> |
26 | 26 | <img class="still-image" :src="stillImage" @click="stillFullView=!stillFullView"> |
27 | 27 | </ElTooltip> |
28 | 28 | </div> |
29 | 29 | <div v-if="isSwing" class="image-frame-inner2"> |
30 | | - <ElSlider class="pan-slider" v-model="pan" :min="0" :max="355" :show-input-controls="false" @input="Move" /> |
| 30 | + <ElSlider class="pan-slider" v-model="pan" :min="0" :max="355" :show-input-controls="false" @change="Move" @input="Move" /> |
31 | 31 | </div> |
32 | 32 | </div> |
33 | 33 |
|
|
86 | 86 | <h3>動体検知</h3> |
87 | 87 | <SettingSwitch title="動体検知周期の短縮" tooltip="Alarmの無検知時間5分を30秒に短縮します" v-model="config.MINIMIZE_ALARM_CYCLE" comment="※ 変更すると設定ボタンで再起動します" /> |
88 | 88 |
|
| 89 | + <div v-if="isSwing" @click="ClearCruiseSelect"> |
| 90 | + <h3>クルーズ</h3> |
| 91 | + <SettingSwitch title="クルーズ動作" tooltip="クルーズ軌道を設定し、巡回動作をします" v-model="config.CRUISE" @change="(config.CRUISE === 'on') && !cruiseList.length && AddCruise()" @click.native.stop /> |
| 92 | + <div> |
| 93 | + <SettingCruise v-for="(cruise, idx) of cruiseList" :key="'timetable'+idx" v-model="cruiseList[idx]" :pan="pan" :tilt="tilt" :selected="cruiseSelect === idx" @add="AddCruise" @remove="DeleteCruise(idx)" @pan="pan=$event" @tilt="tilt=$event" @click="CruiseSelect(idx)" /> |
| 94 | + </div> |
| 95 | + </div> |
| 96 | + |
89 | 97 | <h3>メンテナンス</h3> |
90 | 98 | <SettingButton v-if="isSwing" title="Swing座標初期化" :titleOffset="2" :span="4" tooltip="Swingの座標を両側の端点当てで修正します" label="初期化" @click="MoveInit" /> |
91 | 99 | <SettingSwitch title="定期リスタート" tooltip="定期的に再起動する設定をします" v-model="config.REBOOT" /> |
|
121 | 129 | import SettingButton from './SettingButton.vue'; |
122 | 130 | import SettingDangerButton from './SettingDangerButton.vue'; |
123 | 131 | import SettingSchedule from './SettingSchedule.vue'; |
| 132 | + import SettingCruise from './SettingCruise.vue'; |
124 | 133 |
|
125 | 134 | import 'element-ui/lib/theme-chalk/tooltip.css'; |
126 | 135 | import 'element-ui/lib/theme-chalk/drawer.css'; |
|
137 | 146 | SettingButton, |
138 | 147 | SettingDangerButton, |
139 | 148 | SettingSchedule, |
| 149 | + SettingCruise, |
140 | 150 | }, |
141 | 151 | data() { |
142 | 152 | return { |
|
177 | 187 | WEBHOOK_RECORD_EVENT: 'off', |
178 | 188 | WEBHOOK_TIMELAPSE_EVENT: 'off', |
179 | 189 | WEBHOOK_TIMELAPSE_FINISH: 'off', |
| 190 | + CRUISE: 'off', |
| 191 | + CRUISE_LIST: '', |
180 | 192 | MINIMIZE_ALARM_CYCLE: 'off', |
181 | 193 | }, |
182 | 194 | loginAuth: 'off', |
|
192 | 204 | storage_cifs_record: false, |
193 | 205 | storage_cifs_alarm: false, |
194 | 206 | schedule: [], |
| 207 | + cruiseList: [], |
| 208 | + cruiseSelect: -1, |
195 | 209 | reboot: { |
196 | 210 | startTime: '02:00', |
197 | 211 | endTime: '02:00', |
|
317 | 331 | }, []); |
318 | 332 | } |
319 | 333 |
|
| 334 | + this.cruiseList = (this.config.CRUISE_LIST || '').split(';').reduce((array, cmd) => { |
| 335 | + const args = cmd.trim().split(' '); |
| 336 | + if(args[0] === 'move') { |
| 337 | + array.push({ |
| 338 | + pan: parseInt(args[1]), |
| 339 | + tilt: parseInt(args[2]), |
| 340 | + }); |
| 341 | + return array; |
| 342 | + } |
| 343 | + const last = array[array.length - 1]; |
| 344 | + if(!last) return array; |
| 345 | + if(['detect', 'follow', 'sleep'].indexOf(args[0]) < 0) return array; |
| 346 | + last.wait = parseInt(args[1]); |
| 347 | + last.timeout = parseInt(args[2]); |
| 348 | + last.detect = true; |
| 349 | + last.follow = true; |
| 350 | + if(args[0] === 'follow') return array; |
| 351 | + last.follow = false; |
| 352 | + if(args[0] === 'detect') return array; |
| 353 | + last.detect = false; |
| 354 | + return array; |
| 355 | + }, []); |
| 356 | +
|
320 | 357 | const status = (await axios.get('./cgi-bin/cmd.cgi').catch(err => { |
321 | 358 | // eslint-disable-next-line no-console |
322 | 359 | console.log(err); |
|
328 | 365 |
|
329 | 366 | this.latestVer = status.LATESTVER; |
330 | 367 | const pos = status.MOTORPOS.split(' '); |
331 | | - this.pan = parseFloat(pos[0]); |
332 | | - this.tilt = parseFloat(pos[1]); |
| 368 | + this.pan = Math.round(parseFloat(pos[0])); |
| 369 | + this.tilt = Math.round(parseFloat(pos[1])); |
333 | 370 | this.posValid = true; |
334 | 371 |
|
335 | 372 | if(this.config.REBOOT_SCHEDULE) { |
|
366 | 403 | this.moving = true; |
367 | 404 | await this.Exec(`move ${this.pan} ${this.tilt}`, 'socket'); |
368 | 405 | this.moving = false; |
| 406 | + this.moved = true; |
369 | 407 | this.StillImageInterval(); |
370 | 408 | if(this.moveTimeout) clearTimeout(this.moveTimeout); |
371 | 409 | this.moveTimeout = setTimeout(() => { |
|
385 | 423 | }, {}); |
386 | 424 | if(status.MOTORPOS) { |
387 | 425 | const pos = status.MOTORPOS.split(' '); |
388 | | - this.pan = parseFloat(pos[0]); |
389 | | - this.tilt = parseFloat(pos[1]); |
| 426 | + const pan = Math.round(parseFloat(pos[0])); |
| 427 | + const tilt = Math.round(parseFloat(pos[1])); |
| 428 | + if(this.moved) { |
| 429 | + this.moved = false; |
| 430 | + if((pan !== this.pan) || (tilt !== this.tilt)) this.Move(); |
| 431 | + } else { |
| 432 | + this.pan = pan; |
| 433 | + this.tilt = tilt; |
| 434 | + } |
390 | 435 | } |
391 | 436 | } |
392 | 437 | if(this.getposTimeout) clearTimeout(this.getposTimeout); |
|
413 | 458 | this.schedule.splice(i, 1); |
414 | 459 | if(!this.schedule.length) this.config.RECORDING_LOCAL_SCHEDULE = false; |
415 | 460 | }, |
| 461 | + AddCruise() { |
| 462 | + this.cruiseList.push({ |
| 463 | + pan: this.pan, |
| 464 | + tilt: this.tilt, |
| 465 | + wait: 10, |
| 466 | + timeout: 10, |
| 467 | + detect: false, |
| 468 | + follow: false, |
| 469 | + }); |
| 470 | + this.cruiseSelect = this.cruiseList.length - 1; |
| 471 | + }, |
| 472 | + DeleteCruise(i) { |
| 473 | + this.cruiseList.splice(i, 1); |
| 474 | + if(!this.cruiseList.length) this.config.CRUISE = false; |
| 475 | + if(this.cruiseSelect === i) this.cruiseSelect = -1; |
| 476 | + }, |
| 477 | + CruiseSelect(idx) { |
| 478 | + this.cruiseSelect = idx; |
| 479 | + this.pan = this.cruiseList[idx].pan; |
| 480 | + this.tilt = this.cruiseList[idx].tilt; |
| 481 | + }, |
| 482 | + ClearCruiseSelect() { |
| 483 | + this.cruiseSelect = -1; |
| 484 | + }, |
416 | 485 | FixPath(label) { |
417 | 486 | this.config[label] = this.config[label].replace(/\\/g, '/'); |
418 | 487 | }, |
|
485 | 554 | this.config.STORAGE_CIFS = 'off'; |
486 | 555 | } |
487 | 556 |
|
| 557 | + this.config.CRUISE_LIST = this.cruiseList.reduce((str, cruise) => { |
| 558 | + str += `move ${cruise.pan} ${cruise.tilt};`; |
| 559 | + const waitMode = cruise.detect ? (cruise.follow ? 'follow' : 'detect') : 'sleep'; |
| 560 | + str += `${waitMode} ${cruise.wait} ${cruise.timeout};`; |
| 561 | + return str; |
| 562 | + }, ''); |
| 563 | + this.ClearCruiseSelect(); |
| 564 | +
|
488 | 565 | str = parseInt(this.reboot.startTime.slice(-2)) + ' '; |
489 | 566 | str += parseInt(this.reboot.startTime.slice(0, 2)) + ' * * '; |
490 | 567 | str += this.weekDays.flatMap((v, i) => this.reboot.dayOfWeekSelect.indexOf(v) < 0 ? [] : [(i + 1) % 7]).sort((a, b) => a - b).reduce((s, d) => s += (s.length ? ':' : '') + d.toString() , ''); |
|
531 | 608 | if(Object.keys(this.config).some(prop => (prop.search(/WEBHOOK/) === 0) && (this.config[prop] !== this.oldConfig[prop]))) { |
532 | 609 | execCmds.push('setwebhook'); |
533 | 610 | } |
| 611 | + if((this.config.CRUISE !== this.oldConfig.CRUISE) || |
| 612 | + (this.config.CRUISE_LIST !== this.oldConfig.CRUISE_LIST)) { |
| 613 | + execCmds.push('cruise restart'); |
| 614 | + } |
534 | 615 | } |
535 | 616 | if(this.config.DIGEST !== this.oldConfig.DIGEST) execCmds.push('lighttpd'); |
536 | 617 |
|
|
0 commit comments