隐患处理列表

.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'

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)

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>