From 19e68080eb48c9f8223e32cd15921661ca645a38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B2=E6=A0=91=E9=80=9A?= <1976590620@qq.com>
Date: Wed, 1 Apr 2020 16:28:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E7=AE=A1=E7=90=86=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/heart/actuserclock-detail.vue     | 833 +++++++++---------
 1 file changed, 438 insertions(+), 395 deletions(-)

diff --git a/src/views/modules/heart/actuserclock-detail.vue b/src/views/modules/heart/actuserclock-detail.vue
index c0e1a5c7..ad8bf7f2 100644
--- a/src/views/modules/heart/actuserclock-detail.vue
+++ b/src/views/modules/heart/actuserclock-detail.vue
@@ -1,424 +1,467 @@
 <template>
-    <div class="project-handle">
-        <div class="project-detail">
-            <div class="project-detail-tip">处理操作 :</div>
-            <el-form ref="dataForm" label-width="120px" label-position="right" style="width: 720px;" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()">
-                <el-form-item label="是否加积分 :" prop="status">
-                    <el-radio v-model="dataForm.status" :disabled="isAble" label="5">确认加积分</el-radio>
-                        <el-radio v-model="dataForm.status" :disabled="isAble" label="6">拒绝加积分</el-radio>
-                </el-form-item>
-                <el-form-item label="处理意见 :" prop="failureReason">
-                    <el-input :rows="4" v-model="dataForm.failureReason" :disabled="isAble" type="textarea" placeholder="请写明理由，100字以内"></el-input>
-                </el-form-item>
-                <el-form-item style="float: right;">
-                    <el-button size="small" style="width: 95px" type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
-                    <el-button size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
-                </el-form-item>
-            </el-form>
-            <div class="container">
-                <div class="location"><span style="font-weight: bold;color: #606266">打卡位置 :</span> {{dataForm.address}}</div>
-                <div id="mapContainer" style="width:450px;height:220px;"></div>
-            </div>
-        </div>
-        <div class="handle-operation">
-            <div class="handle-operation-tip">打卡详情</div>
-            <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
-                <el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
-                <el-table-column prop="realName" label="报名人" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="sex" label="性别" :formatter="formatSex" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="mobile" label="联系电话" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="clockAddress" label="打卡地点" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="clockDesc" label="打卡描述" header-align="center" align="center"></el-table-column>
-                <el-table-column label="图片" fixed="right" header-align="center" align="center" width="400">  
-                    <template slot-scope="scope">
-                        <el-image
-                                class="avatar1"
-                                v-if="scope.row.clockPic[0]"
-                                :src="scope.row.clockPic[0]"
-                                :key="scope.row.clockPic[0]"
-                                :preview-src-list="previewImgList"
-                                @click="clickImg(scope.row.clockPic[0])"></el-image>
-                        <el-image
-                                class="avatar1"
-                                v-if="scope.row.clockPic[1]"
-                                :src="scope.row.clockPic[1]"
-                                :key="scope.row.clockPic[1]"
-                                :preview-src-list="previewImgList"
-                                @click="clickImg(scope.row.clockPic[1])"></el-image>
-                        <el-image
-                                class="avatar1"
-                                v-if="scope.row.clockPic[2]"
-                                :src="scope.row.clockPic[2]"
-                                :key="scope.row.clockPic[2]"
-                                :preview-src-list="previewImgList"
-                                @click="clickImg(scope.row.clockPic[2])"></el-image>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
+  <div class="project-handle"
+       style="background: #ffffff;">
+    <div class="project-detail">
+      <div class="project-detail-tip">处理操作 :</div>
+      <el-form ref="dataForm"
+               :model="dataForm"
+               :rules="dataRule"
+               @keyup.enter.native="dataFormSubmitHandle()">
+        <el-form-item label="是否加积分 :"
+                      prop="status">
+          <el-radio v-model="dataForm.status"
+                    :disabled="isAble"
+                    label="5">确认加积分</el-radio>
+          <el-radio v-model="dataForm.status"
+                    :disabled="isAble"
+                    label="6">拒绝加积分</el-radio>
+        </el-form-item>
+        <el-form-item label="处理意见 :"
+                      prop="failureReason">
+          <el-input :rows="4"
+                    v-model="dataForm.failureReason"
+                    :disabled="isAble"
+                    type="textarea"
+                    placeholder="请写明理由，100字以内"></el-input>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-button size="small"
+                     style="width: 95px"
+                     type="primary"
+                     :disabled="isAble"
+                     @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+          <el-button size="small"
+                     style="width: 95px"
+                     @click="backToActClockList">{{ '返回' }}</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+    <div class="container">
+      <div class="location"><span style="font-weight: bold;color: #606266">打卡位置 :</span> {{dataForm.address}}</div>
+      <div id="mapContainer"
+           style="width:450px;height:220px;"></div>
+    </div>
+
+    <div class="handle-operation">
+      <div class="handle-operation-tip">打卡详情</div>
+      <el-table v-loading="dataListLoading"
+                :data="dataList"
+                border
+                @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%;">
+        <el-table-column label="序号"
+                         type="index"
+                         show-overflow-tooltip
+                         align="center"
+                         width="50"></el-table-column>
+        <el-table-column prop="realName"
+                         label="报名人"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="sex"
+                         label="性别"
+                         :formatter="formatSex"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="age"
+                         label="年龄"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="mobile"
+                         label="联系电话"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="clockAddress"
+                         label="打卡地点"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column prop="clockDesc"
+                         label="打卡描述"
+                         header-align="center"
+                         align="center"></el-table-column>
+        <el-table-column label="图片"
+                         fixed="right"
+                         header-align="center"
+                         align="center"
+                         width="400">
+          <template slot-scope="scope">
+            <el-image class="avatar1"
+                      v-if="scope.row.clockPic[0]"
+                      :src="scope.row.clockPic[0]"
+                      :key="scope.row.clockPic[0]"
+                      :preview-src-list="previewImgList"
+                      @click="clickImg(scope.row.clockPic[0])"></el-image>
+            <el-image class="avatar1"
+                      v-if="scope.row.clockPic[1]"
+                      :src="scope.row.clockPic[1]"
+                      :key="scope.row.clockPic[1]"
+                      :preview-src-list="previewImgList"
+                      @click="clickImg(scope.row.clockPic[1])"></el-image>
+            <el-image class="avatar1"
+                      v-if="scope.row.clockPic[2]"
+                      :src="scope.row.clockPic[2]"
+                      :key="scope.row.clockPic[2]"
+                      :preview-src-list="previewImgList"
+                      @click="clickImg(scope.row.clockPic[2])"></el-image>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination :current-page="page"
+                     :page-sizes="[10, 20, 50, 100]"
+                     :page-size="limit"
+                     :total="total"
+                     layout="total, sizes, prev, pager, next, jumper"
+                     @size-change="pageSizeChangeHandle"
+                     @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 <script>
 var map;
