1.大屏和特审一健下载

src/components/layouts/UserLayout.vue

@@ -16,7 +16,7 @@
               <img style="width: 150px;height: 150px;border-radius:50%" src="../../../public/logo.png"/>
             </div>
             <div class="aui-image-text" style="top: 44%;left: 26%;width: 100%;position: absolute;">
-              <div style="color: white;font-weight: 600;font-size: 24px;}">共建反诈防线，守护财产安全</div>
+              <div style="color: white;font-weight: 600;font-size: 24px;}">高效稽核，入网管控</div>
             </div>
           </div>
 
@@ -25,7 +25,7 @@
               <div class="header" style="">
                 <a href="/">
                   <!--            <img src="~@/assets/telecom.png" class="logo" alt="logo">-->
-                  <span class="title" style="color: #1890FF">智慧运营系统</span>
+                  <span class="title" style="color: #1890FF">业务风险管控智能化系统</span>
                 </a>
               </div>
               <div class="desc">

src/components/layouts/index.js

@@ -4,5 +4,6 @@ import BasicLayout from '@/components/layouts/BasicLayout'
 import RouteView from '@/components/layouts/RouteView'
 import PageView from '@/components/layouts/PageView'
 import TabLayout from '@/components/layouts/TabLayout'
+import screen from '@/views/largeScreen/screen'
 
-export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout }
+export { UserLayout, BasicLayout, BlankLayout, RouteView, PageView, TabLayout,screen }

src/config/router.config.js

