|
@@ -65,20 +65,43 @@
|
|
|
<!--</div>-->
|
|
|
</div>
|
|
|
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:168px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:204px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:237px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:285px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:322px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
- <div style="position: absolute; background: #ff0000;left:0;top:355px;border: 1px;width: 1000px;height: 1px;"></div>
|
|
|
-
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:168px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ffff00;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:627px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:644px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:676px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:710px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:746px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:762px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:797px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:830px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!--<div style="position: absolute; background: #ff0000;z-index: 9999;left:0;top:864px;border: 1px;width: 1000px;height: 1px;"></div>-->
|
|
|
+ <!---->
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+ const raduis_half = [168, 204, 237, 272,
|
|
|
+ 287, 322, 354, 390,
|
|
|
+ 406, 440, 474, 508,
|
|
|
+ 525, 558, 592, 627,
|
|
|
+ 644, 676, 710, 746,
|
|
|
+ 762, 797, 830, 864]
|
|
|
|
|
|
- const raduis_half = [168]
|
|
|
import headComponent from '@/views/xjc-integratedmachine/components/head_component.vue'
|
|
|
import {onMounted, reactive} from "vue";
|
|
|
// import FollowRingChart from "@/views/xjc-integratedmachine/wakeup/rainbow/FollowRingChart.vue";
|
|
@@ -91,12 +114,15 @@
|
|
|
|
|
|
const out_width = ref(1832)
|
|
|
const out_height = ref(910)
|
|
|
+ const out_top = ref(113)
|
|
|
+ const out_total = out_height.value + out_top.value
|
|
|
const centerPoint = ref({})
|
|
|
|
|
|
|
|
|
function init() {
|
|
|
centerPoint.value.x = out_width.value / 2
|
|
|
centerPoint.value.y = out_height.value
|
|
|
+ console.log("圆心x:",centerPoint.value.x,"圆心y:",centerPoint.value.y)
|
|
|
let cc = document.getElementById("cc")
|
|
|
cc.style.left = centerPoint.value.x + "px"
|
|
|
cc.style.top = centerPoint.value.y + "px"
|
|
@@ -127,23 +153,30 @@
|
|
|
function getDistance(event) {
|
|
|
let mouse_x = event.targetTouches[0].pageX;
|
|
|
let mouse_y = event.targetTouches[0].pageY;
|
|
|
- let distance =Math.sqrt((Math.pow((centerPoint.value.x - mouse_x),2) + Math.pow((centerPoint.value.y - mouse_y),2)))
|
|
|
- console.log("distance:"+distance)
|
|
|
+ console.log("touchX:",mouse_x,"touchY:",mouse_y)
|
|
|
+ let distance = Math.sqrt((Math.pow((centerPoint.value.x - mouse_x), 2) + Math.pow((centerPoint.value.y - mouse_y), 2)))
|
|
|
+ console.log("total :",out_total," r1 :",raduis_half[0]," r2:",raduis_half[1])
|
|
|
+ console.log("半径1:",out_total - raduis_half[0],"半径2:",out_total - raduis_half[1])
|
|
|
+
|
|
|
+ console.log("dis:",distance)
|
|
|
+ if(distance<= out_total - raduis_half[0] && distance > out_total - raduis_half[1]){
|
|
|
+ console.log("t1")
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
|
|
|
function begin(event) {
|
|
|
getDistance(event)
|
|
|
- followRingChart18.value.finish()
|
|
|
+ // followRingChart18.value.finish()
|
|
|
|
|
|
}
|
|
|
|
|
|
function moving() {
|
|
|
- console.log("mmmmmm")
|
|
|
+ // console.log("mmmmmm")
|
|
|
}
|
|
|
|
|
|
function stopMoving() {
|
|
|
- console.log("ssssss")
|
|
|
+ // console.log("ssssss")
|
|
|
}
|
|
|
|
|
|
|