<template> 
 | 
  <GlobalWindow 
 | 
      :title="title" 
 | 
      width="500px" 
 | 
      :visible.sync="visible" 
 | 
      :confirm-working="isWorking" 
 | 
      @confirm="confirm" 
 | 
  > 
 | 
    <el-form :model="form" ref="form" :rules="rules" > 
 | 
      <el-form-item label="同步日期" prop="createDate"> 
 | 
        <el-date-picker 
 | 
            v-model="form.createDate" 
 | 
            format="yyyy-MM-dd" 
 | 
            value-format="yyyy-MM-dd HH:ss:mm" 
 | 
            type="date"> 
 | 
        </el-date-picker> 
 | 
      </el-form-item> 
 | 
    </el-form> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import { syncByDate } from '@/api/business/carEvent' 
 | 
export default { 
 | 
  name: 'OperaVisitsHkWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      form:{createDate: null}, 
 | 
      rules: { 
 | 
        createDate: [ 
 | 
          { required: true, message: '请选择日期', trigger: 'blur' } 
 | 
        ] 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    open(title){ 
 | 
      this.visible=true 
 | 
      this.title=title 
 | 
    }, 
 | 
    // 同步信息 
 | 
    confirm () { 
 | 
  
 | 
      this.$refs.form.validate((valid) => { 
 | 
        if (!valid) { 
 | 
          return 
 | 
        } 
 | 
        // 调用新建接口 
 | 
        this.isWorking = true 
 | 
        syncByDate({ 
 | 
          createDate: this.form.createDate 
 | 
        }) 
 | 
          .then(() => { 
 | 
            this.visible = false 
 | 
            this.$tip.apiSuccess('同步成功') 
 | 
            this.$emit('success') 
 | 
          }) 
 | 
          .catch(e => { 
 | 
            this.$tip.apiFailed(e) 
 | 
          }) 
 | 
          .finally(() => { 
 | 
            this.isWorking = false 
 | 
          }) 
 | 
      }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
<style> 
 | 
    .el-image-viewer__wrapper { 
 | 
        z-index: 3000 !important; 
 | 
    } 
 | 
</style> 
 | 
<style lang="scss" scoped> 
 | 
    .list { 
 | 
        width: 100%; 
 | 
        display: flex; 
 | 
        flex-direction: column; 
 | 
        .list_item { 
 | 
            width: 100%; 
 | 
            margin-bottom: 30px; 
 | 
            &:last-child { 
 | 
                margin-bottom: 0 !important; 
 | 
            } 
 | 
            .list_item_label { 
 | 
                font-size: 18px; 
 | 
                font-weight: 600; 
 | 
                color: #000000; 
 | 
                margin-bottom: 15px; 
 | 
            } 
 | 
            .list_item_info { 
 | 
                font-size: 14px; 
 | 
                color: #222222; 
 | 
                margin-bottom: 10px; 
 | 
            } 
 | 
            .list_item_status { 
 | 
                width: 100%; 
 | 
                display: flex; 
 | 
                flex-direction: column; 
 | 
                .list_item_status_item { 
 | 
                    width: 100%; 
 | 
                    max-height: 100px; 
 | 
                    position: relative; 
 | 
                    margin-bottom: 30px; 
 | 
                    .dian { 
 | 
                        width: 15px; 
 | 
                        height: 15px; 
 | 
                        border-radius: 50%; 
 | 
                        background: #ffb447; 
 | 
                        position: absolute; 
 | 
                        left: 0; 
 | 
                        top: 50%; 
 | 
                        transform: translate(0, -50%); 
 | 
                    } 
 | 
                    .xian { 
 | 
                        width: 1px; 
 | 
                        height: calc(100% + 30px); 
 | 
                        background: #ffb447; 
 | 
                        position: absolute; 
 | 
                        top: 50%; 
 | 
                        left: 7px; 
 | 
                        transform: translate(-50%, 0); 
 | 
                    } 
 | 
                    .status_info { 
 | 
                        /*width: 100%;*/ 
 | 
                        height: 100%; 
 | 
                        display: flex; 
 | 
                        flex-direction: column; 
 | 
                        margin-left: 30px; 
 | 
                        box-sizing: border-box; 
 | 
                        .status_info_a { 
 | 
                            font-size: 16px; 
 | 
                            color: black; 
 | 
                            margin-bottom: 10px; 
 | 
                        } 
 | 
                        .status_info_b { 
 | 
                            font-size: 13px; 
 | 
                            color: #666666; 
 | 
                            margin-bottom: 10px; 
 | 
                        } 
 | 
                        .status_info_c { 
 | 
                            padding: 5px 10px; 
 | 
                            background: #ececec; 
 | 
                            font-size: 13px; 
 | 
                            color: black; 
 | 
                            border-radius: 5px; 
 | 
                            box-sizing: border-box; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .list_item_val { 
 | 
                width: 100%; 
 | 
                margin-bottom: 15px; 
 | 
                &:last-child { 
 | 
                    margin-bottom: 0 !important; 
 | 
                } 
 | 
                .list_item_val_item { 
 | 
                    font-size: 14px; 
 | 
                    color: #222222; 
 | 
                    margin-bottom: 5px; 
 | 
                    &:last-child { 
 | 
                        margin-bottom: 0 !important; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</style> 
 |