yiliangyiyun-pc-jj/src/views/dynamicRport/components/addAnchorageReport.vue

<!-- 锚泊报 -->
<template>
  <div class="frame">
    <div style="height: 50px"
         v-if="editFlag">
      <auditFlow show-history-flag="true"
                 :activities="activities"
                 :message="approveStatus"
                 :billNo="shipMan.status" />
    </div>
    <div id="addConstuctionReport"
         class="app-container input-form">
      <ws-form :model="shipMan"
               :show-message="false"
               ref="shipMan"
               :rules="rules">
        <div class="crewAddTitle clearfix"
             style="margin-top:1px">
          <div class="left">
            <span class="crewAddTitleMsg">基本信息(锚泊报)</span>
          </div>
          <div class="right">
            <ws-button type="primary"
                       class="editBtn"
                       @click="submit"
                       v-if="!auth">提 交</ws-button>
            <ws-button type="primary"
                       class="editBtn"
                       @click="confirm"
                       v-if="auth">确 认</ws-button>
            <ws-button type="primary"
                       class="editBtn"
                       @click="refuse"
                       v-if="auth">退 回</ws-button>
            <ws-button type="primary"
                       class="editBtn"
                       @click="save">保 存</ws-button>
            <ws-button class="editBtn"
                       @click="back">返 回</ws-button>
            <div class="divIcon"
                 @click="openState(openMsg[0].key)">
              <i v-show="openMsg[0].state"
                 class="iconfont iconopen" />
              <i v-show="!openMsg[0].state"
                 class="iconfont iconclose" />
              <!--              <svg-icon class="openCloseIcon" v-show="openMsg[0].state" icon-class="open" />-->
              <!--              <svg-icon class="openCloseIcon" v-show="!openMsg[0].state" icon-class="close" />-->
              <span class="openClose">{{ openMsg[0].value }}</span>
            </div>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[0].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="报告类型"
                              prop="reportTypeId"
                              span="1">
                  <ws-select :placeholder="$t('common.selected')"
                             v-model="shipMan.reportTypeId"
                             disabled>
                    <ws-option v-for="item in typeList"
                               :key="item.parameterKey"
                               :label="item.parameterValue"
                               :value="item.parameterKey">
                    </ws-option>
                  </ws-select>
                </ws-form-item>
                <ws-form-item label="船舶名称"
                              prop="vesselId"
                              span="1">
                  <!-- <ws-select :placeholder="$t('common.selected')"
                             v-model="shipMan.vesselId"
                             clearable
                             @change="vesselChange"
                             :disabled="editFlag || vesselBankFlag == 'V'"
                             filterable>
                    <ws-option v-for="item in shipList"
                               :key="item.vesselId"
                               :label="item.vesselName"
                               :value="item.vesselId"></ws-option>
                  </ws-select> -->
                  <BaseShipSelect v-model="shipMan.vesselId"
                                  :disabled="editFlag || vesselBankFlag == 'V'"
                                  filterable
                                  :placeholder="$t('common.selected')"
                                  :showAll="false"
                                  clearable
                                  :remote="true"
                                  @change="vesselChange"
                                  style="width:100%;"></BaseShipSelect>
                </ws-form-item>
                <ws-form-item label="船舶呼号"
                              prop="callSign"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.callSign"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
                <ws-form-item label="报告日期"
                              prop="reportDate"
                              span="1">
                  <ws-date-picker v-model="shipMan.reportDate"
                                  type="date"
                                  :placeholder="$t('common.selected')"
                                  value-format="yyyy-MM-dd"
                                  format="yyyy.MM.dd">
                  </ws-date-picker>
                </ws-form-item>
                <ws-form-item label="时区"
                              prop="timeZone"
                              span="1">
                  <ws-select :placeholder="$t('common.selected')"
                             v-model="shipMan.timeZone"
                             clearable>
                    <ws-option v-for="item in timeList"
                               :key="item.dictionaryItemId"
                               :label="item.dictionaryItemName"
                               :value="item.dictionaryItemName"></ws-option>
                  </ws-select>
                </ws-form-item>
                <ws-form-item label="船舶状态"
                              prop="shipStatus"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.shipStatus"
                            maxlength="50"></ws-input>
                </ws-form-item>
                <ws-form-item label="备注"
                              span="2">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.remarks"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">锚泊信息</span>
          </div>
          <div class="right"
               @click="openState(openMsg[1].key)">
            <i v-show="openMsg[1].state"
               class="iconfont iconopen" />
            <i v-show="!openMsg[1].state"
               class="iconfont iconclose" />
            <!--            <svg-icon class="openCloseIcon" v-show="openMsg[1].state" icon-class="open" />-->
            <!--            <svg-icon class="openCloseIcon" v-show="!openMsg[1].state" icon-class="close" />-->
            <span class="openClose">{{ openMsg[1].value }}</span>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[1].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="锚泊港口名称"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.portName"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
                <ws-form-item label="锚泊安全"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.safety"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
                <ws-form-item label="锚泊时间"
                              span="1">
                  <ws-date-picker v-model="shipMan.reportDetail.anchorTime"
                                  type="datetime"
                                  :placeholder="$t('common.selected')"
                                  value-format="yyyy-MM-dd HH:mm"
                                  format="yyyy-MM-dd HH:mm">
                  </ws-date-picker>
                </ws-form-item>
                <ws-form-item label="锚泊作业"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.anchoringPeration"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
                <ws-form-item label="锚泊经度"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.longDegree"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
                <ws-form-item label="锚泊纬度"
                              span="1">
                  <ws-input :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.latDegree"
                            maxlength="50"
                            clearable></ws-input>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">油水存量、消耗及接收信息</span>
          </div>
          <div class="right"
               @click="openState(openMsg[2].key)">
            <i v-show="openMsg[2].state"
               class="iconfont iconopen" />
            <i v-show="!openMsg[2].state"
               class="iconfont iconclose" />
            <!--            <svg-icon class="openCloseIcon" v-show="openMsg[2].state" icon-class="open" />-->
            <!--            <svg-icon class="openCloseIcon" v-show="!openMsg[2].state" icon-class="close" />-->
            <span class="openClose">{{ openMsg[2].value }}</span>
          </div>
        </div>
        <transition name="draw">
          <div v-show="openMsg[2].state"
               class="crewMsg">
            <div>
              <ws-info-table>
                <ws-form-item label="重油补给"
                              span="1">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.heavyOilSupply"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油补给">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.lightOilSupply"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="重油消耗">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.heavyOilDeplete"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油消耗">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.lightOilDeplete"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="重油存量">
                  <ws-input v-leave-num-only
                            style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.heavyOilStock"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="轻油存量">
                  <ws-input v-leave-num-only
                            style="width:95%"
                            :placeholder="$t('common.input')"
                            v-model.trim="shipMan.reportDetail.lightOilStock"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="主机系统油补给">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.mainOilSupply"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油补给">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.auxiliaryOilSupply"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="主机系统油消耗">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.mainOilDeplete"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油消耗">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.auxiliaryOilDeplete"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="主机系统油存量">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.mainOilStock"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="副机系统油存量">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.auxiliaryOilStock"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">L</div>
                </ws-form-item>
                <ws-form-item label="日用淡水补给">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.dailyWaterSupply"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="日用淡水消耗">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.dailyWaterDeplete"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
                <ws-form-item label="日用淡水存量">
                  <ws-input style="width:95%"
                            :placeholder="$t('common.input')"
                            v-leave-num-only
                            v-model.trim="shipMan.reportDetail.dailyWaterStock"
                            maxlength="50"
                            clearable></ws-input>
                  <div class="rightDiv">MT</div>
                </ws-form-item>
              </ws-info-table>
            </div>
          </div>
        </transition>
        <div class="crewAddTitle clearfix">
          <div class="left">
            <span class="crewAddTitleMsg">附件</span>
          </div>
        </div>
        <transition name="draw">
          <div class="crewMsg">
            <div>
              <ws-upload ref="upload"
                         table-name="noonreport_dynamic_report_info"
                         oss-key="deploy"
                         :vesselId="my_VesselId ? my_VesselId : ''"
                         :comp-id="compId"
                         :appendix-ids="appendixIds" />
            </div>
          </div>
        </transition>
      </ws-form>
    </div>
  </div>
