feat 决策

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

@@ -2,7 +2,7 @@
     <div class="chart-container">
         <div id="ring-chart" ref="chart" class="ring-chart"></div>
         <!--      //圆心-->
-        <!--        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>-->
+                <!--<div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>-->
 
 
         <!--<div id="ring-chart" ref="chart" class="ring-chart"-->
@@ -14,7 +14,12 @@
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'
 
-    document.body.style.overflow = 'hidden';
+    // document.body.style.overflow = 'hidden';
+    document.oncontextmenu = function (event) {
+        event.preventDefault(); // 阻止默认右键菜单
+    };
+
+
     const props = defineProps({
         chartProps: {}
     })
@@ -170,10 +175,11 @@
         // cc.style.top = center_y + "px"
         // cc.style.left = center_x + "px"
 
-        let chartDiv = document.getElementById("ring-chart");
-        chartDiv.addEventListener('touchstart', begin)
-        chartDiv.addEventListener('touchmove', moving)
-        chartDiv.addEventListener('touchend', stopMoving)
+        //单独注册事件
+        // let chartDiv = document.getElementById("ring-chart");
+        // chartDiv.addEventListener('touchstart', begin)
+        // chartDiv.addEventListener('touchmove', moving)
+        // chartDiv.addEventListener('touchend', stopMoving)
     }
 
     function testMove(e) {
@@ -231,52 +237,51 @@
     // }
 
     function begin(event) {
-        console.log("=====", props.chartProps.status)
+        console.log("2222")
+        if (!props.chartProps.power) return;
         if (!event.targetTouches || event.targetTouches.length === 0) return;
         //鼠标按下，取点
         let mouse_x = event.targetTouches[0].pageX;
         let mouse_y = event.targetTouches[0].pageY;
         if (props.chartProps.status == 'edit' && isFinish.value == true) {
             //
-            console.log(mouse_x,"11111",mouse_x)
-            //
             //计算一下离谁比较近
-            let d_begin = Math.pow((beginPoint.value.x - mouse_x),2)+ Math.pow((beginPoint.value.y - mouse_y),2)
-            let d_end = Math.pow((endPoint.value.x - mouse_x),2)+ Math.pow((endPoint.value.y - mouse_y),2)
-            if(d_begin <= d_end){
+            let d_begin = Math.pow((beginPoint.value.x - mouse_x), 2) + Math.pow((beginPoint.value.y - mouse_y), 2)
+            let d_end = Math.pow((endPoint.value.x - mouse_x), 2) + Math.pow((endPoint.value.y - mouse_y), 2)
+            if (d_begin <= d_end) {
                 let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
                 option.value.series[0].startAngle = 180 - ang
                 beginCorner.value = ang
-                beginPoint.value ={
-                    x : mouse_x,
-                    y : mouse_y
+                beginPoint.value = {
+                    x: mouse_x,
+                    y: mouse_y
                 }
                 //
-            }else{
+            } else {
                 let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
                 option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9 + beginCorner.value / 30
                 option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9 - beginCorner.value / 30
                 endCorner.value = eang
-                endPoint.value ={
-                    x : mouse_x,
-                    y : mouse_y
+                endPoint.value = {
+                    x: mouse_x,
+                    y: mouse_y
                 }
             }
-        } else if (props.chartProps.status == 'new') {
+        } else if (props.chartProps.status == 'new' && !isFinish.value) {
             let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
             beginCorner.value = ang
             beginPoint.value = {
                 x: mouse_x,
                 y: mouse_y
             }
-            console.log("ssss",beginPoint.value.x,beginPoint.value.y)
             option.value.series[0].startAngle = 180 - ang
             isBegin.value = true
         }
         myChart.setOption(option.value)
     }
 
-    function stopMoving() {
+    function stopMoving(event) {
+        if (!props.chartProps.power) return;
         nextTick(() => {
             isFinish.value = true
             isBegin.value = false
@@ -287,9 +292,11 @@
 
     function finish() {
         //alert("绘制完成!")
+        console.log("ffffffffffffffffffffff")
     }
 
     function moving(event) {
+        if (!props.chartProps.power) return;
         let mouse_x = event.targetTouches[0].pageX;
         let mouse_y = event.targetTouches[0].pageY;
         let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
@@ -329,6 +336,13 @@
     //
     // }
 
+    defineExpose({
+        finish,
+        begin,
+        moving,
+        stopMoving
+    })
+
 </script>
 
 <style scoped>
@@ -340,6 +354,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        /*border: 1px solid white;*/
     }
 
     .ring-chart {
@@ -347,6 +362,13 @@
         height: 910px;
         cursor: pointer;
         margin-top: 219px;
+        border: 1px solid white;
+
+    }
+
+    body {
+        overscroll-behavior: none; /* 禁用滑动返回 */
+        touch-action: pan-y; /* 仅允许垂直滚动 */
     }
 
 

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

@@ -1,52 +1,84 @@
 <template>
-    <div class="development_stage">
+    <div id="outerDiv" class="development_stage">
         <head-component :headinfo=headinfo></head-component>
         <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 id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
-                    <FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>
-                    <FollowRingChart id="ring-chart3" class="ring-chart3" :chartProps="chartPrpps3"/>
-                    <FollowRingChart id="ring-chart4" class="ring-chart4" :chartProps="chartPrpps4"/>
-                  <FollowRingChart id="ring-chart5" class="ring-chart5" :chartProps="chartPrpps5"/>
-                  <FollowRingChart id="ring-chart6" class="ring-chart6" :chartProps="chartPrpps6"/>
-                  <FollowRingChart id="ring-chart7" class="ring-chart7" :chartProps="chartPrpps7"/>
-                  <FollowRingChart id="ring-chart8" class="ring-chart8" :chartProps="chartPrpps8"/>
-                  <FollowRingChart id="ring-chart9" class="ring-chart9" :chartProps="chartPrpps9"/>
-                  <FollowRingChart id="ring-chart10" class="ring-chart10" :chartProps="chartPrpps10"/>
-                  <FollowRingChart id="ring-chart11" class="ring-chart11" :chartProps="chartPrpps11"/>
-                  <FollowRingChart id="ring-chart12" class="ring-chart12" :chartProps="chartPrpps12"/>
-
-                  <FollowRingChart id="ring-chart13" class="ring-chart13" :chartProps="chartPrpps13"/>
-                  <FollowRingChart id="ring-chart14" class="ring-chart14" :chartProps="chartPrpps14"/>
-                  <FollowRingChart id="ring-chart15" class="ring-chart15" :chartProps="chartPrpps15"/>
-                  <FollowRingChart id="ring-chart16" class="ring-chart16" :chartProps="chartPrpps16"/>
-
-                  <FollowRingChart id="ring-chart17" class="ring-chart17" :chartProps="chartPrpps17"/>
-                  <FollowRingChart id="ring-chart18" class="ring-chart18" :chartProps="chartPrpps18"/>
+
+                    <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>
+
+                    <!--<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: 99999999"/>
+                    <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 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;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>
 
 </template>
 
 <script setup>
+
+    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";
@@ -55,6 +87,80 @@
     const headinfo = ref({})
     const router = useRouter()
 
+    const chartDivs = ref([])
+
+    const out_width = ref(1832)
+    const out_height = ref(910)
+    const centerPoint = ref({})
+
+
+    function init() {
+        centerPoint.value.x = out_width.value / 2
+        centerPoint.value.y = out_height.value
+        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;
+        let distance =Math.sqrt((Math.pow((centerPoint.value.x - mouse_x),2) +  Math.pow((centerPoint.value.y - mouse_y),2)))
+        console.log("distance:"+distance)
+    }
+
+
+    function begin(event) {
+        getDistance(event)
+        followRingChart18.value.finish()
+
+    }
+
+    function moving() {
+        console.log("mmmmmm")
+    }
+
+    function stopMoving() {
+        console.log("ssssss")
+    }
+
+
+    onMounted(() => {
+        setHeadinfo()
+        init()
+        settingChooseChart(1)
+    })
+
+    function settingChooseChart(index) {
+        chartDivs.value.forEach(function (item, index) {
+            item.style.zIndex = 1
+        })
+        chartDivs.value[index].style.zIndex = 99999
+    }
+
+
     function setHeadinfo() {
         headinfo.value = {
             title: '生涯彩虹图',
@@ -67,7 +173,6 @@
     }
 
 
-
     const chartPrpps1 = ref({
         top: 160,
         left: 90,
@@ -79,231 +184,249 @@
         radiusMax: '850px',
         radiusMin: '816px',
         isFinish: false,
-        status : 'new'
+        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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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'
+    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,
@@ -353,19 +476,19 @@
         document.removeEventListener('mousemove', onMouseMove);
         document.removeEventListener('mouseup', stopDrag);
     };
-    onMounted(() => {
-        setHeadinfo()
-    })
+
+
     //编辑和保存
     function save() {
         status.value = 'save'
     }
+
     function edit() {
-      if(chartPrpps1.value.status == 'edit'){
-        chartPrpps1.value.status = 'new'
-      }else {
-        chartPrpps1.value.status = 'edit'
-      }
+        if (chartPrpps1.value.status == 'edit') {
+            chartPrpps1.value.status = 'new'
+        } else {
+            chartPrpps1.value.status = 'edit'
+        }
     }
 
 </script>
@@ -593,144 +716,163 @@
             top: 0px;
             //background: #ffff00;
         }
-         .ring-chart2{
-           width: 1832px;
-           height: 800px;
-           position: absolute;
-           left: 36px;
-           top: 36px;
-         }
-      .ring-chart3{
-        width: 1832px;
-        height: 800px;
-        position: absolute;
-        left: 70px;
-        top: 69px;
-      }
-      .ring-chart4{
-        width: 1832px;
-        height: 800px;
-        position: absolute;
-        top: 117px;
-        left: 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;
-      }
+
+        .ring-chart2 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 36px;
+            top: 36px;
+        }
+
+        .ring-chart3 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            left: 70px;
+            top: 69px;
+        }
+
+        .ring-chart4 {
+            width: 1832px;
+            height: 800px;
+            position: absolute;
+            top: 117px;
+            left: 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;
+
+    .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%
+
+    #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;
+
+    .bg-color-style1 {
+        background: #FFFFFF;
     }
 </style>