auto

src/components/typeslide.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class=''>
+        <div class="type-slide u-flex">
+            <div class="left-ico ico" @click="leftClick"></div>
+            <div class="slides">
+                <div class="item-arry u-flex" :class="{active:itemArryIndex==arryIndex}" v-for="(itemArry,itemArryIndex) in data" :key="itemArryIndex">
+                    <div class="slide-item" 
+                    :class="{active:index==activeItem}" 
+                    v-for="(item,index) in itemArry" :key="index"
+                    @click="itemClick(item,index)"
+                    >{{item.text}}</div>
+                </div>
+            </div>
+            <div class="right-ico ico" @click="rightClick"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: '',
+        props:{
+            data:{
+                type: Array,
+                default: null,
+            },
+        },
+        components: {},
+        data () {
+            return {
+                arryIndex:0,
+                activeItem:0,
+            };
+        },
+        watch: {
+            data(v){
+                // console.log('data v',v);
+            },
+            arryIndex(v){
+                // console.log('arryIndex v',v);
+                this.activeItem = 0;
+            }
+        },
+        created(){
+            
+        },
+        mounted(){
+        },
+        methods: {
+            leftClick(){
+                console.log('arryIndex',this.arryIndex);
+                if(this.arryIndex>0){
+                    this.arryIndex-=1
+                }
+            },
+            rightClick(){
+                if(this.arryIndex+1<this.data.length){
+                    this.arryIndex+=1;
+                }
+            },
+            itemClick(item,index){
+                this.activeItem = index
+            }
+        },
+    }
+</script>
+
+<style lang='scss' scoped>
+.type-slide{
+    margin-bottom: 2vh;
+    .ico{
+        cursor: pointer;
+        width: 1em;
+        height: 1em;
+        border-top: 1px solid rgba(38,80,179,1);
+    }
+    .left-ico{
+        border-left: 1px solid rgba(38,80,179,1);
+        transform: rotate(-45deg);
+    }
+    .right-ico{
+        border-right: 1px solid rgba(38,80,179,1);
+        transform: rotate(45deg);
+    }
+    .slides{
+        flex: 1;
+        overflow: hidden;
+        height: 2em;
+        position: relative;
+        .item-arry{
+            position: absolute;
+            left: 0;
+            top: -200%;
+            width: 100%;
+            height: 100%;
+            justify-content: space-between;
+            transition: all 0.5s;
+            .slide-item{
+                cursor: pointer;
+                width: 30%;
+                background: rgba(38,80,179,0.7);
+                padding: 8px 0;
+                border-radius: 5px;
+                &.active{
+                    background: rgba(38,80,179,1);
+                }
+            }
+            &.active{
+                top: 0;
+            }
+        }
+    }
+}
+</style>

src/service/mock.js

@@ -51,6 +51,12 @@ export const page5numerical = () =>
         prefixUrl: 'api1',
     })
 