</template>
<script>
import {
  parameterTenantQuery,
  queryItems,
  saveDynamicReport,
  submitDynamicReport,
  getReportInfoById,
  saveConfirm,
  saveReturn,
  getDynamicHistorys
} from '@/model/crew/index'
import WsUpload from '@/components/WsUpload'
import auditFlow from '@/components/WinseaCom/auditFlow.vue'
import { EventBus } from 'base-core-lib'
export default {
  components: { WsUpload, auditFlow },
  name: 'addDispatchReport_arrival',
  props: ['callbackdata', 'authFlag'],
  data () {
    return {
      my_VesselId: localStorage.getItem('ws-pf_vesselId'),
      openMsg: [
        {
          key: 0,
          value: '收起',
          state: true
        },
        {
          key: 1,
          value: '收起',
          state: true
        },
        {
          key: 2,
          value: '收起',
          state: true
        },
        {
          key: 3,
          value: '收起',
          state: true
        }
      ],
      shipMan: {
        reportTypeId: '5', //报告类型ID
        reportType: '锚泊报', //报告类型
        sailingStatus: '', //航行状态
        sailingStatusId: '', //航行状态ID（调遣报有）
        vesselId: '', //船舶ID
        vesselName: '', //船舶
        reportDate: '', //报告日期
        shipStatus: '锚泊', //船舶状态
        previousProjectPort: '', //上一项目港
        nextProjectPort: '', //下一项目港
        remarks: '', //备注
        reportDetail: {
          departureName: '',
          arrivalName: '',
          departureTime: '',
          estimatedArrivalTime: '',
          longDegree: '',
          latDegree: '',
          motorizedSailingTime: '',
          constantSpeedTime: '',
          motorizedSailingDistance: '',
          distanceNextProjectPort: '',
          heavyOilStock: '',
          maneuverHeavyOilDeplete: '',
          maneuverLightOilDeplete: '',
          dailyWaterStock: '',
          sailingTime: '',
          drivenMileage: '',
          totalMileage: '',
          remainingMileage: '',
          nightLong: '',
          nightLat: '',
          fifteenLong: '',
          fifteenLat: '',
          arrivalNextProjectPortName: '',
          arrivalNextProjectPortTime: '',
          fixSpeedDistance: '',
          anchorTime: '',
          anchoringPeration: ''
        }
      },
      typeList: [],
      shipList: [],
      timeList: [],
      compId: localStorage.getItem('ws-pf_compId'),
      rules: {
        reportTypeId: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ],
        vesselId: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ],
        callSign: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ],
        timeZone: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ],
        shipStatus: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ],
        reportDate: [
          {
            required: true,
            message: '请输入优惠政策名称',
            trigger: ['blur', 'change']
          }
        ]
      },
      id: '',
      editFlag: false,
      auth: false,
      // 新上传
      oldAppendixIds: '',
      newAppendixs: [],
      onChangeFlag: false,
      appendixIds: '',
      activities: [],
      approveStatus: '',
      vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag')
    }
  },
  created () { },
  mounted () {
    document.getElementById('addConstuctionReport').style.cssText =
      'width:100%;background-color: white;position:absolute;overflow-y:scroll;height:' +
      (document.body.clientHeight - 40) +
      'px'
    if (this.callbackdata) {
      this.editFlag = this.callbackdata
      getReportInfoById({
        id: localStorage.getItem('ws_dynamicReport_id')
      }).toPromise().then(response => {
        this.shipMan = response
        if (this.shipMan.appendixFileUrls) {
          this.appendixIds = this.shipMan.appendixFileUrls // 用于回显
          this.oldAppendixIds = this.shipMan.appendixFileUrls // 用于下一次点击保存给saveFiles接口传参
        }
        // 操作历史
        getDynamicHistorys({
          id: response.id
        }).toPromise().then(response => {
          this.activities = response
        })
      })
    }
    if (this.authFlag) {
      this.auth = this.authFlag
    }
    this.initData()
  },
  methods: {
    editData () {
      this.editFlag = true
      getReportInfoById({ id: this.id }).toPromise().then(response => {
        this.shipMan = response
        if (this.shipMan.appendixFileUrls) {
          this.appendixIds = this.shipMan.appendixFileUrls // 用于回显
          this.oldAppendixIds = this.shipMan.appendixFileUrls // 用于下一次点击保存给saveFiles接口传参
        }
        // 操作历史
        getDynamicHistorys({
          id: response.id
        }).toPromise().then(response => {
          this.activities = response
        })
      })
    },
    initData () {
      // 所属船舶
      this.shipList = JSON.parse(localStorage.getItem('ws-pf_vessels'))
      if (this.vesselBankFlag == 'V') {
        this.shipMan.vesselId = localStorage.getItem('ws-pf_vesselId')
        this.shipMan.vesselName = this.shipList.find(
          item => this.shipMan.vesselId == item.vesselId
        ).vesselName
      }
      parameterTenantQuery({
        compId: this.compId,
        constCode: 'NOON_REPORT_TYPE'
      }).toPromise().then(response => {
        this.typeList = response
      })
      queryItems({ categoryCode: 'TIME_ZONE' }).toPromise().then(response => {
        this.timeList = response
      })
    },
    vesselChange () {
      const arrat = JSON.parse(JSON.stringify(this.shipList))
      let findVessel = arrat.find((item, index, arr) => {
        return item.vesselId == this.shipMan.vesselId
      })
      this.shipMan.vesselName = findVessel.vesselName
    },
    // 展开状态
    openState (key) {
      this.openMsg[key].state = !this.openMsg[key].state
      if (this.openMsg[key].state) {
        this.openMsg[key].value = '收起'
      } else {
        this.openMsg[key].value = '展开'
      }
    },
    // 保存接口
    saveData () {
      return new Promise(resolve => {
        this.$refs['shipMan'].validate(valid => {
          if (valid) {
            saveDynamicReport(this.shipMan).toPromise().then(response => {
              this.id = response
              resolve('ok')
            })
          } else {
            EventBus.$emit('error', this.$t('deploy.enterRequireData'))
          }
        })
      })
    },
    saveDataChild (resolve) {
      this.saveData().then(value => {
        if (value == 'ok') {
          resolve('yes')
          EventBus.$emit('success', '保存成功')
          this.editData()
        }
      })
    },
    save () {
      return new Promise(resolve => {
        this.$refs.upload.handleSaveBill().then(res => {
          this.shipMan.appendixFileUrls = res
          this.saveDataChild(resolve)
        })
      })
    },
    submitData () {
      let that = this
      submitDynamicReport(that.$qs.stringify({ id: this.id })).toPromise().then(
        response => {
          that.$router.push({ name: 'dynamicReportView' })
        }
      )
    },
    submit () {
      this.$refs['shipMan'].validate(valid => {
        if (valid) {
          let that = this
          that
            .$confirm(
              that.$t('deploy.message02'),
              that.$t('showMessage.hint'),
              {
                confirmButtonText: that.$t('showMessage.confirm'),
                cancelButtonText: that.$t('showMessage.cancel'),
                type: 'warning'
              }
            )
            .then(() => {
              that.save().then(val => {
                if (val == 'yes') {
                  that.submitData()
                }
              })
            })
        } else {
          EventBus.$emit('error', this.$t('deploy.enterRequireData'))
        }
      })
    },
    back () {
      this.$router.back(-1)
    },
    onChange (files) {
      this.newAppendixs = files
      this.onChangeFlag = true
    },
    confirm () {
      let that = this
      that
        .$confirm(
          '确认后将不能更改，确认提交吗？',
          that.$t('showMessage.hint'),
          {
            confirmButtonText: that.$t('showMessage.confirm'),
            cancelButtonText: that.$t('showMessage.cancel'),
            type: 'warning'
          }
        )
        .then(() => {
          that.save().then(val => {
            if (val == 'yes') {
              saveConfirm(this.$qs.stringify({ id: this.shipMan.id })).toPromise().then(
                response => {
                  EventBus.$emit('success', '确认成功')
                  this.$router.push({ name: 'dynamicReportView' })
                }
              )
            }
          })
        })
    },
    refuse () {
      let that = this
      that
        .$confirm(
          '退回后将不能更改，确认提交吗？',
          that.$t('showMessage.hint'),
          {
            confirmButtonText: that.$t('showMessage.confirm'),
            cancelButtonText: that.$t('showMessage.cancel'),
            type: 'warning'
          }
        )
        .then(() => {
          saveReturn(this.$qs.stringify({ id: this.shipMan.id })).toPromise().then(
            response => {
              EventBus.$emit('success', '退回成功')
              this.$router.push({ name: 'dynamicReportView' })
            }
          )
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.yhellipsis {
  width: 95%;
}
.frame {
  background-color: white;
  padding: 0px 15px 15px 1px;
}
.frameTitle {
  background-color: #fff;
}
.frameCenter {
  background-color: #fff;

  padding: 0px 15px 45px 15px;
  height: calc(100vh - 90px);
  overflow-y: auto;
}
.crewAddButton {
  height: 50px;
  line-height: 50px;
  padding-right: 10px;
}
.crewAddTitle {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
}
.left {
  float: left;
}
.right {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  float: right;
}
.crewAddTitleMsg::before {
  content: '▍';
  color: #1d6ced;
}
.uphead {
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
}
.img {
  position: absolute;
  display: inline-block;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.kyc-passin0 {
  font-size: 14px;
  margin-left: 70px;
  color: #666666;
  position: absolute;
  top: 14px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
}
.kyc-passin {
  width: 85px;
  opacity: 0;
  margin-left: 70px;
}
.talk {
  font-size: 12px;
  color: #999999;
}
.draw-enter-active,
.draw-leave-active {
  transition: all 0.4s;
}
.draw-enter,
.draw-leave-active {
  transform: translateY(-45px);
  opacity: 0;
}
.add {
  margin-right: 15px;
}
.add,
.openClose {
  display: inline-block;
}
/deep/ .edit-input .el-input__inner {
  width: 95%;
}
.certificateEdit .el-input--medium {
  border-left: none;
}
.el-dialog__body {
  padding: 10px;
}
.Yhsearch {
  margin-bottom: 10px;
}
.divIcon {
  display: inline-block;
}
.editBtn {
  margin-right: 10px;
}
.rightDiv {
  width: 5%;
  float: right;
}
/deep/ .el-time-panel {
  margin: 5px -27px !important;
}
</style>