From 4431427b0ce2d86aa534af11880873344f485ddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 22 Aug 2023 13:48:49 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E9=9A=90=E6=82=A3=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 src/store/modules/dict.js                     |   4 +-
 .../security/components/componentRight.vue    | 364 ++++++++++--------
 3 files changed, 198 insertions(+), 172 deletions(-)

diff --git a/.env.development b/.env.development
index ba1a2b9..c4d1aa9 100644
--- a/.env.development
+++ b/.env.development
@@ -4,6 +4,6 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/dashboard'
 
-VUE_APP_BASE_API2 = 'http://192.168.0.106:9027'
+VUE_APP_BASE_API2 = 'http://192.168.0.110:9027'
 
 BASE_API = 'http://10.10.3.35:9070'
diff --git a/src/store/modules/dict.js b/src/store/modules/dict.js
index d48f47a..b5b815b 100644
--- a/src/store/modules/dict.js
+++ b/src/store/modules/dict.js
@@ -25,8 +25,8 @@ const dict = {
     getDictType({ commit }) {
       return new Promise((resolve, reject) => {
         const query = {
-          list: 'sys_user_sex,tc_net_sx,tc_yq_media,tc_enter_type,tc_inlet_yewu,tc_item_type,tc_net_safety_level,tc_yes_no,tc_unit_type,tc_tmt_type,tc_db_steam_state,tc_attack_type,tc_yh_level,tc_yh_source,tc_yq_type,tc_event_type,tc_cy_type,tc_yq_state'
-        }
+          list: "sys_user_sex,tc_net_sx,tc_yq_media,tc_enter_type,tc_inlet_yewu,tc_item_type,tc_net_safety_level,tc_yes_no,tc_unit_type,tc_tmt_type,tc_db_steam_state,tc_attack_type,tc_yh_level,tc_yh_source,tc_yq_type,tc_event_type,tc_cy_type,tc_yq_state,tc_steam_state",
+        };
         getDictList(query)
           .then((res) => {
             // console.log(res)
diff --git a/src/views/privateOrder/security/components/componentRight.vue b/src/views/privateOrder/security/components/componentRight.vue
index a735243..78ff546 100644
--- a/src/views/privateOrder/security/components/componentRight.vue
+++ b/src/views/privateOrder/security/components/componentRight.vue
@@ -1,4 +1,3 @@
-
 <template>
   <div class="container">
     <div class="module-container">
@@ -108,6 +107,7 @@
             <span>等级</span>
             <span>隐患来源</span>
           </div>
+          <div  @click="rowDetails($event)">
           <vue-seamless-scroll
             :data="dangerList"
             :class-option="classOption"
@@ -117,54 +117,48 @@
               v-for="(item, idx) in dangerList"
               :key="idx"
               class="dangerText"
-              @click="rowDetails(item)"
+             
             >
-              <span>{{
-                item.unitName
-              }}</span>
-              <span>{{
-                item.riskName
-              }}</span>
-              <span>{{ $filterDict('tc_yh_level',item.level) }}</span>
-              <span>
-                {{ $filterDict('tc_yh_source',item.riskSource) }}</span>
+              <span :data-url="item.fileUrl">{{ item.unitName }}</span>
+              <span>{{ item.riskName }}</span>
+              <span>{{ $filterDict("tc_yh_level", item.level) }}</span>
+              <span> {{ $filterDict("tc_yh_source", item.riskSource) }}</span>
             </div>
           </vue-seamless-scroll>
+          </div>
         </div>
         <!-- 通报处置 -->
         <div v-if="dangerCurrentIndex === 1">
-          <div class="table_outside" @click="rowDetails($event)">
+          <div class="table_outside">
             <div class="table_title">
               <span class="title_one">单位名称</span>
               <span class="title_two">目标IP/域名</span>
               <span class="title_three">处置情况</span>
             </div>
+            <div @click="rowDetails($event)">
             <vue-seamless-scroll
               :data="informList"
               :class-option="classOption"
               class="table_ctn"
+             
             >
               <div
                 v-for="(item, index) in informList"
                 :key="index"
                 class="ctn_item"
               >
-                <div
-                  class="item_name"
-                >
+                <div class="item_name" :data-url="item.fileUrl">
                   {{ item.depName }}
                 </div>
-                <div
-
-                  class="item_ip"
-                >
-                  {{ item.domainName }}
+                <div class="item_ip" >
+                  {{ item.ip }}
                 </div>
-                <span class="item_num">{{
-                  item.status
+                <span class="item_num" >{{
+                  $filterDict("tc_steam_state", item.state)
                 }}</span>
               </div>
             </vue-seamless-scroll>
+            </div>
           </div>
         </div>
       </div>
@@ -187,10 +181,9 @@
       </div>
       <span slot="footer" class="dialog-footer">
         <span>
-          <el-button
-            class="dialog-btn"
-            @click="dialogStatus = false"
-          >关 闭</el-button>
+          <el-button class="dialog-btn" @click="dialogStatus = false"
+            >关 闭</el-button
+          >
         </span>
       </span>
     </el-dialog>
@@ -219,17 +212,17 @@
           class="file-content"
         ></div>
         <div v-if="fileExtension === 'pdf'" class="file-content">
-          <div v-for="i in numPages" :key="i">
+          <iframe style="height: 100%; width: 100%" :src="pdfUrl"></iframe>
+          <!-- <div v-for="i in numPages" :key="i">
             <pdf ref="pdf" :key="i" :src="pdfUrl" :page="i"></pdf>
-          </div>
+          </div> -->
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <span>
-          <el-button
-            class="dialog-btn"
-            @click="dialogDetails = false"
-          >关 闭</el-button>
+          <el-button class="dialog-btn" @click="dialogDetails = false"
+            >关 闭</el-button
+          >
         </span>
       </span>
     </el-dialog>
@@ -237,48 +230,48 @@
 </template>
 
 <script>
-import { listDanger, getDanger, listTb, getTb } from '@/api/zongzhi/st.js'
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import ModuleTitle from '../../common/ModuleTitle.vue'
-import ReportingStatistics from './ReportingStatistics.vue'
+import { listDanger, getDanger, listTb, getTb } from "@/api/zongzhi/st.js";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import ModuleTitle from "../../common/ModuleTitle.vue";
+import ReportingStatistics from "./ReportingStatistics.vue";
 // import { getSafeHazardSatistic, getNotificationList } from '@/api/common'
-import { dangerList, informList } from './data.js'
-import qs from 'qs'
-const docx = require('docx-preview')
-import axios from 'axios'
-window.JSZip = require('jszip')
-import pdf from 'vue-pdf'
+import { dangerList, informList } from "./data.js";
+import qs from "qs";
+const docx = require("docx-preview");
+import axios from "axios";
+window.JSZip = require("jszip");
+import pdf from "vue-pdf";
 export default {
   components: {
     vueSeamlessScroll,
     ModuleTitle,
     ReportingStatistics,
-    pdf
+    pdf,
   },
   filters: {
     numFilter(value) {
-      const realVal = Number(value).toFixed(2)
-      return Number(realVal)
+      const realVal = Number(value).toFixed(2);
+      return Number(realVal);
     },
     commaFilter(target) {
       if (target < 10000) {
-        return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
+        return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
       } else {
-        return (target / 10000).toFixed(2) + '万'
+        return (target / 10000).toFixed(2) + "万";
       }
-    }
+    },
   },
   data() {
     return {
       total: 0,
       queryParams: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       total2: 0,
       queryParams2: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       loading: true,
       // 三块统计信息
@@ -287,35 +280,35 @@ export default {
       dangerTime: null,
       dangerCurrentIndex: 0,
       threeStatistics: {
-        options: ['属地通报', '部门通报']
+        options: ["属地通报", "部门通报"],
       },
-      trouble: { options: ['最新隐患', '通报处置'] },
+      trouble: { options: ["最新隐患", "通报处置"] },
       // 安全隐患
       safetyList: [
         {
-          title: '敏感信息泄露漏洞',
-          value: 86800
+          title: "敏感信息泄露漏洞",
+          value: 86800,
         },
         {
-          title: '权限许可和访问控制',
-          value: 23800
+          title: "权限许可和访问控制",
+          value: 23800,
         },
         {
-          title: '未加密登录请求',
-          value: 15200
+          title: "未加密登录请求",
+          value: 15200,
         },
         {
-          title: '其他',
-          value: 14700
+          title: "其他",
+          value: 14700,
         },
         {
-          title: '应用程序测试脚本漏洞',
-          value: 2142
+          title: "应用程序测试脚本漏洞",
+          value: 2142,
         },
         {
-          title: '文件上传漏洞',
-          value: 1525
-        }
+          title: "文件上传漏洞",
+          value: 1525,
+        },
       ],
       // 通报完成情况
       notificationFinishList: [
@@ -323,32 +316,32 @@ export default {
           timeRangeFlag: 1,
           notificationCount: 59,
           completionCount: 59,
-          completionPercent: `100%`
+          completionPercent: `100%`,
         },
         {
           timeRangeFlag: 2,
           notificationCount: 92,
           completionCount: 92,
-          completionPercent: `100%`
+          completionPercent: `100%`,
         },
         {
           timeRangeFlag: 3,
           notificationCount: 108,
           completionCount: 108,
-          completionPercent: `100%`
+          completionPercent: `100%`,
         },
         {
           timeRangeFlag: 4,
           notificationCount: 170,
           completionCount: 170,
-          completionPercent: `100%`
+          completionPercent: `100%`,
         },
         {
           timeRangeFlag: 4,
           notificationCount: 120,
           completionCount: 170,
-          completionPercent: `100%`
-        }
+          completionPercent: `100%`,
+        },
       ],
       animate: true,
       positionTimer: null,
@@ -361,24 +354,24 @@ export default {
       dialogStatus: false,
       rowDta: {},
       dialogDetails: false,
-      dialogTitle: '',
+      dialogTitle: "",
       // 当前选中文件类型
-      fileExtension: '',
+      fileExtension: "",
       numPages: 1,
-      pdfUrl: ''
-    }
+      pdfUrl: "",
+    };
   },
   computed: {
     notificationStatus() {
       return (flag) => {
         const myMap = new Map([
-          [1, '近一个月'],
-          [2, '近三个月'],
-          [3, '近六个月'],
-          [4, '近一年']
-        ])
-        return myMap.get(flag)
-      }
+          [1, "近一个月"],
+          [2, "近三个月"],
+          [3, "近六个月"],
+          [4, "近一年"],
+        ]);
+        return myMap.get(flag);
+      };
     },
     classOption() {
       return {
@@ -389,37 +382,39 @@ 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.announceTime)
-    clearInterval(this.dangerTime)
-    clearInterval(this.dangerListTime)
-    clearInterval(this.tbTime)
+    clearInterval(this.announceTime);
+    clearInterval(this.dangerTime);
+    clearInterval(this.dangerListTime);
+    clearInterval(this.tbTime);
   },
   mounted() {
-    this.dangerChange()
-    this.getListDanger()
-    this.dangerListTime = setInterval(() => { // 最新安全隐患
+    this.dangerChange();
+    this.getListDanger();
+    this.dangerListTime = setInterval(() => {
+      // 最新安全隐患
       if (this.dangerList.length >= this.total) {
-        clearInterval(this.dangerListTime)
+        clearInterval(this.dangerListTime);
       } else {
-        this.queryParams.pageNum = this.queryParams.pageNum + 1
-        this.getListDanger()
+        this.queryParams.pageNum = this.queryParams.pageNum + 1;
+        this.getListDanger();
       }
-    }, 6000)
-    this.getlistTb()
-    this.tbTime = setInterval(() => { // 最新安全隐患
+    }, 6000);
+    this.getlistTb();
+    this.tbTime = setInterval(() => {
+      // 最新安全隐患
       if (this.informList.length >= this.total2) {
-        clearInterval(this.tbTime)
+        clearInterval(this.tbTime);
       } else {
-        this.queryParams2.pageNum = this.queryParams2.pageNum + 1
-        this.getlistTb()
+        this.queryParams2.pageNum = this.queryParams2.pageNum + 1;
+        this.getlistTb();
       }
-    }, 6000)
+    }, 6000);
     // this.announceChange()
 
     // getSafeHazardSatistic().then((res) => {
@@ -445,85 +440,113 @@ export default {
      * 最新隐患
      */
     getListDanger() {
-      listDanger(this.queryParams).then(res => {
-        this.dangerList = [...this.dangerList, ...res.rows]
-        this.total = res.total
-      })
+      listDanger(this.queryParams).then((res) => {
+        this.dangerList = [...this.dangerList, ...res.rows];
+        this.total = res.total;
+      });
     },
     /**
      * 通报处置
      */
     getlistTb() {
-      listTb(this.queryParams2).then(res => {
-        console.log(res, 'www')
-        this.informList = [...this.informList, ...res.rows]
-        this.total2 = res.total
-      })
+      listTb(this.queryParams2).then((res) => {
+        console.log(res, "www");
+        this.informList = [...this.informList, ...res.rows];
+        this.total2 = res.total;
+      });
     },
     // 鼠标经过
     mouseOver(status) {
-      if (status === 'danger') {
-        clearInterval(this.dangerTime)
+      if (status === "danger") {
+        clearInterval(this.dangerTime);
       } else {
-        clearInterval(this.announceTime)
+        clearInterval(this.announceTime);
       }
     },
     // 鼠标离开
     mouseLeave(status) {
-      if (status === 'danger') {
-        this.dangerChange()
+      if (status === "danger") {
+        this.dangerChange();
       } else {
-        this.announceChange()
+        this.announceChange();
       }
     },
     // 列表滚动
     loadList() {
-      this.animate = true
+      this.animate = true;
       setTimeout(() => {
-        this.dangerList.push(this.dangerList[0])
-        this.dangerList.shift()
-        this.animate = false
-      }, 1000)
+        this.dangerList.push(this.dangerList[0]);
+        this.dangerList.shift();
+        this.animate = false;
+      }, 1000);
     },
     // 列表滚动
     loadList2() {
-      this.animate = true
+      this.animate = true;
       setTimeout(() => {
-        this.informList.push(this.informList[0])
-        this.informList.shift()
-        this.animate2 = false
-      }, 1000)
+        this.informList.push(this.informList[0]);
+        this.informList.shift();
+        this.animate2 = false;
+      }, 1000);
     },
     // 通报切换
     announceChange() {
       this.announceTime = setInterval(() => {
         this.announceCurrentIndex === 0
           ? (this.announceCurrentIndex = 1)
-          : (this.announceCurrentIndex = 0)
-      }, 11000)
+          : (this.announceCurrentIndex = 0);
+      }, 11000);
     },
     // 隐患切换
     dangerChange() {
       this.dangerTime = setInterval(() => {
         this.dangerCurrentIndex === 0
           ? (this.dangerCurrentIndex = 1)
-          : (this.dangerCurrentIndex = 0)
-      }, 11000)
+          : (this.dangerCurrentIndex = 0);
+      }, 11000);
     },
     rowClick(row) {
-      this.rowDta = row
-      this.dialogStatus = true
+      this.rowDta = row;
+      this.dialogStatus = true;
     },
     rowDetails(e) {
-      const row = JSON.parse(e.target.dataset.obj)
-      this.dialogTitle = row?.name || row?.systemName
-      if (this.dangerCurrentIndex === 0) {
-        row.url = `/网信办大屏内容文档/网络安全/最新隐患/网络和信息安全通报-2023年第${row.issue}期 总第${row.totalNum}期（${row.systemName}）.pdf`
-      } else {
-        row.url = `/网信办大屏内容文档/网络安全/通报处置/${row.url}`
+        if(!e.target.dataset.url) return
+      this.fileExtension = e.target.dataset.url.substring(
+        e.target.dataset.url.lastIndexOf(".") + 1
+      );
+
+      console.log(this.fileExtension)
+      if (this.fileExtension == "pdf") {
+        this.pdfUrl = process.env.VUE_APP_BASE_API2 +e.target.dataset.url;
+            console.log(this.pdfUrl,'aaa')
+           this.dialogDetails = true;
+      } else if (
+        this.fileExtension === "docx" ||
+        this.fileExtension === "doc"
+      ) {
+        axios({
+          method: "get",
+          responseType: "blob", // 设置响应文件格式
+          url: process.env.VUE_APP_BASE_API2 + e.target.dataset.url,
+        }).then(({ data }) => {
+          if (data) {
+               this.dialogDetails = true;
+            this.$nextTick(() => {
+              docx.renderAsync(data, this.$refs.file1); // 渲染到页面预览
+            });
+          }
+        });
       }
-      console.log(row, 'aaa')
-      this.dialogDetails = true
+
+      // const row = JSON.parse(e.target.dataset.obj)
+      // this.dialogTitle = row?.name || row?.systemName
+      // if (this.dangerCurrentIndex === 0) {
+      //   row.url = `/网信办大屏内容文档/网络安全/最新隐患/网络和信息安全通报-2023年第${row.issue}期 总第${row.totalNum}期（${row.systemName}）.pdf`
+      // } else {
+      //   row.url = `/网信办大屏内容文档/网络安全/通报处置/${row.url}`
+      // }
+      // console.log(row, 'aaa')
+      // this.dialogDetails = true
 
       // this.fileExtension = row.url.substring(row.url.lastIndexOf('.') + 1)
       // if (this.fileExtension === 'docx' || this.fileExtension === 'doc') {
@@ -555,66 +578,66 @@ export default {
     },
     getNumPages(url) {
       axios({
-        method: 'GET',
+        method: "GET",
         url: url, // 后台接口
-        paramsSerializer: function(params) {
-          return qs.stringify(params, { arrayFormat: 'brackets' })
+        paramsSerializer: function (params) {
+          return qs.stringify(params, { arrayFormat: "brackets" });
         },
         headers: {
-          'Content-Type':
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+          "Content-Type":
+            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
         },
-        responseType: 'blob'
+        responseType: "blob",
       })
         .then((response) => {
-          this.pdfUrl = this.getObjectURL(response.data)
-          const loadingTask = pdf.createLoadingTask(this.pdfUrl)
+          this.pdfUrl = this.getObjectURL(response.data);
+          const loadingTask = pdf.createLoadingTask(this.pdfUrl);
           loadingTask.promise
             .then((pdf) => {
-              this.numPages = 1
+              this.numPages = 1;
               setInterval(() => {
                 if (pdf.numPages > this.numPages) {
-                  this.numPages++
-                  this.$forceUpdate()
+                  this.numPages++;
+                  this.$forceUpdate();
                 } else {
-                  clearInterval()
+                  clearInterval();
                 }
-              }, 2000)
-              this.dialogDetails = true
+              }, 2000);
+              this.dialogDetails = true;
             })
             .catch((err) => {
-              console.error('pdf 加载失败', err)
-            })
+              console.error("pdf 加载失败", err);
+            });
         })
         .catch((error) => {
-          this.$message.error('' + error)
-        })
+          this.$message.error("" + error);
+        });
     },
     // 文件流转url
     getObjectURL(file) {
-      let url = null
+      let url = null;
       if (window.createObjectURL !== undefined) {
         // basic
-        url = window.createObjectURL(file)
+        url = window.createObjectURL(file);
       } else if (window.webkitURL !== undefined) {
         // webkit or chrome
         try {
-          url = window.webkitURL.createObjectURL(file)
+          url = window.webkitURL.createObjectURL(file);
         } catch (error) {
-          console.log(error)
+          console.log(error);
         }
       } else if (window.URL !== undefined) {
         // mozilla(firefox)
         try {
-          url = window.URL.createObjectURL(file)
+          url = window.URL.createObjectURL(file);
         } catch (error) {
-          console.log(error)
+          console.log(error);
         }
       }
-      return url
-    }
-  }
-}
+      return url;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -1210,4 +1233,7 @@ export default {
 .file-content .docx p {
   text-align: center !important;
 }
+.docx{
+  padding: 104pt 90pt !important;
+}
 </style>

From 2d428ffb26daa7cb8615ad5bf9e6db76a310e41f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 22 Aug 2023 14:18:04 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=89=E5=85=A8=E7=9B=91=E6=B5=8B?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/componentLeft copy.vue         | 1259 -----------------
 .../security/components/componentLeft.vue     |  675 ++++-----
 .../security/components/componentRight.vue    |   13 +-
 3 files changed, 354 insertions(+), 1593 deletions(-)
 delete mode 100644 src/views/privateOrder/security/components/componentLeft copy.vue

diff --git a/src/views/privateOrder/security/components/componentLeft copy.vue b/src/views/privateOrder/security/components/componentLeft copy.vue
deleted file mode 100644
index ee512ec..0000000
--- a/src/views/privateOrder/security/components/componentLeft copy.vue	
+++ /dev/null
@@ -1,1259 +0,0 @@
-<!--
- * @Version: 1.0
- * @Author: kery.chen
- * @Description: 总体概览左侧
- * @Date: 2021-11-30 11:08:50
- * @LastEditTime: 2022-10-31 14:46:40
- * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\security\\components\\componentLeft.vue
--->
-<template>
-  <div class="container">
-    <div class="module-container">
-      <div class="section-dataSource">
-        <module-title>数据来源</module-title>
-        <div class="section-source">
-          <div class="section-top">
-            <div
-              v-for="(item, idx) in dataSource.top"
-              :key="idx"
-              class="section-top-item"
-            >
-              <img :src="item.url" alt="" />
-              <div class="top-item-content">
-                <div style="margin-bottom: 15px">{{ item.title }}</div>
-                <div>
-                  <span class="content-currentNum">{{ item.currentNum }}</span>
-                  <span
-                    style="
-                      display: inline-block;
-                      transform: translate(5px, -7px);
-                    "
-                  >
-                    /</span>
-                  <span class="content-total">{{ item.total }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="section-bottom">
-            <div
-              v-for="(item, idx) in dataSource.bottom"
-              :key="idx"
-              class="section-bottom-item"
-              @click="showAttack(item.title,item.num)"
-            >
-              <img :src="item.url" alt="" />
-              <span class="bottom-title">{{ item.title }}</span>
-              <span class="bottom-num">{{ item.num |commaFilter }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="section-superviseObject">
-        <module-title>监管对象</module-title>
-        <div class="section-object">
-          <div class="section-bg">
-            <div
-              v-for="(item, idx) in superviseObject"
-              :key="idx"
-              :class="['section-object-item', item.className]"
-              @click="showAttack(item.title,item.num)"
-            >
-              <img :src="item.url" alt="" />
-              <div class="item-content">
-                <span class="item-content-title">{{ item.title }}</span><br />
-                <span class="item-content-num">{{ item.num | commaFilter }}</span>
-              </div>
-            </div>
-            <div class="section-center" />
-          </div>
-        </div>
-      </div>
-      <div class="section-securityMonitor">
-        <module-title>安全监测</module-title>
-        <div class="section-monitor">
-          <div class="section-monitor-top">
-            <div class="monitor-info">
-              <img :src="securityMonitor.url" alt="" />
-              <div class="monitor-info-des">
-                <span class="info-des-title">{{ securityMonitor.title }}</span>
-                <span class="info-des-total">{{ securityMonitor.total }}</span>
-              </div>
-            </div>
-            <span class="monitor-line">|</span>
-            <div class="monitor-detail">
-              <div
-                v-for="(item, index) in securityMonitor.detail"
-                :key="index"
-                class="monitor-detail-item"
-              >
-                <span class="detail-item-title">{{ item.title }}</span>
-                <span class="detail-item-num">{{ item.num }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="section-monitor-bottom">
-            <div class="monitor-box">
-              <div class="monitor-title">
-                <span>时间</span>
-                <span>攻击源/IP</span>
-                <span>攻击类型</span>
-              </div>
-              <vue-seamless-scroll
-                :data="tableData"
-                :class-option="classOption"
-                class="monitorScroll"
-              >
-                <div
-                  v-for="(item, idx) in tableData"
-                  :key="idx"
-                  class="monitor-list"
-                  :data-obj="'安全监测'"
-                  @click="getAttackSource(item.id)"
-                >
-                  <span :data-obj="'安全监测'">{{ item.date }}</span>
-                  <span :data-obj="'安全监测'">{{ item.ip }}</span>
-                  <span :data-obj="'安全监测'" :title="item.type">{{ item.type }}</span>
-                </div>
-              </vue-seamless-scroll>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="section-attackRanking"
-        @mouseover="mouseOver"
-        @mouseleave="mouseLeave"
-      >
-        <module-title>
-          受攻击情况
-          <div slot="operate" class="btn-wrap">
-            <div
-              v-for="(item, idx) in attackList.options"
-              :key="idx"
-              class="btn"
-              :class="{ active: currentIndex === idx }"
-              @click="currentIndex = idx"
-            >
-              {{ item }}
-              <div :class="[idx === 0 ? 'topIP' : 'distributed']" />
-            </div>
-          </div>
-        </module-title>
-        <!-- 受攻击情况 -->
-        <attackSituation :current-index="currentIndex"></attackSituation>
-      </div>
-    </div>
-    <!-- 安全监测详细弹框 -->
-    <el-dialog
-      v-if="dialogStatus"
-      class="screen-dialog"
-      :visible.sync="dialogStatus"
-      :width="dialogWidth"
-      :modal-append-to-body="false"
-      center
-      :modal="false"
-    >
-      <template v-if="dialogType === '安全监测'">
-        <div class="dialog_title">攻击详情</div>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">攻击发起时间：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">{{ tableDataPop.attackTime }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">攻击源IP：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">{{ tableDataPop.sourceIp }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">攻击类型：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">{{ tableDataPop.attackType }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">攻击源IP区域：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">
-              {{ tableDataPop.attackIpRegion }}
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">受攻击IP：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">{{ tableDataPop.attackedIp }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">受攻击IP区域：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">
-              {{ tableDataPop.attackedIpRegion }}
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">受攻击目标类型：</div>
-          </el-col>
-          <el-col :span="18">
-            <div class="dialog_little_ctn">{{ tableDataPop.attackedType }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">网站安全等级：</div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_ctn">{{ tableDataPop.webLevel }}</div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_title">联系电话：</div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_ctn">{{ tableDataPop.contactTel }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <div class="dialog_little_title">所属单位：</div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_ctn">
-              {{ tableDataPop.subordinateDept }}
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_title">联系人：</div>
-          </el-col>
-          <el-col :span="6">
-            <div class="dialog_little_ctn">{{ tableDataPop.contactName }}</div>
-          </el-col>
-        </el-row>
-      </template>
-      <template
-        v-if="
-          dialogType === '硬探针' ||
-            dialogType === '系统监测' ||
-            dialogType === '网站监测' ||
-            dialogType === 'IDC单位' ||
-            dialogType === '等保单位' ||
-            dialogType === '政府网站' ||
-            dialogType === '等保系统' ||
-            dialogType === '监管单位' ||
-            dialogType === '软探针'
-        "
-      >
-        <ExcelTable
-          v-if="dialogStatus"
-          :table-header="excelDataHeader"
-          :page-data="excelData"
-          :table-total="tableTotal"
-        ></ExcelTable>
-      </template>
-      <span slot="footer" class="dialog-footer">
-        <span>
-          <el-button
-            class="dialog-btn"
-            @click="dialogStatus = false"
-          >关 闭</el-button>
-        </span>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getSource } from '@/api/common'
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import ModuleTitle from '../../common/ModuleTitle.vue'
-import attackSituation from './attackSituation.vue'
-import ExcelTable from '@/components/ExcelTable'
-import { listSystem, listUnit, listWeb, listIDCunit } from '@/api/zongzhi/st.js'
-import {
-  yingTanZhen,
-  yingTanZhenKeyValue,
-  xitongjiance,
-  xitongjianceKeyValue
-} from './mock'
-import {
-  IDCKeyValue,
-  IDC,
-  dbdwKeyValue,
-  dbdw,
-  dbxt,
-  dbxtKeyValue,
-  zfdwKeyValue,
-  zfdw,
-  rtz,
-  rtzKeyValue
-} from './jianGuan'
-import { getLatest, getSecurity } from '@/api/common'
-export default {
-  components: {
-    attackSituation,
-    ModuleTitle,
-    vueSeamlessScroll,
-    ExcelTable
-  },
-  filters: {
-    commaFilter(target) {
-      if (target < 10000) {
-        return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
-      } else {
-        return (target / 10000).toFixed(2) + '万'
-      }
-    }
-  },
-  data() {
-    return {
-      dialogWidth: 0,
-      dialogStatus: false,
-      dialogType: '',
-      safeDialog: false,
-      attackTime: null,
-      tableTime: null,
-      tableTotal: 0,
-      currentIndex: 0,
-      attackList: {
-        options: ['受攻击IPTOP5', '分布情况']
-      },
-      dataSource: {
-        top: [
-          {
-            title: '云端监测(G)',
-            currentNum: 100,
-            total: 150,
-            url: require('@/assets/privateOrder/general/icon-云端监测.png')
-          },
-          {
-            title: 'APT(M)',
-            currentNum: 239,
-            total: 1000,
-            url: require('@/assets/privateOrder/general/icon-APT.png')
-          }
-        ],
-        bottom: [
-          {
-            title: '硬探针',
-            num: 6,
-            url: require('@/assets/privateOrder/general/硬探针.png')
-          },
-          {
-            title: '软探针',
-            num: 125,
-            url: require('@/assets/privateOrder/general/软探针.png')
-          },
-          {
-            title: '系统监测',
-            num: 2658,
-            url: require('@/assets/privateOrder/general/系统监测.png')
-          }
-        ]
-      },
-      superviseObject: [
-        {
-          title: '政府网站',
-          num: 446,
-          className: 'item1',
-          url: require('@/assets/privateOrder/general/icon-政府网站.png')
-        },
-        {
-          title: '监管单位',
-          num: 2098,
-          className: 'item2',
-          url: require('@/assets/privateOrder/general/icon-监管单位.png')
-        },
-        {
-          title: '网站监测',
-          num: 2658,
-          className: 'item3',
-          url: require('@/assets/privateOrder/general/icon-网站监测.png')
-        },
-        {
-          title: 'IDC单位',
-          num: 1,
-          className: 'item4',
-          url: require('@/assets/privateOrder/general/icon-IDC单位.png')
-        },
-        {
-          title: '等保系统',
-          num: 181,
-          className: 'item5',
-          url: require('@/assets/privateOrder/general/icon-等保系统.png')
-        },
-        {
-          title: '等保单位',
-          num: 109,
-          className: 'item6',
-          url: require('@/assets/privateOrder/general/icon-等保单位.png')
-        }
-      ],
-      securityMonitor: {
-        url: require('@/assets/privateOrder/general/icon-网络攻击.png'),
-        title: '网络攻击(万)',
-        total: 3225.5,
-        detail: [
-          {
-            title: '入侵攻击',
-            num: 1455.92
-          },
-          {
-            title: '恶意扫描',
-            num: 2325.24
-          },
-          {
-            title: '僵木蠕病毒',
-            num: 796.152
-          }
-        ]
-      },
-      tableDataPop: {
-        id: 1,
-        attackTime: '2023-07-30',
-        sourceIp: '192.168.0.114',
-        attackType: '网络爬虫',
-        attackIpRegion: '美国',
-        attackedIp: '192.168.5.0',
-        attackedIpRegion: '太仓',
-        attackedType: '网络爬虫',
-        webLevel: '1级别',
-        contactTel: '18703885598',
-        subordinateDept: '网络安全部',
-        contactName: '张三'
-      },
-      tableData: [
-        {
-          date: '2022-02-13',
-          ip: '荷兰/178.128.242.134',
-          type: '挖矿'
-        },
-        {
-          date: '2022-02-13',
-          ip: '荷兰/178.128.242.134',
-          type: '挖矿'
-        },
-        {
-          date: '2022-02-13',
-          ip: '杭州市/60.190.232.14',
-          type: '扫描行为'
-        },
-        {
-          date: '2022-02-13',
-          ip: '荷兰/178.128.242.134',
-          type: '挖矿'
-        },
-        {
-          date: '2022-02-13',
-          ip: '荷兰/178.128.242.134',
-          type: '挖矿'
-        }
-      ],
-      excelData: null,
-      excelDataHeader: null
-    }
-  },
-  computed: {
-    classOption() {
-      return {
-        step: 0.4, // 数值越大速度滚动越快
-        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
-        hoverStop: true, // 是否开启鼠标悬停stop
-        direction: 1, // 0向下 1向上 2向左 3向右
-        openWatch: true, // 开启数据实时监控刷新dom
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
-        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
-      }
-    }
-  },
-  created() {},
-  destroyed() {
-    clearInterval(this.attackTime) // 清除定时器
-    clearInterval(this.tableTime)
-  },
-  mounted() {
-    this.changeBtn() // 切换
-    // this.getDataSource() // 数据来源
-    //  左下角数据滚动
-    // getLatest().then((res) => {
-    //   this.tableData = []
-    //   res['T_LATEST_NEWS[]'].forEach((item) => {
-    //     this.tableData.push({
-    //       id: item.id,
-    //       date: item.attack_time.substring(0, 10),
-    //       ip: item.attack_ip_region + '/' + item.source_ip,
-    //       type: item.attack_type
-    //     })
-    //   })
-    // })
-    // getSecurity().then((res) => {
-    //   const data = res['T_SECURITY_MONITOR[]']
-    //   this.securityMonitor.total = (data[0].statistic_count / 10000).toFixed(2)
-    //   this.securityMonitor.detail[0].num = (
-    //     data[1].statistic_count / 10000
-    //   ).toFixed(2)
-    //   this.securityMonitor.detail[1].num = (
-    //     data[2].statistic_count / 10000
-    //   ).toFixed(2)
-    //   this.securityMonitor.detail[2].num = (
-    //     data[3].statistic_count / 10000
-    //   ).toFixed(2)
-    // })
-  },
-  methods: {
-    AttackClick(id) {
-      return new Promise((resolve) => {
-        getLatest().then((res) => {
-          res['T_LATEST_NEWS[]'].forEach((item) => {
-            if (item.id === id) {
-              this.tableDataPop.id = id
-              this.tableDataPop.attackTime = item.attack_time
-              this.tableDataPop.sourceIp = item.source_ip
-              this.tableDataPop.attackType = item.attack_type
-              this.tableDataPop.attackIpRegion = item.attack_ip_region
-              this.tableDataPop.attackedIp = item.attacked_ip
-              this.tableDataPop.attackedType = item.attacked_type
-              this.tableDataPop.webLevel = item.web_level
-              this.tableDataPop.subordinateDept = item.subordinate_dept
-              this.tableDataPop.attackedIpRegion = item.attacked_ip_region
-              item.contact_tel === undefined
-                ? (this.tableDataPop.contactTel = '-')
-                : (this.tableDataPop.contactTel = item.contact_tel)
-              item.contact_name === undefined
-                ? (this.tableDataPop.contactName = '-')
-                : (this.tableDataPop.contactName = item.contact_name)
-              resolve()
-            }
-          })
-        })
-      })
-    },
-    async getAttackSource(id) {
-      this.dialogWidth = '1000px'
-      // await this.AttackClick(id)
-      this.dialogStatus = true
-      this.dialogType = '安全监测'
-    },
-    showAttack(item = '安全监测', total) {
-      this.tableTotal = total // 写这个的原因是因为总数并不能和数据完全匹配 按页面显示数字为主
-      this.dialogStatus = false
-      // setTimeout(() => {
-      if (item === '硬探针') {
-        this.dialogWidth = '1800px'
-        this.excelData = yingTanZhen
-        this.excelDataHeader = yingTanZhenKeyValue
-      }
-      if (item === '系统监测' || item === '监管单位') {
-        this.dialogWidth = '2100px'
-        this.excelData = xitongjiance
-        this.excelDataHeader = xitongjianceKeyValue
-      }
-      if (item === '网站监测') {
-        this.dialogWidth = '2100px'
-        this.excelData = xitongjiance
-        this.excelDataHeader = xitongjianceKeyValue
-      }
-      if (item === 'IDC单位') {
-        this.dialogWidth = '1800px'
-        this.excelData = IDC
-        this.excelDataHeader = IDCKeyValue
-      }
-      if (item === '等保单位') {
-        this.dialogWidth = '3300px'
-        this.excelData = dbdw
-        this.excelDataHeader = dbdwKeyValue
-      }
-      if (item === '等保系统') {
-        this.dialogWidth = '4000px'
-        this.excelData = dbxt
-        this.excelDataHeader = dbxtKeyValue
-      }
-      if (item === '政府网站') {
-        this.dialogWidth = '1800px'
-        this.excelData = zfdw
-        this.excelDataHeader = zfdwKeyValue
-      }
-      if (item === '软探针') {
-        this.dialogWidth = '1800px'
-        this.excelData = rtz
-        this.excelDataHeader = rtzKeyValue
-      }
-      this.dialogType = item
-      if (item.target?.dataset.obj) {
-        this.dialogType = item.target.dataset.obj
-      }
-      this.dialogStatus = true
-      // }, 0)
-    },
-    // 数据来源数据获取
-    getDataSource() {
-      getSource(9).then((res) => {
-        const data = JSON.parse(res['[]'][0].T_static_data.DATA)
-        for (let i = 0; i < data.top.length; i++) {
-          for (let j = 0; j < this.dataSource.top.length; j++) {
-            if (data.top[i].title === this.dataSource.top[j].title) {
-              this.dataSource.top[j].currentNum = data.top[i].currentNum
-              this.dataSource.top[j].total = data.top[i].total
-            }
-          }
-        }
-        for (let i = 0; i < data.bottom.length; i++) {
-          for (let j = 0; j < this.dataSource.bottom.length; j++) {
-            if (data.bottom[i].title === this.dataSource.bottom[j].title) {
-              this.dataSource.bottom[j].num = data.bottom[i].num
-            }
-          }
-        }
-      })
-    },
-    // 鼠标经过暂停
-    mouseOver() {
-      clearInterval(this.attackTime)
-    },
-    // 鼠标离开开启
-    mouseLeave() {
-      this.changeBtn()
-    },
-    // 受攻击情况自动切换
-    changeBtn() {
-      this.attackTime = setInterval(() => {
-        this.currentIndex === 0
-          ? (this.currentIndex = 1)
-          : (this.currentIndex = 0)
-      }, 11000)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.screen-dialog {
-  ::v-deep .el-dialog__header {
-    background: rgba(255, 255, 255, 0);
-  }
-  ::v-deep .el-dialog {
-    background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
-    width: 1820px;
-    height: 950px;
-    //padding-top:20px;
-    background-size: 100% 100%;
-  }
-  ::v-deep .el-dialog__headerbtn {
-    top: 0;
-    font-size: 30px;
-    font-weight: bolder;
-  }
-  ::v-deep .el-dialog__footer {
-    background: rgba(255, 255, 255, 0);
-  }
-  .dialog-btn {
-    background: url("~@/assets/dialog/btn-bg.png") no-repeat;
-    background-size: 100% 100%;
-    width: 160px;
-    height: 50px;
-    font-family: SourceHanSansCN-Regular;
-    font-size: 24px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 10px;
-    letter-spacing: 2px;
-    color: #ffffff;
-  }
-  ::v-deep .el-button {
-    border: none;
-  }
-  .dialog-footer :hover {
-    .dialog-btn {
-      background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-}
-.dialog_title {
-  font-family: SourceHanSansCN-Regular;
-  font-size: 35px;
-  color: #68cff9;
-  padding-left: 20px;
-}
-.dialog_little_title {
-  font-family: SourceHanSansCN-Regular;
-  font-size: 28px;
-  color: #f8f8f8;
-  text-align: right;
-  margin: 20px 0;
-}
-.dialog_little_ctn {
-  font-family: SourceHanSansCN-Regular;
-  font-size: 28px;
-  color: #f8f8f8;
-  margin: 20px 0;
-}
-
-.container {
-  width: 100%;
-  height: 100%;
-  .module-container {
-    width: 1512px;
-    height: 950px;
-    margin: 130px 0 0 50px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: space-between;
-    .section-securityMonitor,
-    .section-dataSource {
-      width: 720px;
-      height: 447px;
-    }
-    .section-securityMonitor {
-      padding-top: 35px;
-    }
-    .section-attackRanking {
-      width: 742px;
-      height: 447px;
-      padding-top: 35px;
-      :hover {
-        cursor: pointer;
-      }
-    }
-    .section-superviseObject {
-      width: 751px;
-      height: 447px;
-    }
-  }
-  //球
-  .country-attack {
-    position: absolute;
-    top: 0;
-    left: 1632px;
-    width: 540px;
-    height: 1409px;
-    margin: 180px 0 0 20px;
-    .attack-left {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      .attack-wrap {
-        padding: 0;
-        margin: 0;
-        list-style: none;
-        width: 100%;
-        flex: 0.51;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        .attack-item {
-          width: 365px;
-          height: 89px;
-          background: url("~@/assets/privateOrder/general/left.png") no-repeat;
-          background-size: 100%;
-          position: relative;
-          img {
-            width: 52px;
-            height: 34px;
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            left: 18px;
-            &:hover {
-              cursor: pointer;
-            }
-          }
-          .attack-info {
-            width: 344px;
-            height: 119px;
-            position: absolute;
-            left: 74px;
-            top: -18px;
-            display: flex;
-            justify-content: center;
-            flex-direction: column;
-            .attack-num {
-              display: inline-block;
-              align-self: center;
-              font-family: DIN-Medium;
-              font-size: 35px;
-              color: #ffffff;
-              span {
-                font-size: 18px;
-              }
-            }
-            .attack-country {
-              display: inline-block;
-              align-self: center;
-              font-family: SourceHanSansCN-Regular;
-              font-size: 28px;
-              color: #6ab8f9;
-              opacity: 0.5;
-            }
-          }
-        }
-      }
-      .earth {
-        width: 100%;
-        height: 291px;
-        display: inline-table;
-        margin-top: 71px;
-        margin-left: 9px;
-        background: url("~@/assets/privateOrder/general/地球.png") no-repeat;
-        position: relative;
-        img {
-          width: auto;
-          height: 183px;
-          position: absolute;
-          top: 70px;
-          left: 70px;
-          animation: rotate 6s linear infinite;
-          // background-size: 100%;
-        }
-        @keyframes rotate {
-          from {
-            transform: rotateZ(0deg);
-            transform-origin: center;
-          }
-          to {
-            transform: rotateZ(360deg);
-            transform-origin: center;
-          }
-        }
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
-//btn  title 切换
-.btn-wrap {
-  display: flex;
-  cursor: pointer;
-  .btn {
-    height: 43px;
-    text-align: center;
-    line-height: 43px;
-    font-family: SourceHanSansCN-Regular;
-    font-size: 30px;
-    color: #b7dfff;
-    margin-left: 20px;
-    &.active {
-      color: #fff;
-      font-weight: bold;
-      .topIP {
-        width: 154px;
-        height: 10px;
-        position: relative;
-        left: -3px;
-        top: -13px;
-        // background: url("~@/assets/privateOrder/general/tab-act.png");
-        // background-size: 100% 100%;
-        font-family: SourceHanSansCN-Bold;
-        font-size: 30px;
-        color: #ffffff;
-        z-index: -1;
-      }
-      .distributed {
-        width: 107px;
-        height: 10px;
-        position: relative;
-        left: -3px;
-        top: -13px;
-        // background: url("~@/assets/privateOrder/general/tab-act.png");
-        // background-size: 100% 100%;
-        font-family: SourceHanSansCN-Bold;
-        font-size: 30px;
-        color: #ffffff;
-        z-index: -1;
-      }
-    }
-  }
-}
-//数据来源
-.section-source {
-  height: 447px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  .section-top {
-    width: 100%;
-    height: 140px;
-    display: flex;
-    // margin-top: 24px;
-    // margin-left: 12px;
-    // margin-bottom: 20px;
-    justify-content: space-around;
-    .section-top-item {
-      width: 338px;
-      height: 140px;
-      display: flex;
-      justify-content: space-around;
-      background: url("~@/assets/privateOrder/general/数据来源-框1.png");
-      background-size: 100% 100%;
-      img {
-        align-self: center;
-      }
-      .top-item-content {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 70%;
-        div {
-          text-align: center;
-          font-family: SourceHanSansCN-Regular;
-          font-size: 28px;
-          font-weight: normal;
-          font-stretch: normal;
-          letter-spacing: 1px;
-          color: #ffffff;
-          .content-currentNum,
-          .content-total {
-            text-align: center;
-            font-family: LESLIE-Regular;
-            font-size: 44px;
-            font-weight: normal;
-            font-stretch: normal;
-            letter-spacing: 0px;
-          }
-          .content-currentNum {
-            color: #fff36f;
-          }
-          .content-total {
-            color: #ffffff;
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-  }
-  .section-bottom {
-    width: 100%;
-    height: 192px;
-    display: flex;
-    justify-content: space-around;
-    .section-bottom-item {
-      width: 230px;
-      height: 200px;
-      position: relative;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-      .bottom-title {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 28px;
-        color: #fff;
-        font-family: SourceHanSansCN-Regular;
-        text-shadow: 0 0 10px #77adeb;
-      }
-      .bottom-num {
-        position: absolute;
-        bottom: 10%;
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 40px;
-        color: #fff;
-        font-family: ConthraxSb-Regular;
-      }
-    }
-  }
-}
-//监管对象
-.section-object {
-  height: 364px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  .section-bg {
-    position: relative;
-    top: 54px;
-    width: 100%;
-    height: 351px;
-    background: url("~@/assets/privateOrder/general/circle.png") no-repeat;
-    background-size: 100% 100%;
-    .section-object-item {
-      position: absolute;
-      width: 250px;
-      height: 100px;
-      display: flex;
-      &:hover {
-        cursor: pointer;
-        transform: scale(1.1);
-        transition: 0.2s;
-      }
-      .item-content-title {
-        font-family: SourceHanSansCN-Regular;
-        font-size: 28px;
-        color: #b7dfff;
-      }
-      .item-content-num {
-        font-family: DIN-Bold;
-        font-size: 44px;
-        font-style: italic;
-        color: #ffffff;
-      }
-    }
-    .section-center {
-      position: absolute;
-      top: 72px;
-      left: 336px;
-      width: 73px;
-      height: 100px;
-      background: url("~@/assets/privateOrder/general/icon-监管.png");
-      background-size: 100%;
-    }
-  }
-}
-.section-bg:hover {
-  .item1 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  .item2 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  .item3 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  .item4 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  .item5 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-  .item6 {
-    animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
-      animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
-      scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
-    animation-play-state: paused;
-    -webkit-animation-play-state: paused; /* Safari 和 Chrome */
-  }
-}
-//安全检测
-.section-monitor {
-  height: 387px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  .section-monitor-top {
-    width: 100%;
-    height: 120px;
-    display: flex;
-    margin-top: 5px;
-    justify-content: space-between;
-    background: url("~@/assets/privateOrder/general/bg-安全监测.png") 100%
-      no-repeat;
-    .monitor-line {
-      display: inline-block;
-      height: 47px;
-      width: 2px;
-      background-color: #fff;
-      opacity: 0.3;
-      align-self: center;
-    }
-    .monitor-info {
-      display: flex;
-      width: 254px;
-      justify-content: space-around;
-      img {
-        align-self: center;
-      }
-      .monitor-info-des {
-        align-self: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 70%;
-        .info-des-title {
-          font-family: SourceHanSansCN-Regular;
-          font-size: 24px;
-          color: #ffffff;
-        }
-        .info-des-total {
-          font-family: PangMenZhengDao-3;
-          font-size: 40px;
-          font-style: italic;
-          letter-spacing: 2px;
-          color: #fff36f;
-        }
-      }
-    }
-    .monitor-detail {
-      width: 394px;
-      display: flex;
-      .monitor-detail-item {
-        display: flex;
-        align-self: center;
-        justify-content: center;
-        flex: 1;
-        flex-direction: column;
-        .detail-item-title {
-          font-family: SourceHanSansCN-Regular;
-          font-size: 26px;
-          color: #68cff9;
-        }
-        .detail-item-num {
-          font-family: DIN-Medium;
-          font-size: 34px;
-          color: #ffffff;
-        }
-      }
-    }
-  }
-  .section-monitor-bottom {
-    width: 100%;
-    height: 229px;
-    display: flex;
-    margin-top: -33px;
-    justify-content: space-around;
-    .monitor-box {
-      width: 720px;
-      height: 229px;
-      margin-top: 28px;
-      overflow: hidden;
-      .monitor-title {
-        width: 720px;
-        height: 50px;
-        line-height: 50px;
-        background-color: #133458;
-        display: grid;
-        grid-template-columns: 253px 306px 180px;
-        span {
-          font-family: SourceHanSansCN-Regular;
-          font-size: 28px;
-          color: #b7dfff;
-        }
-        span:nth-child(1) {
-          margin-left: 39px;
-        }
-      }
-      .monitorScroll {
-        width: 720px;
-        height: 180px;
-        overflow: hidden;
-        margin-top: 5px;
-      }
-      .monitor-list {
-        margin-top: 12px;
-        width: 720px;
-        height: 80px;
-        line-height: 80px;
-        background-color: rgb(19, 52, 88, 0.3);
-        display: flex;
-        span {
-          display: inline-block;
-          font-family: DIN-Medium;
-          font-size: 28px;
-          letter-spacing: 0px;
-          color: #ffffff;
-        }
-        span:nth-child(1) {
-          width: 185px;
-          margin-left: 39px;
-        }
-        span:nth-child(2) {
-          width: 355px;
-          margin-left: 55px;
-        }
-        span:nth-child(3) {
-          width: 180px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-//-------------------旋转动画---------------
-.item1 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -26.75s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
-}
-.item2 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -32.25s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -24.5s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -2.5s infinite alternate;
-}
-.item3 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -7.25s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
-}
-.item4 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -11.75s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -4.5s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate;
-}
-.item5 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -17s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
-}
-.item6 {
-  animation: animX 15s cubic-bezier(0.36, 0, 0.64, 1) -21.75s infinite alternate,
-    animY 15s cubic-bezier(0.36, 0, 0.64, 1) -14.5s infinite alternate,
-    scale 30s cubic-bezier(0.36, 0, 0.64, 1) -12.5s infinite alternate;
-}
-@keyframes animX {
-  0% {
-    left: 10px;
-  }
-  100% {
-    left: 640px;
-  }
-}
-@keyframes animY {
-  0% {
-    top: -35px;
-  }
-  100% {
-    top: 260px;
-  }
-}
-@keyframes scale {
-}
-</style>
diff --git a/src/views/privateOrder/security/components/componentLeft.vue b/src/views/privateOrder/security/components/componentLeft.vue
index 4293577..33b88aa 100644
--- a/src/views/privateOrder/security/components/componentLeft.vue
+++ b/src/views/privateOrder/security/components/componentLeft.vue
@@ -29,7 +29,8 @@
                       transform: translate(5px, -7px);
                     "
                   >
-                    /</span>
+                    /</span
+                  >
                   <span class="content-total">{{ item.total }}</span>
                 </div>
               </div>
@@ -40,11 +41,11 @@
               v-for="(item, idx) in dataSource.bottom"
               :key="idx"
               class="section-bottom-item"
-              @click="showAttack(item.title,item.num)"
+              @click="showAttack(item.title, item.num)"
             >
               <img :src="item.url" alt="" />
               <span class="bottom-title">{{ item.title }}</span>
-              <span class="bottom-num">{{ item.num |commaFilter }}</span>
+              <span class="bottom-num">{{ item.num | commaFilter }}</span>
             </div>
           </div>
         </div>
@@ -57,12 +58,15 @@
               v-for="(item, idx) in superviseObject"
               :key="idx"
               :class="['section-object-item', item.className]"
-              @click="showAttack(item.title,item.num)"
+              @click="showAttack(item.title, item.num)"
             >
               <img :src="item.url" alt="" />
               <div class="item-content">
-                <span class="item-content-title">{{ item.title }}</span><br />
-                <span class="item-content-num">{{ item.num | commaFilter }}</span>
+                <span class="item-content-title">{{ item.title }}</span
+                ><br />
+                <span class="item-content-num">{{
+                  item.num | commaFilter
+                }}</span>
               </div>
             </div>
             <div class="section-center" />
@@ -84,7 +88,7 @@
             <div class="monitor-detail">
               <div
                 v-for="(item, index) in securityMonitor.detail"
-                v-show="index<3"
+                v-show="index < 3"
                 :key="index"
                 class="monitor-detail-item"
               >
@@ -100,23 +104,25 @@
                 <span>攻击源/IP</span>
                 <span>攻击类型</span>
               </div>
-              <vue-seamless-scroll
-                :data="tableData"
-                :class-option="classOption"
-                class="monitorScroll"
-              >
-                <div
-                  v-for="(item, idx) in tableData"
-                  :key="idx"
-                  class="monitor-list"
-                  :data-obj="'安全监测'"
-                  @click="getAttackSource(item.id)"
+              <div @click="getAttackSource($event)">
+                <vue-seamless-scroll
+                  :data="tableData"
+                  :class-option="classOption"
+                  class="monitorScroll"
                 >
-                  <span>{{ item.attackTime }}</span>
-                  <span>{{ item.attackedIp }}</span>
-                  <span>{{ $filterDict('tc_attack_type',item.attackType) }}</span>
-                </div>
-              </vue-seamless-scroll>
+                  <div
+                    v-for="(item, idx) in tableData"
+                    :key="idx"
+                    class="monitor-list"
+                  >
+                    <span :data-id="item.id">{{ item.attackTime }}</span>
+                    <span :data-id="item.id">{{ item.attackedIp }}</span>
+                    <span :data-id="item.id">{{
+                      $filterDict("tc_attack_type", item.attackType)
+                    }}</span>
+                  </div>
+                </vue-seamless-scroll>
+              </div>
             </div>
           </div>
         </div>
@@ -178,7 +184,9 @@
             <div class="dialog_little_title">攻击类型：</div>
           </el-col>
           <el-col :span="18">
-            <div class="dialog_little_ctn">{{ $filterDict('tc_attack_type',tableDataPop.attackType) }}</div>
+            <div class="dialog_little_ctn">
+              {{ $filterDict("tc_attack_type", tableDataPop.attackType) }}
+            </div>
           </el-col>
         </el-row>
         <el-row>
@@ -222,7 +230,9 @@
             <div class="dialog_little_title">网站安全等级：</div>
           </el-col>
           <el-col :span="6">
-            <div class="dialog_little_ctn">{{ $filterDict('tc_net_safety_level',tableDataPop.level) }}</div>
+            <div class="dialog_little_ctn">
+              {{ $filterDict("tc_net_safety_level", tableDataPop.level) }}
+            </div>
           </el-col>
           <el-col :span="6">
             <div class="dialog_little_title">联系电话：</div>
@@ -252,20 +262,17 @@
       <template
         v-if="
           dialogType === '硬探针' ||
-            dialogType === '系统监测' ||
-            dialogType === '网站监测' ||
-            dialogType === 'IDC单位' ||
-            dialogType === '等保单位' ||
-            dialogType === '政府网站' ||
-            dialogType === '等保系统' ||
-            dialogType === '监管单位' ||
-            dialogType === '软探针'
+          dialogType === '系统监测' ||
+          dialogType === '网站监测' ||
+          dialogType === 'IDC单位' ||
+          dialogType === '等保单位' ||
+          dialogType === '政府网站' ||
+          dialogType === '等保系统' ||
+          dialogType === '监管单位' ||
+          dialogType === '软探针'
         "
       >
-        <MyTable
-          :table-list="excelData"
-          :table-key="excelDataHeader"
-        />
+        <MyTable :table-list="excelData" :table-key="excelDataHeader" />
         <div style="text-align: right; margin-top: 10px">
           <paginations
             v-show="total > 0"
@@ -278,10 +285,9 @@
       </template>
       <span slot="footer" class="dialog-footer">
         <span>
-          <el-button
-            class="dialog-btn"
-            @click="dialogStatus = false"
-          >关 闭</el-button>
+          <el-button class="dialog-btn" @click="dialogStatus = false"
+            >关 闭</el-button
+          >
         </span>
       </span>
     </el-dialog>
@@ -289,20 +295,28 @@
 </template>
 
 <script>
-import { getSource } from '@/api/common'
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import ModuleTitle from '../../common/ModuleTitle.vue'
-import attackSituation from './attackSituation.vue'
-import ExcelTable from '@/components/ExcelTable'
-import { listSystem, listUnit, listWeb, listIDCunit, listSource, saftyscreenSupervise, saftyscreenSafety,
-  listDetection, getDetection
-} from '@/api/zongzhi/st.js'
+import { getSource } from "@/api/common";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import ModuleTitle from "../../common/ModuleTitle.vue";
+import attackSituation from "./attackSituation.vue";
+import ExcelTable from "@/components/ExcelTable";
+import {
+  listSystem,
+  listUnit,
+  listWeb,
+  listIDCunit,
+  listSource,
+  saftyscreenSupervise,
+  saftyscreenSafety,
+  listDetection,
+  getDetection,
+} from "@/api/zongzhi/st.js";
 import {
   yingTanZhen,
   yingTanZhenKeyValue,
   xitongjiance,
-  xitongjianceKeyValue
-} from './mock'
+  xitongjianceKeyValue,
+} from "./mock";
 import {
   IDCKeyValue,
   IDC,
@@ -313,24 +327,24 @@ import {
   zfdwKeyValue,
   zfdw,
   rtz,
-  rtzKeyValue
-} from './jianGuan'
-import { getLatest, getSecurity } from '@/api/common'
+  rtzKeyValue,
+} from "./jianGuan";
+import { getLatest, getSecurity } from "@/api/common";
 export default {
   components: {
     attackSituation,
     ModuleTitle,
     vueSeamlessScroll,
-    ExcelTable
+    ExcelTable,
   },
   filters: {
     commaFilter(target) {
       if (target < 10000) {
-        return String(target).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
+        return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
       } else {
-        return (target / 10000).toFixed(2) + '万'
+        return (target / 10000).toFixed(2) + "万";
       }
-    }
+    },
   },
   data() {
     return {
@@ -339,101 +353,101 @@ export default {
        */
       queryParams: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       }, // 分页查询条件
       total: 0, // 总数
       time: null,
       checkTotal: 0,
       checkParams: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       //
       dialogWidth: 0,
       dialogStatus: false,
-      dialogType: '',
+      dialogType: "",
       safeDialog: false,
       attackTime: null,
       tableTime: null,
       tableTotal: 0,
       currentIndex: 0,
       attackList: {
-        options: ['受攻击IPTOP5', '分布情况']
+        options: ["受攻击IPTOP5", "分布情况"],
       },
       dataSource: {
         top: [
           {
-            title: '云端监测(G)',
+            title: "云端监测(G)",
             currentNum: 100,
             total: 150,
-            url: require('@/assets/privateOrder/general/icon-云端监测.png')
+            url: require("@/assets/privateOrder/general/icon-云端监测.png"),
           },
           {
-            title: 'APT(M)',
+            title: "APT(M)",
             currentNum: 239,
             total: 1000,
-            url: require('@/assets/privateOrder/general/icon-APT.png')
-          }
+            url: require("@/assets/privateOrder/general/icon-APT.png"),
+          },
         ],
         bottom: [
           {
-            title: '硬探针',
+            title: "硬探针",
             num: 6,
-            url: require('@/assets/privateOrder/general/硬探针.png')
+            url: require("@/assets/privateOrder/general/硬探针.png"),
           },
           {
-            title: '软探针',
+            title: "软探针",
             num: 125,
-            url: require('@/assets/privateOrder/general/软探针.png')
+            url: require("@/assets/privateOrder/general/软探针.png"),
           },
           {
-            title: '系统监测',
+            title: "系统监测",
             num: 2658,
-            url: require('@/assets/privateOrder/general/系统监测.png')
-          }
-        ]
+            url: require("@/assets/privateOrder/general/系统监测.png"),
+          },
+        ],
       },
       superviseObject: [
         {
-          title: '政府网站',
+          title: "政府网站",
           num: 0,
-          className: 'item1',
-          url: require('@/assets/privateOrder/general/icon-政府网站.png')
+          className: "item1",
+          url: require("@/assets/privateOrder/general/icon-政府网站.png"),
         },
         {
-          title: '监管单位',
+          title: "监管单位",
           num: 0,
-          className: 'item2',
-          url: require('@/assets/privateOrder/general/icon-监管单位.png')
+          className: "item2",
+          url: require("@/assets/privateOrder/general/icon-监管单位.png"),
         },
         {
-          title: '网站监测',
+          title: "网站监测",
           num: 0,
-          className: 'item3',
-          url: require('@/assets/privateOrder/general/icon-网站监测.png')
+          className: "item3",
+          url: require("@/assets/privateOrder/general/icon-网站监测.png"),
         },
         {
-          title: 'IDC单位',
+          title: "IDC单位",
           num: 0,
-          className: 'item4',
-          url: require('@/assets/privateOrder/general/icon-IDC单位.png')
+          className: "item4",
+          url: require("@/assets/privateOrder/general/icon-IDC单位.png"),
         },
         {
-          title: '等保系统',
+          title: "等保系统",
           num: 0,
-          className: 'item5',
-          url: require('@/assets/privateOrder/general/icon-等保系统.png')
+          className: "item5",
+          url: require("@/assets/privateOrder/general/icon-等保系统.png"),
         },
         {
-          title: '等保单位',
+          title: "等保单位",
           num: 0,
-          className: 'item6',
-          url: require('@/assets/privateOrder/general/icon-等保单位.png')
-        }
+          className: "item6",
+          url: require("@/assets/privateOrder/general/icon-等保单位.png"),
+        },
       ],
       securityMonitor: {
-        url: require('@/assets/privateOrder/general/icon-网络攻击.png'),
-        title: '网络攻击(次)',
+        url: require("@/assets/privateOrder/general/icon-网络攻击.png"),
+        title: "网络攻击(次)",
         total: 0,
         detail: [
           // {
@@ -448,7 +462,7 @@ export default {
           //   title: '僵木蠕病毒',
           //   num: 796.152
           // }
-        ]
+        ],
       },
       tableDataPop: {
         // id: 1,
@@ -492,8 +506,8 @@ export default {
         // }
       ],
       excelData: null,
-      excelDataHeader: null
-    }
+      excelDataHeader: null,
+    };
   },
   computed: {
     classOption() {
@@ -505,29 +519,30 @@ 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.attackTime) // 清除定时器
-    clearInterval(this.tableTime)
-    clearInterval(this.time)
+    clearInterval(this.attackTime); // 清除定时器
+    clearInterval(this.tableTime);
+    clearInterval(this.time);
   },
   mounted() {
-    this.changeBtn() // 切换
-    this.getSaftyscreenSupervise()
-    this.getSaftyscreenSafety()
-    this.getListDetection()
-    this.time = setInterval(() => { // 安全隐患列表
+    this.changeBtn(); // 切换
+    this.getSaftyscreenSupervise();
+    this.getSaftyscreenSafety();
+    this.getListDetection();
+    this.time = setInterval(() => {
+      // 安全隐患列表
       if (this.tableData.length >= this.checkTotal) {
-        clearInterval(this.time)
+        clearInterval(this.time);
       } else {
-        this.checkParams.pageNum = this.checkParams.pageNum + 1
-        this.getListDetection()
+        this.checkParams.pageNum = this.checkParams.pageNum + 1;
+        this.getListDetection();
       }
-    }, 6000)
+    }, 6000);
     // this.getDataSource() // 数据来源
     //  左下角数据滚动
     // getLatest().then((res) => {
@@ -559,223 +574,231 @@ export default {
     AttackClick(id) {
       return new Promise((resolve) => {
         getLatest().then((res) => {
-          res['T_LATEST_NEWS[]'].forEach((item) => {
+          res["T_LATEST_NEWS[]"].forEach((item) => {
             if (item.id === id) {
-              this.tableDataPop.id = id
-              this.tableDataPop.attackTime = item.attack_time
-              this.tableDataPop.sourceIp = item.source_ip
-              this.tableDataPop.attackType = item.attack_type
-              this.tableDataPop.attackIpRegion = item.attack_ip_region
-              this.tableDataPop.attackedIp = item.attacked_ip
-              this.tableDataPop.attackedType = item.attacked_type
-              this.tableDataPop.webLevel = item.web_level
-              this.tableDataPop.subordinateDept = item.subordinate_dept
-              this.tableDataPop.attackedIpRegion = item.attacked_ip_region
+              this.tableDataPop.id = id;
+              this.tableDataPop.attackTime = item.attack_time;
+              this.tableDataPop.sourceIp = item.source_ip;
+              this.tableDataPop.attackType = item.attack_type;
+              this.tableDataPop.attackIpRegion = item.attack_ip_region;
+              this.tableDataPop.attackedIp = item.attacked_ip;
+              this.tableDataPop.attackedType = item.attacked_type;
+              this.tableDataPop.webLevel = item.web_level;
+              this.tableDataPop.subordinateDept = item.subordinate_dept;
+              this.tableDataPop.attackedIpRegion = item.attacked_ip_region;
               item.contact_tel === undefined
-                ? (this.tableDataPop.contactTel = '-')
-                : (this.tableDataPop.contactTel = item.contact_tel)
+                ? (this.tableDataPop.contactTel = "-")
+                : (this.tableDataPop.contactTel = item.contact_tel);
               item.contact_name === undefined
-                ? (this.tableDataPop.contactName = '-')
-                : (this.tableDataPop.contactName = item.contact_name)
-              resolve()
+                ? (this.tableDataPop.contactName = "-")
+                : (this.tableDataPop.contactName = item.contact_name);
+              resolve();
             }
-          })
-        })
-      })
+          });
+        });
+      });
     },
-    async getAttackSource(id) {
-      this.dialogWidth = '1000px'
-      getDetection(id).then(res => {
-        this.tableDataPop = res.data
-        this.dialogType = '安全监测'
-        this.dialogStatus = true
-      })
+    async getAttackSource(e) {
+      let id = e.target.dataset.id;
+      if (!id) return;
+      this.dialogWidth = "1000px";
+      getDetection(id).then((res) => {
+        this.tableDataPop = res.data;
+        this.dialogType = "安全监测";
+        this.dialogStatus = true;
+      });
       // await this.AttackClick(id)
     },
     /**
      * 安全监管List
      */
     getListDetection() {
-      listDetection(this.checkParams).then(res => {
-        this.tableData = [...this.tableData, ...res.rows]
-        this.checkTotal = res.total
-      })
+      listDetection(this.checkParams).then((res) => {
+        this.tableData = [...this.tableData, ...res.rows];
+        this.checkTotal = res.total;
+      });
     },
     /**
      * 安全监测攻击类型统计
      */
     getSaftyscreenSafety() {
-      saftyscreenSafety().then(res => {
+      saftyscreenSafety().then((res) => {
         this.securityMonitor.detail = res.data.list.map((item, index) => {
-          this.securityMonitor.total = this.securityMonitor.total + item.count
+          this.securityMonitor.total = this.securityMonitor.total + item.count;
           return {
-            title: this.$filterDict('tc_attack_type', item.attackType),
-            num: item.count
-          }
-        })
-      })
+            title: this.$filterDict("tc_attack_type", item.attackType),
+            num: item.count,
+          };
+        });
+      });
     },
     /**
      * 监管对象各类别统计量
      */
     getSaftyscreenSupervise() {
-      saftyscreenSupervise().then(res => {
+      saftyscreenSupervise().then((res) => {
         // this.superviseObject[4].num = res.data.
-        res.data.forEach(item => {
-          this.superviseObject.forEach(it => {
+        res.data.forEach((item) => {
+          this.superviseObject.forEach((it) => {
             if (item.name == it.title) {
-              it.num = item.count
+              it.num = item.count;
             }
-          })
-        })
-        console.log(res, 'aaa')
-      })
+          });
+        });
+        console.log(res, "aaa");
+      });
     },
     /**
      * 表格参数重置
      *  */
     reset() {
-      this.total = 0
+      this.total = 0;
       this.queryParams = {
         pageNum: 1,
-        pageSize: 10
-      }
-      this.excelData = []
-      this.excelDataHeader = []
+        pageSize: 10,
+      };
+      this.excelData = [];
+      this.excelDataHeader = [];
     },
     /**
      * 等保系统
      */
     getDbSteam() {
-      listSystem(this.queryParams).then(res => {
-        this.excelData = res.rows
-        this.excelDataHeader = dbxtKeyValue
-        this.total = res.total
-      })
+      listSystem(this.queryParams).then((res) => {
+        this.excelData = res.rows;
+        this.excelDataHeader = dbxtKeyValue;
+        this.total = res.total;
+      });
     },
     /**
      * 等保单位
      */
     getDbUnit() {
-      listUnit(this.queryParams).then(res => {
-        this.excelData = res.rows
-        this.excelDataHeader = dbdwKeyValue
-        this.total = res.total
-      })
+      listUnit(this.queryParams).then((res) => {
+        this.excelData = res.rows;
+        this.excelDataHeader = dbdwKeyValue;
+        this.total = res.total;
+      });
     },
     /**
      * 政府网站
      */
     getZfWeb() {
-      listWeb(this.queryParams).then(res => {
-        this.excelData = res.rows
-        this.excelDataHeader = zfdwKeyValue
-        this.total = res.total
-      })
+      listWeb(this.queryParams).then((res) => {
+        this.excelData = res.rows;
+        this.excelDataHeader = zfdwKeyValue;
+        this.total = res.total;
+      });
     },
     /**
      * IDC单位
      */
     getIdcUnit() {
-      listIDCunit(this.queryParams).then(res => {
-        this.excelData = res.rows
-        this.excelDataHeader = IDCKeyValue
-        this.total = res.total
-      })
+      listIDCunit(this.queryParams).then((res) => {
+        this.excelData = res.rows;
+        this.excelDataHeader = IDCKeyValue;
+        this.total = res.total;
+      });
     },
     /**
      * 监管单位 || 网站监测 || 系统监测
      */
     getJgUnit() {
-      listSource(this.queryParams).then(res => {
-        this.excelData = res.rows
-        this.excelDataHeader = xitongjianceKeyValue
-        this.total = res.total
-      })
+      listSource(this.queryParams).then((res) => {
+        this.excelData = res.rows;
+        this.excelDataHeader = xitongjianceKeyValue;
+        this.total = res.total;
+      });
     },
-    showAttack(item = '安全监测', total) {
-      if (typeof item === 'object') {
+    showAttack(item = "安全监测", total) {
+      if (typeof item === "object") {
         //
       } else {
-        this.reset()
-        this.dialogType = item
+        this.reset();
+        this.dialogType = item;
       }
 
-      if (this.dialogType === '等保系统') {
-        this.dialogWidth = '4000px'
-        this.getDbSteam()
+      if (this.dialogType === "等保系统") {
+        this.dialogWidth = "4000px";
+        this.getDbSteam();
       }
-      if (this.dialogType === '等保单位') {
-        this.dialogWidth = '4000px'
-        this.getDbUnit()
+      if (this.dialogType === "等保单位") {
+        this.dialogWidth = "4000px";
+        this.getDbUnit();
       }
-      if (this.dialogType === '政府网站') {
-        this.dialogWidth = '1800px'
-        this.getZfWeb()
+      if (this.dialogType === "政府网站") {
+        this.dialogWidth = "1800px";
+        this.getZfWeb();
       }
-      if (this.dialogType === 'IDC单位') {
-        this.dialogWidth = '1800px'
-        this.getIdcUnit()
+      if (this.dialogType === "IDC单位") {
+        this.dialogWidth = "1800px";
+        this.getIdcUnit();
       }
-      if (this.dialogType === '监管单位' || this.dialogType === '系统监测' || this.dialogType === '网站监测' || this.dialogType === '软探针' || this.dialogType === '硬探针') {
-        this.dialogWidth = '2100px'
-        if (this.dialogType === '软探针') {
-          this.queryParams.type = 4
-        } else if (this.dialogType === '硬探针') {
-          this.queryParams.type = 3
-        } else if (this.dialogType === '监管单位') {
-          this.queryParams.type = 5
-        } else if (this.dialogType === '网站监测') {
-          this.queryParams.type = 6
+      if (
+        this.dialogType === "监管单位" ||
+        this.dialogType === "系统监测" ||
+        this.dialogType === "网站监测" ||
+        this.dialogType === "软探针" ||
+        this.dialogType === "硬探针"
+      ) {
+        this.dialogWidth = "2100px";
+        if (this.dialogType === "软探针") {
+          this.queryParams.type = 4;
+        } else if (this.dialogType === "硬探针") {
+          this.queryParams.type = 3;
+        } else if (this.dialogType === "监管单位") {
+          this.queryParams.type = 5;
+        } else if (this.dialogType === "网站监测") {
+          this.queryParams.type = 6;
         } else {
-          this.queryParams.type = 7
+          this.queryParams.type = 7;
         }
 
-        this.getJgUnit()
+        this.getJgUnit();
       }
       this.$nextTick(() => {
-        this.dialogStatus = true
-      })
+        this.dialogStatus = true;
+      });
     },
     // 数据来源数据获取
     getDataSource() {
       getSource(9).then((res) => {
-        const data = JSON.parse(res['[]'][0].T_static_data.DATA)
+        const data = JSON.parse(res["[]"][0].T_static_data.DATA);
         for (let i = 0; i < data.top.length; i++) {
           for (let j = 0; j < this.dataSource.top.length; j++) {
             if (data.top[i].title === this.dataSource.top[j].title) {
-              this.dataSource.top[j].currentNum = data.top[i].currentNum
-              this.dataSource.top[j].total = data.top[i].total
+              this.dataSource.top[j].currentNum = data.top[i].currentNum;
+              this.dataSource.top[j].total = data.top[i].total;
             }
           }
         }
         for (let i = 0; i < data.bottom.length; i++) {
           for (let j = 0; j < this.dataSource.bottom.length; j++) {
             if (data.bottom[i].title === this.dataSource.bottom[j].title) {
-              this.dataSource.bottom[j].num = data.bottom[i].num
+              this.dataSource.bottom[j].num = data.bottom[i].num;
             }
           }
         }
-      })
+      });
     },
     // 鼠标经过暂停
     mouseOver() {
-      clearInterval(this.attackTime)
+      clearInterval(this.attackTime);
     },
     // 鼠标离开开启
     mouseLeave() {
-      this.changeBtn()
+      this.changeBtn();
     },
     // 受攻击情况自动切换
     changeBtn() {
       this.attackTime = setInterval(() => {
         this.currentIndex === 0
           ? (this.currentIndex = 1)
-          : (this.currentIndex = 0)
-      }, 11000)
-    }
-  }
-}
+          : (this.currentIndex = 0);
+      }, 11000);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -821,103 +844,103 @@ export default {
     }
   }
   .dialog-btn {
-        background: url("~@/assets/dialog/btn-bg.png") no-repeat;
-        background-size: 100% 100%;
-        width: 160px;
-        height: 50px;
-        font-family: SourceHanSansCN-Regular;
-        font-size: 24px;
-        font-weight: normal;
-        font-stretch: normal;
-        line-height: 10px;
-        letter-spacing: 2px;
-        color: #ffffff;
-      }
-      ::v-deep .el-button {
-        border: none;
-      }
-      .dialog-footer :hover {
-        .dialog-btn {
-          background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
-          background-size: 100% 100%;
-        }
-      }
-      ::v-deep .el-dialog__header {
-        background: rgba(255, 255, 255, 0);
-        text-align: left;
-        padding-left: 40px;
-        .el-dialog__title {
-          font-family: SourceHanSansCN-Bold, san-serif;
-          font-size: 24px;
-          font-weight: normal;
-          font-stretch: normal;
-          line-height: 38px;
-          letter-spacing: 0px;
-          color: #ffffff;
-        }
-      }
-      ::v-deep .el-dialog {
-        background: url("../../../../assets/dialog/弹窗背景-一般.png") no-repeat;
-        width: 1820px;
-        height: 1066px;
-        background-size: 100% 100%;
-      }
-      ::v-deep .el-dialog__headerbtn {
-        top: 0;
-        font-size: 30px;
-        font-weight: bolder;
-      }
-      ::v-deep .el-dialog__footer {
-        background: rgba(255, 255, 255, 0);
-      }
-      ::v-deep .el-table th.el-table__cell {
-        background-color: rgba(0, 0, 0, 0);
-      }
-      ::v-deep .el-table {
-        background-color: rgba(0, 0, 0, 0);
-        color: #fff;
-        border: none;
-      }
-      ::v-deep.el-table::before {
-        display: none;
-      }
-      ::v-deep .el-table tr {
-        background-color: rgba(0, 0, 0, 0);
-      }
-      ::v-deep .el-table .cell {
-        font-size: 26px;
-        height: 40px;
-        line-height: 40px;
-      }
-      ::v-deep .el-table__header {
-        background-color: rgba(76, 162, 248, 0.2);
-        color: #fff;
-      }
-      ::v-deep .el-table__row {
-        font-family: SourceHanSansCN-Regular, sans-serif;
-        font-size: 26px;
-        font-weight: normal;
-        font-stretch: normal;
-        letter-spacing: 0px;
-        color: #b7dfff;
-        background-color: rgba(106, 184, 255, 0.2);
-        border: solid 1px #6ab8ff;
-      }
-      ::v-deep .el-table {
-        tbody tr {
-          &:hover {
-            td {
-              background-color: rgba(228, 223, 223, 0.3) !important;
-            }
-          }
+    background: url("~@/assets/dialog/btn-bg.png") no-repeat;
+    background-size: 100% 100%;
+    width: 160px;
+    height: 50px;
+    font-family: SourceHanSansCN-Regular;
+    font-size: 24px;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: 10px;
+    letter-spacing: 2px;
+    color: #ffffff;
+  }
+  ::v-deep .el-button {
+    border: none;
+  }
+  .dialog-footer :hover {
+    .dialog-btn {
+      background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  ::v-deep .el-dialog__header {
+    background: rgba(255, 255, 255, 0);
+    text-align: left;
+    padding-left: 40px;
+    .el-dialog__title {
+      font-family: SourceHanSansCN-Bold, san-serif;
+      font-size: 24px;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: 38px;
+      letter-spacing: 0px;
+      color: #ffffff;
+    }
+  }
+  ::v-deep .el-dialog {
+    background: url("../../../../assets/dialog/弹窗背景-一般.png") no-repeat;
+    width: 1820px;
+    height: 1066px;
+    background-size: 100% 100%;
+  }
+  ::v-deep .el-dialog__headerbtn {
+    top: 0;
+    font-size: 30px;
+    font-weight: bolder;
+  }
+  ::v-deep .el-dialog__footer {
+    background: rgba(255, 255, 255, 0);
+  }
+  ::v-deep .el-table th.el-table__cell {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  ::v-deep .el-table {
+    background-color: rgba(0, 0, 0, 0);
+    color: #fff;
+    border: none;
+  }
+  ::v-deep.el-table::before {
+    display: none;
+  }
+  ::v-deep .el-table tr {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  ::v-deep .el-table .cell {
+    font-size: 26px;
+    height: 40px;
+    line-height: 40px;
+  }
+  ::v-deep .el-table__header {
+    background-color: rgba(76, 162, 248, 0.2);
+    color: #fff;
+  }
+  ::v-deep .el-table__row {
+    font-family: SourceHanSansCN-Regular, sans-serif;
+    font-size: 26px;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0px;
+    color: #b7dfff;
+    background-color: rgba(106, 184, 255, 0.2);
+    border: solid 1px #6ab8ff;
+  }
+  ::v-deep .el-table {
+    tbody tr {
+      &:hover {
+        td {
+          background-color: rgba(228, 223, 223, 0.3) !important;
         }
       }
-      ::v-deep .el-table td.el-table__cell {
-        border: none;
-      }
-      ::v-deep .el-table th.el-table__cell {
-        border: none;
-      }
+    }
+  }
+  ::v-deep .el-table td.el-table__cell {
+    border: none;
+  }
+  ::v-deep .el-table th.el-table__cell {
+    border: none;
+  }
 }
 .dialog_title {
   font-family: SourceHanSansCN-Regular;
diff --git a/src/views/privateOrder/security/components/componentRight.vue b/src/views/privateOrder/security/components/componentRight.vue
index 78ff546..ceb2616 100644
--- a/src/views/privateOrder/security/components/componentRight.vue
+++ b/src/views/privateOrder/security/components/componentRight.vue
@@ -120,9 +120,9 @@
              
             >
               <span :data-url="item.fileUrl">{{ item.unitName }}</span>
-              <span>{{ item.riskName }}</span>
-              <span>{{ $filterDict("tc_yh_level", item.level) }}</span>
-              <span> {{ $filterDict("tc_yh_source", item.riskSource) }}</span>
+              <span :data-url="item.fileUrl">{{ item.riskName }}</span>
+              <span :data-url="item.fileUrl">{{ $filterDict("tc_yh_level", item.level) }}</span>
+              <span :data-url="item.fileUrl"> {{ $filterDict("tc_yh_source", item.riskSource) }}</span>
             </div>
           </vue-seamless-scroll>
           </div>
@@ -150,10 +150,10 @@
                 <div class="item_name" :data-url="item.fileUrl">
                   {{ item.depName }}
                 </div>
-                <div class="item_ip" >
+                <div class="item_ip" :data-url="item.fileUrl">
                   {{ item.ip }}
                 </div>
-                <span class="item_num" >{{
+                <span class="item_num" :data-url="item.fileUrl">{{
                   $filterDict("tc_steam_state", item.state)
                 }}</span>
               </div>
@@ -514,11 +514,8 @@ export default {
       this.fileExtension = e.target.dataset.url.substring(
         e.target.dataset.url.lastIndexOf(".") + 1
       );
-
-      console.log(this.fileExtension)
       if (this.fileExtension == "pdf") {
         this.pdfUrl = process.env.VUE_APP_BASE_API2 +e.target.dataset.url;
-            console.log(this.pdfUrl,'aaa')
            this.dialogDetails = true;
       } else if (
         this.fileExtension === "docx" ||

From 940b749ccb3ff7d74a9b14c298933ba96eadb04a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 22 Aug 2023 14:30:53 +0800
Subject: [PATCH 3/4] 1

---
 .../privateOrder/positiveEnergy/components/componentLeft.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/privateOrder/positiveEnergy/components/componentLeft.vue b/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
index cc4acef..778c24d 100644
--- a/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
+++ b/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
@@ -626,7 +626,8 @@ export default {
     rowClick(row) {
       // this.dialogTitle = row.labe
       this.href = row.url
-      this.pageDetails = true
+      console.log(row.url,'sss',row)
+      // this.pageDetails = true
       // this.dialogTitle = row.label
       // this.fileExtension = row.url.substring(row.url.lastIndexOf('.') + 1)
       // axios({

From a68b175c04ab08bfc2e329d7dd717e162dce7fa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 22 Aug 2023 14:46:51 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../privateOrder/positiveEnergy/components/componentLeft.vue   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/privateOrder/positiveEnergy/components/componentLeft.vue b/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
index 778c24d..cc4acef 100644
--- a/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
+++ b/src/views/privateOrder/positiveEnergy/components/componentLeft.vue
@@ -626,8 +626,7 @@ export default {
     rowClick(row) {
       // this.dialogTitle = row.labe
       this.href = row.url
-      console.log(row.url,'sss',row)
-      // this.pageDetails = true
+      this.pageDetails = true
       // this.dialogTitle = row.label
       // this.fileExtension = row.url.substring(row.url.lastIndexOf('.') + 1)
       // axios({