wenti

src/App.vue

   export default {
     name: 'App',
     created() {
-      let designSize = 1980; // 设计图尺寸
-      let html = document.documentElement;
-      let wW = html.clientWidth;// 窗口宽度
+      let designSize = 1580; // 设计图尺寸
+      let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
       let rem = wW * 100 / designSize;
       document.documentElement.style.fontSize = rem + 'px';
       store.dispatch('user/setFontSize', rem)
       $(window).resize(function ()// 绑定到窗口的这个事件中
       {
-        let designSize = 1980; // 设计图尺寸
+        let designSize = 1580; // 设计图尺寸
         let html = document.documentElement;
         let wW = html.clientWidth;// 窗口宽度
         let rem = wW * 100 / designSize;

src/views/command/dateLeft.vue

         <overBar
           id="overBar"
           :width="4.19,fontSize | filterPx"
-          :height="2.22,fontSize | filterPx">
+          :height="2.02,fontSize | filterPx">
         </overBar>
       </div>
     </div>
     }
   }
 
-  @media (max-height: 1050px) {
-    .date-left {
-      > div:first-child {
-        margin-top: 0.1rem;
-      }
-
-      > div:nth-child(2) {
-        margin-top: 0.04rem;
-
-        > div:last-child {
-          padding: 0.15rem 0.1rem 0.16rem 0.1rem;
-        }
-      }
-
-      > div:nth-child(3) {
-        margin-top: 0.04rem;
-
-      }
-
-      > div:last-child {
-        margin-top: 0.04rem;
-      }
-    }
-  }
 </style>

src/views/command/dateRight.vue

         <div>河湖水质问题分类统计</div>
       </div>
       <div>
-        <cake id="rightPre" :width="3.89,fontSize | filterPx" :height="2.584,fontSize | filterPx"></cake>
+        <cake id="rightPre" :width="3.89,fontSize | filterPx" :height="2.454,fontSize | filterPx"></cake>
       </div>
     </div>
     <div>
     }
   }
 
-  @media (max-height: 1050px) {
-    .date-right {
-      > div:first-child {
-        margin-top: 0.1rem;
-
-        > div:last-child {
-          > div {
-            margin-top: 0.14rem;
-          }
-        }
-      }
-
-      > div:nth-child(2) {
-        margin-top: 0.05rem;
-      }
-    }
-  }
 </style>

src/views/command/index.vue

     </div>
     <dateLeft v-if="activeType=='date'"></dateLeft>
     <dateRight v-if="activeType=='date'"></dateRight>
+    <problemLeft v-if="activeType=='problem'"></problemLeft>
   </div>
 </template>
 
   import njBround from "static/nj.json";
   import dateLeft from './dateLeft'
   import dateRight from './dateRight'
+  import problemLeft from './problemLeft'
   import {mapGetters} from "vuex";
   import api from '@/api/main/index'
   import driver from 'static/driver.json'
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {dateLeft, dateRight},
+    components: {dateLeft, dateRight,problemLeft},
     methods: {
       getDriver() {
         const {data} = driver
             me.map.add(polygon);
           });
         }
-        console.log(JSON.stringify(list))
       },
       // addRegionMarker(item) {
       //   // 创建纯文本标记

src/views/command/problemLeft.vue

