地图样式修改

src/assets/scss/common.scss

@@ -171,7 +171,7 @@ body {
             }
         }
         .scroll-board-01{
-            height: calc( 100vh - var(--header-height) - 249px );
+            height: calc( 100vh - var(--header-height) - 272px );
             // height: 60vh;
             box-sizing: border-box;
             padding: 0 15px;
@@ -203,7 +203,7 @@ body {
     }
 }
 .xiaoban{
-    margin: 20px 0;
+    margin: 10px 0;
     width: 380px;
     margin-left: auto;
     color: var(--main-color);

src/components/amapnow.vue

@@ -31,7 +31,8 @@ import {
   farmInfo,
   smallClassDetail,
   treePlant,
-  smallClassCount
+  smallClassCount,
+  projectList
 } from '@/service/index.js';
 import axios from 'axios';
 export default {
@@ -108,7 +109,7 @@ export default {
         if (this.treesPolygonArr) {
           this.map.remove(this.treesPolygonArr);
         }
-        this.getSmallClassCount();
+        this.getProjectList();
         this.parentId = val;
         if (this.$store.state.addr.mapLevel == 'street') {
           this.parentId = val.substring(0, 6);
@@ -172,7 +173,7 @@ export default {
           this.mapPolygon();
         }
         if (val == 'forest' || val == 'treeSpecies') {
-          this.getSmallClassCount();
+          this.getProjectList();
         }
         if (val != 'forest') {
           this.map.remove(this.forestMarkerArr);
@@ -665,7 +666,7 @@ export default {
         }
       });
       this.switch2AreaNode(adcode);
-      this.getSmallClassCount();
+      this.getProjectList();
     },
     //根据Hover状态设置相关样式
     toggleHoverFeature(feature, isHover, position) {
@@ -958,14 +959,50 @@ export default {
                 zIndex: 999,
                 topWhenClick: true
               });
-              projectMarker.setLabel({
-                direction: 'top',
-                offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
-                content: infoContent, //设置文本标注内容
-              });
-              projectMarker.on('mouseover', function (e) {
-                // console.log(e);
 
+              projectMarker.on('click', function (e) {
+                // console.log(e);
+                projectMarker.setLabel({
+                  direction: 'top',
+                  offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
+                  content: infoContent //设置文本标注内容
+                });
+              });
+              projectMarker.on('mouseout', function (e) {
+                projectMarker.setLabel({
+                  content: null //设置文本标注内容
+                });
+              });
+              this.projectMarkerArr.push(projectMarker);
+            }
+          });
+        }
+      });
+    },
+    // 查询项目列表
+    getProjectList() {
+      let params = {
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      projectList(params).then((res) => {
+        if (res.code == 200) {
+          let infoIcon = new AMap.Icon({
+            size: new AMap.Size(20, 25), // 图标尺寸
+            image: require('@/assets/img/infoMarker.png'),
+            imageSize: new AMap.Size(20, 25) // 根据所设置的大小拉伸或压缩图片
+          });
+          res.rows.forEach((element) => {
+            if (element.longitude && element.latitude) {
+              let lnglat = new AMap.LngLat(element.longitude, element.latitude);
+              var projectMarker = new AMap.Marker({
+                map: this.map,
+                position: lnglat,
+                offset: new AMap.Pixel(0, -30),
+                icon: infoIcon,
+                zIndex: 999,
+                topWhenClick: true
               });
               this.projectMarkerArr.push(projectMarker);
             }

src/dataSchema/scrollPeojectSchema.js

@@ -0,0 +1,23 @@
+/**
+ * @Description: 
+ * @Author: wangcc
+ * @Date: 2022-10-25 16:03:12
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-10-26 15:27:44
+ * @FilePath: \castgroup_bigscreen\src\dataSchema\scrollPeojectSchema.js
+ * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
+ */
+ let scrollPeojectSchema = {
+  header: ['项目名称', '蓄积量', '占地面积', '小班数量'],
+  data: [],
+  headerBGC: 'rgba(8,238,255,.3)',//表头背景色
+  // headerBGC:'rgba(38,80,179,1)',//表头背景色
+  // oddRowBGC:'rgba(38,80,179,.5)',//奇数行背景色
+  oddRowBGC: 'transparent',//奇数行背景色
+  evenRowBGC: 'rgba(0,175,169,.15)',//偶数行背景色	
+  align: ['center', 'center', 'center', 'center'],//列对齐方式
+  columnWidth: [120, 120, 120, 120, 0],
+  rowNum: 14,//表行数
+  // waitTime: 999999
+}
+export default scrollPeojectSchema

src/service/index.js

@@ -122,6 +122,14 @@ export const forestSample = data =>
     prefixUrl: "api2"
   });
 
+  // 查询项目列表
+export const projectList = data =>
+callApi({
+  url: "course/list",
+  data,
+  prefixUrl: "api2"
+});
+
 // 事件信息
 export const alarmDataApi = data =>
   callApi({

src/views/index.vue

@@ -2,177 +2,204 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: gcz
- * @LastEditTime: 2022-10-21 15:08:35
- * @FilePath: \ntbigscreen\src\views\index.vue
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-10-26 15:26:35
+ * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
   <div class>
     <!-- <dv-full-screen-container> -->
-      <Map></Map>
-      <Header></Header>
+    <Map></Map>
+    <Header></Header>
 
-      <section class="nav-wrap">
-        <div
-          class="nav-item"
-          :class="{active:(index+1)==page}"
-          v-for="(item,index) in navList"
-          @click="navClick(index+1)"
-          :key="index"
-        >{{item.text}}</div>
-      </section>
+    <section class="nav-wrap">
+      <div
+        class="nav-item"
+        :class="{active:(index+1)==page}"
+        v-for="(item,index) in navList"
+        @click="navClick(index+1)"
+        :key="index"
+      >{{item.text}}</div>
+    </section>
 
-      <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
+    <Alarm v-if="page==6&&alarmData.length>=1" :data="alarmData" />
 
-      <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
-        <Numerical class="left-item" :data="page1numerical" pageName="forest" />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page1Char1"
-          streetTitleText="各小班"
-          ref="page1Char1"
-          :option="page1Char1"
-          style
-        />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page1Char2"
-          streetTitleText="各小班"
-          ref="page1Char2"
-          :option="page1Char2"
-          style
-        />
-      </section>
+    <section class="left-wrap" v-if="$store.state.addr.page=='forest'">
+      <Numerical class="left-item" :data="page1numerical" pageName="forest" />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page1Char1"
+        streetTitleText="各小班"
+        ref="page1Char1"
+        :option="page1Char1"
+        style
+      />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page1Char2"
+        streetTitleText="各小班"
+        ref="page1Char2"
+        :option="page1Char2"
+        style
+      />
+    </section>
 
-      <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
-        <Numerical class="left-item" :data="page2numerical" pageName="treeSpecies" />
-        <!-- <MyEcharts
+    <section class="left-wrap" v-if="$store.state.addr.page=='treeSpecies'">
+      <Numerical class="left-item" :data="page2numerical" pageName="treeSpecies" />
+      <!-- <MyEcharts
         class="left-item chart-wrap"
         mid="page2Char1"
         :option="page2Char1"
         ref="page2Char1"
-        />-->
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page2Char2"
-          streetTitleText="各小班"
-          :option="page2Char2"
-          ref="page2Char2"
-        />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page2Char3"
-          streetTitleText="各小班"
-          :option="page2Char3"
-          ref="page2Char3"
-        />
-      </section>
+      />-->
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page2Char2"
+        streetTitleText="各小班"
+        :option="page2Char2"
+        ref="page2Char2"
+      />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page2Char3"
+        streetTitleText="各小班"
+        :option="page2Char3"
+        ref="page2Char3"
+      />
+    </section>
 
-      <!-- 林业经济 -->
-      <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
-        <!-- <Typeslide :data="typeSlideData" /> -->
-        <Numerical class="left-item" :data="page5numerical" pageName="economics" />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page5Char2"
-          ref="page5Char2"
-          :option="page5Char2"
-        />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page5Char1"
-          ref="page5Char1"
-          :option="page5Char1"
-        />
-      </section>
+    <!-- 林业经济 -->
+    <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
+      <!-- <Typeslide :data="typeSlideData" /> -->
+      <Numerical class="left-item" :data="page5numerical" pageName="economics" />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page5Char2"
+        ref="page5Char2"
+        :option="page5Char2"
+      />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page5Char1"
+        ref="page5Char1"
+        :option="page5Char1"
+      />
+    </section>
 
-      <!-- 事件信息 -->
-      <section class="left-wrap event-page" v-if="$store.state.addr.page=='event'">
-        <Numerical class="left-item" :data="page6numerical" />
-        <MyEcharts
-          class="left-item chart-wrap"
-          mid="page6Char1"
-          ref="page6Char1"
-          :option="page6Char1"
-        />
-        <!-- <MyEcharts
+    <!-- 事件信息 -->
+    <section class="left-wrap event-page" v-if="$store.state.addr.page=='event'">
+      <Numerical class="left-item" :data="page6numerical" />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page6Char1"
+        ref="page6Char1"
+        :option="page6Char1"
+      />
+      <!-- <MyEcharts
           class="left-item chart-wrap"
           mid="page6Char2"
           ref="page6Char2"
           :option="page6Char2"
-        />-->
-        <div class="left-item">
-          <!-- <div class="ntitle">{{$store.state.addr.selectAddr}}事件发生记录</div> -->
-          <div class="ntitle">
-            <span
-              v-if="$store.state.addr.mapLevel=='province'"
-            >{{$store.state.addr.selectAddr}}各地州(市)事件发生记录</span>
-            <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}各县事件发生记录</span>
-            <span
-              v-if="$store.state.addr.mapLevel=='district'"
-            >{{$store.state.addr.selectAddr}}各乡镇事件发生记录</span>
-            <span
-              v-if="$store.state.addr.mapLevel=='street'"
-            >{{$store.state.addr.selectAddr}}各村事件发生记录</span>
-          </div>
-          <dv-scroll-board
-            :key="scrollBoardKey"
-            class="scroll-event"
-            :config="scrollEventConfig"
-            ref="scrollBoard"
-            @click="scrollEventClick"
-            @mouseout="scrollEventOut"
-          />
+      />-->
+      <div class="left-item">
+        <!-- <div class="ntitle">{{$store.state.addr.selectAddr}}事件发生记录</div> -->
+        <div class="ntitle">
+          <span
+            v-if="$store.state.addr.mapLevel=='province'"
+          >{{$store.state.addr.selectAddr}}各地州(市)事件发生记录</span>
+          <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}各县事件发生记录</span>
+          <span
+            v-if="$store.state.addr.mapLevel=='district'"
+          >{{$store.state.addr.selectAddr}}各乡镇事件发生记录</span>
+          <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}各村事件发生记录</span>
         </div>
-      </section>
+        <dv-scroll-board
+          :key="scrollBoardKey"
+          class="scroll-event"
+          :config="scrollEventConfig"
+          ref="scrollBoard"
+          @click="scrollEventClick"
+          @mouseout="scrollEventOut"
+        />
+      </div>
+    </section>
 
-      <section class="right-wrap">
-        <PickerAddr />
-        <div v-if="showbase" class="xiaoban u-flex">
-          <div class="title">基地查询：</div>
-          <el-input v-model="baseinput" placeholder="请输入基地名称">
-            <i class="el-icon-search el-input__icon" slot="suffix" @click="basesearch"></i>
-          </el-input>
+    <section class="right-wrap">
+      <PickerAddr />
+      <div v-if="showbase" class="xiaoban u-flex">
+        <div class="title">基地查询：</div>
+        <el-input v-model="baseinput" placeholder="请输入基地名称">
+          <i class="el-icon-search el-input__icon" slot="suffix" @click="basesearch"></i>
+        </el-input>
+      </div>
+      <div class="tab-box" v-if="showxiaoban">
+        <div
+          class="tab-btn"
+          :class="{tabActive:cur == index}"
+          @click="tabLink(index)"
+          v-for="(item,index) in tabData"
+          :key="index"
+        >
+          <span class="tab-span">{{item.name}}</span>
         </div>
-        <div v-if="showxiaoban" class="xiaoban u-flex">
+      </div>
+      <div v-if="showxiaoban" class="xiaoban u-flex">
+        <div class="tab-class-search" v-if="cur == 1">
           <div class="title">小班查询：</div>
           <el-input v-model="xiaobaninput" placeholder="请输入小班号">
             <i class="el-icon-search el-input__icon" slot="suffix" @click="xiaobansearch"></i>
           </el-input>
         </div>
-        <section
-          v-if="showxiaoban||showbase"
-          class="scroll-board-wrap"
-          :class="{close:showScrollBoard==true}"
+        <div class="tab-class-search" v-if="cur == 0">
+          <div class="title">项目查询：</div>
+          <el-input v-model="projectInput" placeholder="请输入项目名称">
+            <i class="el-icon-search el-input__icon" slot="suffix" @click="projectSearch"></i>
+          </el-input>
+        </div>
+      </div>
+      <section
+        v-if="showxiaoban||showbase"
+        class="scroll-board-wrap"
+        :class="{close:showScrollBoard==true}"
+        @mouseout="scrollOut"
+      >
+        <dv-scroll-board
+          v-if="showbase"
+          :key="scrollBoardKey"
+          class="scroll-board-01 scroll-base"
+          :config="scrollBaseListConfig"
+          ref="scrollBaseList"
+          @click="scrollBaseListClick"
+          @mouseout="baseListClick"
+        />
+        <dv-scroll-board
+          v-if="showxiaoban && cur == 1"
+          :key="scrollBoardKey"
+          class="scroll-board-01"
+          :config="scrollBoardConfig"
+          ref="scrollBoard"
+          @click="scrollBoardClick"
           @mouseout="scrollOut"
-        >
-          <dv-scroll-board
-            v-if="showbase"
-            :key="scrollBoardKey"
-            class="scroll-board-01 scroll-base"
-            :config="scrollBaseListConfig"
-            ref="scrollBaseList"
-            @click="scrollBaseListClick"
-            @mouseout="baseListClick"
-          />
-          <dv-scroll-board
-            v-if="showxiaoban"
-            :key="scrollBoardKey"
-            class="scroll-board-01"
-            :config="scrollBoardConfig"
-            ref="scrollBoard"
-            @click="scrollBoardClick"
-            @mouseout="scrollOut"
-            :style="scrollBoardStyle"
-          />
-          <div class="scroll-board-tool" @click="toggleShowScrollBoard">
-            <div class="inner">
-              <img src="../assets/img/jiantou.png" alt />
-            </div>
+          :style="scrollBoardStyle"
+        />
+        <dv-scroll-board
+          v-if="showxiaoban && cur == 0"
+          :key="scrollBoardKey"
+          class="scroll-board-01"
+          :config="scrollPeojectConfig"
+          ref="scrollProjectBoard"
+          @click="scrollProjectClick"
+          @mouseout="scrollOut"
+          :style="scrollBoardStyle"
+        />
+        <div class="scroll-board-tool" @click="toggleShowScrollBoard">
+          <div class="inner">
+            <img src="../assets/img/jiantou.png" alt />
           </div>
-        </section>
+        </div>
       </section>
+    </section>
     <!-- </dv-full-screen-container> -->
   </div>
 </template>
@@ -213,10 +240,12 @@ import {
   smallClassDetail,
   smallInfo,
   eventDetail,
-  financeBaseDetail
+  financeBaseDetail,
+  projectList
 } from '../service/index';
 
 import scrollBoardSchema from '../dataSchema/scrollBoardSchema';
+import scrollPeojectSchema from '../dataSchema/scrollPeojectSchema';
 import scrollBaseListSchema from '../dataSchema/scrollBaseListSchema';
 import page1Char1Schema from '../dataSchema/page1Char1Schema';
 import page1Char2Schema from '../dataSchema/page1Char2Schema';
@@ -230,7 +259,7 @@ import page6Char2Schema from '../dataSchema/page6Char2Schema';
 import scrollEventSchema from '../dataSchema/scrollEventSchema';
 
 //柱状图颜色
-let colorArr = ['#00FAFD', '#FF4E46', '#FFAA00','#19D800'];
+let colorArr = ['#00FAFD', '#FF4E46', '#FFAA00', '#19D800'];
 
 // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
 export default {
@@ -246,6 +275,17 @@ export default {
   },
   data() {
     return {
+      tabData: [
+        {
+          id: 1,
+          name: '项目查询'
+        },
+        {
+          id: 2,
+          name: '小班查询'
+        }
+      ],
+      cur: 0,
       showxiaoban: true,
       showbase: false,
       showScrollBoard: false,
@@ -268,6 +308,7 @@ export default {
       },
       scrollBoardConfig: scrollBoardSchema,
       scrollBaseListConfig: scrollBaseListSchema,
+      scrollPeojectConfig: scrollPeojectSchema,
       page1numerical: [
         { name: '蓄积量', number: '2309', unit: '立方米' },
         { name: '占地面积', number: '55.4', unit: '万亩' }
@@ -292,6 +333,7 @@ export default {
       page6Char2: page6Char2Schema,
       scrollEventConfig: scrollEventSchema,
       xiaobaninput: '',
+      projectInput: '',
       baseinput: ''
     };
   },
@@ -340,6 +382,11 @@ export default {
         debounce(this.xiaobansearch, 500, false);
       }
     },
+    projectInput: {
+      handler: function () {
+        debounce(this.projectSearch, 500, false);
+      }
+    },
     baseinput: {
       handler: function () {
         debounce(this.basesearch, 500, false);
@@ -422,12 +469,14 @@ export default {
         this.getPage1echarts01();
         this.getPage1echarts02();
         this.getRightScrollData();
+        this.getProjectScrollData();
       } else if (this.$store.state.addr.page == 'treeSpecies') {
         this.getPage2numerical();
         // this.getPage2echarts01();
         this.getPage2echarts02();
         this.getPage2echarts03();
         this.getRightScrollData();
+        this.getProjectScrollData();
       } else if (this.$store.state.addr.page == 'economics') {
         this.getPage5numerical();
         // this.getTypeSlideData();
@@ -552,6 +601,44 @@ export default {
           console.log('echarts01 err', err);
         });
     },
+    getProjectScrollData() {
+      let param = {
+        courseName: this.projectInput,
+        cityId: this.$store.state.addr.selectCity.areaId,
+        countyId: this.$store.state.addr.selectDistrict.areaId,
+        townId: this.$store.state.addr.selectStreet.areaId
+      };
+      projectList(param)
+        .then((res) => {
+          // console.log('res',res.rows.length);
+          // console.log('this.scrollBoardConfig',this.scrollBoardConfig);
+
+          //当小班滚动数据少时重设参数
+          // if(res.rows.length<=15){
+          //   this.scrollBoardConfig.rowNum = 5;
+          //   this.scrollBoardStyle.height = '25vh'
+          // }
+
+          this.scrollPeojectConfig.data = [];
+          res.rows.forEach((element) => {
+            this.scrollPeojectConfig.data.push([
+              element.courseName,
+              element.smallClassStock + 'm³',
+              element.landArea + '亩',
+              element.classNumber,
+              element.id
+            ]);
+          });
+          this.scrollBoardKey = Date.now();
+          this.$refs.scrollBoard.updateRows(this.scrollPeojectConfig.data);
+
+          // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
+          // this.scrollBoardConfig = res.data;
+        })
+        .catch((err) => {
+          console.log('echarts01 err', err);
+        });
+    },
     getBaseList() {
       let param = {
         baseName: this.baseinput,
@@ -1074,6 +1161,10 @@ export default {
       this.getRightScrollData();
       this.getPageData();
     },
+    projectSearch() {
+      this.getProjectScrollData();
+      this.getPageData();
+    },
     basesearch() {
       // console.log('xiaobansearch');
       this.getBaseList();
@@ -1108,6 +1199,7 @@ export default {
         }
       });
     },
+    scrollProjectClick() {},
     jumpDistrict() {
       if (this.vuexDistrictList) {
         this.vuexDistrictList.forEach((element) => {
@@ -1156,6 +1248,9 @@ export default {
     },
     toggleShowScrollBoard() {
       this.showScrollBoard = !this.showScrollBoard;
+    },
+    tabLink(e) {
+      this.cur = e;
     }
   }
 };
@@ -1163,4 +1258,50 @@ export default {
 
 <style lang='scss' scoped>
 @import url(./index.scss);
+.tab-box {
+  background-color: rgba(1, 33, 35, 0.7);
+  height: 46px;
+  width: 380px;
+  margin-left: auto;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  .tab-btn {
+    width: 128px;
+    background-color: rgba(0, 69, 70, 0.6);
+    border: 1px solid;
+    border-color: rgba(0, 252, 255, 0.24);
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.6);
+
+    cursor: pointer;
+    .tab-span {
+      display: inline-block;
+    }
+  }
+  .tabActive {
+    background-image: linear-gradient(
+      rgba(0, 251, 255, 0.2) 6%,
+      transparent,
+      rgba(0, 251, 255, 0.2) 96%
+    );
+    color: #00fafd;
+  }
+}
+.tab-class-search {
+  display: flex;
+  height: 40px;
+  align-items: center;
+}
+/deep/ .row-item {
+  line-height: normal !important;
+  align-items: center;
+}
+/deep/ .dv-scroll-board .rows .ceil {
+  white-space: normal;
+  overflow: unset;
+  text-overflow: unset;
+}
 </style>