-var markerList =[];
-var radiusList =[];
-var clockList =[];
+var markerList = [];
+var radiusList = [];
+var clockList = [];
 import mixinViewModule from '@/mixins/view-module'
 import debounce from 'lodash/debounce'
 import 'element-ui/lib/theme-chalk/timeline.css'
 import 'element-ui/lib/theme-chalk/timeline-item.css'
 import 'element-ui/lib/theme-chalk/image.css'
 export default {
-    mixins: [mixinViewModule],
-    name: 'ActUserClockDetail',
-    data () {
-        return {
-            mixinViewModuleOptions: {
-                getDataListURL: '/heart/actuserclocklog/page',
-                getDataListIsPage: true
-            },
-            dataForm: {
-                id: '',
-                actId: '',
-                status: '',
-                failureReason: '',
-                address: '',
-                latitude: '',
-                longitude: '',
-                radius: 200,
-                clockPic: []
-            },
-            previewImgList: [],
-            isAble: false
-        }
+  mixins: [mixinViewModule],
+  name: 'ActUserClockDetail',
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/heart/actuserclocklog/page',
+        getDataListIsPage: true
+      },
+      dataForm: {
+        id: '',
+        actId: '',
+        status: '',
+        failureReason: '',
+        address: '',
+        latitude: '',
+        longitude: '',
+        radius: 200,
+        clockPic: []
+      },
+      previewImgList: [],
+      isAble: false
+    }
+  },
+  mounted () {
+    this.dataForm.id = this.$route.query.id
+    this.dataForm.actId = this.$route.query.actId
+    this.init()
+  },
+  computed: {
+    dataRule () {
+      return {
+        status: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        failureReason: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+
+    backToActClockList () {
+      this.$emit('refreshDataList')
+      this.$parent.selectComponent = 'ActUserClockLog'
+      this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } })
     },
