feat 决策

src/permission.js

@@ -15,6 +15,7 @@ const whiteList = ['/login', '/register', '/xjc_index',
     '/xjc-integratedmachine/wakeup/index',
     '/xjc-integratedmachine/wakeup/rainbow/paint',
     '/xjc-integratedmachine/wakeup/rainbow/paint2',
+    '/xjc-integratedmachine/wakeup/rainbow/paint3',
     '/xjc-integratedmachine/cognize/index',
     '/xjc-integratedmachine/environment/index',
     '/xjc-integratedmachine/decision/index',

src/router/router_wakeup.js

@@ -13,6 +13,10 @@ const router = [
         path: '/xjc-integratedmachine/wakeup/rainbow/paint2',
         component: () => import('@/views/xjc-integratedmachine/wakeup/rainbow/paint2'),
     },
+    {
+        path: '/xjc-integratedmachine/wakeup/rainbow/paint3',
+        component: () => import('@/views/xjc-integratedmachine/wakeup/rainbow/paint3'),
+    },
     //认识生涯
     {
         path: '/xjc-integratedmachine/wakeup/career_recognize/index',

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

@@ -0,0 +1,221 @@
+<template>
+    <div class="chart-container">
+        <div ref="chart" class="ring-chart" @mousedown="begin" @mousemove="moving" @mouseup="stopMoving"></div>
+    </div>
+</template>
+
+<script setup>
+    import {ref, onMounted, onBeforeUnmount} from 'vue'
+    import * as echarts from 'echarts'
+
+    const props = defineProps({
+        chartProps: {}
+    })
+
+
+    const chart = ref(null)
+    let myChart = null
+    const currentValue = ref(1) // 初始值
+
+    const isBegin = ref(false)
+
+    // 鼠标状态
+    const isDragging = ref(false)
+    const startAngle = ref(0)
+    const startValue = ref(0)
+
+    const option = ref({})
+
+    // 初始化图表
+    const initChart = () => {
+        if (!chart.value) return
+
+        myChart = echarts.init(chart.value)
+
+        option.value = {
+            series: [{
+                type: 'pie',
+                radius: ['80%', '85%'],
+                startAngle: 180,
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    borderRadius: 10,
+                    borderColor: props.chartProps.borderColor,
+                    borderWidth: 2
+                },
+                label: {
+                    show: true,
+                    position: 'center',
+                    // formatter: '{c}%',
+                    fontSize: 24,
+                    fontWeight: 'bold',
+                    color: '#333'
+                },
+                emphasis: {
+                    scale: false,
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                },
+                data: [
+                    {value: currentValue.value, name: '', itemStyle: {color: '#5470c6'}},
+                    {value: 100 - currentValue.value, name: '', itemStyle: {color: '#eee'}}
+                ]
+            }]
+        }
+
+        myChart.setOption(option.value)
+
+        // 添加图表鼠标事件
+        // myChart.getZr().on('mousedown', startDrag)
+        // myChart.getZr().on('mouseup', endDrag)
+        // myChart.getZr().on('mousemove', handleDrag)
+    }
+
+    // 更新图表数据
+    const updateChart = (newValue) => {
+        if (!myChart) return
+
+        currentValue.value = Math.max(0, Math.min(100, newValue)) // 限制在0-100之间
+
+        myChart.setOption({
+            series: [{
+                data: [
+                    {value: currentValue.value},
+                    {value: 100 - currentValue.value}
+                ]
+            }]
+        })
+    }
+
+    // 开始拖动
+    const startDrag = (e) => {
+        if (e.target && e.target.type === 'arc') {
+            isDragging.value = true
+            startAngle.value = getAngle(e.offsetX, e.offsetY)
+            startValue.value = currentValue.value
+        }
+    }
+
+    // 结束拖动
+    const endDrag = () => {
+        isDragging.value = false
+    }
+
+    // 处理拖动
+    const handleDrag = (e) => {
+        if (!isDragging.value) return
+
+        const currentAngle = getAngle(e.offsetX, e.offsetY)
+        const angleDiff = currentAngle - startAngle.value
+        const valueDiff = (angleDiff / 360) * 100
+
+        updateChart(startValue.value + valueDiff)
+    }
+
+    // 获取鼠标位置对应的角度
+    const getAngle = (x, y) => {
+        const rect = chart.value.getBoundingClientRect()
+        const centerX = rect.width / 2
+        const centerY = rect.height / 2
+        const deltaX = x - centerX
+        const deltaY = y - centerY
+        const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI
+        return (angle + 450) % 360 // 调整为0-360度
+    }
+
+    onMounted(() => {
+        initChart()
+    })
+
+    onBeforeUnmount(() => {
+        // 移除事件监听
+        if (myChart) {
+            myChart.getZr().off('mousedown', startDrag)
+            myChart.getZr().off('mouseup', endDrag)
+            myChart.getZr().off('mousemove', handleDrag)
+            myChart.dispose()
+        }
+    })
+
+    //环形相关信息
+    const width = props.chartProps.width
+    const height = props.chartProps.height
+    const left = props.chartProps.left
+    const top = props.chartProps.top
+    const center_x = left + width / 2
+    const center_y = top + height / 2
+
+    function init() {
+        console.log(center_x, "***", center_y)
+    }
+
+    //取点和圆心的角度
+    function calculateAngleDegrees(x1, y1, x2, y2) {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const radians = Math.atan2(dy, dx);
+        return radians * (180 / Math.PI); // 弧度转角度
+    }
+
+
+    //
+    const beginCorner = ref(0)
+
+    function begin(event) {
+        //鼠标按下，取点
+        let mouse_x = event.pageX;
+        let mouse_y = event.pageY;
+        let ang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+        beginCorner.value = ang
+        option.value.series[0].startAngle = 180 - ang
+        myChart.setOption(option.value)
+        isBegin.value = true
+    }
+
+    function stopMoving() {
+        isBegin.value = false
+    }
+
+    function moving(event) {
+        if (isBegin.value == true) {
+            let mouse_x = event.pageX;
+            let mouse_y = event.pageY;
+            let eang = calculateAngleDegrees(mouse_x, mouse_y, center_x, center_y)
+            if (eang >= 0 && eang <= 180) {
+                option.value.series[0].data[0].value = (eang - beginCorner.value) * 5 / 18
+                option.value.series[0].data[1].value = 100 - (eang - beginCorner.value) * 5 / 18
+                myChart.setOption(option.value)
+            }
+        }
+
+    }
+
+    init()
+</script>
+
+<style scoped>
+    .chart-container {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ring-chart {
+        width: 1000px;
+        height: 1000px;
+        cursor: pointer;
+    }
+
+    .instructions {
+        text-align: center;
+        font-size: 16px;
+        color: #666;
+    }
+</style>

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

@@ -1,10 +1,15 @@
 <template>
     <!-- 图表容器：设置宽度和高度 -->
-    <div class="chartRef" ref="chartRef" id="chartRef" @mousemove="moving" @click="paint"></div>
+    <div class="chartRef" ref="chartRef" id="chartRef" @mousemove="moving" v-if="divFlag"
+    @mousedown="begin" @mouseup="end"
+    ></div>
 </template>
 
 <script setup>
+    const divFlag = ref(true)
     var e = ref(0)
+    const raduis_begin = ref(0)
+    const raduis_end = ref(0)
     // 引入 Vue 的 Composition API
     import {ref, onMounted, onBeforeUnmount} from 'vue'
     // 引入 echarts 库
@@ -41,7 +46,7 @@
         series: {
             name: "",
             type: "pie",
-            radius: ["65%", "85%"],
+            radius: ["65%", "70%"],
             avoidLabelOverlap: true,
             hoverAnimation: false,
             label: {
@@ -60,14 +65,14 @@
             },
             data: [
                 {
-                    value: e.value,
+                    value: 0,
                     name: "",
                     itemStyle: {
                         color: "#2AB296",
                     },
                 },
                 {
-                    value: 100 - e.value,
+                    value: 0,
                     name: "",
                     itemStyle: {
                         color: "transparent",//透明色，也可以设置把其他颜色
@@ -82,11 +87,7 @@
         if (chartRef.value) {
             // 初始化 echarts 实例
             chartInstance = echarts.init(chartRef.value)
-
             // 配置项
-
-
-
             // 使用配置项渲染图表
 
             paint()
@@ -123,19 +124,22 @@
     }
     // let x0 = document.getElementById("chartRef").offsetLeft
     // let y0 = document.getElementById("chartRef").offsetTop
-    let i =0;
     function moving(event) {
-        console.log("*********************",i++)
-        let center_x = width/2;
-        let center_y = height/2;
-        let mouse_x = event.pageX;
-        let mouse_y = event.pageY;
-        let ang = 180+calculateAngleDegrees(center_x,center_y,mouse_x,mouse_y)
-        let result;
-        if(ang >=0 && ang <=180){
-            e.value= ang*5/18
-            paint()
+        if(isBegin.value == true){
+            let center_x = width/2;
+            let center_y = height/2;
+            let mouse_x = event.pageX;
+            let mouse_y = event.pageY;
+            let ang = 180+calculateAngleDegrees(center_x,center_y,mouse_x,mouse_y)
+            let result;
+            if(ang >=0 && ang <=360){
+                e.value= ang*5/9
+                paint()
+            }else{
+                e.value= 0
+            }
         }
+
         // console.log(mouse_x,mouse_y)
     }
     function calculateAngleDegrees(x1, y1, x2, y2) {
@@ -145,7 +149,41 @@
         return radians * (180 / Math.PI); // 弧度转角度
     }
 
+    const isBegin = ref(false)
+
+
+
+    function begin(event) {
+        divFlag.value = false
+        divFlag.value = true
+        //计算初始化角度
+        let center_x = width/2;
+        let center_y = height/2;
+        let mouse_x = event.pageX;
+        let mouse_y = event.pageY;
+        let ang = calculateAngleDegrees(center_x,center_y,mouse_x,mouse_y)
+        //计算初始化角度比例
+        if(ang >=0 && ang <=360){
+            raduis_begin.value= ang*5/9
+        }
+        ang = 90+ang
+        const div = document.getElementById('chartRef');
+        div.style.transform = 'rotate('+ang+'deg)';
+        isBegin.value = true
+
 
+    }
+    function end() {
+        let center_x = width/2;
+        let center_y = height/2;
+        let mouse_x = event.pageX;
+        let mouse_y = event.pageY;
+        let ang = calculateAngleDegrees(center_x,center_y,mouse_x,mouse_y)
+        if(ang <=0 && ang >=360){
+            raduis_end.value= ang*5/18
+        }
+        isBegin.value = false
+    }
 
 </script>
 

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

@@ -0,0 +1,90 @@
+<template>
+    <div class="hide-scrollbar" @mousemove="chooseDiv">
+        <FollowRingChart id="ring-chart1" class="ring-chart1" :chartProps="chartPrpps1"/>
+        <!--<FollowRingChart id="ring-chart2" class="ring-chart2" :chartProps="chartPrpps2"/>-->
+
+        <!--<div style="position: absolute;background: #ff0000;width: 800px;height: 500px;top:500px;left:400px;"></div>-->
+    </div>
+</template>
+
+<script setup>
+    import FollowRingChart from './FollowRingChart.vue'
+
+    const chartPrpps1 = ref({
+        left : 0,
+        top : 0,
+        width : 800,
+        height : 800,
+        borderColor : "#998877",
+        color :"#ff00ff",
+        bncolor : "#ffffff",
+        radiusMax : '85%',
+        radiusMin : '80%',
+    })
+    const chartPrpps2 = ref({
+        left : 50,
+        top : 50,
+        width : 700,
+        height : 700,
+        borderColor : "#223344",
+        color :"#aabbcc",
+        bncolor : "#ddeeff",
+        radiusMax : '85%',
+        radiusMin : '80%',
+    })
+    const centerX = chartPrpps1.value.width/2+chartPrpps1.value.left
+    const centerY = chartPrpps1.value.height/2+chartPrpps1.value.top
+    function chooseDiv(event){
+        let mouse_x = event.pageX;
+        let mouse_y = event.pageY;
+        let dis = Math.sqrt((centerX-mouse_x)*(centerX-mouse_x)+(centerY-mouse_y)*(centerY-mouse_y))
+        if(dis >=320 && dis <=340){
+            document.getElementById("ring-chart2").style.zIndex = 1
+            document.getElementById("ring-chart1").style.zIndex = 99999
+        }
+        if(dis <= 315 && dis >=285){
+            document.getElementById("ring-chart1").style.zIndex = 1
+            document.getElementById("ring-chart2").style.zIndex = 99999
+        }
+        //console.log("dis:",dis)
+
+    }
+    //取点和圆心的角度
+    function calculateAngleDegrees(x1, y1, x2, y2) {
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const radians = Math.atan2(dy, dx);
+        return radians * (180 / Math.PI); // 弧度转角度
+    }
+</script>
+
+<style scoped>
+    .chart-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100vh; /* 使用整个视口高度 */
+    }
+
+    .ring-chart1 {
+        width: 800px;
+        height: 800px;
+        position: absolute;
+        left: 100px;
+        top : 100px;
+        background: #ffff00;
+    }
+    .ring-chart2 {
+        position: absolute;
+        left : -65px;
+        top : 35px;
+    }
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none; /* 对于WebKit浏览器 */
+    }
+    .hide-scrollbar {
+        -ms-overflow-style: none; /* 对于IE和Edge浏览器 */
+        scrollbar-width: none; /* 针对Firefox */
+    }
+</style>

vite.config.js

@@ -46,7 +46,8 @@ export default defineConfig(({ mode, command }) => {
       proxy: {
         // https://cn.vitejs.dev/config/#server-proxy
         '/dev-api': {
-          target: 'http://localhost:8080',
+          // target: 'http://localhost:8080',
+          target: 'http://192.168.3.100:8080',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
         }