Browse Source

样式调整,部分页面加滚动效果

zhangshuling 1 year ago
parent
commit
4eaccb48d7

+ 1 - 1
xzl-admin/src/main/java/com/xzl/web/controller/DataGovernanceController.java

@@ -125,7 +125,7 @@ public class DataGovernanceController {
 
     @RequestMapping(value = "/loadERImage")
     public void loadFile(@RequestParam(value = "databaseName") String databaseName, HttpServletResponse servletResponse) throws Exception{
-        File image = new File(ERImagePath+databaseName+".jpg");
+        File image = new File(ERImagePath, databaseName+".jpg");
         InputStream inputStream = null;
         ServletOutputStream outputStream = null;
         try {

+ 4 - 2
xzl-admin/src/main/resources/application-prod.yml

@@ -62,5 +62,7 @@ spring:
                 wall:
                     config:
                         multi-statement-allow: true
-pythonFilePath: /usr/local/python/
-pythonPath: /usr/bin/python3
+pythonFilePath: /usr/local/python
+pythonPath: /usr/bin/python3
+sqlFilePath: /usr/local/sql
+ERImagePath: /usr/local/ERImage

+ 1 - 3
xzl-system/src/main/resources/mapper/system/BussIllegalCreditCustomerMapper.xml

@@ -118,10 +118,8 @@
         update buss_illegal_credit_customer set del_flag = '2' where del_flag = '0'
     </update>
 
-
-    <!-- temp_interface_fn_sell 为interface_fn_sell 的临时表,每次导入违规户的时候,把这几个零售户的数据导入进去-->
     <select id="queryNearOrderList" parameterType="map" resultType="map">
-        select sell_date, count(1) amount , sum(money_order) money_total from temp_interface_fn_sell where cust_id = #{custId}
+        select sell_date, count(1) amount , sum(money_order) money_total from interface_fn_sell where cust_id = #{custId}
         group by sell_date
         order by sell_date desc limit #{limit}
     </select>

+ 23 - 3
xzl-ui/src/views/monitor/map/customerPositionBmap.vue

@@ -42,12 +42,12 @@
     <div class="scroll-box-Position">
       <h3>区域许可证办理情况</h3>
       <div class="scroll-item-Position">
-        <vue-seamless-scroll :data="areaOptions" class="warp">
+        <vue-seamless-scroll :data="areaOptions" class="warp" :class-option="defaultOption">
           <div v-for="c in areaOptions" class="customer-info">
             <table align="center" width="98%" cellpadding="0">
               <tr>
-                <td width="35%">区域名:</td>
-                <td width="65%">{{c.name}}</td>
+                <td width="50%">区域名:</td>
+                <td width="50%">{{c.name}}</td>
               </tr>
               <tr>
                 <td>状态:</td>
@@ -96,6 +96,20 @@ export default {
   components: {
     vueSeamlessScroll
   },
+  computed: {
+    defaultOption () {
+      return {
+        step: 0.2, // 数值越大速度滚动越快
+        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() {
     setTimeout(() => {
       this.initMap()
@@ -296,4 +310,10 @@ export default {
   height: 100px !important;
   overflow: hidden;
 }
+
+.customer-info {
+  font-size: 12px;
+  margin-top: 20px;
+  padding: 2px;
+}
 </style>

+ 8 - 5
xzl-ui/src/views/monitor/map/largeScreenShow.vue

@@ -36,7 +36,7 @@
 
     <div class="scroll-box2">
       <h3>违规零售户列表</h3>
-      <div class="scroll-item">
+      <div class="scroll-item2">
         <vue-seamless-scroll :data="list" class="warp">
           <div v-for="c in list" class="customer-info">
             <table align="center" width="98%">
@@ -140,9 +140,12 @@
       vueSeamlessScroll
     },
     created() {
-      setTimeout(() => {
-        this.initMap()
-      }, 100)
+      // setTimeout(() => {
+      //   this.initMap()
+      // }, 100)
+    },
+    mounted() {
+      this.initMap();
     },
     methods: {
       initMap() {
@@ -334,7 +337,7 @@
     line-height: 40px;
   }
 
-  .scroll-item {
+  .scroll-item2 {
     height: 480px;
     overflow: hidden;
   }

+ 222 - 120
xzl-ui/src/views/monitor/map/warn2.vue

@@ -2,143 +2,245 @@
   <div>
     <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.9+'px;'">
     </div>
+
+
+    <div class="scroll-box3">
+      <h3>动态展示</h3>
+      <div class="scroll-item3">
+        <vue-seamless-scroll :data="list" class="warp">
+          <table align="center" width="98%" class="table-info3">
+            <tr>
+              <td width="20%" height="32">市场部</td>
+              <td width="15%">销售数量</td>
+              <td width="15%">销售金额</td>
+              <td width="25%">证件已办数量</td>
+              <td width="25%">证件入网数量</td>
+            </tr>
+
+            <tr v-for="c in list">
+              <td height="32">{{c.marketName}}</td>
+              <td align="center">{{c.amount}}</td>
+              <td align="center">{{c.total}}</td>
+              <td align="center">{{c.n1}}</td>
+              <td align="center">{{c.n2}}</td>
+            </tr>
+          </table>
+        </vue-seamless-scroll>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import request from '@/utils/request'
+  import request from '@/utils/request'
+  import vueSeamlessScroll from 'vue-seamless-scroll'
 
-export default {
-  data() {
-    return {
-      address: "",
-      queryParams: {
-        address: {},
-        distance: "50"
-      },
-      placeInfo: [
-        {value: "", label: ""}
-      ],
-      distanceOptions: [
-        {value: "50", label: "50米"},
-        {value: "100", label: "100米"},
-        {value: "200", label: "200米"}
-      ],
-      map: null,
-      pageHeight: document.documentElement.clientHeight
-    }
-  },
-  created() {
-    setTimeout(() => {
-      this.initMap()
-    }, 100)
-  },
-  methods: {
-    initMap() {
-      this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
-      this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
-      this.map.setCurrentCity("仙桃");
-      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
-      this.map.disableDoubleClickZoom();    //禁用双击放大
-      this.init();
+  export default {
+    components: {
+      vueSeamlessScroll
+    },
+    data() {
+      return {
+        address: "",
+        queryParams: {
+          address: {},
+          distance: "50"
+        },
+        placeInfo: [
+          {value: "", label: ""}
+        ],
+        distanceOptions: [
+          {value: "50", label: "50米"},
+          {value: "100", label: "100米"},
+          {value: "200", label: "200米"}
+        ],
+        map: null,
+        pageHeight: document.documentElement.clientHeight,
+        list: [
+          {
+            marketName: '三伏潭',
+            amount: 431,
+            total: 44555.50,
+            n1: 5,
+            n2: 2
+          },
+          {
+            marketName: '长埫口',
+            amount: 232,
+            total: 34555.50,
+            n1: 3,
+            n2: 4
+          },
+          {
+            marketName: '城西',
+            amount: 132,
+            total: 14555.50,
+            n1: 1,
+            n2: 0
+          },
+          {
+            marketName: '城东',
+            amount: 232,
+            total: 34755.50,
+            n1: 8,
+            n2: 3
+          },
+          {
+            marketName: '毛嘴',
+            amount: 335,
+            total: 64555.50,
+            n1: 7,
+            n2: 9
+          },
+          {
+            marketName: '通海口',
+            amount: 332,
+            total: 34958.50,
+            n1: 6,
+            n2: 2
+          }
+        ]
+      }
+    },
+    created() {
+      setTimeout(() => {
+        this.initMap()
+      }, 100)
     },
-    init() {
-      const t = this;
-      request({
-        url: '/monitorArea/infoList',
-        method: "get"
-      }).then(function (rs) {
-        const areaInfo = rs.areaInfo;
-        const noWarnClientInfo = rs.noWarnClientInfo;
-        const WarnClientInfo = rs.WarnClientInfo;
-        console.log(areaInfo, noWarnClientInfo, WarnClientInfo);
+    methods: {
+      initMap() {
+        this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
+        this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
+        this.map.setCurrentCity("仙桃");
+        this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
+        this.map.disableDoubleClickZoom();    //禁用双击放大
+        this.init();
+      },
+      init() {
+        const t = this;
+        request({
+          url: '/monitorArea/infoList',
+          method: "get"
+        }).then(function (rs) {
+          const areaInfo = rs.areaInfo;
+          const noWarnClientInfo = rs.noWarnClientInfo;
+          const WarnClientInfo = rs.WarnClientInfo;
+          console.log(areaInfo, noWarnClientInfo, WarnClientInfo);
 
-        areaInfo.forEach(data => {
-          if (data.areaType == 3) {
-            let listData = JSON.parse(data.areaData);
-            let list = [];
-            listData.forEach(areaData => {
-              let pt = new BMap.Point(areaData.longitude, areaData.latitude);
-              list.push(pt);
-            });
-            let polygon = new BMap.Polygon(list, {fillColor: data.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
-            t.map.addOverlay(polygon);
-            var x = 0,
-              y = 0;
-            var path = polygon.getPath();//返回多边型的点数组;ply是多边形覆盖物
-            for (var k = 0; k < path.length; k++) {
-              x = x + parseFloat(path[k].lng);
-              y = y + parseFloat(path[k].lat);
+          areaInfo.forEach(data => {
+            if (data.areaType == 3) {
+              let listData = JSON.parse(data.areaData);
+              let list = [];
+              listData.forEach(areaData => {
+                let pt = new BMap.Point(areaData.longitude, areaData.latitude);
+                list.push(pt);
+              });
+              let polygon = new BMap.Polygon(list, {fillColor: data.areaColor, strokeWeight: 2, strokeOpacity: 0.5});   //创建折线
+              t.map.addOverlay(polygon);
+              var x = 0,
+                y = 0;
+              var path = polygon.getPath();//返回多边型的点数组;ply是多边形覆盖物
+              for (var k = 0; k < path.length; k++) {
+                x = x + parseFloat(path[k].lng);
+                y = y + parseFloat(path[k].lat);
+              }
+              x = x / path.length;
+              y = y / path.length;
+              let points = [];
+              let pt = new BMap.Point(x, y);
+              points.push(pt);
+              let icon = new BMap.Icon(require("@/assets/images/area_icon16x16.png"), new BMap.Size(16, 16));
+              let options = {
+                icon: icon
+              }
+              let marker = new BMap.Marker(pt, options);
+              t.map.addOverlay(marker);
+              marker.addEventListener('click', function (e) {
+                var content =
+                  '<ul class="map-customer-info">'
+                  + '<li ><span>社区名称:</span>' + 'xxx社区' + '</li>'
+                  + '<li ><span>人口:</span>' + 'xxxxxx' + '</li>'
+                  + '<li ><span>零售户数量:</span>' + 'xxx' + '</li>'
+                  + '<li ><span>可办证数量:</span>' + 'xx' + '</li>'
+                  + '</ul>';
+                t.$alert(content, '社区信息', {
+                  dangerouslyUseHTMLString: true
+                });
+              });
             }
-            x = x / path.length;
-            y = y / path.length;
-            let points = [];
-            let pt = new BMap.Point(x, y);
+          });
+
+          let points = [];
+          noWarnClientInfo.forEach(data => {
+            let pt = new BMap.Point(data.longitude, data.latitude);
+            pt.shortName = data.shortName;
+            pt.clientCode = data.clientCode;
+            pt.telephone = data.telephone;
+            pt.cnname = data.cnname;
             points.push(pt);
-            let icon = new BMap.Icon(require("@/assets/images/area_icon16x16.png"), new BMap.Size(16, 16));
-            let options = {
-              icon: icon
-            }
-            let marker = new BMap.Marker(pt, options);
-            t.map.addOverlay(marker);
-            marker.addEventListener('click', function (e) {
-              var content =
-                '<ul class="map-customer-info">'
-                + '<li ><span>社区名称:</span>' + 'xxx社区' + '</li>'
-                + '<li ><span>人口:</span>' + 'xxxxxx' + '</li>'
-                + '<li ><span>零售户数量:</span>' + 'xxx' + '</li>'
-                + '<li ><span>可办证数量:</span>' + 'xx' + '</li>'
-                + '</ul>';
-              t.$alert(content, '社区信息', {
-                dangerouslyUseHTMLString: true
-              });
-            });
+          });
+          let options = {
+            size: BMAP_POINT_SIZE_NORMAL,
+            shape: BMAP_POINT_SHAPE_STAR,
+            color: '#848080'
           }
-        });
+          let pointCollection = new BMap.PointCollection(points, options);
 
-        let points = [];
-        noWarnClientInfo.forEach(data => {
-          let pt = new BMap.Point(data.longitude, data.latitude);
-          pt.shortName = data.shortName;
-          pt.clientCode = data.clientCode;
-          pt.telephone = data.telephone;
-          pt.cnname = data.cnname;
-          points.push(pt);
-        });
-        let options = {
-          size: BMAP_POINT_SIZE_NORMAL,
-          shape: BMAP_POINT_SHAPE_STAR,
-          color: '#848080'
-        }
-        let pointCollection = new BMap.PointCollection(points, options);
-
-        pointCollection.addEventListener('click', function (e) {
-          var content =
-            '<ul class="map-customer-info">'
-            + '<li ><span>许可证号:</span>' + e.point.clientCode + '</li>'
-            + '<li ><span>名称:</span>' + e.point.shortName + '</li>'
-            + '<li ><span>电话:</span>' + e.point.telephone + '</li>'
-            + '<li ><span>客户经理:</span>' + e.point.cnname + '</li>'
-            + '<li ><span>库存:</span>' + 666 + '</li>'
-            + '</ul>';
-          t.$alert(content, '零售户信息', {
-            dangerouslyUseHTMLString: true
+          pointCollection.addEventListener('click', function (e) {
+            var content =
+              '<ul class="map-customer-info">'
+              + '<li ><span>许可证号:</span>' + e.point.clientCode + '</li>'
+              + '<li ><span>名称:</span>' + e.point.shortName + '</li>'
+              + '<li ><span>电话:</span>' + e.point.telephone + '</li>'
+              + '<li ><span>客户经理:</span>' + e.point.cnname + '</li>'
+              + '<li ><span>库存:</span>' + 666 + '</li>'
+              + '</ul>';
+            t.$alert(content, '零售户信息', {
+              dangerouslyUseHTMLString: true
+            });
           });
-        });
-        t.map.addOverlay(pointCollection);
+          t.map.addOverlay(pointCollection);
 
 
-      });
+        });
+      }
     }
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.BMap_cpyCtrl {
-  display: none;
-}
+  .BMap_cpyCtrl {
+    display: none;
+  }
 
-.anchorBL {
-  display: none;
-}
+  .anchorBL {
+    display: none;
+  }
+
+  .scroll-box3 {
+    width: 360px;
+    height: 560px;
+    position: absolute;
+    z-index: 1999;
+    background: #ffffff;
+    right: 10px;
+    top: 10px;
+    border-radius: 8px;
+    opacity: 0.8;
+  }
+
+  .scroll-box3 h3 {
+    text-align: center;
+    line-height: 40px;
+  }
+
+  .scroll-item3 {
+    height: 480px;
+    overflow: hidden;
+  }
+
+  .table-info3 {
+    font-size: 12px;
+    margin-top: 20px;
+    padding: 2px;
+  }
 </style>