网络力量

.env.development

@@ -3,4 +3,7 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = '/dashboard'
+
+VUE_APP_BASE_API2 = 'http://localhost:9027'
+
 BASE_API = 'http://10.10.3.35:9070'

src/api/zongzhi/st.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request.js'
+
+// 网络安全官
+export function listSafetyadmin(query) {
+  return request({
+    url: '/zongzhi/safetyadmin/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询网评员列表
+export function listCommentator(query) {
+  return request({
+    url: '/zongzhi/commentator/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询网络平台列表
+export function listPingtai(query) {
+  return request({
+    url: '/zongzhi/pingtai/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询网络安全支持单位列表
+export function listNetSafetyZcUnit(query) {
+  return request({
+    url: '/zongzhi/supportunit/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询网络民情责任人列表
+export function listPrincipal(query) {
+  return request({
+    url: '/zongzhi/principal/list',
+    method: 'get',
+    params: query
+  })
+}
+// 查询网络文明自愿者列表
+export function listVolunteer(query) {
+  return request({
+    url: '/zongzhi/volunteer/list',
+    method: 'get',
+    params: query
+  })
+}

src/components/MyTable/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <el-table :data="tableList" height="740">
+      <el-table-column
+        v-for="(item,key) in tableKey"
+        :key="key"
+        :prop="item.value"
+        :label="item.name"
+      ></el-table-column>
+    </el-table>
+    <!-- <div style="text-align: right; margin-top: 10px">
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="pageNum"
+        :limit.sync="pageSize"
+        @pagination="getList"
+      />
+    </div> -->
+  </div>
+
+</template>
+
+<script>
+export default {
+
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    pageNum: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    tableTitle: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 740
+    },
+    tableList: {
+      type: Array,
+      default: () => []
+    },
+    tableKey: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    getList() {
+      console.log(this.pageNum, this.pageSize)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/components/Pagination/index.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      popper-class="select_bottom"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+    <!-- :background="background" -->
+    <!-- :pager-count="pagerCount" -->
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50, 100]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: transparent;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/main.js

@@ -20,6 +20,10 @@ import App from './App'
 import store from './store'
 import router from './router'
 
+import MyTable from '@/components/MyTable'
+import Paginations from '@/components/Pagination'
+Vue.component('MyTable', MyTable)
+Vue.component('Paginations', Paginations)
 import $ from 'jquery'
 Vue.prototype.$ = $
 import drag from '@/directive/el-drag-dialog/index'

src/utils/api.js

@@ -0,0 +1,81 @@
+/*
+ * @Author: your name
+ * @Date: 2021-06-19 16:20:37
+ * @LastEditTime: 2022-09-08 13:16:08
+ * @LastEditors: 许宏杰
+ * @Description: In User Settings Edit
+ * @FilePath: \mudushow\src\api\request.js
+ */
+
+// import Vue from 'vue';
+import router from '../router'
+import axios from 'axios'
+import { Message } from 'element-ui'
+// 实例化axios
+const request = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API2,
+  timeout: 5000
+})
+// request--请求 拦截器
+request.interceptors.request.use(
+  (config) => {
+    debugger
+    // POST和PUT的请求参数转为formData
+    if (config.method === 'post' || config.method === 'put') {
+      if (config.url !== 'attachment/uploadimagefile') {
+        config.headers['Content-Type'] = 'multipart/form-data'
+        const params = config.data
+        const formData = new FormData()
+        Object.keys(params).forEach((key) => {
+          // 参数为null或者'null'时候不传入后台
+          if (params[key] && params[key] !== 'null') {
+            formData.append(key, params[key])
+          }
+        })
+        config.data = formData
+      }
+    }
+    return config
+  },
+  (error) => {
+    Promise.reject(error)
+  }
+)
+
+// response--响应 拦截器
+request.interceptors.response.use(
+  (response) => {
+    // 系统返回状态判断
+    if (response.data.code === 500) {
+      Message({
+        message: response.data.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return Promise.reject(response.data)
+    } else if (response.data.code !== 200) {
+      Message({
+        message: response.data.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
+    // 以下是正确的数据判断
+    return response.data
+  },
+  (error) => {
+    let { message } = error
+    if (message == 'Network Error') {
+      message = '后端接口连接异常'
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时'
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+export { request }

src/utils/request.js

@@ -12,7 +12,7 @@ import store from '@/store'
 import { getToken } from '@/utils/auth'
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: process.env.VUE_APP_BASE_API2, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 120 * 1000 // request timeout
 })

src/utils/scroll-to.js

@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

src/views/privateOrder/positiveEnergy/components/componentLeft.vue

@@ -15,21 +15,21 @@
               v-for="(item, idx) in superviseObject"
               :key="idx"
               :class="['section-network-item', item.className]"
-              @click="openDetailDialog(item.title)"
+              @click="openDetailDialog(item.title,item.type)"
               @mouseover="volunteerMouseoveer(item.title)"
               @mouseleave="volunteerLeave(item.title)"
             >
               <div v-if="item.title === '网络文明志愿者' && volunteerFlag">
                 <div
                   class="section-volunteer-one"
-                  @click="openDetailDialog('银龄生活')"
+                  @click="openDetailDialog('银龄生活',1)"
                 >
                   <span> </span>
                   <span>银龄生活</span>
                 </div>
                 <div
                   class="section-volunteer-two"
-                  @click="openDetailDialog('凌云燕')"
+                  @click="openDetailDialog('凌云燕',2)"
                 >
                   <span></span>
                   <span>凌云燕</span>
@@ -113,7 +113,20 @@
         :modal="false"
       >
         <div style="height: 765px">
-          <el-table :data="currentPageData" height="740">
+          <MyTable
+            :table-list="tableList"
+            :table-key="tableKey"
+          />
+          <div style="text-align: right; margin-top: 10px">
+            <paginations
+              v-show="total > 0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getAllList"
+            />
+          </div>
+          <!-- <el-table :data="currentPageData" height="740">
             <el-table-column
               label="序号"
               type="index"
@@ -135,20 +148,8 @@
               >
               </el-table-column>
             </template>
-          </el-table>
-          <div style="text-align: right; margin-top: 10px">
-            <el-pagination
-              :current-page="currentPage"
-              :page-sizes="[10, 20, 30, 50, 100]"
-              :page-size="pageSize"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total"
-              popper-class="select_bottom"
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-            >
-            </el-pagination>
-          </div>
+          </el-table> -->
+
         </div>
         <span slot="footer" class="dialog-footer">
           <span>
@@ -234,6 +235,7 @@
 
 <script>
 // import { getReviewArticle } from '@/api/common'
+import { listSafetyadmin, listCommentator, listPingtai, listNetSafetyZcUnit, listPrincipal, listVolunteer } from '@/api/zongzhi/st.js'
 import vueSeamlessScroll from 'vue-seamless-scroll'
 window.JSZip = require('jszip')
 export default {
@@ -242,9 +244,18 @@ export default {
   },
   data() {
     return {
+      currentTitle: '',
+      tableList: [],
+      tableKey: [],
+      // 总条数
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        type: undefined
+      },
       productList: [], // 所有数据
       totalPage: 1, // 统共页数，默认为1
-      total: 1, // 统共页数，默认为1
       currentPage: 1, // 当前页数 ，默认为1
       pageSize: 10, // 每页显示数量
       currentPageData: [], // 当前页显示内容
@@ -335,17 +346,20 @@ export default {
         {
           className: 'item1',
           url: require('@/assets/privateOrder/positiveEnergy/普通网评员.png'),
-          title: '普通网评员'
+          title: '普通网评员',
+          type: 3
         },
         {
           className: 'item2',
           url: require('@/assets/privateOrder/positiveEnergy/骨干网评员.png'),
-          title: '骨干网评员'
+          title: '骨干网评员',
+          type: 2
         },
         {
           className: 'item3',
           url: require('@/assets/privateOrder/positiveEnergy/核心网评员.png'),
-          title: '核心网评员'
+          title: '核心网评员',
+          type: 1
         },
         {
           className: 'item4',
@@ -413,22 +427,165 @@ export default {
     this.automaticChange()
   },
   methods: {
+    /** 重置 */
+    reset() {
+      this.tableList = []
+      this.tableKey = []
+      // 总条数
+      this.total = 0
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        type: undefined
+      }
+    },
     // 打开信息弹窗
-    openDetailDialog(title) {
-      if (title !== '网络文明志愿者') {
+    openDetailDialog(title, type) {
+      this.reset()
+      this.currentTitle = title
+      if (title === '网络安全官') {
+        this.getNetAdmin(title)
+      } else if (title === '普通网评员' || title === '骨干网评员' || title === '核心网评员') {
+        this.queryParams.type = type
+        this.getNetPj(title)
+      } else if (title === '网络大V') {
+        this.getNetPt(title)
+      } else if (title === '网络安全支持单位') {
+        this.getZcEnterprise(title)
+      } else if (title === '网络民情责任人') {
+        this.getFzr(title)
+      } else if (title === '银龄生活' || title === '凌云燕') {
+        this.queryParams.type = type
+        this.getZyz(title)
+      }
+      // if (title !== '网络文明志愿者') {
+    },
+    /** 分页查询各个表格 */
+    getAllList() {
+      if (this.currentTitle === '网络安全官') {
+        this.getNetAdmin(this.currentTitle)
+      } else if (this.currentTitle === '普通网评员' || this.currentTitle === '骨干网评员' || this.currentTitle === '核心网评员') {
+        this.getNetPj(this.currentTitle)
+      } else if (this.currentTitle === '网络大V') {
+        this.getNetPt(this.currentTitle)
+      } else if (this.currentTitle === '网络安全支持单位') {
+        this.getZcEnterprise(this.currentTitle)
+      } else if (this.currentTitle === '网络民情责任人') {
+        this.getFzr(this.currentTitle)
+      } else if (this.currentTitle === '银龄生活' || this.currentTitle === '凌云燕') {
+        this.getZyz(this.currentTitle)
+      }
+    },
+    /**
+     * 文明志愿者
+     */
+    getZyz(title) {
+      listVolunteer(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '姓名', value: 'name' },
+          { name: '年龄', value: 'age' },
+          { name: '活动内容', value: 'content' },
+          { name: '单位', value: 'unit' },
+          { name: '职务', value: 'duty' },
+          { name: '联系电话', value: 'phoneNum' }
+        ]
+        this.total = res.total
+        this.dialogTitle = title
         this.centerDialogVisible = true
+      })
+    },
+    /** 网络安全官 */
+    getNetAdmin(title) {
+      listSafetyadmin(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '单位', value: 'unit' },
+          { name: '第一负责人', value: 'firstPrincipal' },
+          { name: '职务', value: 'duty' },
+          { name: '直接负责人', value: 'directPrincipal' },
+          { name: '职务_1', value: 'duty1' },
+          { name: '负责科室', value: 'fuzeKeshi' },
+          { name: '网络安全官', value: 'networkAqg' },
+          { name: '职务_2', value: 'duty2' },
+          { name: '电话', value: 'tel' }
+        ]
+        this.total = res.total
         this.dialogTitle = title
-        const tableObject = require('./data.json')
-        this.tableData = tableObject[title]
-        this.tableHeader = []
-        for (const item in tableObject[title][0]) {
-          this.tableHeader.push(item)
-        }
-        this.total = this.tableData.length
-        this.totalPage = Math.ceil(this.tableData.length / this.pageSize)
-        this.totalPage = this.totalPage === 0 ? 1 : this.totalPage
-        this.setCurrentPageData()
-      }
+        this.centerDialogVisible = true
+      })
+    },
+    /** 网评员 */
+    getNetPj(title) {
+      listCommentator(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '姓名', value: 'name' },
+          { name: '性别', value: 'sex' },
+          { name: '年龄', value: 'age' },
+          { name: '名族', value: 'nationality' },
+          { name: '政治面貌', value: 'politicsStatus' },
+          { name: '单位', value: 'unit' },
+          { name: '移动电话', value: 'phoneNum' },
+          { name: '微信号', value: 'vxNum' }
+        ]
+        this.total = res.total
+        this.dialogTitle = title
+        this.centerDialogVisible = true
+      })
+    },
+    /**
+     * 网络大V
+     */
+    getNetPt(title) {
+      listPingtai(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '分类', value: 'type' },
+          { name: '账号名称', value: 'name' },
+          { name: '属性', value: 'props' },
+          { name: '简介', value: 'intro' },
+          { name: '粉丝数', value: 'fansNum' }
+        ]
+        this.total = res.total
+        this.dialogTitle = title
+        this.centerDialogVisible = true
+      })
+    },
+    /**
+     * 网络安全支持企业
+     */
+    getZcEnterprise(title) {
+      listNetSafetyZcUnit(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '支撑单位', value: 'name' },
+          { name: '联系人', value: 'linkMan' },
+          { name: '联系方式', value: 'phoneNum' }
+        ]
+        this.total = res.total
+        this.dialogTitle = title
+        this.centerDialogVisible = true
+      })
+    },
+    /**
+     * 民情负责人
+     */
+    getFzr(title) {
+      listPrincipal(this.queryParams).then(res => {
+        this.tableList = res.rows
+        this.tableKey = [
+          { name: '单位', value: 'unitName' },
+          { name: '民情负责人', value: 'fuzeMan' },
+          { name: '职务', value: 'duty' },
+          { name: '联系电话', value: 'tel' },
+          { name: '传真号码', value: 'faxNum' },
+          { name: '手机号码', value: 'phoneNum' }
+        ]
+        this.total = res.total
+        this.dialogTitle = title
+        this.centerDialogVisible = true
+      })
     },
     // 按钮切换
     employClick(flag) {
@@ -455,11 +612,11 @@ export default {
       this.automaticChange()
     },
     // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
-    setCurrentPageData() {
-      const begin = (this.currentPage - 1) * this.pageSize
-      const end = this.currentPage * this.pageSize
-      this.currentPageData = this.tableData.slice(begin, end)
-    },
+    // setCurrentPageData() {
+    //   const begin = (this.currentPage - 1) * this.pageSize
+    //   const end = this.currentPage * this.pageSize
+    //   this.currentPageData = this.tableData.slice(begin, end)
+    // },
     handleSizeChange(val) {
       this.pageSize = val
       this.setCurrentPageData()