样式更改

src/utils/index.js

@@ -115,3 +115,60 @@ export function param2Obj(url) {
   })
   return obj
 }
+
+
+export function getDateRang(val) {
+  const now = new Date(); // 当前日期
+  const nowDayOfWeek = now.getDay(); // 今天本周的第几天
+  const nowDay = now.getDate(); // 当前日
+  const nowMonth = now.getMonth(); // 当前月
+  const nowYear = now.getFullYear(); // 当前年
+  const jd = Math.ceil((nowMonth + 1) / 3);
+  let startTime;
+  let endTime;
+  let customTime = [];
+  switch (val) {
+    case 'yesterday': // 昨日
+      startTime = new Date(nowYear, nowMonth, nowDay - 1);
+      endTime = new Date(nowYear, nowMonth, nowDay - 1);
+      break;
+    case 'week': // 本周
+      startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek);
+      endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek);
+      break;
+    case 'pastWeek': // 近 7 日
+      startTime = new Date(nowYear, nowMonth, nowDay - 6);
+      endTime = new Date(nowYear, nowMonth, nowDay);
+      break;
+    case 'month': // 本月
+      startTime = new Date(nowYear, nowMonth, 1);
+      endTime = new Date(nowYear, nowMonth + 1, 0);
+      break;
+    case 'pastMonth': // 近 31 日
+      startTime = new Date(nowYear, nowMonth, nowDay - 30);
+      endTime = new Date(nowYear, nowMonth, nowDay);
+      break;
+    case 'quarter': // 本季度
+      startTime = new Date(nowYear, (jd - 1) * 3, 1);
+      endTime = new Date(nowYear, jd * 3, 0);
+      break;
+    case 'year': // 今年
+      startTime = new Date(nowYear, 0, 1);
+      endTime = new Date(nowYear, 11, 31);
+      break;
+    default: // 自定义时间
+      customTime = val.split(' - ');
+      break;
+  }
+  // return customTime.length ? customTime : [formatDate(startTime), formatDate(endTime)];
+  return formatDate(startTime)
+}
+
+export function formatDate(date) {
+  const y = date.getFullYear();
+  let m = date.getMonth() + 1;
+  m = m < 10 ? `0${m}` : m;
+  let d = date.getDate();
+  d = d < 10 ? `0${d}` : d;
+  return `${y}-${m}-${d}`;
+}

src/views/mortgage/index.vue

@@ -16,15 +16,14 @@
             数据总览
           </div>
           <div class="mortgage_top_item_tit_right">
-            <el-select v-model="times" placeholder="请选择日期">
+            <el-date-picker
-              <el-option
+              v-model="times"
-                v-for="item in options"
+              type="date"
-                :key="item.value"
+              placeholder="选择日期"
-                :label="item.label"
+              format="yyyy-MM-dd"
-                :value="item.value"
+              value-format="yyyy-MM-dd"
               >
-              </el-option>
+            </el-date-picker>
-            </el-select>
           </div>
         </div>
         <div class="mortgage_top_item_coner">
@@ -55,7 +54,7 @@
             仓库安防
           </div>
           <div class="mortgage_top_item_tit_right">
-            <el-select v-model="wareValue" placeholder="请选择日期">
+            <el-select v-model="wareValue" placeholder="请选择仓库">
               <el-option
                 v-for="item in warehouse"
                 :key="item.value"
@@ -118,9 +117,10 @@
                 <div class="invie">东北角摄像头1</div>
 
                 <div class="huishie">
-                  回放
+                  {{videos?"监控回放":'实时监控'}}
-                  <span>
+                  <span @click="clivideo">
                     <svg-icon     
+                  
                       icon-class="huifang"
                       class="el-input__icon"
                       style="height: 16px; width: 16px"
@@ -255,16 +255,28 @@
             <div class="mortgage_bom_item_cont_item_left">门店</div>
             <div class="mortgage_bom_item_cont_item_right">12123432.22元</div>
           </div>
-          <div class="ditus"></div>
+          <div class="ditus" @click="dialogVisible = true">
+            <img src="/image/map.jpg" alt="">
+          </div>
         </div>
       </div>
     </div>
+
+    <el-dialog
+      title="门店分布"
+      :visible.sync="dialogVisible"
+      width="70%">
+      <div class="iframemap">
+       <iframe src="http://jianguan.yyundong.com/map365/#/map" frameborder="0"></iframe> 
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import barlineEachartsVue from "../echarts/barlineEacharts.vue";
 import pieLineEachartsVue from "../echarts/pieLineEacharts.vue";
+import {getDateRang} from  '@/utils/index'
 export default {
   components: { barlineEachartsVue, pieLineEachartsVue },
   data() {
@@ -296,26 +308,28 @@ export default {
         {
           value: "选项1",
           label: "常温仓",
-        },
+        }
-        {
-          value: "选项2",
-          label: "供应链仓",
-        },
       ],
-      wareValue: "",
+      wareValue: "常温仓",
       day: [
         {
           value: "选项1",
           label: "15日",
-        },
+        }
-        {
-          value: "选项2",
-          label: "7日",
-        },
       ],
-      dayValue: "",
+      dayValue: "15日",
+      dialogVisible:false,
+      videos:true
     };
   },
+  mounted(){
+    this.times=getDateRang('yesterday')
+  },
+  methods:{
+    clivideo(){
+      this.videos = !this.videos
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -358,6 +372,16 @@ export default {
           flex: 1;
           position: relative;
           justify-content: right;
+          ::v-deep .el-date-editor{
+            width: 150px;
+            .el-input__inner{
+              background: transparent;
+              border: none;
+            }
+            .el-input__prefix{
+              display: none;
+            }
+          }
           &::before {
             content: "";
             position: absolute;
@@ -489,7 +513,6 @@ export default {
             .mortgage_top_item_cons_right_top_video {
               width: 100%;
               height: 85%;
-              background: #f00;
               position: relative;
             }
             .mortgage_top_item_cons_right_top_foor {
@@ -795,9 +818,14 @@ export default {
         }
       }
       .ditus {
-        height: 150px;
+        height: 200px;
         width: 100%;
-        background: #f00;
+        position: relative;
+        cursor: pointer;
+          img{
+            width: 100%;
+            height: 100%;
+          }
       }
     }
   }
@@ -805,6 +833,15 @@ export default {
     cursor: pointer;
     width: 30px !important;
     height: 30px !important;
+
+  }
+  .iframemap{
+    width: 100%;
+    height: 1000px;
+    iframe{
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 </style>