coys

src/components/TopBar.vue

@@ -1,4 +1,7 @@
 <template>
+  <div>
+
+  
   <div class="top-bar">
     <div class="top-box">
       <span>移动安全保卫管理平台</span>
@@ -11,28 +14,47 @@
       </div>
       <van-icon name="arrow" size="20"  />
     </div>
+  
+  </div>
+  
+    <!-- 天气预警 -->
+    <van-swipe v-if="list.length > 0" style="height: 50px" vertical autoplay="2000">
+      <van-swipe-item v-for="item in list" :key="item.id" @click="clickHandler(item)">
+        <div class="color" :style="{ color: item.bgc, backgroundColor: '#fff' }">
+          <van-icon name="warn-o" /> {{ item.alarmTitle }}
+        </div>
+      </van-swipe-item>
+
+      <template #indicator>
+        <div class="custom-indicator"></div>
+      </template>
+    </van-swipe>
   </div>
 </template>
 <script>
 import { Icon } from 'vant';
 import {mapGetters} from "vuex";
-import {logout} from "@/api/public";
+import {logout,getTheAreaWeather} from "@/api/public";
 export default {
   components: {
     [Icon.name]: Icon,
   },
   data() {
     return {
+      list: [],
+      show: false,
+      info: '',
       active: this.defaultActive,
       rolesList:[]
     }
   },
   computed: {
-    ...mapGetters(['userName','orgName'])
+    ...mapGetters(['userName','orgName','orgId'])
   },
   created(){
     this.rolesList=JSON.parse(window.sessionStorage.getItem('SET_USER_ROLELIST'))
-    console.log(this.rolesList);
+
+    this.getTheWeather()
   },
   methods: {
     clickOutLogin(){
@@ -42,6 +64,29 @@ export default {
         this.$toast('退出登录');
       })
     },
+    clickHandler(item) {
+      this.info = item.alarmContent
+      this.show = true
+    },
+
+    //获取天气数据
+    getTheWeather() {
+      getTheAreaWeather(this.orgId).then(res => {
+        
+        this.list = res.data||[]
+        this.list.forEach(item => {
+          if (item.alarmLevel == '橙色') {
+            item.bgc = '#fa8e00'
+          } else if (item.alarmLevel == '红色') {
+            item.bgc = '#fa0008'
+          } else if (item.alarmLevel == '蓝色') {
+            item.bgc = '#3788fa'
+          } else if (item.alarmLevel == '黄色') {
+            item.bgc = '#e9fa00'
+          }
+        })
+      })
+    },
   }
 }
 </script>

src/views/home/menu.vue

@@ -1,18 +1,7 @@
 <template>
   <div class="menu-container">
     <top-bar></top-bar>
-    <!-- 天气预警 -->
-    <van-swipe v-if="list.length > 0" style="height: 50px" vertical autoplay="2000">
-      <van-swipe-item v-for="item in list" :key="item.id" @click="clickHandler(item)">
-        <div class="color" :style="{ color: item.bgc, backgroundColor: '#fff' }">
-          <van-icon name="warn-o" /> {{ item.alarmTitle }}
-        </div>
-      </van-swipe-item>
-
-      <template #indicator>
-        <div class="custom-indicator"></div>
-      </template>
-    </van-swipe>
+    
     <div class="menu-list">
       <div class="menu-list-item" v-for="(v, i) in menuList" :key="i">
         <p @click="onclick">{{ v.meta.title }}</p>
