Merge branch 'master' of http://git.cc-lotus.info/roose/MZbigScreen

src/App.vue

@@ -66,12 +66,24 @@ a {
   text-decoration: none;
 }
 
-/deep/ .el-select-dropdown__wrap {
-  background-color: greenyellow!important;
+.el-picker-panel {
+  background-color: #010f5a !important;
+  color: #00d7ff!important;
+  font-weight: 900;
+  font-size: 16px;
+  border: 1px solid #00d7ff !important;
+  margin-top: 5px !important;
 }
-/deep/ .el-select-dropdown__item.hover, /deep/.el-select-dropdown__item:hover {
-  background-color: #00d7ff !important;
+.el-month-table td .cell {
+  color: #00d7ff!important;
 }
 
+.el-date-picker__header-label{
+  color: #00d7ff!important;
+}
+
+.el-year-table td .cell {
+  color: #00d7ff!important;
+}
 
 </style>

src/pages/Ranking.vue

@@ -55,6 +55,14 @@
                 </el-option>
             </el-select>
             <span class="address-title">选择时间：</span>
+            <el-date-picker
+                    class="input1"
+                    v-model="date"
+                    type="month"
+                    value-format="yyyy-MM"
+                    format="yyyy年MM月"
+                    placeholder="选择周">
+            </el-date-picker>
             <span class="bj-qeuren" @click="queren"></span>
             <span class="return-btn" @click="goHome"></span>
         </div>
@@ -64,12 +72,12 @@
             <el-row :span="24" v-for="(item, index) in listData" :key="index">
                 <el-col :span="3" class="name">
                     <el-image v-if="index == 0 ||index == 1 || index== 2 " class="img"
-                              :src="scrollTextisColor(index)"></el-image>
-                    <div v-else class="top10-number">{{index+1}}</div>
+                              :src="scrollTextisColor1(index)"></el-image>
+                    <div v-else class="top11-number">{{index+1}}</div>
                 </el-col>
                 <el-col :span="4" class="name">{{item.name}}</el-col>
-                <el-col :span="4" class="name">{{item.address}}</el-col>
-                <el-col :span="8" class="name">
+                <el-col :span="7" class="name">{{item.address}}</el-col>
+                <el-col :span="7" class="name">
                     <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum(item.num)"></el-progress>
                 </el-col>
                 <el-col :span="3" class="name">{{item.num}}</el-col>
@@ -83,8 +91,8 @@
                     <div v-else class="top10-number">{{index+1}}</div>
                 </el-col>
                 <el-col :span="4" class="name">{{item.name}}</el-col>
-                <el-col :span="4" class="name">{{item.address}}</el-col>
-                <el-col :span="8" class="name">
+                <el-col :span="7" class="name">{{item.address}}</el-col>
+                <el-col :span="7" class="name">
                     <el-progress :stroke-width="15" :show-text="isText" :percentage="formatNum(item.num)"></el-progress>
                 </el-col>
                 <el-col :span="3" class="name">{{item.num}}</el-col>
@@ -93,12 +101,6 @@
     </div>
 </template>
 <script>
-    // import jlMap from "../components/index/jlMap.vue";
-    // import com3 from "../components/index/3.vue";
-    // import com6 from "../components/oldStatistics/6.vue";
-    // import vueSeamlessScroll from "vue-seamless-scroll";
-    // import moment from "moment";
-
     import {} from "../api";
 
     export default {
@@ -164,6 +166,7 @@
                 dept3: '',
                 dept4: '',
                 dept5: '',
+                date:'',
                 isZhankai: false,  //是够展开和收起
                 // 左一
                 dataArr1: [],
@@ -186,6 +189,39 @@
                     {name: '李四', address: '背景办事处', num: 50000},
                     {name: '周五', address: '背景办事处', num: 48000},
                     {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+
                 ],
                 listData1: [
                     {name: '张三', address: '桃园办事处', num: 56236},
@@ -204,6 +240,38 @@
                     {name: '李四', address: '背景办事处', num: 50000},
                     {name: '周五', address: '背景办事处', num: 48000},
                     {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '张三', address: '桃园办事处', num: 56236},
+                    {name: '李四', address: '背景办事处', num: 50000},
+                    {name: '周五', address: '背景办事处', num: 48000},
+                    {name: '周五', address: '背景办事处', num: 48000},
                 ],
                 isText:false
             };
@@ -233,6 +301,7 @@
                 console.log(this.dept3)
                 console.log(this.dept4)
                 console.log(this.dept5)
+                console.log(this.date)
                 console.log("确定了")
             },
             // 滚动颜色
@@ -246,16 +315,24 @@
                 }
 
             },
