xjc-vue/src/views/xjc-integratedmachine/wakeup/rainbow/index.vue

<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']"-->
            <!--&gt;-->
            <!--橡皮-->
            <!--</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>