项目点击

src/views/index.vue

@@ -2,9 +2,9 @@
  * @Description: 
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
- * @LastEditors: wangcc 1053578651@qq.com
- * @LastEditTime: 2022-11-01 00:29:56
- * @FilePath: \ntbigscreen\src\views\index.vue
+ * @LastEditors: wangcc
+ * @LastEditTime: 2022-11-01 09:30:01
+ * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
 <template>
@@ -14,18 +14,35 @@
     <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>
+      <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" />
 
     <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 />
+      <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'">
@@ -36,24 +53,49 @@
         :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" />
+      <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" />
+      <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
+        class="left-item chart-wrap"
+        mid="page6Char1"
+        ref="page6Char1"
+        :option="page6Char1"
+      />
       <!-- <MyEcharts
           class="left-item chart-wrap"
           mid="page6Char2"
@@ -63,13 +105,27 @@
       <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>
+          <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" />
+        <dv-scroll-board
+          :key="scrollBoardKey"
+          class="scroll-event"
+          :config="scrollEventConfig"
+          ref="scrollBoard"
+          @click="scrollEventClick"
+          @mouseout="scrollEventOut"
+        />
       </div>
     </section>
 
@@ -83,8 +139,13 @@
       </div>
       <div class="right_xiaoban">
         <div class="tab-box" v-if="showxiaoban">
-          <div class="tab-btn" :class="classFunc(index)" @click="tabLink(index)" v-for="(item, index) in tabData"
-            :key="index">
+          <div
+            class="tab-btn"
+            :class="classFunc(index)"
+            @click="tabLink(index)"
+            v-for="(item, index) in tabData"
+            :key="index"
+          >
             <span class="tab-span">{{ item.name }}</span>
           </div>
         </div>
@@ -102,16 +163,41 @@
             </el-input>
           </div>
         </div>
-        <section v-if="showxiaoban || showbase" class="scroll-board-wrap" :class="{ close: showScrollBoard == true }">
-          <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"
-            :style="scrollBoardStyle" />
-          <dv-scroll-board v-if="showxiaoban && cur == 0" :key="scrollBoardKey" class="scroll-board-01" id="projectId"
-            :config="scrollPeojectConfig" ref="scrollProjectBoard" @click="scrollProjectClick" @mouseout="scrollOutPro"
-            :style="scrollBoardStyle" />
+        <section
+          v-if="showxiaoban || showbase"
+          class="scroll-board-wrap"
+          :class="{ close: showScrollBoard == true }"
+        >
+          <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"
+            :style="scrollBoardStyle"
+          />
+          <dv-scroll-board
+            v-if="showxiaoban && cur == 0"
+            :key="scrollBoardKey"
+            class="scroll-board-01"
+            id="projectId"
+            :config="scrollPeojectConfig"
+            ref="scrollProjectBoard"
+            @click="scrollProjectClick"
+            @mouseout="scrollOutPro"
+            :style="scrollBoardStyle"
+          />
           <div class="scroll-board-tool" @click="toggleShowScrollBoard">
             <div class="inner">
               <img src="../assets/img/jiantou.png" alt />
@@ -119,9 +205,6 @@
           </div>
         </section>
       </div>
-
-
-
     </section>
     <!-- </dv-full-screen-container> -->
   </div>
@@ -209,6 +292,7 @@ export default {
           name: '小班查询'
         }
       ],
+      rowList:[],
       cur: 0,
       showxiaoban: true,
       showbase: false,
@@ -261,7 +345,7 @@ export default {
       baseinput: ''
     };
   },
-  created() { },
+  created() {},
   computed: {
     ...mapGetters(['vuexCityList', 'vuexDistrictList', 'vuexStreetList'])
   },
@@ -555,7 +639,9 @@ export default {
             ]);
           });
           this.scrollBoardKey = Date.now();
-          this.$refs.scrollProjectBoard.updateRows(this.scrollPeojectConfig.data);
+          this.$refs.scrollProjectBoard.updateRows(
+            this.scrollPeojectConfig.data
+          );
 
           // console.log('this.scrollBoardConfig.data', this.scrollBoardConfig.data);
           // this.scrollBoardConfig = res.data;
@@ -1124,11 +1210,9 @@ export default {
       });
     },
     scrollProjectClick(e) {
-      console.log(e);
-      let proClass = document.getElementsByClassName('row-item')
+      let proClass = document.getElementsByClassName('row-item');
       proClass[e.rowIndex].style.background = 'rgb(4, 145, 110)';
-
-      let rowId = e.row[4]
+      let rowId = e.row[4];
       let param = {
         courseId: rowId,
         pageNum: 1,
@@ -1136,7 +1220,7 @@ export default {
       };
       projectSmallClass(param).then((res) => {
         if (res.code == 200) {
-          this.getProjectSmallClassMap(res.rows)
+          this.getProjectSmallClassMap(res.rows);
         }
       });
     },
@@ -1163,11 +1247,10 @@ export default {
     scrollOut(e) {
       console.log(e);
       this.changeSearchSmallClass({ name: false });
-
     },
     scrollOutPro(e) {
-      let proClass = document.getElementsByClassName('row-item')
-      proClass[e.rowIndex].style.background = '';
+      // let proClass = document.getElementsByClassName('row-item')
+      // proClass[e.rowIndex].style.background = '';
     },
     scrollBaseListClick(e) {
       console.log('scrollBaseListClick', e);
@@ -1200,9 +1283,8 @@ export default {
     },
     classFunc(index) {
       if (this.cur == index) {
-        return `active active${index}`
+        return `active active${index}`;
       }
-
     }
   }
 };