1

src/views/resource/parts/first.vue

@@ -0,0 +1,107 @@
+<template>
+  <div id="first">
+    <el-row>
+      <el-col :span="24">
+        <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="tabBtn(item)">
+          <p class="textOver">{{ item.name || '暂无' }}</p>
+          <p>地址:{{ item.address || '暂无' }}</p>
+          <p>
+            <span>lng:{{ item.lng || '暂无' }}</span>
+            <span>lat:{{ item.lat || '暂无' }}</span>
+          </p>
+        </el-col>
+        <el-col :span="24" class="page">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :pager-count="5"
+            layout="total, prev, pager, next"
+            :total="total"
+            :page-size="pageSize"
+          >
+          </el-pagination>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'first',
+  props: {
+    firstList: { type: Array },
+    total: { type: Number },
+  },
+  components: {},
+  data: function() {
+    return {
+      currentPage: 1,
+      pageSize: 8,
+      origin: [],
+      list: [],
+    };
+  },
+  created() {},
+  methods: {
+    search(page = 1) {
+      this.$set(this, `list`, this.origin[page - 1]);
+    },
+    handleCurrentChange(currentPage) {
+      this.search(currentPage);
+    },
+    tabBtn(data) {
+      this.$emit('tabBtn', data);
+    },
+  },
+  watch: {
+    firstList: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
+        this.search();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.list {
+  padding: 5px 10px;
+  border-bottom: 1px dashed #ccc;
+  p:nth-child(1) {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  p:nth-child(2) {
+    padding: 5px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-height: 25px;
+  }
+  p:nth-child(3) {
+    span {
+      display: inline-block;
+      width: 50%;
+    }
+  }
+}
+.list:hover {
+  cursor: pointer;
+  p:nth-child(1) {
+    color: #409eff;
+  }
+}
+.page {
+  text-align: center;
+  padding: 15px 0;
+}
+</style>

src/views/resource/resource.vue

@@ -5,7 +5,7 @@
         <div id="container">
           <!-- 自定义列表 -->
           <div style="width:220px" class="menus">
-            <el-menu @select="typeSelect">
+            <el-menu @select="typeSelect" background-color="#409eff" text-color="#fff" active-text-color="#fff">
               <el-submenu index="1">
                 <template #title>
                   <span>科技部门</span>
@@ -72,6 +72,22 @@
           </div>
           <!-- 搜索框 -->
           <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+          <el-col :span="4" class="dataList">
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+              <el-tab-pane label="数据列表" name="first">
+                <first :firstList="firstList" :total="firstTotal" @tabBtn="tabBtn"></first>
+              </el-tab-pane>
+              <el-tab-pane label="国家级" name="second">
+                <first :firstList="secondList" :total="secondTotal" @tabBtn="tabBtn"></first>
+              </el-tab-pane>
+              <el-tab-pane label="省级" name="third">
+                <first :firstList="thirdList" :total="thirdTotal" @tabBtn="tabBtn"></first>
+              </el-tab-pane>
+              <el-tab-pane label="科技部 吉林省共建" name="fourth">
+                <first :firstList="fourthList" :total="fourthTotal" @tabBtn="tabBtn"></first>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
           <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="center" :plugin="plugin">
             <!-- mark上方文字 -->
             <el-amap-text v-for="(t, index) in marktext" :key="`text${index}`" :text="t.text" :offset="[0, -50]" :position="t.position"></el-amap-text>
@@ -103,6 +119,7 @@
 </template>
 
 <script>
+import first from './parts/first.vue';
 import { local } from '@/util/local';
 import {
   kjbm,
@@ -140,7 +157,9 @@ export default {
   },
   name: 'resource',
   props: {},
-  components: {},
+  components: {
+    first,
+  },
   data: function() {
     return {
       zoom: '17',
@@ -216,6 +235,19 @@ export default {
       zdxm: zdxm,
       // 23科技奖励-,kjjl
       kjjl: kjjl,
+      activeName: 'first',
+      // 数据列表
+      firstList: [],
+      firstTotal: 0,
+      // 国家级
+      secondList: [],
+      secondTotal: 0,
+      // 省级
+      thirdList: [],
+      thirdTotal: 0,
+      // 科技部
+      fourthList: [],
+      fourthTotal: 0,
     };
   },
   created() {
@@ -316,100 +348,164 @@ export default {
         for (const i of this.kjbm) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjbm);
+        this.$set(this, `firstTotal`, this.kjbm.length);
       } else if (index === '2-1') {
         for (const i of this.kyys) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kyys);
+        this.$set(this, `firstTotal`, this.kyys.length);
       } else if (index === '3-1') {
         for (const i of this.dzyx) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.dzyx);
+        this.$set(this, `firstTotal`, this.dzyx.length);
       } else if (index === '4-1') {
         let data = this.gxjsqy.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.gxjsqy);
+        this.$set(this, `firstTotal`, this.gxjsqy.length);
       } else if (index === '4-2') {
         let data = this.cxxqy.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.cxxqy);
+        this.$set(this, `firstTotal`, this.cxxqy.length);
       } else if (index === '5-1') {
         for (const i of this.zdsys) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.zdsys);
