网络管理开发

src/views/privateOrder/ecosphere/components/componentRight.vue

@@ -10,42 +10,67 @@
   <div class="container">
     <div class="module-container">
       <div class="section-reportingProcess">
+        <module-title> 举报流程</module-title>
         <div class="processflow">
-          <module-title> 举报流程</module-title>
           <div class="processIcon">
-            <div style="top: -33px; left: 303px">
-              <img src="@/assets/ecosphere/网络举报事件.png" alt="" />
+            <div style="top: 0px; left: 340px">
+              <img src="@/assets/sentimeent/网络举报事件.png" alt="" />
               <span style="margin-left: -40px; color: #fbe84f">
                 网络举报事件
               </span>
             </div>
-            <div style="top: 73px; left: 499px">
-              <img src="@/assets/ecosphere/举报中心.png" alt="" />
+            <div style="top: 73px; left: 550px">
+              <img src="@/assets/sentimeent/举报中心.png" alt="" />
               <span style="margin-left: -12px">举报中心</span>
             </div>
-            <div style="top: 266px; left: 499px">
-              <img src="@/assets/ecosphere/研判分析.png" alt="" />
+            <div style="top: 266px; left: 540px">
+              <img src="@/assets/sentimeent/研判分析.png" alt="" />
               <span style="margin-left: -15px">研判分析</span>
             </div>
-            <div style="top: 365px; left: 303px">
-              <img src="@/assets/ecosphere/事件办理处置.png" alt="" />
+            <div style="top: 350px; left: 340px">
+              <img src="@/assets/sentimeent/事件办理处置.png" alt="" />
               <span style="margin-left: -40px">事件办理处置</span>
             </div>
-            <div style="top: 266px; left: 98px">
-              <img src="@/assets/ecosphere/汇总结果.png" alt="" />
+            <div style="top: 266px; left: 145px">
+              <img src="@/assets/sentimeent/汇总结果.png" alt="" />
               <span style="margin-left: -15px">汇总结果</span>
             </div>
-            <div style="top: 73px; left: 98px">
-              <img src="@/assets/ecosphere/反馈举报人.png" alt="" />
+            <div style="top: 73px; left: 155px">
+              <img src="@/assets/sentimeent/反馈举报人.png" alt="" />
               <span style="margin-left: -25px">反馈举报人</span>
             </div>
           </div>
-          <div id="processRotate"></div>
+          <!-- <div id="processRotate"></div> -->
+          <!-- <div class="processCenter">
+            
+          </div> -->
         </div>
       </div>
       <div class="section">
         <module-title> 举报事件年度分类统计 </module-title>
         <div id="pie" />
+        <div class="chart-labels">
+          <div class="label-item">
+            <span class="dot" style="background-color: #37a4ff"></span>
+            <span class="label-text">上级下发</span>
+            <span class="label-value">200%</span>
+          </div>
+          <div class="label-item">
+            <span class="dot" style="background-color: #00ffde"></span>
+            <span class="label-text">部门转发</span>
+            <span class="label-value">20%</span>
+          </div>
+          <div class="label-item">
+            <span class="dot" style="background-color: #ff7e2b"></span>
+            <span class="label-text">小程序</span>
+            <span class="label-value">10%</span>
+          </div>
+          <div class="label-item">
+            <span class="dot" style="background-color: #f6ff00"></span>
+            <span class="label-text">无效</span>
+            <span class="label-value">1%</span>
+          </div>
+        </div>
       </div>
       <div class="section" style="padding-top: 35px">
         <module-title> 清朗专项行动数据统计</module-title>
@@ -137,21 +162,23 @@
             <div class="header-cell">标题</div>
             <div class="header-cell">来源</div>
           </div>
-          <vue-seamless-scroll 
-            :data="cleanActionData" 
-            :class-option="cleanActionScrollOption" 
+          <vue-seamless-scroll
+            :data="cleanActionData"
+            :class-option="cleanActionScrollOption"
             class="scroll-container"
           >
             <div class="table-body">
-              <div 
-                v-for="(item, index) in cleanActionData" 
-                :key="index" 
+              <div
+                v-for="(item, index) in cleanActionData"
+                :key="index"
                 class="table-row"