-            formatNum(num) {
-                console.log(num)
-                let a = num / this.listData[0].num * 100
-                console.log(a)
-                return a
-            }
+            // 滚动颜色
+            scrollTextisColor1: function (i) {
+                if (i == 0) {
+                    return require("../assets/Ranking/1.png")
+                } else if (i == 1) {
+                    return require("../assets/Ranking/2.png")
+                } else if (i == 2) {
+                    return require("../assets/Ranking/3.png")
+                }
 
+            },
         },
         computed: {
-
+            formatNum() {
+                return function(num){
+                    return num / this.listData[0].num * 100
+                }
+            }
         }
     };
 </script>
@@ -274,7 +351,12 @@
     .address-title {
         color: #00d8fe;
     }
-
+    .top10-number {
+        color: #ffd821;
+    }
+    .top11-number {
+        background: url("../assets/Ranking/lanyuan.png") no-repeat center;
+    }
     .input {
         width: 8%;
         margin-right: 1.5%;
@@ -334,9 +416,10 @@
         font-weight: 900;
         color: #00afde;
         font-size: 10px;
-
     }
-
+    .return-btn:hover {
+        cursor: pointer;
+    }
 
     .home {
         height: 100%;
@@ -349,20 +432,6 @@
     }
 
 
-    .bj-shouqi {
-        display: inline-block;
-        background: url("../assets/PatrolmanStatistics/shouqi.png") no-repeat;
-        background-size: 90% 90%;
-        width: 60px;
-        height: 37px;
-        margin-right: 1%;
-        vertical-align: bottom;
-    }
-
-    .bj-shouqi:hover {
-        cursor: pointer;
-    }
-
     .bj-qeuren {
         display: inline-block;
         background: url("../assets/Ranking/queren.png") no-repeat;
@@ -379,7 +448,6 @@
 
     .scroll::-webkit-scrollbar {
         background-color: #374991;
-        height: 10px;
         width: 15px;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
@@ -400,7 +468,6 @@
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 10px;
-
     }
 
     /deep/ .el-select,
@@ -410,12 +477,13 @@
         text-align: center;
         background: rgba(254, 196, 0, 0);
         border-radius: 10px;
-        border: 0.5px solid #00d0f6;
+        border: 0.8px solid #00d0f6;
         /*border-image: linear-gradient(-90deg, rgba(0, 187, 234, 0), rgba(3, 77, 129, 1), rgba(0, 161, 254, 0)) 1 1;*/
         box-shadow: 0px 0px 46px 0px rgba(8, 91, 168, 0.4);
 
     }
 
+
     /deep/ .el-select .el-input .el-select__caret {
         color: #00d0f6;
     }
@@ -430,7 +498,7 @@
     /deep/ .el-select-dropdown {
         background: #010f5a;
         border: 1px solid #00d7ff;
-        color: red;
+
 
     }
 
@@ -438,6 +506,7 @@
         color: #00d7ff
     }
 
+
     .right-box {
         width: 47%;
         height: 74.8%;
@@ -472,6 +541,6 @@
         background:linear-gradient(-90deg,rgba(75,226,236,1),rgba(0,113,252,1));
     }
     .right-box/deep/ .el-progress-bar__inner {
-        background:linear-gradient(-90deg,#fab111,#e98000);
+        background:linear-gradient(-90deg,#fab41d,#e98000);
     }
 </style>

src/util/storageUtil.js

@@ -0,0 +1,8 @@
+export default {
+    save (key, value) {
+        window.localStorage.setItem(key, JSON.stringify(value));
+    },
+    read (key) {
+        return JSON.parse(window.localStorage.getItem(key) || null);
+    }
+}