ninglu-frontt/src/pages/fourMoodBase/baseManage.vue

<template>
  <div style="cursor: default">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>基地管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <SearchBar> -->
    <div class="baseoperationbox">
      <div slot="type-check">
        <!-- <el-input
          style="cursor: pointer"
          placeholder="请输入基地名称"
          size="mini"
          suffix-icon="el-icon-search"
          v-model="search"
          @change="searchBase"
          clearable
        ></el-input> -->

        <el-button
          v-if="$QueryPermission(110)"
          v-btnRight:added="$route.path"
          type="primary"
          size="mini"
          @click="addBase('新增基地')"
          >新增</el-button
        >
      </div>
      <div slot="search-common" style="display: inline-block; margin: 0 5px 0 0">
        <!-- <el-button
          v-btnRight:added="$route.path"
          type="primary"
          size="mini"
          @click="addBase('新增基地')"
          >新增</el-button
        > -->
        <el-input
          style="cursor: pointer; width: 240px"
          placeholder="请输入基地名称"
          size="mini"
          suffix-icon="el-icon-search"
          v-model="search"
          @change="searchBase"
          clearable
        ></el-input>
      </div>
    </div>
    <!-- </SearchBar> -->
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        :xl="8"
        class="col-item"
        v-for="(item, index) in baseList"
        :key="index"
      >
        <el-card class="box-card boxCard">
          <!-- 全景VR -->
          <i class="whole-icon yficonfont icon-keshihuaquanjing" @click="wholeScene(item)"></i>

          <div class="baseCard">
            <div class="baseImg">
              <!-- <img :src="$host + item.base_img" /> -->
              <img :src="item.base_img" />
            </div>
            <div class="addBaseInfo">
              <h2>{{ item.base_name }}</h2>
              <div class="addBaseInfoDetails">
                <i class="yficonfont icon-yonghu11"></i>
                <div class="caption">负责人 ：</div>
                <div>{{ item.base_charge }}</div>
              </div>
              <div class="addBaseInfoDetails">
                <i class="yficonfont icon-dianhua2"></i>
                <!-- <div class="caption">电&nbsp;&nbsp;&nbsp;&nbsp;话 :</div> -->
                <div class="caption">电&nbsp;&nbsp;话 :</div>
                <div>{{ item.base_phone }}</div>
              </div>
              <div class="addBaseInfoDetails">
                <i class="yficonfont icon-mianji"></i>
                <div class="caption">面积(亩) ：</div>
                <div>{{ item.base_area }}</div>
              </div>
              <div class="addBaseInfoDetails">
                <i class="yficonfont icon-dingwei"></i>
                <div class="caption">地&nbsp;&nbsp;址 ：</div>
                <!-- <div class="caption">地&nbsp;&nbsp;&nbsp;&nbsp;址 ：</div> -->
                <div class="addr" :title="item.address">
                  {{ (item.address || '未定位') | formatName }}
                </div>
                <!-- <div class="addr">{{ item.address || "未定位" }}</div> -->
              </div>
            </div>
          </div>
          <div
            v-if="$QueryPermission(111)"
            v-btnRight:change="$route.path"
            class="baseEditBox"
            @click="editBase(item.id, '修改基地', item.address)"
          >
            <img src="@/assets/images/fourMoodBase/baseEditIcon.png" alt />
          </div>
          <div class="baseBtn">
            <span class="detailBtn" @click="detailBase(item.id)">详情</span>
            <span class="delBtn" @click="delBase(item.id)">删除</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 暂无数据 -->
    <div class="expertDiagnosis_referral_units_not" v-if="baseList.length <= 0">
      <img :src="$imghost + zanwu" alt class="expertDiagnosis_referral_units_notImg" />
    </div>
    <el-pagination
      v-if="baseList.length > 0"
      background
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :current-page="page"
      :total="totalNum"
      @current-change="changePage"
    ></el-pagination>
    <!-- 基地新增/修改 -->
    <el-dialog
      :title="title"
      :visible.sync="baseAddVisible"
      width="60%"
      @close="addBaseDialogClosed"
      :close-on-click-modal="false"
    >
      <el-form
        ref="addBaseFormRef"
        :model="addBaseInfo"
        label-width="100px"
        :rules="addUserFormRules"
      >
        <el-form-item label="基地名称:" prop="baseName">
          <el-input v-model="addBaseInfo.baseName"></el-input>
        </el-form-item>
        <el-form-item label="基地图片:" prop="imgSrc">
          <el-upload
            class="avatar-uploader"
            action
            :auto-upload="false"
            :show-file-list="false"
            :on-change="changeUpload"
          >
            <img v-if="addBaseInfo.imgSrc" :src="addBaseInfo.imgSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="负责人:" prop="principal">
          <el-input v-model="addBaseInfo.principal" @input="principalinput"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" prop="phone">
          <el-input v-model="addBaseInfo.phone"></el-input>
        </el-form-item>
        <el-form-item label="面积(亩):" prop="area">
          <el-input type="number" min="0" v-model="addBaseInfo.area"></el-input>
        </el-form-item>
        <el-form-item label="绑定设备:" prop="bindEquip">
          <!-- <el-cascader
            filterable
            :key="addBaseInfo.cascaderKey"
            style="width: 100%"
            :options="addBaseInfo.cascaderEquipArr"
            v-model="addBaseInfo.bindEquip"
            :props="{
              multiple: true,
              label: 'type_name',
              value: 'type_name',
              multiple: true
            }"
            clearable
          ></el-cascader> -->
          <el-row>
            <el-col :span="22">
              <el-tag
                style="margin-right: 5px"
                type="success"
                v-for="item in addBaseInfo.bindEquip"
                :key="item[1]"
                >{{ `${item[0]}/${item[1]}` }}</el-tag
              >
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-edit"
                circle
                @click="handleEditBindEquipment"
              ></el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="基地描述:" prop="baseIntro">
          <el-input type="textarea" v-model="addBaseInfo.baseIntro"></el-input>
        </el-form-item>
        <el-form-item label="基地地址:" prop="address" class="addressItem">
          <el-input
            type="text"
            v-model="addBaseInfo.address"
            disabled
            placeholder="请定位"
          ></el-input>
          <el-button type="primary" size="mini" @click="goLocation">基地定位</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="baseAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBaseSubm">确认</el-button>
      </span>
    </el-dialog>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
      <div class="cropper-content">
        <div style="width: 100%; height: 500px">
          <vueCropper
            ref="cropper"
            :img="option.img"
            autoCrop
            centerBox
            fixed
            :fixedNumber="option.fixedNumber"
            :outputSize="option.size"
            :outputType="option.outputType"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cropperVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish">确认</el-button>
      </div>
    </el-dialog>
    <!-- 添加定位弹框 -->
    <el-dialog
      class="map_dialog"
      title="添加定位"
      v-if="addLocationDialogVisible"
      :visible.sync="addLocationDialogVisible"
      width="800px"
      @closed="addLocationDialogClosed"
    >
      <el-form :inline="true" :model="locationForm" class="demo-form-inline" size="mini">
        <el-form-item label="经度">
          <el-input v-model="locationForm.lng"></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="locationForm.lat"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="locationSearch">定位</el-button>
        </el-form-item>
        <el-form-item>
          <el-input @change="addrChange()" clearable placeholder="请输入地区检索" v-model="addr">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-form-item>
      </el-form>
      <baidu-map
        class="Bmap"
        :center="center"
        :zoom="mapZoom"
        :scroll-wheel-zoom="true"
        @ready="handlerBMap"
        @click="locationPoint"
      ></baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addLocationDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLocationSubm">确 定</el-button>
      </span>
    </el-dialog>

    <EquipmentDialog
      :visible.sync="equipmentDialogVisible"
      :baseID="addBaseInfo.base_id"
      :bindEquipmentList="currentEquipmentList"
      @submit="handleEquipmentBindSubmit"
    />
  </div>
