From bf02bd7c350a3dbdaab5516e5c94a86be491ef67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Sun, 19 Jan 2025 11:43:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=85=E6=9C=97=E4=B8=93=E9=A1=B9=E8=A1=8C?=
 =?UTF-8?q?=E5=8A=A8=E5=8A=A8=E6=80=81=E6=A8=A1=E5=9D=97=E9=A6=96=E8=A1=8C?=
 =?UTF-8?q?=E7=BC=A9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ecosphere/components/componentRight.vue   | 479 +++++++++---------
 1 file changed, 245 insertions(+), 234 deletions(-)

diff --git a/src/views/privateOrder/ecosphere/components/componentRight.vue b/src/views/privateOrder/ecosphere/components/componentRight.vue
index 2670e9c..2b40eac 100644
--- a/src/views/privateOrder/ecosphere/components/componentRight.vue
+++ b/src/views/privateOrder/ecosphere/components/componentRight.vue
@@ -146,7 +146,7 @@
             style="margin-bottom: 18px"
           >
             <img
-              :src=" item"
+              :src="item"
               style="width: 355px; height: 269px; background-size: 100% 100%"
             />
           </div>
@@ -160,10 +160,15 @@
 </template>
 
 <script>
-window.JSZip = require('jszip')
-import { qlzxdtData } from './json'
-import { getreportNum } from '@/api/common'
-import { zhuanxiang, managescreen, zhuanxiangInfo, reportbyyear } from '@/api/zongzhi/manage.js'
+window.JSZip = require("jszip");
+import { qlzxdtData } from "./json";
+import { getreportNum } from "@/api/common";
+import {
+  zhuanxiang,
+  managescreen,
+  zhuanxiangInfo,
+  reportbyyear,
+} from "@/api/zongzhi/manage.js";
 import {
   listJbsjndfltj,
   listQlzxxddt,
@@ -171,62 +176,62 @@ import {
   listQlzxxdsjtj,
   screenqinglang,
 } from "@/api/netManage/index.js";
-import { echartsJump } from '../../../../../public/static/echartsJump'
-import { download } from "@/utils/safesoft"
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import image from '../../../../assets/ecosphere/饼图标注.png'
-import ModuleTitle from '../../common/ModuleTitle.vue'
+import { echartsJump } from "../../../../../public/static/echartsJump";
+import { download } from "@/utils/safesoft";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import image from "../../../../assets/ecosphere/饼图标注.png";
+import ModuleTitle from "../../common/ModuleTitle.vue";
 export default {
   components: {
     vueSeamlessScroll,
-    ModuleTitle
+    ModuleTitle,
   },
   data() {
     var ndate = new Date();
     var nmonth = ndate.getMonth();
     return {
       imgList: [
-        { url: require('@/assets/ecosphere/清朗专项行动图/1-1.png') },
-        { url: require('@/assets/ecosphere/清朗专项行动图/1-2.png') },
-        { url: require('@/assets/ecosphere/清朗专项行动图/1-3.png') },
-        { url: require('@/assets/ecosphere/清朗专项行动图/1-4.png') }
+        { url: require("@/assets/ecosphere/清朗专项行动图/1-1.png") },
+        { url: require("@/assets/ecosphere/清朗专项行动图/1-2.png") },
+        { url: require("@/assets/ecosphere/清朗专项行动图/1-3.png") },
+        { url: require("@/assets/ecosphere/清朗专项行动图/1-4.png") },
       ],
       qlzxdtList: [],
       number: 0,
       reportingTimer: null,
       pieData: [
-        { value: 25, name: '上级下发' },
-        { value: 4, name: '部门转办' },
-        { value: 8, name: '小程序' },
-        { value: 4, name: '无效' }
+        { value: 25, name: "上级下发" },
+        { value: 4, name: "部门转办" },
+        { value: 8, name: "小程序" },
+        { value: 4, name: "无效" },
       ],
       qlzfDataStatistics: [
         {
-          title: '处理有害信息数量(条)',
+          title: "处理有害信息数量(条)",
           data: [
             {
-              name: nmonth + '月',
-              num: 0
+              name: nmonth + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 1) + '月',
-              num: 0
+              name: nmonth - 1 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 2) + '月',
-              num: 0
+              name: nmonth - 2 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 3) + '月',
-              num: 0
+              name: nmonth - 3 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 4) + '月',
-              num: 0
+              name: nmonth - 4 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 5) + '月',
-              num: 0
+              name: nmonth - 5 + "月",
+              num: 0,
             },
             // {
             //   name: '8月',
@@ -252,35 +257,34 @@ export default {
             //   name: '3月',
             //   num: 0
             // }
-
-          ]
+          ],
         },
         {
-          title: '关闭直播平台违规账号(个)',
+          title: "关闭直播平台违规账号(个)",
           data: [
             {
-              name: nmonth + '月',
-              num: 0
+              name: nmonth + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 1) + '月',
-              num: 0
+              name: nmonth - 1 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 2) + '月',
-              num: 0
+              name: nmonth - 2 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 3) + '月',
-              num: 0
+              name: nmonth - 3 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 4) + '月',
-              num: 0
+              name: nmonth - 4 + "月",
+              num: 0,
             },
             {
-              name: (nmonth - 5) + '月',
-              num: 0
+              name: nmonth - 5 + "月",
+              num: 0,
             },
             // {
             //   name: '8月',