+export const typeSlideApi = () =>
+    callApi({
+        url: 'typeSlideApi',
+        prefixUrl: 'api1',
+    })
+
 export const page5echarts01 = () =>
     callApi({
         url: 'page5echarts01',

src/utils/mdebounce.js

@@ -0,0 +1,32 @@
+/*
+ * @LastEditors: gcz
+ */
+let timeout = null;
+
+/**
+ * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
+ * 
+ * @param {Function} func 要执行的回调函数 
+ * @param {Number} wait 延时的时间
+ * @param {Boolean} immediate 是否立即执行 
+ * @return null
+ */
+export function debounce(func, wait = 500, immediate = false) {
+    // 清除定时器
+    if (timeout !== null) clearTimeout(timeout);
+    // 立即执行，此类情况一般用不到
+    if (immediate) {
+        var callNow = !timeout;
+        timeout = setTimeout(function () {
+            timeout = null;
+        }, wait);
+        if (callNow) typeof func === 'function' && func();
+    } else {
+        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
+        timeout = setTimeout(function () {
+            typeof func === 'function' && func();
+        }, wait);
+    }
+}
+
+// export default debounce

src/utils/sliceArray.js

@@ -0,0 +1,14 @@
+/*
+ * 将一个数组分成几个同等长度的数组
+ * array[分割的原数组]
+ * size[每个子数组的长度]
+ */
+export function sliceArray(array, size) {
+    var result = [];
+    for (var x = 0; x < Math.ceil(array.length / size); x++) {
+        var start = x * size;
+        var end = start + size;
+        result.push(array.slice(start, end));
+    }
+    return result;
+}

src/views/index.vue

@@ -27,12 +27,13 @@
 
     <!-- 林业经济 -->
     <section class="left-wrap " v-if="page==5">
+      <Typeslide :data="typeSlideData" />
       <Numerical class="blur-wrap" :data="page5numerical" />
       <MyEcharts class="blur-wrap u-p-t" mid="page5Char1" ref="page5Char1" :option="page5Char1" height="30vh" />
       <MyEcharts class="blur-wrap u-m-t u-p-t" mid="page5Char2" ref="page5Char2" :option="page5Char2" height="30vh" />
     </section>
 
-    <!-- 林业经济 -->
+    <!-- 事件信息 -->
     <section class="left-wrap " v-if="page==6">
       <Numerical class="blur-wrap" :data="page6numerical" />
       <MyEcharts class="blur-wrap u-p-t" mid="page6Char1" ref="page6Char1" :option="page6Char1" height="30vh" />
@@ -40,12 +41,6 @@
     
     <section class="right-wrap">
       <PickerAddr />
-      <!-- <el-cascader
-        size="large"
-        :options="addrOptions"
-        v-model="addrSelectedOptions"
-        @change="addrChange">
-      </el-cascader> -->
       <div class="xiaoban u-flex">
         <div class="title">小班查询：</div>
         <el-input v-model="xiaobaninput" placeholder="请输入小班号">
@@ -70,9 +65,13 @@
   import Numerical from "../components/numerical";
   import Alarm from "../components/alarm";
   import PickerAddr from "../components/pickerAddr";
+  import Typeslide from "../components/typeslide";
 
   import { Message } from 'element-ui';
 
+  import { debounce } from '@/utils/mdebounce';
+  import {sliceArray} from '@/utils/sliceArray';
+
   import {
     page1numerical,
     page1echarts01,
@@ -82,6 +81,7 @@
     page2echarts01,
     page2echarts02,
     page5numerical,
+    typeSlideApi,
     page5echarts01,
     page5echarts02,
     page6numerical,
@@ -98,7 +98,8 @@
       MyEcharts,
       Numerical,
       Alarm,
-      PickerAddr
+      PickerAddr,
+      Typeslide
     },
     data () {
       return {
@@ -175,6 +176,7 @@
         page2Char1:{},
         page2Char2:{},
         page5numerical:[],
+        typeSlideData:[],
         page5Char1:{},
         page5Char2:{},
         page6numerical:[],
@@ -203,6 +205,13 @@
         this.getPageData();    
       }, 111115000);      
     },
+    watch: {
+      xiaobaninput: {
+          handler: function() {
+           debounce(this.xiaobansearch, 1000, false)
+          }
+      },
+    },
     methods: {
       addrChange(value){
         console.log('addrChange',value);
@@ -225,6 +234,7 @@
           this.getPage2echarts02();
         }else if(this.page==5){
           this.getPage5numerical();
+          this.getTypeSlideData();
           this.getPage5echarts01();
           this.getPage5echarts02();
         }
@@ -293,13 +303,20 @@
       },
       
       getPage5numerical(){
-        //第一屏统计
         page5numerical().then(res=>{
           // console.log('res',res);
           this.page5numerical = res.data;
         }).catch(err=>{
           console.log('echarts01 err',err);
         })
+      },
+      getTypeSlideData(){
+        typeSlideApi().then(res=>{
+          this.typeSlideData = sliceArray(res.data,3);
+          // console.log(' this.typeSlideData', this.typeSlideData);
+        }).catch(err=>{
+          console.log('getTypeSlideData err',err);
+        })
       },
        getPage5echarts01(){
         page5echarts01().then(res=>{
@@ -343,7 +360,8 @@
       },
 
       xiaobansearch(){
-        console.log('xiaobansearch');
+        // console.log('xiaobansearch');
+        this.getRightScrollData();
       }
 
     },