</template>
<script>
import EquipmentDialog from './components/EquipmentDialog.vue'
import SearchBar from '@/components/SearchBar'

export default {
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1\d{10}$/
      if (regMobile.test(value)) {
        callback()
      } else {
        // 返回一个错误提示
        callback(new Error('请输入合法的手机号码'))
      }
    }
    var checkMobile2 = (rule, value, callback) => {
      const regMobile = /^[A-Za-z0-9\u4e00-\u9fa5]+$/
      if (regMobile.test(value)) {
        callback()
      } else {
        // 返回一个错误提示
        callback(new Error('请不要输入特殊字符！'))
      }
    }
    return {
      zanwu: '/images/expertDiagnosis/zanwu.png',
      dialogTxt: '',
      search: '',
      page: 1,
      flag: null, // 编辑基地提交为1，添加基地为2
      totalNum: null,
      pageSize: 6, // 设置每页显示条数
      baseAddVisible: false,
      cropperVisible: false,
      title: '',
      addBaseInfo: {
        baseName: '',
        imgSrc: '',
        principal: '',
        phone: '',
        area: 0,
        cascaderKey: 0, // 绑定key值，key值改变，cascader就重新渲染
        cascaderEquipArr: [],
        bindEquip: [],
        baseIntro: '',
        address: '',
        lng: '',
        lat: '',
        base_id: ''
      },
      addUserFormRules: {
        baseName: [
          { required: true, message: '请输入基地名称', trigger: 'blur' },
          { max: 20, message: '基地名称不能超过20个字符', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/,
            message: '不允许输入空格等特殊符号'
          }
        ],
        imgSrc: [{ required: true, message: '请选择基地图片', trigger: 'change' }],
        principal: [
          { required: true, message: '请输入负责人', trigger: 'blur' },
          {
            max: 20,
            message: '基地负责人名称不能超过20个字符',
            trigger: 'blur'
          },
          { required: true, validator: checkMobile2, trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur', message: '手机号不能为空' },
          { required: true, validator: checkMobile, trigger: 'blur' }
        ],
        cascaderEquipArr: [{ required: true, message: '请选择基地设备', trigger: 'change' }],
        address: [{ required: true, message: '请选择基地地址', trigger: 'change' }],
        baseIntro: [
          { max: 200, message: '基地描述不能超过200个字符', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5_,-.。;!？?]+$/,
            message: '不允许输入空格等特殊符号'
          }
        ]
      },
      // 裁剪组件的基础配置option
      option: {
        img: 'https://qn-qn-kibey-../../assets-cdn.app-echo.com/goodboy-weixin.PNG', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        // canScale: false, // 图片是否允许滚轮缩放
        // autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 300, // 默认生成截图框宽度
        // autoCropHeight: 200, // 默认生成截图框高度
        // fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [10, 7], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
      baseList: [],
      // 添加基地定位
      addLocationDialogVisible: false,
      addr: '', // 地图检索的地址
      locationForm: {
        lng: '',
        lat: ''
      },
      center: { lng: 113.271429, lat: 23.135336 },
      mapZoom: 6,
      equipmentDialogVisible: false,
      currentEquipmentList: [] // 存储当前绑定的数据
    }
  },
  filters: {
    formatName: function (value) {
      // 地址名称
      if (value.length > 7) {
        return value.slice(0, 7) + '...'
      }
    }
  },
  components: {
    SearchBar,
    EquipmentDialog
  },
  created() {
    this.getBaseList()
  },
  methods: {
    getBaseList() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=base.bases.base_list',
        data: this.qs.stringify({
          ret: 'list',
          page_size: this.pageSize,
          search: this.search,
          page: this.page
        })
      }).then((res) => {
        if (res.data.message == '') {
          let data = res.data.data.data
          let _this = this
          this.baseList = []
          getList(0, data.length)
          function getList(j, length) {
            let lat = data[j].lat
            let lng = data[j].lng
            // console.log(11111111111111)
            _this
              .$jsonp(`//restapi.amap.com/v3/geocode/regeo?output=json`, {
                key: '78ce288400f4fc6d9458989875c833c2',
                location: `${lng},${lat}`
              })
              .then((res) => {
                // console.log(res);
                let addressComponent = res.regeocode && res.regeocode.formatted_address
                if (addressComponent) {
                  data[j].address = res.regeocode.formatted_address
                } else {
                  data[j].address = ''
                }
                _this.baseList.push(data[j])
                if (++j < length) {
                  getList(j, length)
                }
              })
          }
          this.totalNum = res.data.data.page_size
        }
      })
    },
    searchBase() {
      this.page = 1
      this.getBaseList()
    },
    // 获取所有未绑定设备+自己已绑定的设备
    getEquipList(id) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=base.bases.base_equip',
        data: this.qs.stringify({
          base_id: id
        })
      }).then((res) => {
        let data = res.data.data.data
        this.addBaseInfo.cascaderEquipArr = data
      })
    },
    changePage(val) {
      this.page = val
      this.getBaseList()
    },
    addBaseDialogClosed() {
      this.$refs.addBaseFormRef.resetFields()
      this.addBaseInfo.cascaderKey++
      this.addBaseInfo.baseName = ''
      this.addBaseInfo.baseName = ''
      this.addBaseInfo.principal = ''
      this.addBaseInfo.phone = ''
      this.addBaseInfo.area = ''
      this.addBaseInfo.imgSrc = ''
      this.addBaseInfo.cascaderEquipArr = []
      this.addBaseInfo.bindEquip = []
      this.addBaseInfo.baseIntro = ''
      this.addBaseInfo.address = ''
      this.addBaseInfo.lat = ''
      this.addBaseInfo.lng = ''
      this.addBaseInfo.base_id = ''
    },
    // 添加/删除基地
    addBaseSubm() {
      this.$refs.addBaseFormRef.validate((valid) => {
        if (valid) {
          let arr = this.addBaseInfo.bindEquip.map((item) => {
            return item[1]
          })
          if (this.flag == 1) {
            let ret = 'modify'
            // 编辑
            this.baseFun(ret, arr, '修改成功')
          } else if (this.flag == 2) {
            let ret = 'add'
            // 添加
            this.baseFun(ret, arr, '添加成功')
          }
        } else {
          return false
        }
      })
      // this.getEquipList()
    },
    baseFun(ret, arr, txt) {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=base.bases.base_list',
        data: this.qs.stringify({
          ret: ret,
          base_id: this.addBaseInfo.base_id,
          base_name: this.addBaseInfo.baseName,
          base_charge: this.addBaseInfo.principal,
          base_phone: this.addBaseInfo.phone,
          base_area: this.addBaseInfo.area,
          base_img: this.addBaseInfo.imgSrc, // 去掉/api/
          base_equip: arr.join('#'),
          base_describe: this.addBaseInfo.baseIntro,
          lng: this.addBaseInfo.lng,
          lat: this.addBaseInfo.lat
        })
      }).then((res) => {
        if (res.data.message == '') {
          this.baseAddVisible = false
          this.getBaseList()
          this.$message.success(txt)
        }
      })
    },
    // 上传按钮   限制图片大小
    changeUpload(file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw)
        this.cropperVisible = true
      })
    },
    // 点击裁剪，这一步是可以拿到处理后的地址
    finish() {
      // 获取截图的base64 数据
      this.$refs.cropper.getCropBlob((data) => {
        var form = new FormData()
        let resFile = this.blobToFile(data, 'filename.jpg')
        form.append('img_file', resFile)
        this.cropperVisible = false
        this.$axios({
          method: 'POST',
          url: '/api/api_gateway?method=base.bases.base_photo',
          data: form
        }).then((res) => {
          if (res.data.message == '') {
            this.addBaseInfo.imgSrc = res.data.data.src
          }
        })
      })
    },
    // 转成blob
    blobToFile(Blob, fileName) {
      Blob.lastModifiedDate = new Date()
      Blob.name = fileName
      return Blob
    },
    dataURLtoFile(dataurl, filename) {
      // 将base64转换为文件
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        // ie浏览器
        return new Blob([u8arr.buffer], { type: mime })
      } else {
        // 主流浏览器
        return new File([u8arr], filename, { type: mime })
      }
    },
    goLocation() {
      this.locationForm.lng = ''
      this.locationForm.lat = ''
      this.addr = ''
      this.addLocationDialogVisible = true
    },
    addrChange() {
      let local = new this.BMap.LocalSearch(this.map, {
        onSearchComplete: (results) => {
          console.log(results, ' addr change', results.Yr)
          if (results.Yr && results.Yr.length) {
            const data = results.Yr[0]
            const { lng, lat } = data.point
            this.locationForm.lng = lng
            this.locationForm.lat = lat
          }
        },
        renderOptions: {
          map: this.map,
          panel: 'r-result',
          selectFirstResult: true
        }
      })
      local.search(this.addr)
      // const results = local.getResults();

      // console.log(results, 'local search results');
    },
    addLocationDialogClosed() {},
    locationSearch() {},
    handlerBMap({ BMap, map }) {
      this.BMap = BMap
      this.map = map
    },
    // 在地图中点击定位
    locationPoint(e) {
      let { point } = e
      this.locationForm = point
      this.map.clearOverlays()
      this.map.addOverlay(new BMap.Marker(point))
    },
    addLocationSubm() {
      let { lng, lat } = this.locationForm
      this.$jsonp(`//restapi.amap.com/v3/geocode/regeo?output=json`, {
        key: '78ce288400f4fc6d9458989875c833c2',
        location: `${lng},${lat}`
      }).then((res) => {
        let addressComponent = res.regeocode && res.regeocode.formatted_address
        if (addressComponent) {
          this.addBaseInfo.address = res.regeocode.formatted_address
        } else {
          this.addBaseInfo.address = ''
        }
        this.addBaseInfo.lng = lng
        this.addBaseInfo.lat = lat
        this.addLocationDialogVisible = false // 关闭弹框
      })
    },
    editBase(id, title, address) {
      this.title = title
      this.flag = 1
      this.addBaseInfo.base_id = id
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=base.bases.base_list',
        data: this.qs.stringify({
          ret: 'details',
          base_id: id
        })
      }).then((res) => {
        let item = res.data.data[0]
        this.addBaseInfo.baseName = item.base_name
        this.addBaseInfo.principal = item.base_charge
        this.addBaseInfo.phone = item.base_phone
        this.addBaseInfo.area = Number(item.base_area)
        this.addBaseInfo.imgSrc = item.base_img
        this.addBaseInfo.bindEquip = item.base_equip
        this.addBaseInfo.baseIntro = item.base_describe
        this.addBaseInfo.address = address
        this.addBaseInfo.lat = item.lat
        this.addBaseInfo.lng = item.lng
        this.getEquipList(id) // 获取所有未绑定和已绑定的设备
        this.dialogTxt = '编辑基地'
        this.baseAddVisible = true
      })
    },
    addBase(title) {
      this.title = title
      this.flag = 2
      this.getEquipList('')
      this.baseAddVisible = true
      this.dialogTxt = '新建基地'
    },
    delBase(id) {
      console.log(id)
      this.$confirm(`确定删除基地么?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.totalNum == this.pageSize + 1) {
            // 如果总条数与每页展示条数在加1的情况下相等，就是说当删除一条数据后页码会从2页变为1页，如果不改变当前page的话，列表会展示为空
            this.page = 1
          }
          this.$axios({
            method: 'POST',
            url: '/api/api_gateway?method=base.bases.base_list',
            data: this.qs.stringify({
              ret: 'del',
              base_id: id
            })
          }).then((res) => {
            this.getBaseList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    detailBase(id) {
      this.$router.push({ path: '/index/baseShow', query: { id: id } })
    },

    // 点击进入全景
    wholeScene(item) {
      this.$router.push({
        path: '/index/baseWholeimg',
        query: {
          img: item.base_img,
          name: '基地管理',
          url: '/index/fourMoodBase'
        }
      })
    },

    handleEditBindEquipment() {
      this.currentEquipmentList = this.addBaseInfo.bindEquip
      this.equipmentDialogVisible = true
    },
    handleEquipmentBindSubmit(data) {
      console.log(data)
      this.addBaseInfo.bindEquip = data || []
    }
  }
}
</script>
<style lang="less" scoped>
.baseoperationbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.boxCard {
  position: relative;
  .baseCard {
    display: flex;
    .baseImg {
      flex: 1;
      overflow: hidden;
      height: 160px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .addBaseInfo {
      flex: 1;
      padding-left: 15px;
      h2 {
        font-size: 16px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
      }
      .addBaseInfoDetails {
        display: flex;
        padding-bottom: 10px;
        color: #525252;
        line-height: 18px;
        font-size: 14px;
        i {
          font-size: 14px;
        }
        .caption {
          margin-left: 5px;
          // width: 70px;
          width: 80px;
          flex-grow: 0;
          flex-shrink: 0;
          text-align: left;
        }
        .addr {
          flex-grow: 1;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          min-height: 40px;
        }
      }
    }
  }
  .baseEditBox {
    position: absolute;
    right: 20px;
    top: 0;
    cursor: pointer;
    img {
      width: 35px;
    }
  }
  .baseBtn {
    position: absolute;
    right: 20px;
    bottom: 10px;
    line-height: 22px;
    span {
      display: inline-block;

      width: 60px;
      border-radius: 20px;
      color: #666;
      text-align: center;
      cursor: pointer;
    }
    .delBtn {
      background: #ddd;
      font-size: 15px;
    }
    .detailBtn {
      background: #14a478;
      color: #fff;
      margin-right: 10px;
      font-size: 15px;
    }
  }
}
.avatar-uploader {
  /deep/.el-upload {
    .el-upload-dragge {
      width: 100%;
      height: 100%;
    }
  }
}
.col-item {
  height: 223px;
}
.cropper {
  width: auto;
  height: 300px;
}
.addressItem {
  /deep/.el-form-item__content {
    display: flex;
    .el-input {
      flex: 1;
      margin-right: 15px;
    }
  }
}
.Bmap {
  width: 100%;
  height: 400px;
}

.el-card {
  position: relative;
  .whole-icon {
    display: none;
    font-size: 16px;
    position: absolute;
    left: 25px;
    top: 25px;
    color: #f5f3f3;
    cursor: pointer;
    font-size: 35px;
  }

  &:hover {
    .whole-icon {
      display: block;
    }
  }
}
</style>