@@ -1,5 +1,4 @@
-import { UserLayout, TabLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
-
+import { UserLayout, TabLayout, RouteView, BlankLayout, PageView,screen } from '@/components/layouts'
 /**
  * 走菜单，走权限控制
  * @type {[null,null]}
@@ -284,6 +283,10 @@ export const asyncRouterMap = [
       // }
     ]
   },
+  {
+    path: '/largeScreen/screen',
+    component: () => import('@/views/largeScreen/screen')
+  },
   {
     path: '*', redirect: '/404', hidden: true
   }
@@ -294,6 +297,21 @@ export const asyncRouterMap = [
  * @type { *[] }
  */
 export const constantRouterMap = [
+
+  {
+    path: '/largeScreen',
+    component: screen,
+    redirect: '/largeScreen/screen',
+    hidden: true,
+    children: [
+      {
+        path: 'screen',
+        name: 'screen',
+        component: () => import(/* webpackChunkName: "user" */ '@/views/largeScreen/screen')
+      }
+    ],
+  },
+
   {
     path: '/user',
     component: UserLayout,

src/main.js

@@ -6,14 +6,14 @@ import App from './App.vue'
 import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
-import { VueAxios } from "@/utils/request"
-
+import {VueAxios} from "@/utils/request"
 
 
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')
 
-import Antd, { version } from 'ant-design-vue'
+import Antd, {version} from 'ant-design-vue'
+
 console.log('ant-design-vue version:', version)
 
 import Viser from 'viser-vue'
@@ -50,7 +50,8 @@ import VueAreaLinkage from 'vue-area-linkage'
 import '@/components/jeecg/JVxeTable/install'
 import '@/components/JVxeCells/install'
 //表单验证
-import { rules } from '@/utils/rules'
+import {rules} from '@/utils/rules'
+
 Vue.prototype.rules = rules
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)
@@ -65,17 +66,27 @@ Vue.use(vueBus);
 Vue.use(JeecgComponents);
 Vue.use(VueAreaLinkage);
 import VueAwesomeSwiper from 'vue-awesome-swiper'
+
 Vue.use(VueAwesomeSwiper)
 import '../node_modules/swiper/dist/css/swiper.css'
-
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+// 挂载在Vue上
+Vue.use(dataV)
+import { borderBox1 } from '@jiaminghi/data-view'
+Vue.use(borderBox1)
+// 引入百度地图
+import BaiduMap from 'vue-baidu-map'
+Vue.use(BaiduMap,{as:"9Bi4kFUG0NCv7xMuPOdcVQcv6GjAoGLG"});
 SSO.init(() => {
   main()
 })
+
 function main() {
   new Vue({
     router,
     store,
-    mounted () {
+    mounted() {
       store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
       store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
       store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
@@ -86,7 +97,7 @@ function main() {
       store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
       store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
       store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
-      store.commit('SET_MULTI_PAGE',Vue.ls.get(DEFAULT_MULTI_PAGE,config.multipage))
+      store.commit('SET_MULTI_PAGE', Vue.ls.get(DEFAULT_MULTI_PAGE, config.multipage))
     },
     render: h => h(App)
   }).$mount('#app')

src/views/largeScreen/screen.vue

@@ -0,0 +1,922 @@
+<template>
+  <div class="center">
+
+    <!--    <dv-full-screen-container>
+          <dv-border-box-11 title="业务自查可视化大屏"></dv-border-box-11>
+        </dv-full-screen-container>-->
+    <dv-full-screen-container>
+      <dv-border-box-11 title="业务自查可视化大屏">
+        <baidu-map
+          :ak="ak"
+          styleId="styleId"
+          :center="center"
+          :zoom="zoom"
+          @ready="handler"
+          class="baidu-map">
+<!--          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
+          <bm-marker v-for="item in businessPoints" :position="item.point"
+                     :icon="{url:require('../../assets/screen_buss.png'),size: {width: 50, height: 50}}"
+                     :dragging="false" animation="BMAP_ANIMATION_BOUNCE"
+                     @click="infoWindowOpen(item.point)">
+            <bm-label :content="item.name"
+                      :labelStyle="{color: '#fff', fontSize : '11px',background:'',border:0}"
+                      :offset="{width: -12, height: 25}"></bm-label>
+          </bm-marker>
+
+          <bm-info-window :position="infoWindowPosition" :show="bmInfoWindow" :offset="{width: -12, height: -25}"
+                          @close="infoWindowClose" @open="infoWindowOpen" :title="'端口,使用率，用户详情'">
+
+            <div class="info-window">
+              <div>
+                <div style="cursor: pointer; color: #fff;">营业厅</div>
+                <div style="margin-top:5px">
+                  <span style="color: red">测试1}</span>
+                  <span style="color: #67c23a">测试2</span>
+                  <span>测试三</span>
+                  <span>测试四</span>
+                </div>
+
+              </div>
+              <div class="address">测试五</div>
+            </div>
+
+          </bm-info-window>
+          <div class="left">
+            <div class="one">
+              <dv-border-box-13>
+                <div style="position: relative;
+    top: -35%;">
+                  <dv-decoration-11 style="width:150px;height:40px;color: white;float: left">端口带宽/使用率：
+                  </dv-decoration-11>
+                  <dv-percent-pond :waitTime="1000" :config="{value:92}" style="width:100px;height:40px;left: 20px"/>
+                </div>
+              </dv-border-box-13>
+            </div>
+            <div class="two">
+              <dv-border-box-10 :color="['#5378a2', '#FFF']">
+
+                <div style="position: relative;
+    top: -12%;">
+                  <span style="    color: white;
+    position: relative;
+    left: 20%;">营业厅/社区续约/保有率排名</span>
+                  <dv-decoration-5 style="width:300px;height:20px;" />
+                  <dv-scroll-ranking-board :config="two" style="width:320px;height:300px"/>
+                </div>
+              </dv-border-box-10>
+            </div>
+<!--            左三暂时不用-->
+<!--            <div class="three">
+              <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
+            </div>-->
+          </div>
+          <div class="right" style="top: 2%">
+            <div class="fore">
+              <dv-border-box-13>
+                <div style="position: relative;top: -18%">
+                  <dv-decoration-11 style="width:330px;height:40px;color: white">宽带用户统计</dv-decoration-11>
+<!--                  <dv-scroll-board :config="{header: ['营业厅', '宽带用户数', '未续约用户数','未续约用户数','流失用户','宽带保有率'],
+  data: [
+    ['行1列1', '行1列2', '行1列3','行1列1', '行1列2', '行1列2'],
+    ['行2列1', '行2列2', '行2列3','行1列1', '行1列2', '行1列2'],
+    ['行3列1', '行3列2', '行3列3','行1列1', '行1列2', '行1列2'],
+    ['行4列1', '行4列2', '行4列3','行1列1', '行1列2', '行1列2'],
+    ['行5列1', '行5列2', '行5列3','行1列1', '行1列2', '行1列2'],
+    ['行6列1', '行6列2', '行6列3','行1列1', '行1列2', '行1列2'],
+    ['行7列1', '行7列2', '行7列3','行1列1', '行1列2', '行1列2'],
+    ['行8列1', '行8列2', '行8列3','行1列1', '行1列2', '行1列2'],
+    ['行9列1', '行9列2', '行9列3','行1列1', '行1列2', '行1列2'],
+    ['行10列1', '行10列2', '行10列3','行1列1', '行1列2']
+  ]}" style="width:330px;height:220px" />-->
+                  <dv-capsule-chart :config="{data: [
+    {
+      name: '宽带用户数',
+      value: 167
+    },
+    {
+      name: '到期宽带数',
+      value: 23
+    },
+    {
+      name: '未续约用户数',
+      value: 67
+    },
+    {
+      name: '流失用户',
+      value: 123
+    },
+    {
+      name: '宽带保有率',
+      value: 55
+    },
+  ],colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
+  unit: '',
+  showValue: true}" style="width:330px;height:280px" />
+                </div>
+
+              </dv-border-box-13>
+            </div>
+            <div class="four">
+              <dv-border-box-10 :color="['#5378a2', '#FFF']">
+                <div style="position: relative;top: -38%">
+                  <dv-decoration-7 style="width:330px;height:30px;color: white">友商进驻情况</dv-decoration-7>
+                                    <dv-scroll-board :config="four" style="width:330px;height:220px" />
+
+                </div>
+              </dv-border-box-10>
+            </div>
+<!--            <div class="six">
+              <dv-border-box-10 :color="['#5378a2', '#FFF']"></dv-border-box-10>
+            </div>-->
+          </div>
+          <!-- 监管时间 -->
+          <div class="monitor">
+            <div class="txt">北区营业厅/楼宇/楼宇/端口</div>
+            <div class="reader">
+              <div>
+                <i>13</i
+                >
+              </div>
+              <div>
+                <i>{{ hour }}</i
+                >
+              </div>
+              <div>
+                <i>{{ minute }}</i
+                >
+              </div>
+              <div>
+                <i>{{ second }}</i
+                >
+              </div>
+            </div>
+          </div>
+        </baidu-map>
+        <!-- 当前日期+当前星期 -->
+        <div class="datae">
+          {{ nowDate + ' ' + nowWeek }}
+        </div>
+        <!-- 当前时间 -->
+        <div class="timer">
+          {{ nowTime }}
+        </div>
+      </dv-border-box-11>
+    </dv-full-screen-container>
+
+
+  </div>
+
+</template>
+
+<script>
+import BaiduMap from "vue-baidu-map/components/map/Map.vue";
+
+export default {
+  name: "screen",
+  components: {
+    BaiduMap,
+  },
+  data() {
+    return {
+      // 百度SDK
+      ak: "9Bi4kFUG0NCv7xMuPOdcVQcv6GjAoGLG",
+      map: "",
+      bmInfoWindow: false,
+      center: {lng: 116.352861, lat: 39.950822},
+      zoom: 14,
+      // 营业厅位置
+      businessPoints: [
+        {
+          name: "西直门外营业厅",
+          point: {
+            lat: 39.950822,
+            lng: 116.352861
+          }
+        },
+        {
+          name: "新街口营业厅",
+          point: {
+            lat: 39.946241,
+            lng: 116.374642
+          }
+        },
+        {
+          name: "杏石口营业厅",
+          point: {
+            lat: 39.961728,
+            lng: 116.229936
+          }
+        },
+        {
+          name: "长春桥营业厅",
+          point: {
+            lat: 39.966032,
+            lng: 116.295509,
+          }
+        },
+        {
+          name: "北四环西路营业厅",
+          point: {
+            lat: 39.991807,
+            lng: 116.323516,
+          }
+        },
+        {
+          name: "官园营业厅",
+          point: {
+            lat: 39.938488,
+            lng: 116.354962,
+          }
+        }, {
+          name: "海淀大街营业厅",
+          point: {
+            lat: 39.98878,
+            lng: 116.314469,
+          }
+        },
+        {
+          name: "航天桥营业厅",
+          point: {
+            lat: 39.932293,
+            lng: 116.317159,
+          }
+        },
+        {
+          name: "六道口营业厅",
+          point: {
+            lat: 40.006813,
+            lng: 116.358282,
+          }
+        },
+        {
+          name: "四通桥营业厅",
+          point: {
+            lat: 39.978093,
+            lng: 116.325095,
+          }
+        },
+        {
+          name: "田村营业厅",
+          point: {
+            lat: 39.933237,
+            lng: 116.270681,
+          }
+        },
+        {
+          name: "五道口营业厅",
+          point: {
+            lat: 39.99825,
+            lng: 116.341419,
+          }
+        },
+        {
+          name: "西单营业厅",
+          point: {
+            lat: 39.921168,
+            lng: 116.379745,
+          }
+        }
+      ],
+      // 营业厅弹窗位置
+      infoWindowPosition: "",
+      // 动画开光
+      loadinge: false,
+      nowDate: '', // 当前日期
+      nowTime: '', // 当前时间
+      nowWeek: '', // 当前星期
+      day: '0', //当前天数
+      hour: '0', //当前小时
+      minute: '0', //当前分钟
+      second: '0', //当前秒数
+      dialogTableVisible: false,
+      // 后期删
+      two:{ data: [
+          {
+            name: '西直门',
+            value: 55
+          },
+          {
+            name: '五道口',
+            value: 96
+          },
+          {
+            name: '六道口',
+            value: 78
+          },
+          {
+            name: '得胜',
+            value: 66
+          },
+          {
+            name: '官园',
+            value: 80
+          },
+          {
+            name: '西单',
+            value: 45
+          },
+          {
+            name: '航天桥',
+            value: 29
+          }
+        ]},
+      four:{header: ['友商', '宽带用户数', '宽带保有率'],
+        data: [
+          ['移动-西单', '201', '91%'],
+          ['联通-西直门', '189', '89%'],
+          ['移动-清河', '231', '87%'],
+          ['联通-五道口', '124', '93%'],
+          ['广电-清河', '168', '86%'],
+          ['广电-西单', '177', '88%'],
+          ['广电-五道口', '181', '94%']
+        ]},
+
+    }
+  },
+
+  // 销毁定时器
+  beforeDestroy() {
+    clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
+    clearInterval(this.monitortime)
+  },
+
+  mounted() {
+    this.currentTime()
+  },
+  methods: {
+    // 每0.5秒执行一次
+    currentTime() {
+      setInterval(this.getDate, 500)
+      setInterval(this.monitortime, 1000)
+    },
+    /**加载地图*/
+    handler({BMap, map}) {
+      map.enableScrollWheelZoom() // 启用滚轮放大缩小，默认禁用
+      map.enableContinuousZoom() // 可拖拽
+      // 个性化底图
+      map.setMapStyleV2({
+        styleId: "9865dd52826f7f96c72e716bf0948cb0"
+      });
+      this.map = map;
+      // 加载营业厅
+      //this.addPoints();
+
+    },
+    getDate() {
+      var _this = this
+      //获取年
+      let yy = new Date().getFullYear()
+      //获取月,注意时间是0-11，0代表1月份
+      let mm = new Date().getMonth() + 1
+      // 获取具体哪一天
+      let dd = new Date().getDate()
+      // 获取星期 0-6 0是星期天
+      let week = new Date().getDay()
+      //获取小时
+      let hh = new Date().getHours()
+      //获取分钟
+      let ms =
+        new Date().getSeconds() < 10
+          ? '0' + new Date().getSeconds()
+          : new Date().getSeconds()
+      // 获取秒钟
+      let mf =
+        new Date().getMinutes() < 10
+          ? '0' + new Date().getMinutes()
+          : new Date().getMinutes()
+      // 获取星期
+      if (week == 1) {
+        this.nowWeek = '星期一'
+      } else if (week == 2) {
+        this.nowWeek = '星期二'
+      } else if (week == 3) {
+        this.nowWeek = '星期三'
+      } else if (week == 4) {
+        this.nowWeek = '星期四'
+      } else if (week == 5) {
+        this.nowWeek = '星期五'
+      } else if (week == 6) {
+        this.nowWeek = '星期六'
+      } else {
+        this.nowWeek = '星期日'
+      }
+      _this.nowTime = hh + ':' + mf + ':' + ms
+      _this.nowDate = yy + '/' + mm + '/' + dd
+    },
+    monitortime() {
+      var _that = this
+      // 当前时间
+      let x = new Date().getTime()
+      //   // 点击登录存的时间
+      //   //   let y = getTokenTime()
+      //   // console.log('登录时间戳', y)
+      //   // 登录之后的监测时间
+      //   let z = x - y
+      //   // console.log('监测时间', z)
+      _that.day = parseInt(x / 1000 / 60 / 60 / 24) //日
+      _that.hour = parseInt((x / 1000 / 60 / 60) % 24) //时
+      _that.minute = parseInt((x / 1000 / 60) % 60) //分
+      _that.second = parseInt((x / 1000) % 60) //秒
+    },
+    /**加载营业厅*/
+    addPoints() {
+      const points = [];
+      for (var i = 0; i < 1000; i++) {
+        const position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
+        points.push(position)
+      }
+      this.businessPoints = points
+    },
+    /**营业厅点击事件*/
+    infoWindowClose() {
+      this.bmInfoWindow = false;
+    },
+    infoWindowOpen(point) {
+      if (point.lat) {
+        this.infoWindowPosition = point
+      }
+      console.log(this.point)
+
+      this.bmInfoWindow = false;
+      this.bmInfoWindow = true;
+    },
+  }
+}
+</script>
+<style scoped>
+.center {
+  background-color: rgb(9, 18, 32);
+  width: 100%;
+  height: 100%;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content {
+  padding: 62px 9px 10px;
+  overflow: hidden;
+  border-radius: 55px;
+  position: relative;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .load {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .load .loading-tip {
+  margin-top: 15px;
+  font-size: 18px;
+  color: #fff;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .shade {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box !important;
+  margin: 60px 8px 10px;
+  background-color: rgb(9, 18, 32);
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+  display: flex;
+  position: relative;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .anchorBL {
+  display: none !important;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left {
+  width: 350px;
+  height: 100%;
+  position: absolute;
+  top: 2%;
+  left: 2%;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .one {
+  height: 130px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .two {
+/*  height: 250px;*/
+  height: 420px;
+  background-color: rgb(2, 52, 126);
+  border-radius: 3px;
+  margin: 40px 0 40px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .left .three {
+  height: 250px;
+  background-color: rgb(2, 52, 126);
+  border-radius: 3px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right {
+  width: 350px;
+  height: 100%;
+  position: absolute;
+  top: 100px;
+  right: 2%;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .fore {
+ /* height: 130px;*/
+  height: 330px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .four {
+  height: 250px;
+  background-color: rgb(2, 52, 126);
+  border-radius: 3px;
+  margin: 40px 0 40px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .right .four {
+  height: 230px;
+  background-color: rgb(2, 52, 126);
+  border-radius: 3px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor {
+  width: 320px;
+  height: 95px;
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .txt {
+/*  width: 135px;*/
+  width: 335px;
+  color: #fff;
+  font-size: 22px;
+  margin: 2px auto;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader {
+  color: #afafaf;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader > div {
+  display: flex;
+  align-items: baseline;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader > div > i {
+  font-style: normal;
+  display: block;
+  width: 50px;
+  height: 50px;
+  box-sizing: border-box;
+  font-size: 20px;
+  color: #fff;
+  margin-right: 8px;
+  background-color: rgb(5, 47, 115);
+  border: 3px solid rgb(6, 116, 190);
+  border-radius: 5px;
+  line-height: 44px;
+  text-align: center;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .baidu-map .monitor .reader .first-child > i {
+  width: 80px;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .datae {
+  font-size: 18px;
+  position: absolute;
+  top: 7px;
+  left: 200px;
+  color: #fff;
+}
+
+::v-deep #dv-full-screen-container .dv-border-box-11 .border-box-content .timer {
+  font-size: 18px;
+  position: absolute;
+  top: 7px;
+  right: 200px;
+  color: #fff;
+}
+
+/*地图标题*/
+.BMap_bubble_title {
+  color:white;
+  font-size:13px;
+  font-weight:bold;
+  text-align:left;
+  padding-left:5px;
+  padding-top:5px;
+  border-bottom:1px solid gray;
+  background-color:#0066b3;
+}
+/* 消息内容 */
+.BMap_bubble_content {
+  background-color:white;
+  padding-left:5px;
+  padding-top:5px;
+  padding-bottom:10px;
+}
+/* 内容 */
+.BMap_pop div:nth-child(9) {
+  top:35px !important;
+  border-radius:7px;
+}
+/* 左上角删除按键 */
+.BMap_pop img {
+  top:43px !important;
+  left:215px !important;
+}
+.BMap_top {
+  display:none;
+}
+.BMap_bottom {
+  display:none;
+}
+.BMap_center {
+  display:none;
+}
+/* 隐藏边角 */
+.BMap_pop div:nth-child(1) div {
+  display:none;
+}
+.BMap_pop div:nth-child(3) {
+  display:none;
+}
+.BMap_pop div:nth-child(7) {
+  display:none;
+}
+
+
+
+</style>
+
+<!--<style lang="scss" scoped>
+.center {
+  background-color: rgb(9, 18, 32);
+
+  ::v-deep #dv-full-screen-container {
+    .dv-border-box-11 .border-box-content {
+      // background-color: skyblue;
+      padding: 62px 9px 10px;
+      overflow: hidden;
+      border-radius: 55px;
+      position: relative;
+
+      .load {
+        position: absolute;
+        top: 40%;
+        left: 50%;
+        // margin-left: -37px;
+        transform: translateX(-50%);
+        z-index: 3;
+
+        .loading-tip {
+          margin-top: 15px;
+          font-size: 18px;
+          color: #fff;
+        }
+      }
+
+      .shade {
+        width: 100%;
+        // width: 100%; 取100% margin 右边不会生效 要改成width=99%才有效果
+        height: 100%;
+        box-sizing: border-box !important;
+        // background-color: skyblue;
+        margin: 60px 8px 10px;
+        background-color: rgb(9, 18, 32);
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+      }
+
+      // 地图
+      .baidu-map {
+        width: 97%;
+        height: 86%;
+        top: 10%;
+        left: 2%;
+        border-radius: 5px;
+        // z-index: 999;
+        display: flex;
+        // justify-content: space-between;
+        // 去除百度地图的图标
+        position: relative;
+
+        .anchorBL {
+          display: none !important;
+        }
+
+        .left {
+          width: 350px;
+          height: 100%;
+          position: absolute;
+          top: 100px;
+          left: 2%;
+          // background-color: skyblue;
+          // margin-left: 50px;
+          .one {
+            height: 130px;
+            // background-color: skyblue;
+          }
+
+          .two {
+            height: 250px;
+            background-color: rgb(2, 52, 126);
+            border-radius: 3px;
+            margin: 40px 0 40px;
+          }
+
+          .three {
+            height: 250px;
+            background-color: rgb(2, 52, 126);
+            border-radius: 3px;
+          }
+        }
+
+        .right {
+          width: 350px;
+          height: 100%;
+          position: absolute;
+          top: 100px;
+          right: 2%;
+          // background-color: skyblue;
+          // margin-right: 50px;
+          .fore {
+            height: 130px;
+            // background-color: skyblue;
+          }
+
+          .four {
+            height: 250px;
+            background-color: rgb(2, 52, 126);
+            border-radius: 3px;
+            margin: 40px 0 40px;
+          }
+
+          .six {
+            height: 250px;
+            background-color: rgb(2, 52, 126);
+            border-radius: 3px;
+          }
+        }
+      }
+
+      .monitor {
+        width: 320px;
+        height: 95px;
+        // background-color: skyblue;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .txt {
+          width: 135px;
+          color: #fff;
+          font-size: 22px;
+          margin: 2px auto;
+
+        };
+
+        .reader {
+          color: #afafaf;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 12px;
+
+          div {
+            display: flex;
+            align-items: baseline;
+
+            i {
+              font-style: normal;
+              display: block;
+              width: 50px;
+              height: 50px;
+              box-sizing: border-box;
+              font-size: 20px;
+              color: #fff;
+              margin-right: 8px;
+              background-color: rgb(5, 47, 115);
+              border: 3px solid rgb(6, 116, 190);
+              border-radius: 5px;
+              line-height: 44px;
+              text-align: center;
+            }
+
+            &:first-child {
+              i {
+                width: 80px;
+              }
+            }
+          }
+        }
+      }
+      // 左上角日期星期
+      .datae {
+        // background-color: skyblue;
+        font-size: 18px;
+        position: absolute;
+        top: 7px;
+        left: 200px;
+        color: #fff;
+      }
+      // 右上角的当前时间
+      .timer {
+        // background-color: skyblue;
+        font-size: 18px;
+        position: absolute;
+        top: 7px;
+        right: 200px;
+        color: #fff;
+      }
+    }
+  }
+}
+
+
+</style>-->
+
+
+<style lang="less" scoped>
+.center {
+  .baidu-map {
+    // position: relative;
+    // z-index:1;
+    .window {
+      margin: 10px 10px;
+      .container {
+        color: skyblue;
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .input {
+        display: flex;
+        width: 300px;
+        .el-input {
+          .el-input__inner {
+            height: 20px;
+            line-height: 20px;
+            width: 95%;
+            color: skyblue;
+            font-weight: 500;
+            background-color: rgba(198, 233, 247);
+          }
+        }
+        span {
+          width: 100px;
+          color: skyblue;
+          font-weight: 700;
+          font-size: 14px;
+          height: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+
+    //信息窗口样式
+    .BMap_pop img,
+    .BMap_top,
+    .BMap_center,
+    .BMap_bottom,
+    .BMap_pop > div {
+      &:not(:nth-child(9)) {
+        display: none;
+      }
+    }
+
+    .BMap_pop div:nth-child(9) {
+      top: 30px !important;
+    }
+    .BMap_bubble_content {
+      // border-top: 3px solid #377abd;
+      border-top: 3px solid rgba(44, 55, 47, 0.3);
+      // border-bottom: 3px solid #377abd;
+      border-bottom: 3px solid rgba(44, 55, 47, 0.3);
+      border-radius: 8px;
+      // background-color: rgba(36, 105, 137, 0.8);
+      background-color: rgba(44, 55, 47, 0.4);
+      overflow: hidden;
+      color: #ffffff;
+      padding: 8px 5px;
+    }
+  }
+}
+</style>
+、

src/views/specialApply/modules/TaskCheckList.vue

@@ -101,8 +101,8 @@
               <a-divider type="vertical"/>
             </span>
 
-            <span v-has="'special:task:check:list:submit'" v-if="record.checkState == 1 || record.checkState == 4">
-              <a @click="handSubmit(record)">提交</a>
+            <span v-has="'special:task:check:list:download:all'">
+              <a @click="getFileUrls(record)">下载资料</a>
               <a-divider type="vertical"/>
             </span>
 
@@ -121,6 +121,11 @@
               <a-divider type="vertical"/>
             </span>
 
+            <span v-has="'special:task:check:list:history'" v-if="record.checkState >= 4">
+              <a @click="showCheckLog(record)">下载资料</a>
+              <a-divider type="vertical"/>
+            </span>
+
             <span v-has="'special:task:check:list:notice'"
                   v-if="record.checkState != 2 && record.checkState != 3 && record.checkState != 5">
               <a @click="noticeDeal(record)">催办</a>
@@ -179,6 +184,8 @@
 import {postAction, getAction, httpAction, deleteAction} from '@api/manage'
 import '@/assets/less/TableExpand.less'
 import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import FileSaver from 'file-saver'
+import JSZip from "jszip";
 
 export default {
   name: 'TaskCheckList',
@@ -339,7 +346,8 @@ export default {
         editCheck: "/smsCheck/customerInfo/edit/check/state",
         dataDelete: "/smsCheck/customerData/clear",
         exportXlsUrl: "/special/examination/exportXls",
-        deleteBatch:"/smsCheck/customerInfo/deleteBatch"
+        deleteBatch:"/smsCheck/customerInfo/deleteBatch",
+        queryUrlById:"/smsCheck/customerInfo/queryUrlById"
       },
       autoSearch: false,
       /* 分页参数 */
@@ -626,6 +634,73 @@ export default {
       }
       return value
     },
+    // 一键下载资料
+    getFileUrls(data) {
+      let url = this.url.queryUrlById;
+      let params = {
+        id: data.id
+      }
+      let that = this;
+      getAction(url, params).then(res => {
+        if (res.success) {
+          that.fileInfoList = res.result
+          this.filesToRar(this.fileInfoList, '客户:'+data.customerName+'资料下载');
+        }else {
+          this.$message.warning('该客户没有资料')
+        }
+      })
+    },
+    /**文件打包* arrImages:文件list:[{fileUrl:文件url,renameFileName:文件名}]* filename 压缩包名* */
+    filesToRar(arrImages, filename) {
+      let _this = this;
+      let zip = new JSZip();
+      let cache = {};
+      let promises = [];
+      _this.title = '正在加载压缩文件';
+      // const loading = this.$loading({lock: true,text: '正在加载压缩文件',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});
+      for (let item of arrImages) {
+        for (let url of item.fileStaticUrl) {
+
+          console.log("item",item)
+          // 下载文件, 并存成ArrayBuffer对象
+          const promise = this.getImgArrayBuffer(url.fileStaticUrl).then(data => {
+            var testZip = zip.folder(item.fileId);
+            // 获取文件名
+            const file_name = url.fileName
+            // 逐个添加文件
+            testZip.file(file_name, data, { binary: true })
+            //testZip.file(file_name,item.fileId)
+            cache[file_name] = data})
+          promises.push(promise);
+        }
+      }
+      Promise.all(promises)
+        // 生成二进制流
+        .then(() => {zip.generateAsync({ type: "blob" })
+          .then(content => {_this.title = '正在压缩';
+            // 利用file-saver保存文件  自定义文件名
+            FileSaver.saveAs(content, filename);
+            _this.title = '压缩完成';}
+          );
+        }).catch(res=>{
+        _this.$message.error('文件压缩失败');
+      });
+    },
+    getImgArrayBuffer(url) {
+      return new Promise((resolve, reject) => {
+        //通过请求获取文件blob格式
+        let xmlhttp = new XMLHttpRequest();
+        xmlhttp.open("GET", url, true);
+        xmlhttp.responseType = "blob";
+        xmlhttp.onload = function () {
+          if (this.status == 200) {
+            resolve(this.response);
+          } else {
+            reject(this.status);
+          }};
+        xmlhttp.send();
+      });
+    },
   }
 }
 </script>

src/views/system/expireDateConfig.vue

@@ -67,6 +67,8 @@
       </a-card>
     </a-col>
 
+    <expire-modal></expire-modal>
+
   </a-row>
 </template>
 <script>