项目选择及滚动处理

src/assets/scss/common.scss

@@ -37,6 +37,7 @@ body {
   // background: url(../img/ntitle.png) no-repeat;
   // background-size: 100% 100%;
   text-indent: 40px;
+  font-size: 15px;
   // margin-bottom: 10px;
 }
 .addr {

src/components/echarts.vue

@@ -6,7 +6,11 @@
   <div ref="wrap">
     <!-- <div>{{$store.state.addr.mapLevel}}</div> -->
     <div class="ntitle">
-      <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}各地州(市){{option.title.text}}</span>
+      <span v-if="$store.state.addr.selectProject.ProjectID && $store.state.addr.page == 'forest'">该项目在</span>
+      <span v-else-if="$store.state.addr.selectProject.ProjectID && $store.state.addr.page == 'treeSpecies'">该项目在</span>
+      <span v-if="$store.state.addr.mapLevel=='province'">
+        {{$store.state.addr.selectAddr}}各地州(市){{option.title.text}}
+      </span>
       <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}各县{{option.title.text}}</span>
       <span v-if="$store.state.addr.mapLevel=='district'">{{$store.state.addr.selectAddr}}各乡镇{{option.title.text}}</span>
       <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}{{streetTitleText}}{{option.title.text}}</span>

src/components/numerical.vue

@@ -1,9 +1,13 @@
 <!--
- * @LastEditors: wangcc 1053578651@qq.com
+ * @LastEditors: gcz
 -->
 <template>
   <div class="numerical" ref="numericalRef">
-    <div class="ntitle">{{ $store.state.addr.selectAddr }}{{ ntitle }}</div>
+    <div class="ntitle">
+      <span v-if="$store.state.addr.selectProject.ProjectID && pageName == 'forest'">该项目在</span>
+      <span v-if="$store.state.addr.selectProject.ProjectID && pageName == 'treeSpecies'">该项目在</span>
+      {{ $store.state.addr.selectAddr }}{{ ntitle }}
+    </div>
     <!-- <div class="ntitle">
             <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
             <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>

src/store/addr/index.js

@@ -27,7 +27,8 @@ const addr = {
     smallClassSearch: [],
     eventData: {},
     baseDetail: {},
-    smallClassMap: []
+    smallClassMap: [],
+    selectProject: {},
   },
   mutations: {
     // 更改页面标识
@@ -117,11 +118,16 @@ const addr = {
     getProjectSmallClassMap(state, projectSmall) {
       state.smallClassMap = projectSmall;
     },
+    // 选择的项目
+    changeSelectProject(state, selectProject) {
+      state.selectProject = selectProject;
+    },
   },
   actions: {
     // 获取省市县
     searchArea({ commit }, params = {}) {
       console.log("searchArea", params);
+      commit("changeSelectProject", {});//去掉选择的项目
       searchApi({ parentId: params.parentId }).then(res => {
         console.log(params.parentId);
         if (params.mapLevel == "city") {
@@ -139,6 +145,7 @@ const addr = {
         }
         commit("changeParentId", params);
         commit("changeSelectAddr", params.mapLevel);
+
       });
     }
     // // 获取小班边界

src/store/getters.js

@@ -15,7 +15,8 @@ const getters = {
     smallClassSearch: state => state.addr.smallClassSearch,
     eventData: state => state.addr.eventData,
     baseDetail: state => state.addr.baseDetail,
-    smallClassMap: state => state.addr.smallClassMap
+    smallClassMap: state => state.addr.smallClassMap,
+    selectProject: state => state.addr.selectProject
 }
 
 export default getters

src/views/index.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: wangcc
- * @LastEditTime: 2022-11-02 14:07:43
- * @FilePath: \castgroup_bigscreen\src\views\index.vue
+ * @LastEditors: gcz
+ * @LastEditTime: 2022-11-02 16:20:50
+ * @FilePath: \ntbigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
@@ -417,7 +417,11 @@ export default {
           this.jumpDistrict();
         }
       }
-    }
+    },
+    '$store.state.addr.selectProject'(val) {
+      // console.log('addr.selectProject',val);
+      this.getPageData();
+    },
   },
   methods: {
     ...mapMutations([
@@ -427,7 +431,8 @@ export default {
       'changeSelectCity',
       'changeSelectDistrict',
       'changeSelectStreet',
-      'getProjectSmallClassMap'
+      'getProjectSmallClassMap',
+      'changeSelectProject'
     ]),
     addrChange(value) {
       console.log('addrChange', value);
@@ -505,7 +510,8 @@ export default {
       let param = {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       page1numerical(param)
         .then((res) => {
@@ -520,7 +526,8 @@ export default {
       let param = {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       // console.log('cityId',param.cityId);
       page1echarts01(param)
@@ -548,7 +555,8 @@ export default {
       let param = {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       // console.log('cityId',param.cityId);
       page1echarts02(param)
@@ -628,6 +636,8 @@ export default {
           //   this.scrollBoardStyle.height = '25vh'
           // }
 
+          let that = this;
+          
           this.scrollPeojectConfig.data = [];
           res.rows.forEach((element) => {
             this.scrollPeojectConfig.data.push([
@@ -643,6 +653,27 @@ export default {
             this.scrollPeojectConfig.data
           );
 
+          //监听是否有选中项目,有的话高亮
+          let timer1 = setInterval(function(){ // 每 10 毫秒检查一下 html 是否已存在
+            let domId = that.$store.state.addr.selectProject.ProjectID;
+            let dom = document.getElementById(that.$store.state.addr.selectProject.ProjectID);
+            // console.log('dom',domId);
+            if(domId&&dom){
+              // console.log('dom',dom.classList);
+              if(dom.classList.contains('active')==true){
+                // clearInterval(timer1);
+              }else{
+                dom.classList.add('active');
+              }
+              
+            }  
+          },500);
+
+          // setTimeout(() => {
+          //   this.$store.state.addr.selectProject.ProjectID&&document.getElementById(this.$store.state.addr.selectProject.ProjectID).classList.add('active');
+          // }, 2000);
+         
+
           // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
           // this.scrollBoardConfig = res.data;
         })
@@ -741,7 +772,8 @@ export default {
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
         townId: this.$store.state.addr.selectStreet.areaId,
-        smallNumber: this.xiaobaninput
+        smallNumber: this.xiaobaninput,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       page2numerical(param)
         .then((res) => {
@@ -757,7 +789,8 @@ export default {
         smallNumber: this.xiaobaninput,
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       page2echarts01(param)
         .then((res) => {
@@ -776,7 +809,8 @@ export default {
         smallNumber: this.xiaobaninput,
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       page2echarts02(param)
         .then((res) => {
@@ -875,7 +909,8 @@ export default {
         smallNumber: this.xiaobaninput,
         cityId: this.$store.state.addr.selectCity.areaId,
         countyId: this.$store.state.addr.selectDistrict.areaId,
-        townId: this.$store.state.addr.selectStreet.areaId
+        townId: this.$store.state.addr.selectStreet.areaId,
+        courseId:this.$store.state.addr.selectProject.ProjectID,
       };
       page2echarts03(param)
         .then((res) => {
@@ -1240,6 +1275,7 @@ export default {
       // proClass[e.rowIndex]&&proClass[e.rowIndex].classList.add('active');
 
       let rowId = e.row[4];
+      this.changeSelectProject({ProjectID:rowId,ProjectName:e.row[0]});
       document.getElementById(rowId).classList.add('active');
       let param = {
         courseId: rowId