-                :class="{'highlight-row': item.highlight}"
+                :class="{ 'highlight-row': item.highlight }"
               >
                 <div class="cell time-cell">{{ item.time }}</div>
                 <div class="cell title-cell">
-                  <span v-if="item.highlight" class="highlight-tag">{{ item.highlightTag }}</span>
+                  <span v-if="item.highlight" class="highlight-tag">{{
+                    item.highlightTag
+                  }}</span>
                   {{ item.title }}
                 </div>
                 <div class="cell source-cell">{{ item.source }}</div>
@@ -227,16 +254,67 @@ export default {
         { url: require("@/assets/ecosphere/清朗专项行动图/1-4.png") },
       ],
       cleanActionData: [
-        { time: '2024-12-28', title: '"清朗行动" 持续发力', source: '即时动态', highlight: false },
-        { time: '2024-12-26', title: '净化人力资源市场环境，商......', source: '头条', highlight: false },
-        { time: '2024-12-23', title: '高贸区开展打击人力资源市......', source: '即时动态', highlight: false },
-        { time: '2024-11-20', title: '科教区开展打击人力资源市......', source: '头条', highlight: false },
-        { time: '2024-10-15', title: '持续净化人力资源市场秩序......', source: '即时动态', highlight: true, highlightTag: '43.58%' },
-        { time: '2024-10-08', title: '保持高压态势 确保 "清朗" ......', source: '头条', highlight: false },
-        { time: '2024-09-11', title: '高贸区劳动监察大队走访园区......', source: '头条', highlight: false },
-        { time: '2024-08-25', title: '净化人力资源市场环境，商......', source: '工作动态', highlight: false },
-        { time: '2024-08-04', title: '高贸区开展打击人力资源市......', source: '头条', highlight: false },
-        { time: '2024-07-28', title: '保持高压态势 确保 "清朗" ......', source: '即时动态', highlight: false }
+        {
+          time: "2024-12-28",
+          title: '"清朗行动" 持续发力',
+          source: "即时动态",
+          highlight: false,
+        },
+        {
+          time: "2024-12-26",
+          title: "净化人力资源市场环境，商......",
+          source: "头条",
+          highlight: false,
+        },
+        {
+          time: "2024-12-23",
+          title: "高贸区开展打击人力资源市......",
+          source: "即时动态",
+          highlight: false,
+        },
+        {
+          time: "2024-11-20",
+          title: "科教区开展打击人力资源市......",
+          source: "头条",
+          highlight: false,
+        },
+        {
+          time: "2024-10-15",
+          title: "持续净化人力资源市场秩序......",
+          source: "即时动态",
+          highlight: true,
+          highlightTag: "43.58%",
+        },
+        {
+          time: "2024-10-08",
+          title: '保持高压态势 确保 "清朗" ......',
+          source: "头条",
+          highlight: false,
+        },
+        {
+          time: "2024-09-11",
+          title: "高贸区劳动监察大队走访园区......",
+          source: "头条",
+          highlight: false,
+        },
+        {
+          time: "2024-08-25",
+          title: "净化人力资源市场环境，商......",
+          source: "工作动态",
+          highlight: false,
+        },
+        {
+          time: "2024-08-04",
+          title: "高贸区开展打击人力资源市......",
+          source: "头条",
+          highlight: false,
+        },
+        {
+          time: "2024-07-28",
+          title: '保持高压态势 确保 "清朗" ......',
+          source: "即时动态",
+          highlight: false,
+        },
       ],
       cleanActionScrollOption: {
         step: 0.4, // 数值越大速度滚动越快
@@ -252,10 +330,10 @@ export default {
       number: 0,
       reportingTimer: null,
       pieData: [
-        { value: 25, name: "上级下发" },
-        { value: 4, name: "部门转办" },
-        { value: 8, name: "小程序" },
-        { value: 4, name: "无效" },
+        { value: 200, name: "上级下发" },
+        { value: 20, name: "部门转发" },
+        { value: 10, name: "小程序" },
+        { value: 1, name: "无效" },
       ],
       qlzfDataStatistics: [
         {
@@ -618,67 +696,11 @@ export default {
       const optionSecond = {
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c} ({d}%)",
-        },
-        emphasis: {
-          show: true,
-          formatter: "{fz41|{a}\n{az24|{b}个}",
-          textStyle: {
-            rich: {
-              fz41: {
-                fontSize: 41,
-                padding: [0, 5, 0, 0],
-              },
-              fz24: {
-                fontSize: 24,
-              },
-            },
-          },
+          formatter: "{a} <br/>{b} : {c}%",
         },
-        color: ["#6bd3ff", "#2590fd", "#f6ff00", "#ffd616"],
+        color: ["#37a4ff", "#00ffde", "#ff7e2b", "#f6ff00"],
         legend: {
-          orient: "vertical",
-          icon: "circle",
-          left: "55%",
-          top: "10%",
-          itemGap: 50,
-          padding: 5,
-          formatter: (name) => {
-            const data = this.pieData;
-            let target;
-            data.forEach((v) => {
-              if (v.name === name) {
-                target = v.value + "件";
-              }
-            });
-            const arr = [
-              `{a|${name}}{b|${String(target).replace(
-                /(\d)(?=(\d{3})+$)/g,
-                "$1,"
-              )}}`,
-            ];
-            return arr.join("\n");
-          },
-          textStyle: {
-            rich: {
-              a: {
-                width: 180,
-                fontSize: 28,
-                // fontWeight: 'bold',
-                color: "#ffffff",
-              },
-              b: {
-                fontSize: 28,
-                color: "rgba(251,232,79)",
-                backgroundColor: {
-                  image: image,
-                },
-                align: "center",
-              },
-            },
-            fontSize: 18,
-            color: "rgba(255, 255, 255, .5)",
-          },
+          show: false
         },
         series: [
           {
@@ -688,40 +710,89 @@ export default {
             avoidLabelOverlap: false,
             center: ["24%", "48%"],
             label: {
-              show: false,
-              position: "center",
-              formatter: (params) => {
-                return `{a| ${params.name}} \n {b|${params.value}}`;
-              },
-              rich: {
-                a: {
-                  fontFamily: "SourceHanSansCN-Regular",
-                  color: "#ffffff",
-                  fontSize: 28,
-                },
-                b: {
-                  fontFamily: "DIN-Medium",
-                  color: "#6ddefb",
-                  fontSize: 32,
-                  lineHeight: 50,
-                },
-              },
+              show: false
             },
             emphasis: {
               label: {
-                show: true,
-                fontSize: "25",
-                fontWeight: "bold",
-              },
+                show: false
+              }
             },
             labelLine: {
-              show: false,
+              show: false
             },
-            data: this.pieData,
+            data: this.pieData.map((item) => {
+              if (item.name === "无效") {
+                return {
+                  ...item,
+                  label: {
+                    show: true,
+                    position: 'outside',
+                    formatter: '4件\n无效',
+                    fontSize: 16,
+                    color: '#f6ff00',
+                    distance: 5
+                  },
+                  labelLine: {
+                    show: true,
+                    length: 30,
+                    length2: 40,
+                    lineStyle: {
+                      color: '#f6ff00',
+                      width: 1
+                    }
+                  }
+                }
+              }
+              return item;
+            }),
           },
+          {
+            type: 'pie',
+            radius: ['0', '35%'],
+            center: ["24%", "48%"],
+            silent: true,
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            z: 1,
+            data: [{
+              value: 100,
+              itemStyle: {
+                color: 'rgba(0, 15, 58, 0.8)',
+                borderWidth: 2,
+                borderColor: '#072761'
+              }
+            }]
+          }
         ],
       };
+      // Add warning icon in the center
+      const warningIcon = {
+        type: 'group',
+        left: '24%',
+        top: '48%',
+        z: 100,
+        children: [{
+          type: 'image',
+          z: 100,
+          style: {
+            image: require('@/assets/sentimeent/warning.png'),
+            width: 24,
+            height: 24,
+            x: -12,
+            y: -12
+          }
+        }]
+      };
+      
+      optionSecond.graphic = [warningIcon];
       myChart.setOption(optionSecond, true);
+      
+      // Remove click event handler - we don't need it
+      
       echartsJump(myChart, optionSecond);
     },
     // 定时器旋转+字体颜色变
@@ -782,62 +853,63 @@ export default {
     .section {
       width: 720px;
       height: 487px;
+      height: 487px;
       .clean-action-table {
         margin-top: 20px;
         height: 400px;
-        
+
         .table-header {
           display: flex;
-          background-color: #1A3B6E;
-          
+          background-color: #1a3b6e;
+
           .header-cell {
             padding: 12px 15px;
             color: #ffffff;
             font-size: 18px;
             font-weight: normal;
             text-align: center;
-            
+
             &:first-child {
               width: 120px;
             }
-            
+
             &:nth-child(2) {
               flex: 1;
             }
-            
+
             &:last-child {
               width: 100px;
             }
           }
         }
-        
+
         .scroll-container {
           height: 360px;
           overflow: hidden;
         }
-        
+
         .table-body {
           width: 100%;
-          
+
           .table-row {
             display: flex;
             background-color: rgba(18, 40, 69, 0.5);
             border-bottom: 1px solid #193859;
-            
+
             &:hover {
               background-color: rgba(33, 150, 243, 0.1) !important;
             }
-            
+
             &:nth-child(odd) {
               background-color: rgba(18, 40, 69, 0.7);
             }
-            
+
             &.highlight-row {
               position: relative;
-              
+
               .title-cell {
                 position: relative;
-                
+
                 .highlight-tag {
                   position: absolute;
                   top: 50%;
@@ -852,29 +924,29 @@ export default {
                 }
               }
             }
-            
+
             .cell {
               padding: 12px 15px;
               font-size: 16px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
-              
+
               &.time-cell {
                 width: 120px;
-                color: #9BB8D5;
+                color: #9bb8d5;
                 text-align: center;
               }
-              
+
               &.title-cell {
                 flex: 1;
                 color: #ffffff;
                 padding-right: 40px;
               }
-              
+
               &.source-cell {
                 width: 100px;
-                color: #9BB8D5;
+                color: #9bb8d5;
                 text-align: center;
               }
             }
@@ -883,15 +955,14 @@ export default {
       }
     }
     .section-reportingProcess {
-      width: 720px;
-      height: 500px;
+      width: 50%;
+      height: 50%;
       .processflow {
+        // padding-top: 20px;
         position: relative;
-        top: 26px;
-        left: 70px;
-        width: auto;
-        height: 500px;
-        background: url("~@/assets/ecosphere/环形图-bg.png") no-repeat 26px -8px;
+        height: 100%;
+        background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat  center ,url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
+        background-size: 430px 410px,215px 210px;
         .processTitle {
           width: 90px;
           position: absolute;
@@ -917,6 +988,8 @@ export default {
             position: absolute;
             img {
               display: block;
+              width: 79px;
+              height: 77px;
             }
             span {
               font-family: SourceHanSansCN-Regular;
@@ -992,6 +1065,15 @@ export default {
             transform-origin: center;
           }
         }
+        .processCenter {
+          position: absolute;
+          top: 30%;
+          left: 39%;
+          width: 180px;
+          height: 180px;
+          background: url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
+          background-size: 100% 100%;
+        }
       }
     }
     #pie {
@@ -999,7 +1081,8 @@ export default {
       top: 43px;
       left: 5px;
       width: 100%;
-      height: 344px;
+      height: 310px;
+      margin-top: 30px;
       background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
     }
     .qlzfsjtj {
@@ -1263,4 +1346,34 @@ export default {
     transform: translateX(0px);
   }
 }
+.chart-labels {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 70px;
+  padding: 0 30px;
+  
+  .label-item {
+    display: flex;
+    align-items: center;
+    
+    .dot {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+    
+    .label-text {
+      font-size: 16px;
+      color: #ffffff;
+      margin-right: 8px;
+    }
+    
+    .label-value {
+      font-size: 16px;
+      color: #f6ff00;
+    }
+  }
+}
 </style>

src/views/privateOrder/ecosphere/index.vue

@@ -110,6 +110,7 @@ export default {
   top: 0;
   width: 1603px;
   height: $ScreenHeight;
+  margin-right: 65px
   // background: url("~@/assets/privateOrder/common/bg-right.png") right center
     // no-repeat;
 }