|
|
@@ -0,0 +1,947 @@
|
|
|
+<template>
|
|
|
+ <div id="outerDiv" class="development_stage">
|
|
|
+ <!-- <div style="z-index:9999;background: red;width: 1920px;height: 1080px">-->
|
|
|
+
|
|
|
+ <canvas id="myCanvas" width="1900" height="1080" style="background: #00ff00;z-index: 9999"></canvas>
|
|
|
+ <!-- </div>-->
|
|
|
+
|
|
|
+ <head-component :headinfo=headinfo></head-component>
|
|
|
+ <div id="cc"
|
|
|
+ style="position: absolute;width: 5px;height: 5px;background: #ff0000;margin: 0 auto;z-index: 99999"></div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="page-content">
|
|
|
+ <div style="display: flex;justify-content: center;width: 1890px;height: 912px;margin-top: 13px">
|
|
|
+ <div class="page-box">
|
|
|
+
|
|
|
+
|
|
|
+ <!--<div style="width: 1px;height: 1700px;border: 1px solid red;position: absolute;left:916px;top: 0px"></div>-->
|
|
|
+ <!--<div style="width: 850px;height: 1px;border: 1px solid green;position: absolute;left: 66px;top: 400px"></div>-->
|
|
|
+ <!--<div style="width: 1700px;height: 1px;border: 1px solid white;position: absolute;left: 70px;top: 906px"></div>-->
|
|
|
+ <FollowRingChart ref="followRingChart1" id="ring-chart1" class="ring-chart1"
|
|
|
+ :chartProps="chartPrpps1"/>
|
|
|
+ <FollowRingChart ref="followRingChar2" id="ring-chart2" class="ring-chart2"
|
|
|
+ :chartProps="chartPrpps2"
|
|
|
+ style="z-index: 9999"/>
|
|
|
+ <FollowRingChart ref="followRingChart3" id="ring-chart3" class="ring-chart3"
|
|
|
+ :chartProps="chartPrpps3"/>
|
|
|
+ <FollowRingChart ref="followRingChart4" id="ring-chart4" class="ring-chart4"
|
|
|
+ :chartProps="chartPrpps4"/>
|
|
|
+ <!--<FollowRingChart ref="followRingChart5" id="ring-chart5" class="ring-chart5"-->
|
|
|
+ <!--:chartProps="chartPrpps5"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart6" id="ring-chart6" class="ring-chart6"-->
|
|
|
+ <!--:chartProps="chartPrpps6"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart7" id="ring-chart7" class="ring-chart7"-->
|
|
|
+ <!--:chartProps="chartPrpps7"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart8" id="ring-chart8" class="ring-chart8"-->
|
|
|
+ <!--:chartProps="chartPrpps8"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart9" id="ring-chart9" class="ring-chart9"-->
|
|
|
+ <!--:chartProps="chartPrpps9"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart10" id="ring-chart10" class="ring-chart10"-->
|
|
|
+ <!--:chartProps="chartPrpps10"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart11" id="ring-chart11" class="ring-chart11"-->
|
|
|
+ <!--:chartProps="chartPrpps11"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart12" id="ring-chart12" class="ring-chart12"-->
|
|
|
+ <!--:chartProps="chartPrpps12"/>-->
|
|
|
+
|
|
|
+ <!--<FollowRingChart ref="followRingChart13" id="ring-chart13" class="ring-chart13"-->
|
|
|
+ <!--:chartProps="chartPrpps13"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart14" id="ring-chart14" class="ring-chart14"-->
|
|
|
+ <!--:chartProps="chartPrpps14"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart15" id="ring-chart15" class="ring-chart15"-->
|
|
|
+ <!--:chartProps="chartPrpps15"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart16" id="ring-chart16" class="ring-chart16"-->
|
|
|
+ <!--:chartProps="chartPrpps16"/>-->
|
|
|
+
|
|
|
+ <!--<FollowRingChart ref="followRingChart17" id="ring-chart17" class="ring-chart17"-->
|
|
|
+ <!--:chartProps="chartPrpps17"/>-->
|
|
|
+ <!--<FollowRingChart ref="followRingChart18" id="ring-chart18" class="ring-chart18"-->
|
|
|
+ <!--:chartProps="chartPrpps18"/>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--<div id="eraser"-->
|
|
|
+ <!--@click="edit"-->
|
|
|
+ <!--:class="[chartPrpps1.status == 'edit'?'bg-color-style':'bg-color-style1']"-->
|
|
|
+ <!-->-->
|
|
|
+ <!--橡皮-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--<div id="save"-->
|
|
|
+ <!--@click="save"-->
|
|
|
+ <!--style="position: absolute;top:80px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: green;border-radius: 50%">-->
|
|
|
+ <!--保存-->
|
|
|
+ <!--</div>-->
|
|
|
+ </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]
|
|
|
+
|
|
|
+ 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";
|
|
|
+ import FollowRingChart from './FollowRingChart.vue'
|
|
|
+
|
|
|
+ const headinfo = ref({})
|
|
|
+ const router = useRouter()
|
|
|
+
|
|
|
+ const chartDivs = ref([])
|
|
|
+
|
|
|
+ const out_width = ref(1920)
|
|
|
+ const out_height = ref(1023)
|
|
|
+ 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"
|
|
|
+
|
|
|
+ chartDivs.value = [
|
|
|
+ document.getElementById("ring-chart1"),
|
|
|
+ // document.getElementById("ring-chart2"),
|
|
|
+ // document.getElementById("ring-chart3"),
|
|
|
+ // document.getElementById("ring-chart4"),
|
|
|
+ // document.getElementById("ring-chart5"),
|
|
|
+ // document.getElementById("ring-chart6"),
|
|
|
+ // document.getElementById("ring-chart7"),
|
|
|
+ // document.getElementById("ring-chart8"),
|
|
|
+ // document.getElementById("ring-chart9"),
|
|
|
+ // document.getElementById("ring-chart10"),
|
|
|
+ // document.getElementById("ring-chart11"),
|
|
|
+ // document.getElementById("ring-chart12"),
|
|
|
+ ]
|
|
|
+
|
|
|
+ let outerDiv = document.getElementById("outerDiv")
|
|
|
+ outerDiv.addEventListener('touchstart', begin)
|
|
|
+ outerDiv.addEventListener('touchmove', moving)
|
|
|
+ outerDiv.addEventListener('touchend', stopMoving)
|
|
|
+ }
|
|
|
+
|
|
|
+ const followRingChart18 = ref(null)
|
|
|
+
|
|
|
+ function getDistance(event) {
|
|
|
+ let mouse_x = event.targetTouches[0].pageX;
|
|
|
+ let mouse_y = event.targetTouches[0].pageY;
|
|
|
+ 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("dis:", distance)
|
|
|
+ if (distance <= out_height.value - raduis_half[0] && distance > out_height.value - raduis_half[1]) {
|
|
|
+ console.log("t1")
|
|
|
+ } else if (distance <= out_height.value - raduis_half[1] && distance > out_height.value - raduis_half[2]) {
|
|
|
+ console.log("t2")
|
|
|
+ }else if (distance <= out_height.value - raduis_half[2] && distance > out_height.value - raduis_half[3]) {
|
|
|
+ console.log("t3")
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function begin(event) {
|
|
|
+ getDistance(event)
|
|
|
+ // followRingChart18.value.finish()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function moving() {
|
|
|
+ // console.log("mmmmmm")
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopMoving() {
|
|
|
+ // console.log("ssssss")
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ setHeadinfo()
|
|
|
+ init()
|
|
|
+ settingChooseChart(1)
|
|
|
+ initCanvas()
|
|
|
+ })
|
|
|
+
|
|
|
+ function settingChooseChart(index) {
|
|
|
+ // chartDivs.value.forEach(function (item, index) {
|
|
|
+ // item.style.zIndex = 1
|
|
|
+ // })
|
|
|
+ // chartDivs.value[index].style.zIndex = 99999
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function setHeadinfo() {
|
|
|
+ headinfo.value = {
|
|
|
+ title: '生涯彩虹图',
|
|
|
+ user: {
|
|
|
+ avatar: '头像路径',
|
|
|
+ nickName: '张三'
|
|
|
+ },
|
|
|
+ backUrl: '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const chartPrpps1 = ref({
|
|
|
+ top: 160,
|
|
|
+ left: 90,
|
|
|
+ width: 1700,
|
|
|
+ height: 1700,
|
|
|
+ borderColor: "#FFFF00",
|
|
|
+ color: "#ff00ff",
|
|
|
+ bncolor: "#ffffff",
|
|
|
+ radiusMax: '850px',
|
|
|
+ radiusMin: '816px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps2 = ref({
|
|
|
+ top: 228,
|
|
|
+ left: 158,
|
|
|
+ width: 1628,
|
|
|
+ height: 1628,
|
|
|
+ borderColor: "#00af3c",
|
|
|
+ color: "#00af3c",
|
|
|
+ bncolor: "#00af3c",
|
|
|
+ radiusMax: '816px',
|
|
|
+ radiusMin: '782px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: true
|
|
|
+ })
|
|
|
+ const chartPrpps3 = ref({
|
|
|
+ top: 296,
|
|
|
+ left: 226,
|
|
|
+ width: 1562,
|
|
|
+ height: 1562,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '782px',
|
|
|
+ radiusMin: '748px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps4 = ref({
|
|
|
+ top: 364,
|
|
|
+ left: 294,
|
|
|
+ width: 1465,
|
|
|
+ height: 1465,
|
|
|
+ borderColor: "#ffff00",
|
|
|
+ color: "#ffff00",
|
|
|
+ bncolor: "#ffff00",
|
|
|
+ radiusMax: '731px',
|
|
|
+ radiusMin: '697px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps5 = ref({
|
|
|
+ top: 483,
|
|
|
+ left: 413,
|
|
|
+ width: 1391,
|
|
|
+ height: 1391,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '697px',
|
|
|
+ radiusMin: '663px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps6 = ref({
|
|
|
+ top: 551,
|
|
|
+ left: 481,
|
|
|
+ width: 1325,
|
|
|
+ height: 1325,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '663px',
|
|
|
+ radiusMin: '629px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ const chartPrpps7 = ref({
|
|
|
+ top: 432,
|
|
|
+ left: 200,
|
|
|
+ width: 1400,
|
|
|
+ height: 1400,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '612px',
|
|
|
+ radiusMin: '578px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps8 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1271,
|
|
|
+ height: 1271,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '578px',
|
|
|
+ radiusMin: '544px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps9 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1100,
|
|
|
+ height: 1100,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '544px',
|
|
|
+ radiusMin: '510px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps10 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '493px',
|
|
|
+ radiusMin: '459px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps11 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '459px',
|
|
|
+ radiusMin: '425px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps12 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '425px',
|
|
|
+ radiusMin: '391px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+
|
|
|
+ const chartPrpps13 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '374px',
|
|
|
+ radiusMin: '340px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps14 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "blue",
|
|
|
+ color: "blue",
|
|
|
+ bncolor: "blue",
|
|
|
+ radiusMax: '340px',
|
|
|
+ radiusMin: '306px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps15 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "pink",
|
|
|
+ color: "pink",
|
|
|
+ bncolor: "pink",
|
|
|
+ radiusMax: '306px',
|
|
|
+ radiusMin: '272px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps16 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "orange",
|
|
|
+ color: "orange",
|
|
|
+ bncolor: "orange",
|
|
|
+ radiusMax: '255px',
|
|
|
+ radiusMin: '221px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps17 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "blue",
|
|
|
+ color: "blue",
|
|
|
+ bncolor: "blue",
|
|
|
+ radiusMax: '221px',
|
|
|
+ radiusMin: '187px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ const chartPrpps18 = ref({
|
|
|
+ top: 612,
|
|
|
+ left: 531,
|
|
|
+ width: 1272,
|
|
|
+ height: 1272,
|
|
|
+ borderColor: "green",
|
|
|
+ color: "green",
|
|
|
+ bncolor: "green",
|
|
|
+ radiusMax: '187px',
|
|
|
+ radiusMin: '153px',
|
|
|
+ isFinish: false,
|
|
|
+ status: 'new',
|
|
|
+ power: false
|
|
|
+ })
|
|
|
+ // const chartPrpps19= ref({
|
|
|
+ // top: 612,
|
|
|
+ // left: 531,
|
|
|
+ // width: 1272,
|
|
|
+ // height: 1272,
|
|
|
+ // borderColor: "orange",
|
|
|
+ // color: "orange",
|
|
|
+ // bncolor: "orange",
|
|
|
+ // radiusMax: '306px',
|
|
|
+ // radiusMin: '272px',
|
|
|
+ // isFinish: false,
|
|
|
+ // status : 'new'
|
|
|
+ // })
|
|
|
+ const position = reactive({x: 10, y: 10});
|
|
|
+ let isDragging = false;
|
|
|
+ let originX, originY;
|
|
|
+
|
|
|
+ function jumpTo(path) {
|
|
|
+ console.log(path)
|
|
|
+ router.push({
|
|
|
+ path: path,
|
|
|
+ query: {name: 123}
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const startDrag = (e) => {
|
|
|
+ console.log("e", e)
|
|
|
+ isDragging = true;
|
|
|
+ originX = e.clientX - position.x;
|
|
|
+ originY = e.clientY - position.y;
|
|
|
+ console.log("originX", originX, originY, "originY")
|
|
|
+ document.addEventListener('mousemove', onMouseMove);
|
|
|
+ document.addEventListener('mouseup', stopDrag);
|
|
|
+ };
|
|
|
+
|
|
|
+ const onMouseMove = (e) => {
|
|
|
+ if (isDragging) {
|
|
|
+ position.x = e.clientX - originX;
|
|
|
+ position.y = e.clientY - originY;
|
|
|
+ console.log("position.x", position.x, "position.y", position.y)
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const stopDrag = () => {
|
|
|
+ isDragging = false;
|
|
|
+ document.removeEventListener('mousemove', onMouseMove);
|
|
|
+ document.removeEventListener('mouseup', stopDrag);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ //编辑和保存
|
|
|
+ function save() {
|
|
|
+ status.value = 'save'
|
|
|
+ //保存
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function edit() {
|
|
|
+ if (chartPrpps1.value.status == 'edit') {
|
|
|
+ chartPrpps1.value.status = 'new'
|
|
|
+ } else {
|
|
|
+ chartPrpps1.value.status = 'edit'
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+ function initCanvas() {
|
|
|
+ const canvas = document.getElementById("myCanvas");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ // 圆心和半径
|
|
|
+ const centerX = 960;
|
|
|
+ const centerY = 1023;
|
|
|
+ const radius = 855;
|
|
|
+
|
|
|
+ // 绘制红色边框的圆
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
|
|
+ ctx.strokeStyle = "red";
|
|
|
+ ctx.lineWidth = 5;
|
|
|
+ ctx.stroke();
|
|
|
+
|
|
|
+ // 填充半透明黄色
|
|
|
+ ctx.fillStyle = "rgba(255, 255, 0, 0.5)";
|
|
|
+ ctx.fill();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ //body,html{
|
|
|
+ // overflow: hidden;
|
|
|
+ //}
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .development_stage {
|
|
|
+ background: url('@/assets/images/login/login-home-background.png') no-repeat;
|
|
|
+ background-size: 1920px 1080px;
|
|
|
+ z-index: 10;
|
|
|
+ width: 100%;
|
|
|
+ height: 1080px;
|
|
|
+
|
|
|
+ .page-content {
|
|
|
+ width: 1832px;
|
|
|
+ height: 980px;
|
|
|
+ position: absolute;
|
|
|
+ top: 100px;
|
|
|
+ //display: flex;
|
|
|
+ //justify-content: ;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-box {
|
|
|
+ width: 1832px;
|
|
|
+ height: 910px;
|
|
|
+ background: none;
|
|
|
+ border-radius: 35px 35px 35px 35px;
|
|
|
+ //margin: 13px auto 0;
|
|
|
+ /*padding-top: 25px;*/
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 46px;
|
|
|
+ padding: 0 150px;
|
|
|
+ //text-align: center;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-main {
|
|
|
+ width: 1546px;
|
|
|
+ height: 681px;
|
|
|
+ //border: 1px solid;
|
|
|
+ margin: 12px auto;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/backgroud-rainbow.png') no-repeat;
|
|
|
+ background-size: 1546px 681px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .page-left {
|
|
|
+ width: 1273px;
|
|
|
+ height: 571px;
|
|
|
+ background: #000000;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ margin-left: 26px;
|
|
|
+ //border: #FFFFFF 1px solid;
|
|
|
+ margin-top: 95px;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/rainbow-border.png') no-repeat;
|
|
|
+ background-size: 1200px 500px;
|
|
|
+ //border: 1px solid #FFFFFF;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-right {
|
|
|
+ width: 250px;
|
|
|
+ height: 681px;
|
|
|
+ //border: 1px solid #FFFFFF;
|
|
|
+ margin-right: 26px;
|
|
|
+
|
|
|
+ .page-right-top {
|
|
|
+ width: 250px;
|
|
|
+ height: 260px;
|
|
|
+ //border: 1px solid white;
|
|
|
+ .color-box:nth-child(1) {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .color-box {
|
|
|
+ //border: 1px solid white;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .box-left {
|
|
|
+ width: 53px;
|
|
|
+ height: 25px;
|
|
|
+ //background: #FFC300;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ //border: 1px solid white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-label {
|
|
|
+ width: 122px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-right-btn-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .img-btn {
|
|
|
+ width: 170px;
|
|
|
+ height: 54px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .eraser-box {
|
|
|
+ width: 165px;
|
|
|
+ height: 50px;
|
|
|
+ background: url('@/assets/images/wakeup/rainbow/eraser-shadom.png') no-repeat;
|
|
|
+ background-size: 163px 47px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 165px;
|
|
|
+ height: 83px;
|
|
|
+ position: absolute;
|
|
|
+ top: -33px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 6px;
|
|
|
+ z-index: 10;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 244px;
|
|
|
+ height: 92px;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixed-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 125px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .draw {
|
|
|
+ width: 109px;
|
|
|
+ height: 170px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 109px;
|
|
|
+ height: 170px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ai-rabit {
|
|
|
+ position: absolute;
|
|
|
+ right: -27px;
|
|
|
+ //top: -271px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .ai-rabit-text {
|
|
|
+ width: 345px;
|
|
|
+ height: 89px;
|
|
|
+ background: #E8EEF7;
|
|
|
+ font-weight: 300;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #000000;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 24px 24px 24px 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 178px;
|
|
|
+ height: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .draggable-ball {
|
|
|
+ position: absolute;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none; /* 防止拖拽时选中文字 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart1 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ border: 1px pink solid;
|
|
|
+ position: absolute;
|
|
|
+ left: 14px;
|
|
|
+ top: 0px;
|
|
|
+ //background: #ffff00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart2 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 48px;
|
|
|
+ top: 36px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart3 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 81px;
|
|
|
+ top: 69px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart4 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 130px;
|
|
|
+ top: 117px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart5 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 154px;
|
|
|
+ top: 154px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart6 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 187px;
|
|
|
+ left: 187px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart7 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ left: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart8 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 214px;
|
|
|
+ left: 214px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart9 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 299px;
|
|
|
+ left: 299px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart10 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart11 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart12 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart13 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart14 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart15 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart16 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart17 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-chart18 {
|
|
|
+ width: 1832px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 213px;
|
|
|
+ left: 213px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-color-style {
|
|
|
+ color: black;
|
|
|
+ background: #ffff00;
|
|
|
+ }
|
|
|
+
|
|
|
+ #eraser {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ left: 10px;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ //background: #FFFFFF;
|
|
|
+ border: 1px solid #00afff;
|
|
|
+ border-radius: 50%
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-color-style1 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+</style>
|