-    mounted () {
-        this.dataForm.id = this.$route.query.id
-        this.dataForm.actId = this.$route.query.actId
-        this.init()
+    setMap (data) {
+      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
+      //设置地图中心点
+      var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude);
+      //定义工厂模式函数
+      var zoom = this.capacity(data);
+      var myOptions = {
+        zoom: zoom,               //设置地图缩放级别
+        center: myLatlng,    //设置中心点样式
+        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
+      }
+      // //获取dom元素添加地图信息
+      map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
+      //设置圆形
+      var radius = new qq.maps.Circle({
+        center: new qq.maps.LatLng(data.latitude, data.longitude),
+        radius: this.dataForm.radius,
+        map: map
+      });
+
+      radiusList.push(radius);
+      var marker = new qq.maps.Marker({
+        position: myLatlng,
+        map: map
+      });
+      markerList.push(marker)
     },
-    computed: {
-        dataRule () {
-            return {
-                status: [
-                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-                ],
-                failureReason: [
-                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-                ]
-            }
+    init () {
+      this.$nextTick(() => {
+        if (this.dataForm.id) {
+          this.getInfo();
+
         }
+      })
     },
-    methods: {
-
-        backToActClockList () {
-            this.$emit('refreshDataList')
-            this.$parent.selectComponent = 'ActUserClockLog'
-            this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId}})
-        },
-        setMap(data) {
-            //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
-            //设置地图中心点
-            var myLatlng = new qq.maps.LatLng(data.latitude,data.longitude);
-            //定义工厂模式函数
-            var zoom = this.capacity(data);
-            var myOptions = {
-                zoom: zoom,               //设置地图缩放级别
-                center: myLatlng,    //设置中心点样式
-                mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
-            }
-            // //获取dom元素添加地图信息
-            map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
-            //设置圆形
-            var  radius = new qq.maps.Circle({
-                center:new qq.maps.LatLng(data.latitude,data.longitude),
-                radius: this.dataForm.radius,
-                map: map
-            });
-
-            radiusList.push(radius);
-            var marker = new qq.maps.Marker({
-                position:myLatlng,
-                map:map
-            });
-            markerList.push(marker)
-        },
-        init () {
-            this.$nextTick(() => {
-                if (this.dataForm.id) {
-                    this.getInfo();
-
-                }
-            })
-        },
-        // 点击查看大图
-        clickImg (url) {
-            this.previewImgList = []
-            this.previewImgList.push(url)
-        },
-        getDataList () {
-            this.dataListLoading = true
-            this.$http.get(
-                this.mixinViewModuleOptions.getDataListURL,
-                {
-                    params: {
-                        order: this.order,
-                        orderField: this.orderField,
-                        page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
-                        limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
-                        ...this.dataForm
-                    }
-                }
-            ).then(({ data: res }) => {
-                this.dataListLoading = false
-                if (res.code !== 0) {
-                    this.dataList = []
-                    this.total = 0
-                    return this.$message.error(res.msg)
-                }
-                this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
-                this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
-                this.dataList.forEach((item) => {
-                    var LogLatlng = new qq.maps.LatLng(item.clockLatitude,item.clockLongitude);
-                    var LogMarker = new qq.maps.Marker({
-                        position:LogLatlng,
-                        map:map
-                    });
-                    markerList.push(LogMarker)
-                });
-                console.log(markerList)
+    // 点击查看大图
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    getDataList () {
+      this.dataListLoading = true
+      this.$http.get(
+        this.mixinViewModuleOptions.getDataListURL,
+        {
+          params: {
+            order: this.order,
+            orderField: this.orderField,
+            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
+            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
+            ...this.dataForm
+          }
+        }
+      ).then(({ data: res }) => {
+        this.dataListLoading = false
+        if (res.code !== 0) {
+          this.dataList = []
+          this.total = 0
+          return this.$message.error(res.msg)
+        }
+        this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
+        this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
+        this.dataList.forEach((item) => {
+          var LogLatlng = new qq.maps.LatLng(item.clockLatitude, item.clockLongitude);
+          var LogMarker = new qq.maps.Marker({
+            position: LogLatlng,
+            map: map
+          });
+          markerList.push(LogMarker)
+        });
+        console.log(markerList)
 
-            }).catch(() => {
-                this.dataListLoading = false
-            })
-        },
-        // 获取信息
-        getInfo () {
-            this.$http.get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`).then(({ data: res }) => {
-                if (res.code !== 0) {
-                    return this.$message.error(res.msg)
-                }
-                this.dataForm = {
-                    ...this.dataForm,
-                    ...res.data
-                }
-                if (res.data.status != '5' && res.data.status != '6') {
-                    this.dataForm.status = '5';
-                    this.dataForm.failureReason = '';
-                } else {
-                    this.isAble = true;
-                }
-                this.setMap(res.data)
+      }).catch(() => {
+        this.dataListLoading = false
+      })
+    },
+    // 获取信息
+    getInfo () {
+      this.$http.get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        if (res.data.status != '5' && res.data.status != '6') {
+          this.dataForm.status = '5';
+          this.dataForm.failureReason = '';
+        } else {
+          this.isAble = true;
+        }
+        this.setMap(res.data)
 
-                this.getDataList();
-            }).catch(() => {})
+        this.getDataList();
+      }).catch(() => { })
 
-        },
-        capacity(data) {
-            if(0 < data.radius && data.radius <= 25){
-                return 18
-            } else if (25 < data.radius && data.radius <= 50){
-                return 17
-            } else if (50 < data.radius && data.radius <= 100){
-                return 16
-            } else if (100 < data.radius && data.radius <= 200){
-                return 15
-            } else if (200 < data.radius && data.radius <= 500){
-                return 14
-            } else if (500 < data.radius && data.radius <= 1000){
-                return 13
-            } else if (1000 < data.radius && data.radius <= 2000){
-                return 12
-            } else if (2000 < data.radius && data.radius <= 5000){
-                return 11
-            }
-        },
-        formatSex: function (row, column) {
-            let state = row.sex
-            if (state === '0') {
-                return '女'
-            } else if (state === '1') {
-                return '男'
+    },
+    capacity (data) {
+      if (0 < data.radius && data.radius <= 25) {
+        return 18
+      } else if (25 < data.radius && data.radius <= 50) {
+        return 17
+      } else if (50 < data.radius && data.radius <= 100) {
+        return 16
+      } else if (100 < data.radius && data.radius <= 200) {
+        return 15
+      } else if (200 < data.radius && data.radius <= 500) {
+        return 14
+      } else if (500 < data.radius && data.radius <= 1000) {
+        return 13
+      } else if (1000 < data.radius && data.radius <= 2000) {
+        return 12
+      } else if (2000 < data.radius && data.radius <= 5000) {
+        return 11
+      }
+    },
+    formatSex: function (row, column) {
+      let state = row.sex
+      if (state === '0') {
+        return '女'
+      } else if (state === '1') {
+        return '男'
+      }
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (this.dataForm.failureReason.length > 100) {
+          return this.$message.error('处理意见不超过100字')
+        }
+        this.isAble = true
+        this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm).then(({ data: res }) => {
+          this.isAble = false
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.$emit('refreshDataList')
+              this.$parent.selectComponent = 'ActUserClockLog'
+              this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } })
             }
-        },
-        // 表单提交
-        dataFormSubmitHandle: debounce(function () {
-            this.$refs['dataForm'].validate((valid) => {
-                if (!valid) {
-                    return false
-                }
-                if (this.dataForm.failureReason.length > 100) {
-                    return this.$message.error('处理意见不超过100字')
-                }
-                this.isAble = true
-                this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm).then(({ data: res }) => {
-                    this.isAble = false
-                    if (res.code !== 0) {
-                        return this.$message.error(res.msg)
-                    }
-                    this.$message({
-                        message: this.$t('prompt.success'),
-                        type: 'success',
-                        duration: 500,
-                        onClose: () => {
-                            this.$emit('refreshDataList')
-                            this.$parent.selectComponent = 'ActUserClockLog'
-                            this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId}})
-                        }
-                    })
-                }).catch(() => {})
-            })
-        }, 1000, { 'leading': true, 'trailing': false })
-    }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
 }
 </script>
 <style lang="scss">
-    .avatar1 {
-        width: 120px;
-        height: 120px;
+.avatar1 {
+  width: 120px;
+  height: 120px;
+}
+.el-image-viewer__close {
+  top: 16%;
+}
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  background: transparent !important;
+}
+</style>
+
+
+
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: 49%;
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    background: #ffffff;
+    width: 60%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
     }
-    .el-image-viewer__close {
-        top: 16%;
+    .el-form {
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
     }
-    .el-table__fixed-right::before, .el-table__fixed::before {
-        background: transparent !important;
+  }
+  .container {
+    background: #ffffff;
+    width: 40%;
+    height: 49%;
+    float: right;
+    .location {
+      height: 30px;
+      line-height: 30px;
     }
-</style>
-
-<style lang="scss">
-    .project-handle {
-        .el-timeline {
-            padding-left: 9px;
-            font-size: 13px;
-        }
-        .el-textarea {
-            width: 600px !important;
-        }
-        .el-input {
-            width: 600px !important;
-        }
+    #map {
+      width: 100%;
+      height: calc(100% - 30px);
     }
-    .el-form-item__label {
-        font-weight: bold;
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
     }
-</style>
-
-<style lang="scss" scoped>
-    .project-handle {
-        width: 100%;
-        height: calc(100vh - 120px);
-        background: #ffffff;
-        box-sizing: border-box;
-        padding: 10px;
-        .project-detail {
-            width: 100%;
-            height: 49%;
-            border: 2px solid #ccc;
-            box-sizing: border-box;
-            padding: 10px;
-            padding-top: 20px;
-            float:left;
-            margin-bottom: 1%;
-            position:relative;
-            .project-detail-tip {
-                position: absolute;
-                top: 0;
-                left:0;
-                width: 80px;
-                height: 30px;
-                line-height: 30px;
-                color: #ffffff;
-                background: #4ac38b;
-                text-align:center;
-            }
-            .el-form {
-                width: 58%;
-                height: 100%;
-                float:left;
-                overflow-y:auto;
-                &::-webkit-scrollbar {
-                    width: 5px;
-                    height: 1px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 5px;
-                    background: #ccc;
-                }
-                &::-webkit-scrollbar-track {
-                    border-radius: 10px;
-                    background: #fff;
-                }
-            }
-            .container {
-                width: 40%;
-                height: 100%;
-                float: right;
-                .location {
-                    height: 30px;
-                    line-height: 30px;
-                }
-                #map {
-                    width: 100%;
-                    height: calc(100% - 30px);
-                }
-            }
-        }
-        .project-progress {
-            width: 20%;
-            height: 100%;
-            float: right;
-            border: 2px solid #ccc;
-            box-sizing: border-box;
-            margin-left: 1%;
-            padding-top: 20px;
-            overflow-y:auto;
-            &::-webkit-scrollbar {
-                width: 5px;
-                height: 1px;
-            }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 5px;
-                background: #aaa;
-            }
-            &::-webkit-scrollbar-track {
-                border-radius: 10px;
-                background: #ccc;
-            }
-        }
-        .handle-operation {
-            padding-top: 30px;
-            box-sizing: border-box;
-            width: 100%;
-            height: 49%;
-            box-sizing: border-box;
-            border: 2px solid #ccc;
-            float:left;
-            position: relative;
-            overflow-y:auto;
-            &::-webkit-scrollbar {
-                width: 5px;
-                height: 1px;
-            }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 5px;
-                background: #aaa;
-            }
-            &::-webkit-scrollbar-track {
-                border-radius: 10px;
-                background: #ccc;
-            }
-            .handle-operation-tip {
-                position: absolute;
-                top: 0;
-                left:0;
-                width: 80px;
-                height: 30px;
-                line-height: 30px;
-                color: #ffffff;
-                background: #ff7600;
-                text-align:center;
-            }
-        }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
     }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
 </style>