问题统计

src/App.vue

     margin-left: 2px!important;
   }
 
-  .el-dialog {
-    width: 500px!important;
-  }
-
   .el-form--inline .el-form-item{
     margin-bottom: 10px!important;
   }

src/views/command/dateLeft.vue → src/views/command/date/dateLeft.vue

 <template>
   <div class="date-left">
     <div>
-      <img src="../../assets/img/command/head-date.png"/>
+      <img src="../../../assets/img/command/head-date.png"/>
     </div>
 
     <div>
         <div>巡检问题处理情况统计</div>
       </div>
       <div>
-        <img src="../../assets/img/main/line.png"/>
+        <img src="../../../assets/img/main/line.png"/>
         <div>
           <el-progress
             :width="1.38,fontSize | filterPx"
           margin-left: 0.12rem;
           background-position: center center;
           background-size: cover;
-          background-image: url(../../assets/img/main/table.png);
+          background-image: url(../../../assets/img/main/table.png);
           display: flex;
           align-items: center;
           justify-content: center;
             height: 0.8rem;
             background-position: center center;
             background-size: cover;
-            background-image: url(../../assets/img/command/bg.png);
+            background-image: url(../../../assets/img/command/bg.png);
 
             > div {
               position: relative;

src/views/command/overBar.vue → src/views/command/date/overBar.vue

 </template>
 
 <script>
-import { Chart } from "@antv/g2";
+import G2 from "@antv/g2";
 import { mapGetters } from "vuex";
 
 export default {

src/views/command/index.vue

 <template>
   <div v-loading="loading" class="command-index" style="position: relative">
     <div style="display:none;">
-      <mapInfoWindow @closeInfoWindow="closeInfoWindow" ref="infowindow"></mapInfoWindow>
+      <problemDetailWin @closeInfoWindow="closeInfoWindow" ref="problemDetailWin"></problemDetailWin>
     </div>
     <div class="index-map" id="indexMap"></div>
     <img class="head-img" src="../../assets/img/command/nav.png"/>
-    <div :style="{right:(activeType=='problem'||activeType=='ask')?'1.7rem':'5.3rem'}" class="map-type">
+    <div :style="{right:(activeType=='problem'||activeType=='ask')?'1.2rem':'5.3rem'}" class="map-type">
       <div @click="mapTypeClick(1)" :class="mapType==1?'map-type-check':''">
         <div></div>
         <div>GIS地图</div>
 <script>
   import AMap from "AMap";
   import njBround from "static/nj.json";
-  import dateLeft from './dateLeft'
-  import dateRight from './dateRight'
-  import problemLeft from './problemLeft'
+  import dateLeft from './date/dateLeft'
+  import dateRight from './date/dateRight'
+  import problemLeft from './problem/problemLeft'
   import {mapGetters} from "vuex";
   import api from '@/api/main/index'
   import driver from 'static/driver.json'
-  import mapInfoWindow from './infoWindow'
+  import problemDetailWin from './problem/problemDetailWin'
 
   export default {
     name: "command-container",
     data() {
       return {
-        infoWindow: null,
+        InfoWindow: null,
         mapType: 1,
         loading: false,
         activeType: "problem",
       this.center = new AMap.LngLat(118.750078, 31.983115)
       this.map.on("complete", function () {
         me.finshMap = true
-        me.infoWindow = new AMap.InfoWindow({
+        me.InfoWindow = new AMap.InfoWindow({
           zIndex: 14,
           autoMove: true,
-          content: me.$refs.infowindow.$el,
-          offset: new AMap.Pixel(4, -25)
+          content: me.$refs.problemDetailWin.$el,
+          offset: new AMap.Pixel(0, -25)
         });
         me.addBound();
         me.map.setFitView(this.polygonList)
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {dateLeft, dateRight, problemLeft, mapInfoWindow},
+    components: {dateLeft, dateRight, problemLeft, problemDetailWin},
     methods: {
       hideMarker() {
         this.markerList.map(item => {
         })
       },
       closeInfoWin() {
-        if (this.infoWindow) {
-          this.infoWindow.close()
+        if (this.InfoWindow) {
+          this.InfoWindow.close()
         }
       },
       clearMarker() {
         }
         let icon = new AMap.Icon({
           // 图标尺寸
-          size: new AMap.Size(24, 24),
+          size: new AMap.Size(40, 40),
           // 图标的取图地址
           image: image,
           // 图标所用图片大小
-          imageSize: new AMap.Size(24, 24),
+          imageSize: new AMap.Size(40, 40),
         });
         let marker = new AMap.Marker({
           zIndex: 12,
           animation: 'AMAP_ANIMATION_DROP',
           position: point,
           icon: icon,
-          offset: new AMap.Pixel(-9, -22)
+          offset: new AMap.Pixel(-20, -20)
         });
         marker.setDraggable(true)
         marker.childData = item
         setTimeout(function () {
           let marker = me.markerList.find(item=>item.childData.id==child.id)
           if(marker){
-            me.infoWindow.open(me.map, marker.getPosition());
+            me.InfoWindow.open(me.map, marker.getPosition());
           }
           me.checkDriver(child.dirverId)
         },500)
       },
       getMarkerDetail(marker) {
-        this.infoWindow.open(this.map, marker.getPosition());
+        this.InfoWindow.open(this.map, marker.getPosition());
         this.checkDriver(marker.childData.dirverId)
       },
       getDriver() {
     }
 
     .el-date-editor .el-range__icon {
+      display: none;
       font-size: 0.12rem;
       line-height: 0.3rem;
     }

src/views/command/problem/assignmentDialog.vue

+<template>
+  <el-dialog :before-close="dialogClose" class="assignmentDialog" title="任务派遣" :visible.sync="visible">
+    <img src="../../../assets/img/command/dialog-task.png">
+    <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
+      <el-form-item label="人员派遣:">
+        <el-select :class="ruleForm.user?'check-select':void(0)" clearable v-model="ruleForm.user" placeholder="">
+          <el-option
+            v-for="item in userList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="联系方式:">
+        <el-input clearable v-model="ruleForm.tel"></el-input>
+      </el-form-item>
+      <el-form-item label="备注信息:">
+        <el-input
+          type="textarea"
+          :rows="4"
+          placeholder=""
+          v-model="ruleForm.remark">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div class="foot-btn">
+      <div @click="dialogClose">取消</div>
+      <div @click="submit">
+        <span v-show="!submitLoading">指派任务</span>
+        <i v-show="submitLoading" class="el-icon-loading"></i>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import {mapGetters} from "vuex";
+
+  export default {
+    name: "assignmentDialog",
+    data() {
+      return {
+        submitLoading:false,
+        userList: [
+          {value: 1, label: '未处理'},
+          {value: 2, label: '处理中'},
+          {value: 3, label: '已完成'},
+        ],
+        ruleForm: {},
+        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
+      }
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default() {
+          return false
+        }
+      }
+    },
+    computed: {
+      ...mapGetters(["fontSize"])
+    },
+    methods: {
+      dialogClose() {
+        this.$emit('dialogClose')
+      },
+      submit(){
+        this.submitLoading=true
+        let me=this
+        setTimeout(function () {
+          me.submitLoading=false
+          me.dialogClose()
+        },2000)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .assignmentDialog {
+    .el-dialog {
+      background-color: inherit;
+      width: 5.6rem;
+
+      .el-dialog__header {
+        display: none;
+      }
+
+
+
+      .el-dialog__body {
+        padding: 0.423rem 0.75rem 0.39rem 0.735rem;
+        background-position: center center;
+        background-size: cover;
+        background-image: url(../../../assets/img/command/assignment-popup.png);
+        text-align: left;
+
+        .check-select{
+          .el-input__inner {
+            background: rgba(46,156,152,0.61);
+            border: 1px solid #009F9A;
+          }
+        }
+
+        .foot-btn {
+          margin-top: 0.098rem;
+          padding: 0 0.4rem;
+          display: flex;
+          justify-content: space-between;
+          >div{
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 1.5rem;
+            height: 0.4rem;
+            font-family: PingFangSC-Regular;
+            font-size: 0.14rem;
+            color: #FFFFFF;
+            background: rgba(86,244,248,0.70);
+          }
+          >div:first-child{
+            opacity: 0.62;
+            background: rgba(86,244,248,0.50)
+          }
+        }
+
+        > img {
+          height: 0.31rem;
+          margin-bottom: 0.391rem;
+        }
+
+        .el-input__inner {
+          padding-left: 0.1rem;
+          background-color:inherit;
+          border: 0.01rem solid #36B8B3;
+        }
+
+        .el-textarea__inner {
+          padding: 0.1rem;
+          opacity: 0.8;
+          line-height: 0.2rem;
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          color: #FFFFFF;
+          background-color: inherit;
+          border: 0.01rem solid #36B8B3;
+          border-radius: 0;
+        }
+
+        .el-form-item {
+          margin-bottom: 0.2rem;
+        }
+
+        .driver-name {
+          font-family: PingFangSC-Medium;
+          font-size: 0.2rem;
+          color: #FFFFFF;
+          line-height: 0.28rem;
+        }
+      }
+    }
+  }
+</style>

src/views/command/infoWindow.vue → src/views/command/problem/problemDetailWin.vue

 <template>
-  <div class="mapInfoWindow">
+  <div class="problemDetailWin">
     <div class="info-header">
-      <img src="../../assets/img/command/details.png"/>
-      <img @click="closeInfoWindow" src="../../assets/img/command/close.png">
+      <img src="../../../assets/img/command/details.png"/>
+      <img @click="closeInfoWindow" src="../../../assets/img/command/close.png">
     </div>
     <el-timeline>
       <el-timeline-item timestamp="问题情报" placement="top">
       <div>
         <div>问题图片：</div>
         <viewer>
-          <img src='../../assets/img/login.jpg'>
+          <img src='../../../assets/img/login.jpg'>
         </viewer>
       </div>
     </div>
 
 <script>
   export default {
-    name: "mapInfoWindow",
+    name: "problemDetailWin",
     props: {},
     methods: {
       closeInfoWindow() {
 </script>
 
 <style lang="less">
-  .mapInfoWindow {
+  .problemDetailWin {
     width: 5.66rem;
     min-height: 5.68rem;
     background-position: center center;
     background-size: cover;
-    background-image: url(../../assets/img/command/popup.png);
+    background-image: url(../../../assets/img/command/popup.png);
 
     .info-detail {
       padding-left: 0.743rem;

src/views/command/problemLeft.vue → src/views/command/problem/problemLeft.vue

 <template>
   <div class="problem-left">
     <div>
-      <img src="../../assets/img/command/head-problem.png"/>
+      <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
+            clearable
             v-model="ruleForm.date"
             type="daterange"
             range-separator="-"
           </el-date-picker>
         </el-form-item>
         <el-form-item label="所属区域:">
-          <el-select v-model="ruleForm.driver" placeholder="">
+          <el-select v-model="ruleForm.driver" placeholder="" clearable>
             <el-option
               v-for="item in driverList"
               :key="item.value"
           </el-select>
         </el-form-item>
         <el-form-item label="河湖名称:">
-          <el-select v-model="ruleForm.hu" placeholder="">
+          <el-select v-model="ruleForm.hu" placeholder="" clearable>
             <el-option
               v-for="item in huList"
               :key="item.value"
           </el-select>
         </el-form-item>
         <el-form-item label="处理状态:">
-          <el-select v-model="ruleForm.status" placeholder="">
+          <el-select v-model="ruleForm.status" placeholder="" clearable>
             <el-option
               v-for="item in statusList"
               :key="item.value"
     </div>
     <div>
       <div :key="index" v-for="(item,index) in dataList">
-        <img src="../../assets/img/login.jpg"/>
+        <img src="../../../assets/img/login.jpg"/>
         <div>
           <div>
             <div>
             <div title="河流漂浮物">河流漂浮物河流漂浮物河流漂浮物河流漂浮物河流漂浮物</div>
           </div>
           <div>
-            <div>派遣人员</div>
+            <div @click="assignment">派遣人员</div>
             <div @click="showProblemDetail(item)">产看详情</div>
           </div>
         </div>
         :total="100">
       </el-pagination>
     </div>
+    <assignmentDialog v-if="visible" @dialogClose="visible=false" :visible="visible"></assignmentDialog>
   </div>
 </template>
 
 <script>
+  import assignmentDialog from './assignmentDialog'
   import {mapGetters} from "vuex";
-  import overBar from './overBar'
-  import transverseBar from './transverseBar'
 
   export default {
     name: "problem-left",
     data() {
       return {
+        visible:false,
         searchLoading:false,
         ruleForm: {
           date: '',
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {overBar, transverseBar},
+    components: {assignmentDialog},
     mounted(){
       this.search()
     },
     methods: {
+      assignment(){
+        this.visible=true
+      },
       showProblemDetail(item){
         this.$emit('showProblemDetail',{id:1,driverId:27})
       },