@@ -56,7 +45,7 @@ export default {
   },
   mounted() {
     this.getMenuList()
-    this.getTheWeather()
+    
   },
   methods: {
     getMenuList() {

src/views/home/works.vue

@@ -1,21 +1,276 @@
 <template>
   <div class="index-container">
     <top-bar></top-bar>
+    <!-- 步骤条 -->
+    <van-steps :active="active">
+      <van-step>履职</van-step>
+      <van-step>调阅</van-step>
+      <van-step>检查</van-step>
+      <van-step>演练</van-step>
+      <van-step>培训</van-step>
+      <van-step>其他</van-step>
+     
+    </van-steps>
+    <div class="big_box" @scroll="scrolling">
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">履职任务</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-empty description="暂无数据" />
+        </div>
+      </div>
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">监控调阅</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-cell-group>
+            <van-cell
+              v-for="(i, index) in 6"
+              :key="index"
+              class="mainTitle"
+              value="待履职"
+              :title="'检查任务'"
+              :label="'2020-01-01 10:10:23'"
+              is-link
+              :to="{ path: 'path', query: { id: 'v.id', enable: 1 } }"
+              :value-class="`title-orange`"
+            />
+          </van-cell-group>
+        </div>
+      </div>
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">检查任务</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-cell-group>
+            <van-cell
+              v-for="(i, index) in 6"
+              :key="index"
+              class="mainTitle"
+              value="待检查"
+              :title="'检查任务'"
+              :label="'2020-01-01 10:10:23'"
+              is-link
+              :to="{ path: 'path', query: { id: 'v.id', enable: 1 } }"
+              :value-class="`title-orange`"
+            />
+          </van-cell-group>
+        </div>
+      </div>
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">演练登记</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-cell-group>
+            <van-cell
+              v-for="(i, index) in 6"
+              :key="index"
+              class="mainTitle"
+              value="待演练"
+              :title="'检查任务'"
+              :label="'2020-01-01 10:10:23'"
+              is-link
+              :to="{ path: 'path', query: { id: 'v.id', enable: 1 } }"
+              :value-class="`title-orange`"
+            />
+          </van-cell-group>
+        </div>
+      </div>
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">教育培训</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-cell-group>
+            <van-cell
+              v-for="(i, index) in 6"
+              :key="index"
+              class="mainTitle"
+              value="待履职"
+              :title="'检查任务'"
+              :label="'2020-01-01 10:10:23'"
+              is-link
+              :to="{ path: 'path', query: { id: 'v.id', enable: 1 } }"
+              :value-class="`title-orange`"
+            />
+          </van-cell-group>
+        </div>
+      </div>
+      <!-- 待办列表 -->
+      <div class="cellMargin">
+        <!-- 标题区域 -->
+        <van-cell value="0" is-link>
+          <!-- 使用 title 插槽来自定义标题 -->
+          <template #title>
+            <span class="titleLeft"> </span>
+            <span class="custom-title">其他任务</span>
+          </template>
+        </van-cell>
+        <!-- 待办区域 -->
+        <div class="marginCls">
+          <van-cell-group>
+            <van-cell
+              v-for="(i, index) in 6"
+              :key="index"
+              class="mainTitle"
+              value="待履职"
+              :title="'检查任务'"
+              :label="'2020-01-01 10:10:23'"
+              is-link
+              :to="{ path: 'path', query: { id: 'v.id', enable: 1 } }"
+              :value-class="`title-orange`"
+            />
+          </van-cell-group>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script >
+<script>
 import TopBar from '@/components/TopBar'
-import {mapGetters} from "vuex";
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'works',
   components: { TopBar },
-}
+  data() {
+    return {
+      active: 0,
+      oldScrollTop: ''
+    }
+  },
+  mounted() {
+   
+  },
+  methods: {
+    scrolling(el) {
+    
+      // 滚动条距文档顶部的距离
+      let scrollTop =  document.querySelector('.big_box').scrollTop || document.body.scrollTop
+      // 滚动条滚动的距离
+      let scrollStep = scrollTop - this.oldScrollTop
+      console.log('header 滚动距离 ', scrollTop)
+      // 更新——滚动前，滚动条距文档顶部的距离
+      this.oldScrollTop = scrollTop
 
+      //变量windowHeight是可视区的高度
+      let windowHeight = document.querySelector('.big_box').clientHeight || document.body.clientHeight
+      //变量scrollHeight是滚动条的总高度
+      let scrollHeight = document.querySelector('.big_box').scrollHeight || document.body.scrollHeight
+
+      //滚动条到底部的条件
+      if (scrollTop + windowHeight == scrollHeight) {
+        console.log('到了最底')
+        this.active = 5
+        console.log(this.active,'sss');
+        //你想做的事情
+        return
+      }
+      if (scrollTop >= 300) {
+        
+        this.active =Math.floor(scrollTop / 250) 
+      } 
+      // 判断是否到了最顶部
+      if (scrollTop <= 0) {
+        console.log('header 到了最顶部')
+        this.active = 0
+      }
+      console.log(this.active);
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.scrolling)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.index-container {
+.van-cell__right-icon {
+}
+.van-cell::after {
+  background-color: #1989fa;
+}
+.titleLeft {
+  display: inline-block;
+  width: 8px;
+  height: 40px;
+  background-color: #1989fa;
+  vertical-align: middle;
+  margin-right: 10px;
+}
 
+.van-cell__title {
+  color: #1989fa;
+}
+.mainTitle {
+  .van-cell__title {
+    color: black;
+  }
+}
+.cellMargin {
+  margin: 20px;
+  border-radius: 10px;
+  box-shadow: 0 1px 8px #ccc;
+  overflow: hidden;
+}
+.marginCls {
+  height: 400px;
+  width: 100%;
+  background-color: #fff;
+  overflow-y: scroll;
+}
+.van-empty {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.index-container {
+}
+.title-orange {
+  color: #fd8104;
+}
+.big_box {
+  height: calc(100vh - 520px);
+  overflow: auto;
 }
 </style>