+<template>
+  <div class="problem-left">
+    <div>
+      <img src="../../assets/img/command/head-problem.png"/>
+    </div>
+    <div>
+      <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
+        <el-form-item label="时间范围:">
+          <el-date-picker
+            v-model="ruleForm.date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="所属区域:">
+          <el-select v-model="ruleForm.driver" placeholder="">
+            <el-option
+              v-for="item in driverList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="河湖名称:">
+          <el-select v-model="ruleForm.hu" placeholder="">
+            <el-option
+              v-for="item in huList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="处理状态:">
+          <el-select v-model="ruleForm.status" placeholder="">
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="search-btn">查询</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {mapGetters} from "vuex";
+  import overBar from './overBar'
+  import transverseBar from './transverseBar'
+
+  export default {
+    name: "problem-left",
+    data() {
+      return {
+        ruleForm: {
+          date: '',
+          driver: ''
+        },
+        driverList: [],
+        huList: [],
+        statusList: [
+          {value: 1, label: '未处理'},
+          {value: 2, label: '处理中'},
+          {value: 3, label: '已完成'},
+        ],
+        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
+      }
+    },
+    computed: {
+      ...mapGetters(["fontSize"])
+    },
+    components: {overBar, transverseBar},
+    methods: {
+      activeClick(active) {
+        this.active = active
+      }
+    },
+  }
+</script>
+
+<style lang="less">
+  .problem-left {
+    position: absolute;
+    top: 1.25rem;
+    width: 4.27rem;
+    background-color: rgba(0, 0, 0, 0.6);
+    height: 100%;
+    padding-left: 0.26rem;
+    padding-right: 0.27rem;
+
+
+    > div:first-child {
+      margin-top: 0.2rem;
+      width: 100%;
+      height: 0.47rem;
+      display: flex;
+
+      > img {
+        width: 1.33rem;
+        height: 100%;
+      }
+    }
+
+    > div:nth-child(2) {
+      margin-top: 0.164rem;
+      padding: 0.193rem 0.229rem;
+      background-color: #171717;
+
+      .search-btn{
+        background: rgba(86,244,248,0.40);
+        border: 0.01rem solid #4DCBCE;
+        height: 0.4rem;
+        line-height: 0.4rem;
+        font-family: PingFangSC-Medium;
+        font-size: 0.15rem;
+        color: #FFFFFF;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .el-form-item__content {
+        line-height: 0.3rem;
+        flex: 1;
+      }
+
+      .el-form-item {
+        margin-bottom: 0.13rem;
+        display: flex;
+        align-items: center;
+      }
+
+      .el-form-item__label {
+        font-family: PingFangSC-Regular;
+        font-size: 0.14rem;
+        color: #FFFFFF;
+        line-height: 0.2rem;
+      }
+
+      .el-input {
+        color: #FFFFFF;
+      }
+
+      .el-input__inner {
+        border: none;
+        opacity: 0.8;
+        background-color: #3D3D3D;
+        color: #FFFFFF;
+        font-family: PingFangSC-Regular;
+        font-size: 0.12rem;
+        height: 0.3rem;
+        line-height: 0.3rem;
+        padding: 0 0.138rem;
+        width: 100%;
+      }
+
+      .el-date-editor .el-range__icon {
+        font-size: 0.12rem;
+        line-height: 0.3rem;
+      }
+
+      .el-input__icon {
+        width: 0.35rem;
+      }
+
+      .el-date-editor .el-range-separator {
+        padding: 0 5px;
+        line-height: 0.3rem;
+        width: 5%;
+        color: #FFFFFF;
+        opacity: 0.8;
+        font-size: 0.12rem;
+      }
+
+      .el-date-editor .el-range-input {
+        width: 40%;
+        color: #ffffff;
+        line-height: 0.3rem;
+        font-size: 0.12rem;
+        background-color: initial;
+        opacity: 0.8;
+      }
+
+      .el-date-editor .el-range__close-icon {
+        font-size: 0.12rem;
+        color: #C0C4CC;
+        line-height: 0.3rem;
+      }
+      .el-select .el-input .el-select__caret {
+        color: #ffffff;
+        font-size: 0.12rem;
+      }
+      .el-input__icon {
+        line-height: 0.3rem
+      }
+    }
+
+  }
+
+  @media (max-height: 1050px) {
+    .problem-left {
+      > div:first-child {
+        margin-top: 0.1rem;
+      }
+
+      > div:nth-child(2) {
+        margin-top: 0.114rem;
+        padding: 0.143rem 0.179rem;
+      }
+    }
+  }
+</style>

src/views/main/index.vue

           <bar
             id="rightBar"
             :width="4.48,fontSize | filterPx"
-            :height="barHeight,fontSize | filterPx"
+            :height="2.42,fontSize | filterPx"
           ></bar>
         </div>
       </div>
   data() {
     return {
       map: {},
-      barHeight: document.body.clientHeight > 1050 ? 2.42 : 2.06,
       nameMark:[
         {name:'六合区',lng:118.867937,lat:32.369795},
         {name:'浦口区',lng:118.571012,lat:32.055306},
     }
   }
 
-  @media (max-height: 1050px) {
-    .box-left {
-      top: 1.35rem;
-      > div:first-child {
-        > div:last-child {
-          padding: 0.13rem 0.32rem;
-        }
-      }
-      > div:nth-child(2) {
-        margin-top: 0.175rem;
-        > div:last-child {
-          padding: 0.128rem 0.43rem 0.185rem 0.4rem;
-        }
-      }
-      > div:last-child {
-        margin-top: 0.15rem;
-      }
-    }
-    .box-right {
-      top: 1.35rem;
-      > div:first-child {
-        > div:last-child {
-          padding: 0rem 0.195rem 0.25rem 0.195rem;
-        }
-      }
-      > div:nth-child(2) {
-        margin-top: 0.15rem;
-        > div:last-child {
-          padding-bottom: 0.178rem;
-          padding-top: 0.392rem;
-        }
-      }
-      > div:last-child {
-        margin-top: 0.15rem;
-      }
-    }
-  }
 }
 </style>