@@ -306,17 +310,16 @@ export default {
             //   name: '3月',
             //   num: 0
             // }
-
-          ]
-        }
+          ],
+        },
       ],
       qlzfDialogFlag: false,
       eldialogData: null,
       yhxiTotal: 0,
       wgptTotal: 0,
-      imgUrl:null,
-      zhuanxiangTotal:0,
-    }
+      imgUrl: null,
+      zhuanxiangTotal: 0,
+    };
   },
   computed: {
     classOption() {
@@ -328,24 +331,24 @@ export default {
         openWatch: true, // 开启数据实时监控刷新dom
         singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
         singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
-      }
-    }
+        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+      };
+    },
   },
   created() {},
   destroyed() {
-    clearInterval(this.reportingTimer)
-    clearInterval(this.time)
+    clearInterval(this.reportingTimer);
+    clearInterval(this.time);
   },
   mounted() {
     // this.qlzxdtList = qlzxdtDatas
-    this.imgUrl = process.env.VUE_APP_BASE_API2
+    this.imgUrl = process.env.VUE_APP_BASE_API2;
     // 开启定时器旋转
-    this.reportingProcessTimer()
-    this.zhuanxiangList()                 // 清朗专项行动动态
-    this.managescreenData()               // 行动数据统计
-    this.reportbyyearDate()               // 举报事件年度分类统计
-    
+    this.reportingProcessTimer();
+    this.zhuanxiangList(); // 清朗专项行动动态
+    this.managescreenData(); // 行动数据统计
+    this.reportbyyearDate(); // 举报事件年度分类统计
+
     // getreportNum().then(res => {
     //   this.pieData[0].value = res.data.reportTotalCount - 12
     //   this.inItPie()
@@ -355,63 +358,66 @@ export default {
     async itemClick(e) {
       // console.log(this.qlzxdtList[e.target.dataset.curdata])
       // let data = await zhuanxiangInfo(this.qlzxdtList[e.target.dataset.curdata].id)
-      getQlzxxddt(this.qlzxdtList[e.target.dataset.curdata].id).then(data=>{
-        let eldialogData = JSON.parse(JSON.stringify(data.data))
-        eldialogData.imageUrl = eldialogData.imageUrl.split(',')
-        this.eldialogData = eldialogData
-        this.qlzfDialogFlag = true
-      })
+      getQlzxxddt(this.qlzxdtList[e.target.dataset.curdata].id).then((data) => {
+        let eldialogData = JSON.parse(JSON.stringify(data.data));
+        eldialogData.imageUrl = eldialogData.imageUrl.split(",");
+        this.eldialogData = eldialogData;
+        this.qlzfDialogFlag = true;
+      });
     },
     changeImg(item, index) {
-      item.index = index
+      item.index = index;
     },
     // 清朗专项行动动态
-    async zhuanxiangList(){
+    async zhuanxiangList() {
       // let res = await zhuanxiang();
-      listQlzxxddt({isStatus:1}).then(res=>{
-        let imgArr
-        this.qlzxdtList = JSON.parse(JSON.stringify(res.rows))
-        for(let i = 0; i < this.qlzxdtList.length; i++){
-          imgArr = this.qlzxdtList[i].imageUrl
-          imgArr = imgArr.split(',')
-          this.qlzxdtList[i].imageUrl = imgArr[0]
+      listQlzxxddt({ isStatus: 1 }).then((res) => {
+        let imgArr;
+        this.qlzxdtList = JSON.parse(JSON.stringify(res.rows));
+        for (let i = 0; i < this.qlzxdtList.length; i++) {
+          imgArr = this.qlzxdtList[i].imageUrl;
+          imgArr = imgArr.split(",");
+          this.qlzxdtList[i].imageUrl = imgArr[0];
         }
-      })
+      });
     },
     //  行动数据统计
-    async managescreenData(){
+    async managescreenData() {
       // let res = await managescreen()
-      screenqinglang().then(res=>{
-        let data1 = res.data
-        let arr1 = [],arr2 = [];
-        data1.forEach(item=>{
-          let obj = {};
-          let objTwo = {};
-          obj.name = this.getDate(item.dateTime)
-          obj.num = item.count2;
-          objTwo.name = this.getDate(item.dateTime)
-          objTwo.num = item.count1;
-          arr2.push(obj)
-          arr1.push(objTwo)
+      screenqinglang()
+        .then((res) => {
+          let data1 = res.data;
+          let arr1 = [],
+            arr2 = [];
+          data1.forEach((item) => {
+            let obj = {};
+            let objTwo = {};
+            obj.name = this.getDate(item.dateTime);
+            obj.num = item.count2;
+            objTwo.name = this.getDate(item.dateTime);
+            objTwo.num = item.count1;
+            arr2.push(obj);
+            arr1.push(objTwo);
+          });
+          return { arr1, arr2 };
         })
-        return {arr1,arr2}
-      }).then((res)=>{
-        // console.log(res,'res')
-        this.qlzfDataStatistics[1].data.map((item)=>{
-          res.arr2.map((arr)=>{
-            if(item.name == arr.name) {
-              item.num = arr.num
-            }
-          })
-        })
-        this.qlzfDataStatistics[0].data.map((item)=>{
-          res.arr1.map((arr)=>{
-            if(item.name == arr.name) {
-              item.num = arr.num
-            }
-          })
-        })
-      })
+        .then((res) => {
+          // console.log(res,'res')
+          this.qlzfDataStatistics[1].data.map((item) => {
+            res.arr2.map((arr) => {
+              if (item.name == arr.name) {
+                item.num = arr.num;
+              }
+            });
+          });
+          this.qlzfDataStatistics[0].data.map((item) => {
+            res.arr1.map((arr) => {
+              if (item.name == arr.name) {
+                item.num = arr.num;
+              }
+            });
+          });
+        });
       // listQlzxxdsjtj({isStatus:1}).then(res=>{
       //   let data = res.rows || []
       //   let arr1 = [],arr2 = []
@@ -445,74 +451,78 @@ export default {
       // })
     },
     // 举报事件年度分类统计
-    async reportbyyearDate(){
+    async reportbyyearDate() {
       // let data = await reportbyyear();
       // let arr = [{name:'上级下发',value:''},{name:'部门转发',value:''},{name:'无效',value:''},{name:'小程序',value:''}]
-      let arr = []
-      listJbsjndfltj().then(data=>{
-        data.rows.forEach((item,index)=>{
-          // arr.forEach(item2=>{
-          //   if(item.type == item2.name) {
-          //     item2.value = item.count;
-          //   }
-          // })
-          let obj = {};
-          obj.value = item.count;
-          obj.name = item.type;
-          arr.push(obj)
+      let arr = [];
+      listJbsjndfltj()
+        .then((data) => {
+          data.rows.forEach((item, index) => {
+            // arr.forEach(item2=>{
+            //   if(item.type == item2.name) {
+            //     item2.value = item.count;
+            //   }
+            // })
+            let obj = {};
+            obj.value = item.count;
+            obj.name = item.type;
+            arr.push(obj);
+          });
+          arr = arr.sort((a, b) =>
+            a.value < b.value ? 1 : a.value > b.value ? -1 : 0
+          );
+          // obj.value = value;
+          // obj.name = '上级下发';
         })
-        arr = arr.sort((a, b) => a.value < b.value ? 1 : a.value > b.value ? -1 : 0)
-        // obj.value = value;
-        // obj.name = '上级下发';
-      }).then(res=>{
-        this.pieData = arr;
-        this.inItPie()
-      })
+        .then((res) => {
+          this.pieData = arr;
+          this.inItPie();
+        });
       // let arr = []
       // for(let i = 0; i < data.data.length; i++){
       //   let obj = {}
-      //   obj.name = data.data[i].source == '1' ? '上级下发' : data.data[i].source == '2' ? '部门转发' : data.data[i].source == '3' ? '小程序' : '无效' 
+      //   obj.name = data.data[i].source == '1' ? '上级下发' : data.data[i].source == '2' ? '部门转发' : data.data[i].source == '3' ? '小程序' : '无效'
       //   obj.value = data.data[i].count
       //   arr.push(obj)
       // }
       // this.pieData = arr;
     },
-    getDate(date){
+    getDate(date) {
       // 2023-10-17 15:14:07  截取月份
       // const result = /-(\d{2})-/.exec(date);
-      const result = date.split("-")
+      const result = date.split("-");
       if (result !== null && result.length > 1) {
         const month = result[1];
-        switch(month){
-          case '01':
-            return '1月';
-          case '02':
-            return '2月';
-          case '03':
-            return '3月';
-          case '04':
-            return '4月';
-          case '05':
-            return '5月';
-          case '06':
-            return '6月';
-            case '07':
-            return '7月';
-          case '08':
-            return '8月';
-          case '09':
-            return '9月';
-          case '10':
-            return '10月';
-          case '11':
-            return '11月';
-          case '12':
-            return '12月';
-          default :
+        switch (month) {
+          case "01":
+            return "1月";
+          case "02":
+            return "2月";
+          case "03":
+            return "3月";
+          case "04":
+            return "4月";
+          case "05":
+            return "5月";
+          case "06":
+            return "6月";
+          case "07":
+            return "7月";
+          case "08":
+            return "8月";
+          case "09":
+            return "9月";
+          case "10":
+            return "10月";
+          case "11":
+            return "11月";
+          case "12":
+            return "12月";
+          default:
             break;
         }
       } else {
-        console.log('没有找到月份');
+        console.log("没有找到月份");
       }
     },
     // 计算时间
@@ -548,51 +558,51 @@ export default {
     // },
     // 饼图
     inItPie() {
-      const chartDom = document.getElementById('pie')
-      const myChart = this.$echarts.init(chartDom)
+      const chartDom = document.getElementById("pie");
+      const myChart = this.$echarts.init(chartDom);
       const optionSecond = {
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
         },
         emphasis: {
           show: true,
-          formatter: '{fz41|{a}\n{az24|{b}个}',
+          formatter: "{fz41|{a}\n{az24|{b}个}",
           textStyle: {
             rich: {
               fz41: {
                 fontSize: 41,
-                padding: [0, 5, 0, 0]
+                padding: [0, 5, 0, 0],
               },
               fz24: {
-                fontSize: 24
-              }
-            }
-          }
+                fontSize: 24,
+              },
+            },
+          },
         },
-        color: ['#6bd3ff', '#2590fd', '#f6ff00', '#ffd616'],
+        color: ["#6bd3ff", "#2590fd", "#f6ff00", "#ffd616"],
         legend: {
-          orient: 'vertical',
-          icon: 'circle',
-          left: '55%',
-          top: '10%',
+          orient: "vertical",
+          icon: "circle",
+          left: "55%",
+          top: "10%",
           itemGap: 50,
           padding: 5,
           formatter: (name) => {
-            const data = this.pieData
-            let target
+            const data = this.pieData;
+            let target;
             data.forEach((v) => {
               if (v.name === name) {
-                target = v.value + '件'
+                target = v.value + "件";
               }
-            })
+            });
             const arr = [
               `{a|${name}}{b|${String(target).replace(
                 /(\d)(?=(\d{3})+$)/g,
-                '$1,'
-              )}}`
-            ]
-            return arr.join('\n')
+                "$1,"
+              )}}`,
+            ];
+            return arr.join("\n");
           },
           textStyle: {
             rich: {
@@ -600,96 +610,96 @@ export default {
                 width: 180,
                 fontSize: 28,
                 // fontWeight: 'bold',
-                color: '#ffffff'
+                color: "#ffffff",
               },
               b: {
                 fontSize: 28,
-                color: 'rgba(251,232,79)',
+                color: "rgba(251,232,79)",
                 backgroundColor: {
-                  image: image
+                  image: image,
                 },
-                align: 'center'
-              }
+                align: "center",
+              },
             },
             fontSize: 18,
-            color: 'rgba(255, 255, 255, .5)'
-          }
+            color: "rgba(255, 255, 255, .5)",
+          },
         },
         series: [
           {
-            name: '举报事件年度分类统计',
-            type: 'pie',
-            radius: ['55%', '78%'],
+            name: "举报事件年度分类统计",
+            type: "pie",
+            radius: ["55%", "78%"],
             avoidLabelOverlap: false,
-            center: ['24%', '48%'],
+            center: ["24%", "48%"],
             label: {
               show: false,
-              position: 'center',
+              position: "center",
               formatter: (params) => {
-                return `{a| ${params.name}} \n {b|${params.value}}`
+                return `{a| ${params.name}} \n {b|${params.value}}`;
               },
               rich: {
                 a: {
-                  fontFamily: 'SourceHanSansCN-Regular',
-                  color: '#ffffff',
-                  fontSize: 28
+                  fontFamily: "SourceHanSansCN-Regular",
+                  color: "#ffffff",
+                  fontSize: 28,
                 },
                 b: {
-                  fontFamily: 'DIN-Medium',
-                  color: '#6ddefb',
+                  fontFamily: "DIN-Medium",
+                  color: "#6ddefb",
                   fontSize: 32,
-                  lineHeight: 50
-                }
-              }
+                  lineHeight: 50,
+                },
+              },
             },
             emphasis: {
               label: {
                 show: true,
-                fontSize: '25',
-                fontWeight: 'bold'
-              }
+                fontSize: "25",
+                fontWeight: "bold",
+              },
             },
             labelLine: {
-              show: false
+              show: false,
             },
-            data: this.pieData
-          }
-        ]
-      }
-      myChart.setOption(optionSecond, true)
-      echartsJump(myChart, optionSecond)
+            data: this.pieData,
+          },
+        ],
+      };
+      myChart.setOption(optionSecond, true);
+      echartsJump(myChart, optionSecond);
     },
     // 定时器旋转+字体颜色变
     reportingProcessTimer() {
-      let index = 0
+      let index = 0;
       this.reportingTimer = setInterval(() => {
-        this.number += 60
-        const content = document.getElementById('processRotate')
-        content.style.transform = 'rotateZ(' + this.number + 'deg)'
+        this.number += 60;
+        const content = document.getElementById("processRotate");
+        content.style.transform = "rotateZ(" + this.number + "deg)";
         if (index === 5) {
           document.getElementsByClassName(
-            'processIcon'
-          )[0].children[0].children[1].style.color = '#fbe84f'
+            "processIcon"
+          )[0].children[0].children[1].style.color = "#fbe84f";
           document.getElementsByClassName(
-            'processIcon'
-          )[0].children[5].children[1].style.color = '#ffffff'
+            "processIcon"
+          )[0].children[5].children[1].style.color = "#ffffff";
         } else {
-          document.getElementsByClassName('processIcon')[0].children[
+          document.getElementsByClassName("processIcon")[0].children[
             index + 1
-          ].children[1].style.color = '#fbe84f'
-          document.getElementsByClassName('processIcon')[0].children[
+          ].children[1].style.color = "#fbe84f";
+          document.getElementsByClassName("processIcon")[0].children[
             index
-          ].children[1].style.color = '#ffffff'
+          ].children[1].style.color = "#ffffff";
         }
         if (index > 4) {
-          index = 0
+          index = 0;
         } else {
-          index++
+          index++;
         }
-      }, 4000)
-    }
-  }
-}
+      }, 4000);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -1002,7 +1012,7 @@ export default {
             margin-right: 20px;
             width: 13px;
             height: 13px;
-            border-radius:50%;
+            border-radius: 50%;
           }
         }
       }
@@ -1051,6 +1061,7 @@ export default {
           margin-left: 61px;
           overflow: auto;
           text-align: justify;
+          text-indent: 2em;
           width: 736px;
           padding-right: 23px;
           height: 528px;