页面优化

index.html

@@ -17,6 +17,8 @@
       html {
         background-color: white;
         height: 100vh;
+
+        margin: 0 auto!important;
       }
 
       body {

src/App.vue

@@ -20,8 +20,15 @@ export default {
 .cube-picker-wheel-item{
   font-size: 12px!important;
 }
+.cube-popup_mask{
+  margin: 0 auto;
+}
+.overflowHidden{
+  overflow: hidden!important;
+}
 * {
   font-family: "微软雅黑";
+  max-width: 750px;
 }
 .fl {
   float: left;

src/components/showModel/showModel.vue

@@ -466,6 +466,7 @@ export default {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 99;
+  margin: 0 auto;
   .red{
     color: red;
   }

src/components/showModel2/showModel2.vue

@@ -451,6 +451,7 @@ export default {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 99;
+  margin: 0 auto;
   .red{
     color: red;
   }

src/components/showModelPicture/showModelPicture.vue

@@ -107,6 +107,7 @@ export default {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 99;
+  margin: 0 auto;
   .red{
     color: red;
   }

src/views/ConsumableList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bgColor">
-    <div slot="content" class="scroll-wrapper">
-      <div class="demo">
+    <div slot="content" class="scroll-wrapper" style="height:100%;">
+      <div class="demo" style="height:100%;">
         <div class="header">耗材列表</div>
         <div class="seatchHeader">
           <div class="search fl">
@@ -13,7 +13,6 @@
               @input="searchData()"
             />
           </div>
-          <!-- <button class="selectBtn fr" @click="showPicker">筛选</button> -->
         </div>
         <div class="scroll-list-wrap">
           <cube-scroll
@@ -21,14 +20,14 @@
             :data="items"
             :options="options"
             @pulling-down="onPullingDown"
-            @pulling-up="onPullingUp"
+            @pulling-up="onPullingUp" style="height:100%;"
           >
             <div class="conentBox">
               <div
                 class="conent"
-                v-for="(item, index) in items"
+                v-for="item in items"
                 @click="showModal(item)"
-                :key="index"
+                :key="item.id"
               >
                 <div class="head">
                   <p>
@@ -43,10 +42,6 @@
                   </p>
                 </div>
               </div>
-              <div class="wushuju" v-show="wushuju">
-                <img src="./../../static/images/wushuju.svg" alt />
-                <p>暂无数据</p>
-              </div>
             </div>
             <template v-if="customPullDown" slot="pulldown" slot-scope="props">
               <div
@@ -76,11 +71,15 @@
                 </div>
               </div>
             </template>
+            <div class="wushuju" v-show="!loadShow && !items.length">
+              <img src="./../../static/images/wushuju.svg" alt />
+              <p>暂无数据</p>
+            </div>
           </cube-scroll>
         </div>
       </div>
     </div>
-    <load-ing v-if="!items.length && !wushuju"></load-ing>
+    <load-ing v-show="loadShow"></load-ing>
     <!-- 弹窗 -->
     <showModel
       v-if="models.disjunctor"
@@ -96,7 +95,7 @@
   </div>
 </template>
 <script>
-import Vue from "vue";
+import { debounce } from 'lodash';
 import showModel from "../components/showModel/showModel.vue";
 import CubePage from "../components/cube-page.vue";
 import SwitchOption from "../components/switch-option";
@@ -123,7 +122,6 @@ export default {
       pullUpLoadMoreTxt: "加载更多",
       pullUpLoadNoMoreTxt: "没有更多数据",
       customPullDown: true,
-      wushuju: false,
       title: "", //搜索内容
       // stateData: [
       //   {
@@ -140,11 +138,10 @@ export default {
       //   }
       // ],
       // stateValue: "todo",
-      sum: 20,
+      sum: 10,
       idx: 0,
       stateClass: "",
       loadShow: true,
-      searching: false
     };
   },
   components: {
@@ -294,19 +291,16 @@ export default {
       this.getData();
     },
     cancelHandle() {},
-    // 搜索
-    searchData() {
-      this.items = [];
-      this.searching = true;
-      this.getData();
-    },
+    searchData:debounce(function () {
+      // 处理输入变化事件的逻辑
+      this.loadShow = true;
+      this.items=[]
+      this.getData()
+    }, 300),
     // 获取列表
     getData() {
       console.log(this.$route, 777)
       console.log(this.stateValue);
-      if (this.searching) {
-        this.idx = 0;
-      }
       let title = this.title;
       let postData = {
         idx: this.idx,
@@ -323,23 +317,18 @@ export default {
           postData
         )
         .then((res) => {
-          console.log(this.searching, 'res')
           if(res.status == 200){
             if(title == this.title){
               if (res.data.list.length > 0) {
-                this.wushuju = false;
-                if (this.searching) {
-                  this.items = res.data.list;
-                } else {
+                if (this.idx) {
                   this.items = this.items.concat(res.data.list);
+                } else {
+                  this.items = res.data.list;
                 }
               } else {
-                if(this.items.length){
-                  this.wushuju = this.searching;
-                }else{
-                  this.wushuju = true;
-                }
+                this.$refs.scroll.forceUpdate();
               }
+              this.loadShow = false;
             }
           }else{
             this.$createDialog({
@@ -349,72 +338,34 @@ export default {
               icon: "cubeic-wrong"
             }).show();
           }
-          this.loadShow = false;
         });
     },
     onPullingDown() {
       // 模拟更新数据
-      var that = this;
-      that.items = [];
-      that.idx = 0;
-      that.searching = false;
-      setTimeout(() => {
-        that.getData();
-      }, 1000);
+      this.idx = 0;
+      this.sum = 10;
+      this.getData();
     },
     onPullingUp() {
-      var that = this;
-      that.idx = that.idx + 1;
-      that.searching = false;
-      that.getData();
-    },
-    updatePullDownRefresh(val) {
-      this.pullDownRefresh = val;
-    },
-    updatePullDownRefreshThreshold(val) {
-      this.pullDownRefreshThreshold = val;
-    },
-    updatePullDownRefreshTxt(val) {
-      this.pullDownRefreshTxt = val;
-    },
-    updatePullUpLoad(val) {
-      this.pullUpLoad = val;
-    },
-    updatePullUpLoadThreshold(val) {
-      this.pullUpLoadThreshold = val;
-    },
-    updatePullUpLoadMoreTxt(val) {
-      this.pullUpLoadMoreTxt = val;
-    },
-    updatePullUpLoadNoMoreTxt(val) {
-      this.pullUpLoadNoMoreTxt = val;
-    },
-    updateCustomPullDown(val) {
-      this.customPullDown = val;
+      this.idx = this.idx + 1;
+      this.getData();
     },
-    rebuildScroll() {
-      Vue.nextTick(() => {
-        this.$refs.scroll.destroy();
-        this.$refs.scroll.initScroll();
-      });
-    }
   },
-  created() {
+  mounted() {
     // this.$route.params.data
     // this.getParamsState();
-    this.getData(this.idx, this.sum);
-  }
+    setTimeout(()=>{
+      this.getData();
+    },0)
+  },
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 .scroll-list-wrap {
-  /* height: 350px */
   height: 90vh;
-  /* border: 1px solid rgba(0, 0, 0, 0.1) */
   border-radius: 5px;
   transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
-  // overflow: hidden;
-  padding-top: 1.76rem;
+  overflow: hidden;
 }
 
 .foods-wrapper {
@@ -518,6 +469,10 @@ export default {
 .bgColor {
   background-color: white;
 }
+.demo{
+  display:flex;
+  flex-direction:column;
+}
 .food-item {
   border-top: 0.16rem rgb(238, 238, 238) solid;
 }
@@ -613,18 +568,18 @@ export default {
     color: #fff;
     font-size: 0.37rem;
     background: linear-gradient(#2e2f32, #414246);
-    position: fixed;
-    top: 0;
-    z-index: 6;
+    // position: fixed;
+    // top: 0;
+    // z-index: 6;
   }
   .seatchHeader {
     width: 100%;
     background-color: #eee;
     padding: 0.16rem;
-    overflow: hidden;
-    position: fixed;
-    top: 0.88rem;
-    z-index: 6;
+    // overflow: hidden;
+    // position: fixed;
+    // top: 0.88rem;
+    // z-index: 6;
     box-sizing: border-box;
     .search {
       width: 100%;
@@ -659,6 +614,7 @@ export default {
   }
 }
 .conentBox {
+  height: 100%;
   width: 100%;
   .conent {
     font-size: 0.32rem;

src/views/IncidentNewList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bgColor">
-    <div slot="content" class="scroll-wrapper">
-      <div class="demo">
+    <div slot="content" class="scroll-wrapper" style="height:100%;">
+      <div class="demo" style="height:100%;">
         <div class="header">
           <div class="header_left">
             <div class="tab" :class="{active: tab.id == tabTypeIdActive}" v-for="tab in tabTypes" :key="tab.id" @click="typeChange(tab)">{{tab.text}}({{ tab.num }})</div>
@@ -20,7 +20,7 @@
             :data="items"
             :options="options"
             @pulling-down="onPullingDown"
-            @pulling-up="onPullingUp"
+            @pulling-up="onPullingUp" style="height:100%;"
           >
             <div class="conentBox" v-if="!loadShow && items.length">
               <div
@@ -162,15 +162,16 @@
                 </div>
               </div>
             </template>
-            <!-- <div class="wushuju" v-if="!loadShow && items.length === 0">
+            <div class="wushuju" v-show="!loadShow && !items.length">
               <img src="./../../static/images/wushuju.svg" alt />
-              <p>暂无事件</p>
-            </div> -->
+              <p>暂无数据</p>
+            </div>
           </cube-scroll>
         </div>
       </div>
     </div>
     <load-ing v-show="loadShow"></load-ing>
+
     <!-- 图片弹窗 -->
     <showModelPicture
       v-if="models3.disjunctor"
@@ -1072,7 +1073,7 @@ export default {
         });
     }
   },
-  created() {
+  mounted() {
     var that = this;
     let menu = JSON.parse(localStorage.getItem("menu"));
     if (menu) {
@@ -1095,14 +1096,16 @@ export default {
     );
     this.getParamsState();
     this.loadShow = true;
-    this.getData();
+    setTimeout(()=>{
+      this.getData();
+    },0)
     this.getStateList();
 
     localStorage.removeItem("modelData");
     localStorage.removeItem("referenceInfo");
     localStorage.removeItem("order");
     localStorage.removeItem("model");
-  }
+  },
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
@@ -1334,6 +1337,10 @@ export default {
 .bgColor {
   background-color: white;
 }
+.demo{
+  display:flex;
+  flex-direction:column;
+}
 .food-item {
   border-top: 0.16rem rgb(238, 238, 238) solid;
 }
@@ -1470,7 +1477,6 @@ export default {
           max-height: 0.88rem;
         }
         .grayFont {
-          overflow-x: scroll;
           color: #666;
         }
       }

src/views/Inspection.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="bgColor">
-    <div slot="content" class="scroll-wrapper">
-      <div class="demo">
+    <div slot="content" class="scroll-wrapper" style="height:100%;">
+      <div class="demo" style="height:100%;">
         <div class="header">巡检列表</div>
         <div class="seatchHeader">
           <div class="search fl">
@@ -21,7 +21,7 @@
             :data="items"
             :options="options"
             @pulling-down="onPullingDown"
-            @pulling-up="onPullingUp"
+            @pulling-up="onPullingUp" style="height:100%;"
           >
             <!-- <cube-select
               class="fr"
@@ -71,10 +71,6 @@
                   <span>逾期时间：{{ item.overdueTime }}</span>
                 </div>
               </div>
-              <div class="wushuju" v-show="wushuju">
-                <img src="./../../static/images/wushuju.svg" alt />
-                <p>暂无巡检</p>
-              </div>
             </div>
             <template v-if="customPullDown" slot="pulldown" slot-scope="props">
               <div
@@ -104,15 +100,19 @@
                 </div>
               </div>
             </template>
+            <div class="wushuju" v-show="!loadShow && !items.length">
+              <img src="./../../static/images/wushuju.svg" alt />
+              <p>暂无数据</p>
+            </div>
           </cube-scroll>
         </div>
       </div>
     </div>
-    <load-ing v-if="!items.length && !wushuju"></load-ing>
+    <load-ing v-show="loadShow"></load-ing>
   </div>
 </template>
 <script>
-import Vue from "vue";
+import { debounce } from 'lodash';
 import CubePage from "../components/cube-page.vue";
 import SwitchOption from "../components/switch-option";
 import InputOption from "../components/input-option";
@@ -136,7 +136,6 @@ export default {
       pullUpLoadMoreTxt: "加载更多",
       pullUpLoadNoMoreTxt: "没有更多数据",
       customPullDown: true,
-      wushuju: false,
       title: "", //搜索内容
       stateData: [
         {
@@ -157,7 +156,6 @@ export default {
       idx: 0,
       stateClass: "",
       loadShow: true,
-      searching: false
     };
   },
   components: {
@@ -305,24 +303,23 @@ export default {
       console.log(selectedVal, selectedIndex, selectedText);
 
       this.stateValue = selectedVal[0];
+      this.loadShow = true;
       this.items = [];
       this.getData();
     },
     cancelHandle() {},
     // 搜索
-    searchData() {
-      this.items = [];
-      this.searching = true;
-      this.getData();
-    },
+    searchData:debounce(function () {
+      // 处理输入变化事件的逻辑
+      this.loadShow = true;
+      this.items=[]
+      this.getData()
+    }, 300),
     // 获取列表
     getData() {
       console.log(this.stateValue);
       var that = this;
       // that.items.length=0;
-      if (that.searching) {
-        that.idx = 0;
-      }
       let postData = {
         assignee: that.loginUser.id,
         idx: that.idx,
@@ -353,9 +350,8 @@ export default {
           "service/bpm/InspectionProcessActual/fetchServiceTasks/ALL",
           postData
         )
-        .then(function(res) {
+        .then((res) => {
           if (res.data.data.length > 0) {
-            that.wushuju = false;
             for (var i = 0; i < res.data.data.length; i++) {
               if (res.data.data[i].createTime) {
                 res.data.data[i].createTime = formatDate(
@@ -364,79 +360,42 @@ export default {
                 );
               }
             }
-            if (that.searching) {
-              that.items = res.data.data;
+            if (this.idx) {
+              this.items = this.items.concat(res.data.data);
             } else {
-              that.items = that.items.concat(res.data.data);
+              this.items = res.data.data;
             }
           } else {
-            that.wushuju = true;
+            this.$refs.scroll.forceUpdate();
           }
           that.loadShow = false;
         });
     },
     onPullingDown() {
       // 模拟更新数据
-      var that = this;
-      that.items = [];
-      that.idx = 0;
-      that.searching = false;
-      setTimeout(() => {
-        that.getData();
-      }, 1000);
+      this.idx = 0;
+      this.sum = 10;
+      this.getData();
     },
     onPullingUp() {
-      var that = this;
-      that.idx = that.idx + 1;
-      that.searching = false;
-      that.getData();
-    },
-    updatePullDownRefresh(val) {
-      this.pullDownRefresh = val;
-    },
-    updatePullDownRefreshThreshold(val) {
-      this.pullDownRefreshThreshold = val;
-    },
-    updatePullDownRefreshTxt(val) {
-      this.pullDownRefreshTxt = val;
-    },
-    updatePullUpLoad(val) {
-      this.pullUpLoad = val;
-    },
-    updatePullUpLoadThreshold(val) {
-      this.pullUpLoadThreshold = val;
-    },
-    updatePullUpLoadMoreTxt(val) {
-      this.pullUpLoadMoreTxt = val;
-    },
-    updatePullUpLoadNoMoreTxt(val) {
-      this.pullUpLoadNoMoreTxt = val;
-    },
-    updateCustomPullDown(val) {
-      this.customPullDown = val;
+      this.idx = this.idx + 1;
+      this.getData();
     },
-    rebuildScroll() {
-      Vue.nextTick(() => {
-        this.$refs.scroll.destroy();
-        this.$refs.scroll.initScroll();
-      });
-    }
   },
-  created() {
+  mounted() {
     this.getParamsState();
-    this.getData(this.idx, this.sum);
+    setTimeout(()=>{
+      this.getData();
+    },0)
   }
 };
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 .scroll-list-wrap {
-  /* height: 350px */
   height: 90vh;
-  /* border: 1px solid rgba(0, 0, 0, 0.1) */
   border-radius: 5px;
   transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
-  // overflow: hidden;
-  padding-top: 1.76rem;
+  overflow: hidden;
 }
 
 .foods-wrapper {
@@ -537,6 +496,10 @@ export default {
 }
 </style>
 <style lang="less" scoped>
+.demo{
+  display:flex;
+  flex-direction:column;
+}
 .bgColor {
   background-color: white;
 }
@@ -635,18 +598,11 @@ export default {
     color: #fff;
     font-size: 0.37rem;
     background: linear-gradient(#2e2f32, #414246);
-    position: fixed;
-    top: 0;
-    z-index: 6;
   }
   .seatchHeader {
     width: 100%;
     background-color: #eee;
     padding: 0.16rem;
-    overflow: hidden;
-    position: fixed;
-    top: 0.88rem;
-    z-index: 6;
     box-sizing: border-box;
     .search {
       width: 5.74rem;

src/views/indes.vue

@@ -638,7 +638,6 @@ export default {
             max-height: 0.88rem;
           }
           .grayFont {
-            overflow-x: scroll;
             color: #666;
           }
         }

src/views/loading.vue

@@ -23,8 +23,9 @@ export default {
 }
 .load{
     position: fixed;
-    left: 0;
+    left: 50%;
     top: 0;
+    transform: translateX(-50%);
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.5)!important;

src/views/my.vue

@@ -320,16 +320,20 @@ export default {
         })
         .then((res) => {
           if (res.status == 200) {
-            let userList = res.data.list[0].userList.map((v) => v.id); //用户id列表
-            this.isWorkOnline = userList.includes(this.loginUser.id);
-            if (this.isWorkOnline) {
-              this.$http.post("service/auth/showOnlineBtn", {}).then((res) => {
+            if(res.data.list.length){
+              let userList = res.data.list[0].userList.map((v) => v.id); //用户id列表
+              this.isWorkOnline = userList.includes(this.loginUser.id);
+              if (this.isWorkOnline) {
+                this.$http.post("service/auth/showOnlineBtn", {}).then((res) => {
+                  this.isWorkLoading = false;
+                  if (res.data.status == 200) {
+                    this.online = res.data.online;
+                  }
+                });
+              } else {
                 this.isWorkLoading = false;
-                if (res.data.status == 200) {
-                  this.online = res.data.online;
-                }
-              });
-            } else {
+              }
+            }else{
               this.isWorkLoading = false;
             }
           }

src/views/prompting.vue

@@ -35,13 +35,15 @@ export default {
 .success{
     position: fixed;
     top: 0;
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
     width: 100%;
     height: .64rem;
     line-height: .64rem;
     padding: 0 .24rem;
     background-color: #bae6b8;
-    z-index: 99999 
+    z-index: 99999;
+    box-sizing: border-box;
 }
 .success i{
     font-size: .35rem;

src/views/summaryOrder.vue

@@ -1292,12 +1292,12 @@ export default {
   background: #ececec;
   position: fixed;
   bottom: 0;
-  left: 0;
+  left: 50%;
+  transform: translateX(-50%);
   width: 100%;
   padding-bottom: 0.12rem;
   padding-top: 0.12rem;
   display: flex;
-
 }
 .sub .cube-btn {
   flex: 1;

static/css/fontnew/iconfont.css

@@ -7,7 +7,7 @@
 
 .dash {
   font-family: "dash" !important;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

static/css/iconfont.css

@@ -9,7 +9,7 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

static/css/newicon/iconfont.css

@@ -7,7 +7,7 @@
 
 .newicon {
   font-family: "newicon" !important;
-  font-size: 16px;
+  font-size: inherit;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

static/js/public.js

@@ -1,6 +1,6 @@
 // 屏幕自适应
 setInterval(function(){
-    var width=screen.width;
+    var width=Math.min(screen.width, 750);
     var size=100*width/750+'px';
     $('html').css({"font-size":size});
 },100)