Merge branch 'master' of http://47.92.102.27:20005/xjc/xjc-vue

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

@@ -1,11 +1,8 @@
 <template>
     <div class="chart-container">
-      <div id="eraser" style="position: absolute;top:10px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%">橡皮</div>
-      <div id="eraser" 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="ring-chart" ref="chart" class="ring-chart"></div>
-<!--      //圆心-->
-<!--        <div id="cc" style="position: absolute;width: 5px;height: 5px;background: #ff0000"></div>-->
-
+        <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="ring-chart" ref="chart" class="ring-chart"-->
@@ -17,7 +14,7 @@
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     import * as echarts from 'echarts'
 
-    // document.body.style.overflow = 'hidden';
+    document.body.style.overflow = 'hidden';
     const props = defineProps({
         chartProps: {}
     })
@@ -174,10 +171,9 @@
         // cc.style.left = center_x + "px"
 
         let chartDiv = document.getElementById("ring-chart");
-        console.log("开始注册touch事件：")
         chartDiv.addEventListener('touchstart', begin)
         chartDiv.addEventListener('touchmove', moving)
-        // chartDiv.addEventListener('touchend', stopMoving)
+        chartDiv.addEventListener('touchend', stopMoving)
     }
 
     function testMove(e) {
@@ -195,7 +191,11 @@
 
 
     //
+
     const beginCorner = ref(0)
+    const beginPoint = ref({})
+    const endCorner = ref(0)
+    const endPoint = ref({})
 
     // function begin(event) {
     //
@@ -230,36 +230,77 @@
     //
     // }
 
-
     function begin(event) {
+        console.log("=====", props.chartProps.status)
         if (!event.targetTouches || event.targetTouches.length === 0) return;
         //鼠标按下，取点
         let mouse_x = event.targetTouches[0].pageX;
         let mouse_y = event.targetTouches[0].pageY;
-        let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
-        beginCorner.value = ang
-        option.value.series[0].startAngle = 180 - ang
+        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 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
+                }
+                //
+            }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
+                }
+            }
+        } else if (props.chartProps.status == 'new') {
+            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)
-        isBegin.value = true
     }
 
     function stopMoving() {
         nextTick(() => {
-            // isFinish.value = true
-            // isBegin.value = false
+            isFinish.value = true
+            isBegin.value = false
+            myChart.setOption(option.value)
         })
+        window.setTimeout(finish, 1000)
     }
+
+    function finish() {
+        //alert("绘制完成!")
+    }
+
     function moving(event) {
         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)
-        console.log("ccccc",eang)
-
-
-
         if (eang >= 0 && eang <= 180) {
-            option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 9
-            option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 9
+            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
         }
         myChart.setOption(option.value)
     }
@@ -309,14 +350,5 @@
         margin-top: 219px;
     }
 
-    .instructions {
-        text-align: center;
-        font-size: 16px;
-        color: #666;
-    }
-    .eraser{
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-    }
+
 </style>

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

@@ -1,289 +1,333 @@
 <template>
-  <div 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">
-          <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
+    <div 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">
+                    <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
+                </div>
+            </div>
+            <div id="eraser"
+                 @click="edit"
+                 style="position: absolute;top:10px;text-align:center;line-height:50px;left:10px;width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%">
+                橡皮
+            </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>
-
     </div>
-  </div>
 
 </template>
 
 <script setup>
-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()
-function setHeadinfo(){
-  headinfo.value = {
-    title: '生涯彩虹图',
-    user: {
-      avatar: '头像路径',
-      nickName: '张三'
-    },
-    backUrl : '/xjc-integratedmachine/wakeup/rainbow/knowledge_explanation_1'
-  }
-}
-
-const chartPrpps1 = ref({
-  top : 219,
-  left : 190,
-  width : 1700,
-  height : 1700,
-  borderColor : "#998877",
-  color :"#ff00ff",
-  bncolor : "#ffffff",
-  radiusMax : '100%',
-  radiusMin : '96%',
-  isFinish : false
-})
-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);
-};
-onMounted(() => {
-  setHeadinfo()
-})
+    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()
+
+    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: "#998877",
+        color: "#ff00ff",
+        bncolor: "#ffffff",
+        radiusMax: '100%',
+        radiusMin: '96%',
+        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);
+    };
+    onMounted(() => {
+        setHeadinfo()
+    })
+    //编辑和保存
+    function save() {
+        status.value = 'save'
+    }
+    function edit() {
+        chartPrpps1.value.status = 'edit'
+    }
 
 </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: black;
-    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;
+    //body,html{
+    //  overflow: hidden;
+    //}
+    p {
+        margin: 0;
+        padding: 0;
     }
-    .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;
+
+    .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: black;
+            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: 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;
+            margin-top: 6px;
+            z-index: 10;
+
+            img {
+                width: 244px;
+                height: 92px;
+                z-index: 10;
             }
-          }
         }
-        .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;
+
+        .fixed-box {
+            width: 100%;
+            height: 100px;
+            position: absolute;
+            bottom: 125px;
+        }
+
+        .content-bottom {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
             position: relative;
-            img{
-              width: 165px;
-              height: 83px;
-              position: absolute;
-              top: -33px;
-              left: 10px;
+            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;
+                }
             }
-          }
         }
-      }
-    }
-  }
-  .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;
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            //background: #ffff00;
+        }
     }
-  }
-  .draggable-ball {
-    position: absolute;
-    cursor: pointer;
-    user-select: none; /* 防止拖拽时选中文字 */
-  }
-  .ring-chart1 {
-    width: 1832px;
-    height: 800px;
-    position: absolute;
-    left: 0px;
-    top : 0px;
-    //background: #ffff00;
-  }
-}
 
 </style>