+        this.$set(this, `firstTotal`, this.zdsys.length);
       } else if (index === '5-2') {
         let data = this.gcjsyjzx.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.gcjsyjzx);
+        this.$set(this, `firstTotal`, this.gcjsyjzx.length);
       } else if (index === '5-3') {
         for (const i of this.dxkjy) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.dxkjy);
+        this.$set(this, `firstTotal`, this.dxkjy.length);
       } else if (index === '5-4') {
         let data = this.kjqyfhq.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjqyfhq);
+        this.$set(this, `firstTotal`, this.kjqyfhq.length);
       } else if (index === '5-5') {
         for (const i of this.cyhjd) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.cyhjd);
+        this.$set(this, `firstTotal`, this.cyhjd.length);
       } else if (index === '5-6') {
         for (const i of this.jszysfjg) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.jszysfjg);
+        this.$set(this, `firstTotal`, this.jszysfjg.length);
       } else if (index === '5-7') {
         for (const i of this.kjhzjd) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjhzjd);
+        this.$set(this, `firstTotal`, this.kjhzjd.length);
       } else if (index === '5-8') {
         let data = this.ysgzz.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.ysgzz);
+        this.$set(this, `firstTotal`, this.ysgzz.length);
       } else if (index === '5-9') {
         let data = this.jscxlm.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.jscxlm);
+        this.$set(this, `firstTotal`, this.jscxlm.length);
       } else if (index === '5-10') {
         for (const i of this.kjcxzx) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjcxzx);
+        this.$set(this, `firstTotal`, this.kjcxzx.length);
       } else if (index === '5-11') {
         let data = this.kjcgzhzszx.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjcgzhzszx);
+        this.$set(this, `firstTotal`, this.kjcgzhzszx.length);
       } else if (index === '6-1') {
         let data = this.sccjzx.filter(i => i.ing != '' && i.lat != '');
         for (const i of data) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.sccjzx);
+        this.$set(this, `firstTotal`, this.sccjzx.length);
       } else if (index === '6-2') {
         for (const i of this.jshtdjd) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.jshtdjd);
+        this.$set(this, `firstTotal`, this.jshtdjd.length);
       } else if (index === '6-3') {
         for (const i of this.jsdsc) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.jsdsc);
+        this.$set(this, `firstTotal`, this.jsdsc.length);
       } else if (index === '6-4') {
         for (const i of this.kjcgpjsd) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjcgpjsd);
+        this.$set(this, `firstTotal`, this.kjcgpjsd.length);
       } else if (index === '7-1') {
         for (const i of this.zdxm) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.zdxm);
+        this.$set(this, `firstTotal`, this.zdxm.length);
       } else if (index === '8-1') {
         for (const i of this.kjjl) {
           this.setMark(i);
         }
+        this.$set(this, `firstList`, this.kjjl);
+        this.$set(this, `firstTotal`, this.kjjl.length);
+      }
+    },
+    // 点击小分类
+    handleClick(tab, event) {
+      if (tab.index == '1') {
+        let data = local.filter(i => i.xtype == '1');
+        if (data) this.$set(this, `secondList`, data);
+        this.$set(this, `secondTotal`, data.length);
+      } else if (tab.index == '2') {
+        let data = local.filter(i => i.xtype == '2');
+        if (data) this.$set(this, `thirdList`, data);
+        this.$set(this, `thirdTotal`, data.length);
+      } else if (tab.index == '3') {
+        let data = local.filter(i => i.xtype == '3');
+        if (data) this.$set(this, `fourthList`, data);
+        this.$set(this, `fourthTotal`, data.length);
       }
     },
+    tabBtn(data) {
+      let datas = [data];
+      this.onSearchResult(datas);
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -433,4 +529,19 @@ export default {
   left: 20px;
   z-index: 200;
 }
+/deep/.el-menu-item.is-active {
+  background: #377ecc !important;
+}
+/deep/.el-submenu__title i {
+  color: #fff;
+}
+.dataList {
+  position: absolute;
+  top: 75px;
+  right: 20px;
+  width: 19%;
+  z-index: 1;
+  min-height: 870px;
+  background: #fff;
+}
 </style>