Merge branch 'dev' into lhh

src/views/left/comp/RingChart.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script>
-// import Highcharts from "highcharts";
-import Highcharts from 'highcharts'
+import Highcharts from "highcharts";
+// import Highcharts from 'highcharts'
 import Highcharts3D from 'highcharts/highcharts-3d'
 import backgroundImg from '@/assets/img/底.png' // 修正图片路径
 
@@ -34,7 +34,9 @@ export default {
     }
   },
   mounted() {
-    this.init()
+    this.$nextTick(() => {
+      this.init()
+    })
   },
   methods: {
     init() {

src/views/left/dialog/components/StandardDisposalProcess.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    标准处置流程
+     <!-- 标准处置流程 -->
   </div>
 </template>
 <script setup>

src/views/left/modules/ReportDisposal.vue

@@ -87,7 +87,10 @@
               </div>
             </div>
             <div class="progress">
-              <el-progress class="circle" type="circle" :percentage="52" />
+              <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
+              <!-- <MyProgress :percentage="52" :gradientStart="'#83804f'" :gradientEnd="'#ffca0c'"></MyProgress> -->
+
+                   <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#83804f" gradient-end="#ffca0c" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
               <span class="text">使用率</span>
             </div>
           </div>
@@ -110,14 +113,14 @@
             </div>
             <!-- <img src="../../../assets/img/连线方向箭头.png" alt=""  class="line_img"> -->
             <div class="modules_bg_pdqk_body_item">
-              <img src="../../../assets//img/完成指令.png" alt=""/>
+              <img src="../../../assets//img/完成指令.png" alt="" />
               <div>完成指令</div>
               <span>17</span>
             </div>
 
             <div class="line">
-                  <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1">
-                  <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2">
+              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img1" />
+              <img src="../../../assets/img/连线方向箭头.png" alt="" class="line_img2" />
             </div>
           </div>
         </div>
@@ -152,7 +155,9 @@
                 </div>
               </div>
               <div class="progress">
-                <el-progress class="circle" type="circle" :percentage="52" />
+                <!-- <el-progress class="circle" type="circle" :percentage="52" /> -->
+                <!-- <MyProgress :percentage="50" :gradientStart="'#9ee6f6'" :gradientEnd="'#62e3ff'"></MyProgress> -->
+                  <MyProgress :value="50" backgroundColor="#2d4c7f" gradient-start="#9ee6f6" gradient-end="#62e3ff" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
                 <span class="text">出动率</span>
               </div>
             </div>
@@ -179,7 +184,9 @@
               </div>
             </div>
             <div class="progress">
-              <el-progress class="circle" type="circle" :percentage="78" />
+              <!-- <el-progress class="circle" type="circle" :percentage="78" /> -->
+              <!-- <MyProgress :percentage="78" :gradientStart="'#ecc5af'" :gradientEnd="'#ff9a62'"></MyProgress> -->
+              <MyProgress :value="78" backgroundColor="#2d4c7f" gradient-start="#ecc5af" gradient-end="#ff9a62" text-color="#ffffff" stroke-width="8" size="60" ></MyProgress>
               <span class="text">出动率</span>
             </div>
           </div>
@@ -200,6 +207,8 @@ import TowLevelTitle from '../../../components/TowLevelTitle'
 import RiskReport from '../comp/RiskReport.vue'
 import RiskTwoView from '../comp/RiskTwoView.vue'
 
+import MyProgress from './common/MyProgress'
+
 import { ref, nextTick, toRaw, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
 
 // let riskReportObj = ref([{ id: 1, level: 'A', count: 0 }, { id: 2, level: 'B', count: 0 }, { id: 3, level: 'C', count: 0 }, { id: 4, level: 'D', count: 0 },])
@@ -453,8 +462,8 @@ function openRiskBigTable() {
   .modules_bg_jcsb {
     width: 223px;
     height: 126px;
-    // padding: 5px 10px 0px;
-    padding-left: 5px;
+    padding: 5px 5px 0px;
+    // padding-left: 5px;
     box-sizing: border-box;
     .modules_bg_jcsb_body {
       display: flex;
@@ -500,7 +509,7 @@ function openRiskBigTable() {
         height: 76px;
         display: flex;
         flex-direction: column;
-        // align-items: center;
+        align-items: center;
         // justify-content: center;
 
         .text {
@@ -559,22 +568,21 @@ function openRiskBigTable() {
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
-        .line_img{
-            width: 16px;
-            height: 16px;
-         
+        .line_img {
+          width: 16px;
+          height: 16px;
         }
       }
 
-      .line{
+      .line {
         position: absolute;
-        top:10px;
+        top: 10px;
         left: 24px;
         width: 192px;
         height: 16px;
         border-bottom: 2px dashed #175a7e;
         // position: relative;
-        .line_img1{
+        .line_img1 {
           //  position: absolute;
           // top:0px;
           // left: 0px;
@@ -583,13 +591,11 @@ function openRiskBigTable() {
           margin-left: 50px;
           margin-top: 4px;
           margin-right: 70px;
- 
         }
-        .line_img2{
+        .line_img2 {
           margin-top: 4px;
-           width: 26px;
+          width: 26px;
           height: 26px;
-
         }
       }
     }
@@ -599,8 +605,8 @@ function openRiskBigTable() {
   .modules_bg_yjry {
     width: 322px;
     height: 126px;
-    // padding: 5px 10px 10px;
-    padding-left: 10px;
+    padding: 5px 5px 5px;
+    // padding-left: 10px;
     box-sizing: border-box;
     .modules_bg_yjry_body {
       display: flex;
@@ -673,12 +679,11 @@ function openRiskBigTable() {
           }
         }
         .progress {
-          margin-top: -5px;
           width: 54px;
           height: 76px;
           display: flex;
           flex-direction: column;
-          // align-items: center;
+          align-items: center;
           // justify-content: center;
 
           .text {

src/views/left/modules/common/MyProgress.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="circular-progress">
+    <svg :width="size" :height="size" viewBox="0 0 120 120" style="overflow: visible">
+      <defs>
+        <!-- 进度条渐变 -->
+           <linearGradient :id="gradientId" x1="1" y1="0" x2="0" y2="1">
+          <stop offset="0%" :stop-color="gradientStart" :stop-opacity="startOpacity"/>
+          <stop offset="100%" :stop-color="gradientEnd" :stop-opacity="endOpacity"/>
+        </linearGradient>
+
+        <!-- 文字渐变（白 -> 结束色） -->
+        <linearGradient :id="textGradientId" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="#ffffff" />
+          <stop offset="100%" :stop-color="gradientEnd" />
+        </linearGradient>
+      </defs>
+
+      <!-- 背景圆 -->
+      <circle
+        cx="60"
+        cy="60"
+        :r="radius"
+        :stroke="backgroundColor"
+        :stroke-width="strokeWidth"
+        fill="none"
+      />
+
+      <!-- 进度条 -->
+      <circle
+        cx="60"
+        cy="60"
+        :r="radius"
+        :stroke="`url(#${gradientId})`"
+        :stroke-width="strokeWidth"
+        fill="none"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashOffset"
+        stroke-linecap="round"
+        transform="rotate(-90 60 60)"
+      />
+
+      <!-- 精确位置结束点 -->
+      <circle
+        :cx="endPoint.x"
+        :cy="endPoint.y"
+        :r="dotRadius"
+        :fill="gradientEnd"
+        :stroke="dotStrokeColor"
+        :stroke-width="dotStrokeWidth"
+      />
+
+      <!-- 渐变文字 -->
+      <text
+        x="50%"
+        y="50%"
+        text-anchor="middle"
+        dominant-baseline="middle"
+        :fill="`url(#${textGradientId})`"
+        :font-size="textSize"
+        font-weight="500"
+      >
+        {{ displayedValue }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  value: { type: Number, default: 0 },
+  size: { type: Number, default: 120 },
+  strokeWidth: { type: Number, default: 10 },
+  backgroundColor: { type: String, default: '#2d4c7f' },
+   // 渐变起始颜色
+  gradientStart: { type: String, default: '#9ac8ff' },
+  // 渐变结束颜色
+  gradientEnd: { type: String, default: '#1a6dff' },
+    // 渐变起始透明度
+  startOpacity: { type: Number, default: 0.1},
+  // 渐变结束透明度
+  endOpacity: { type: Number, default: 1 },
+  textSize: { type: Number, default: 30},
+  dotRadius: { type: Number, default: 5 },
+  dotStrokeWidth: { type: Number, default: 2 },
+  dotStrokeColor: { type: String, default: '#fff' }
+})
+
+const gradientId = ref(`gradient-${Math.random().toString(36).slice(2, 9)}`)
+const textGradientId = ref(`textGrad-${Math.random().toString(36).slice(2, 9)}`)
+
+// 精确半径计算（移除边缘偏移）
+const radius = computed(() => 60 - props.strokeWidth / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const dashOffset = computed(() => circumference.value * (1 - props.value / 100))
+
+// 精确结束点定位
+const endPoint = computed(() => {
+  const angle = (props.value / 100) * 360 - 90
+  const radian = angle * Math.PI / 180
+  return {
+    x: 60 + radius.value * Math.cos(radian),
+    y: 60 + radius.value * Math.sin(radian)
+  }
+})
+
+const displayedValue = computed(() => `${Math.round(props.value)}%`)
+</script>