<template>
  <div class="common-page device-manage">

    <div class="option page-row">
      <!--工具栏-->
      <div class="head-container">
        <!-- 搜索 -->
        <label class="el-form-item-label" style="font-weight: 500;">设备号</label>
        <el-input v-model="query.equipno" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
        <label class="el-form-item-label" style="font-weight: 500;">在线状态</label>
        <el-select v-model="query.onlineStatus" placeholder="请选择">
          <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="panel-bottom page-row">
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar">
              <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
            </div>
            <div class="content">
              <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
                <el-table-column prop="equipname" label="设备名称" align="center"></el-table-column>
                <el-table-column prop="devicetype" label="设备类型" align="center">
                  <template slot-scope="scope">
                    <span>{{formatOpt(devOpts, scope.row.devicetype)}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="equipno" label="设备编号" align="center"></el-table-column>
                <el-table-column prop="eqdanwei" label="数值单位" align="center"></el-table-column>
                <el-table-column prop="installationdata" label="安装日期" align="center"></el-table-column>
                <el-table-column prop="manufacture" label="生产厂家" align="center"></el-table-column>
                <el-table-column prop="datarealtime" label="最后更新时间" align="center"></el-table-column>
                <el-table-column prop="onlineStatus" label="状态" align="center"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页组件-->
              <el-pagination :total="total" :current-page="page" style="margin-top: 8px;"
                             layout="total, prev, pager, next, sizes" @size-change="sizeChange"
                             @current-change="pageChange"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
      <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini">
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备名称：" prop="equipname" class="form-cell">
                <div class="cell-box">
                  <el-input v-model="formData.equipname" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备类型：" class="form-cell" prop="devicetype">
                <div class="cell-box">
                  <el-select v-model="formData.devicetype" placeholder="无" class="cell-input">
                    <el-option v-for="item in devOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备编号：" class="form-cell" prop="equipno">
                <div class="cell-box">
                  <el-input v-model="formData.equipno" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="数值单位：" class="form-cell" prop="eqdanwei">
                <div class="cell-box">
                  <el-input v-model="formData.eqdanwei" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="安装日期：" class="form-cell" prop="installationdata">
                <div class="cell-box">
                  <el-date-picker v-model="formData.installationdata" type="date" placeholder="选择日期"></el-date-picker>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="生产厂家：" class="form-cell" prop="manufacture">
                <div class="cell-box">
                  <el-input v-model="formData.manufacture" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="安装位置：" class="form-cell" prop="longitude" style="height: 36px">
                <div class="cell-box">
                  <div v-show="formData.longitude">{{ formData.longitude }}，{{ formData.latitude }}</div>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="是否是基准点：" class="form-cell" prop="datumpoint">
                <div class="cell-box">
                  <el-select v-model="formData.datumpoint" placeholder="无" class="cell-input">
                    <el-option v-for="item in datOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content">
              <div id="centerDiv" class="mapcontainer">
                <mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod" mapKey="mapPointView"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="安装高度：" class="form-cell" prop="installheight">
                <div class="cell-box">
                  <el-input v-model="formData.installheight" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="供电和通信方式：" class="form-cell" prop="electricitysupply">
                <div class="cell-box">
                  <el-input v-model="formData.electricitysupply" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备精度：" class="form-cell" prop="accuracy">
                <div class="cell-box">
                  <el-input v-model="formData.accuracy" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="海拔（米）：" class="form-cell" prop="altitude">
                <div class="cell-box">
                  <el-input v-model="formData.altitude" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="一级预警阈值：" class="form-cell" prop="onelevelalarm">
                <div class="cell-box">
                  <el-input v-model="formData.onelevelalarm" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="二级预警阈值：" class="form-cell" prop="twolevelalarm">
                <div class="cell-box">
                  <el-input v-model="formData.twolevelalarm" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="三级预警阈值：" class="form-cell" prop="threelevelalarm">
                <div class="cell-box">
                  <el-input v-model="formData.threelevelalarm" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="四级预警阈值：" class="form-cell" prop="fourlevelalarm">
                <div class="cell-box">
                  <el-input v-model="formData.fourlevelalarm" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="在用状态：" class="form-cell" prop="isUsed">
                <div class="cell-box">
                  <el-select v-model="formData.isUsed" placeholder="无" class="cell-input">
                    <el-option v-for="item in usedOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="同步状态：" class="form-cell">
                <div class="cell-box">
                  无
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备ip地址：" class="form-cell" prop="ipaddress">
                <div class="cell-box">
                  <el-input v-model="formData.ipaddress" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="网络类型：" class="form-cell" prop="eqtype">
                <div class="cell-box">
                  <el-select v-model="formData.eqtype" placeholder="无" class="cell-input">
                    <el-option v-for="item in eqtOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="传感器初始值：" class="form-cell" prop="initial">
                <div class="cell-box">
                  <el-input v-model="formData.initial" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="初始值x方向：" class="form-cell" prop="initialx">
                <div class="cell-box">
                  <el-input v-model="formData.initialx" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="初始值y方向：" class="form-cell" prop="initialy">
                <div class="cell-box">
                  <el-input v-model="formData.initialy" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="初始值z方向：" class="form-cell" prop="initialz">
                <div class="cell-box">
                  <el-input v-model="formData.initialz" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="报警状态：" class="form-cell" prop="state">
                <div class="cell-box">
                  <el-select v-model="formData.state" placeholder="无" class="cell-input">
                    <el-option v-for="item in bjOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="浸润线埋深(米)：" class="form-cell" prop="burialDepth">
                <div class="cell-box">
                  <el-input v-model="formData.burialDepth" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="检验周期：" class="form-cell" prop="checkperiod">
                <div class="cell-box">
                  <el-input v-model="formData.checkperiod" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="库水位设备类型：" class="form-cell" prop="sensortype">
                <div class="cell-box">
                  <el-select v-model="formData.sensortype" placeholder="无" class="cell-input">
                    <el-option v-for="item in ssOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="X位移：" class="form-cell" prop="bmwyX">
                <div class="cell-box">
                  <el-input v-model="formData.bmwyX" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="Y位移：" class="form-cell" prop="bmwyY">
                <div class="cell-box">
                  <el-input v-model="formData.bmwyY" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="Z位移：" class="form-cell" prop="bmwyZ">
                <div class="cell-box">
                  <el-input v-model="formData.bmwyZ" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="孔深(浸润线)：" class="form-cell" prop="jrxTrepanning">
                <div class="cell-box">
                  <el-input v-model="formData.jrxTrepanning" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="设备深度(浸润线)：" class="form-cell" prop="jrxBurial">
                <div class="cell-box">
                  <el-input v-model="formData.jrxBurial" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="距剖面起始点距离：" class="form-cell" prop="jrxCoordX">
                <div class="cell-box">
                  <el-input v-model="formData.jrxCoordX" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="干滩库水位设备编号：" class="form-cell" prop="kswequipno">
                <div class="cell-box">
                  <el-input v-model="formData.kswequipno" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="干滩坡度角：" class="form-cell" prop="gtwangle">
                <div class="cell-box">
                  <el-input v-model="formData.gtwangle" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="干滩安全超高：" class="form-cell" prop="gtsafeheight">
                <div class="cell-box">
                  <el-input v-model="formData.gtsafeheight" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="排水量流速：" class="form-cell" prop="pslspeed">
                <div class="cell-box">
                  <el-input v-model="formData.pslspeed" class="cell-input"></el-input>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import kongzhidiantubiao from "../../../assets/images/cutGraph/kongzhidian1.png";

export default {
  name: 'slopeDevice',
  components: {
    mars3dViewerMap,
  },
  data() {
    const basePathUrl = window.basePathUrl || ''
    return {
      configUrl: basePathUrl + 'config/config.json',
      title: '新增',
      visible: false,
      loading: false,
      page: 1,
      size: 10,
      total: 0,
      query: {},
      map: null,
      graphicLayer: null,
      stuOpts: [
        {label: '全部', value: undefined},
        {label: '离线', value: '离线'},
        {label: '在线', value: '在线'},
      ],
      devOpts: [
        {label: '干滩', value: 1},
        {label: '库水位', value: 2},
        {label: '表面位移', value: 3},
        {label: '内部位移', value: 4},
        {label: '浸润线', value: 5},
        {label: '降雨量', value: 6},
        {label: '排流量', value: 7},
        {label: '水质', value: 8},
        {label: '渗流量', value: 9},
        {label: '外坡比', value: 16},
      ],
      datOpts:[
        {label: '是', value: 1},
        {label: '否', value: 0},
      ],
      usedOpts:[
        {label: '在用', value: 1},
        {label: '不在用', value: 0},
      ],
      eqtOpts:[
        {label: '4G设备', value: 0},
        {label: 'IP设备', value: 1},
        {label: 'mqtt设备', value: 2},
      ],
      bjOpts:[
        {label: '报警', value: 1},
        {label: '不报警', value: 0},
      ],
      ssOpts: [
        {label: 'gnss', value: 0},
        {label: '超声', value: 1},
        {label: '投入式水位计或渗压计', value: 2},
        {label: '沉降', value: 3},
        {label: '雨量', value: 5},
        {label: '测斜', value: 7},
      ],
      tableData: [],
      formData: {
        longitude: '',
        latitude: '',
        equipname: '',
        equipno: '',
        devicetype: '',
        eqdanwei: '',
        installationdata: '',
        manufacture: '',
        datumpoint: 0,
        installheight: '',
        electricitysupply: '',
        accuracy: '',
        altitude: '',
        onelevelalarm: '',
        twolevelalarm: '',
        threelevelalarm: '',
        fourlevelalarm: '',
        isUsed: '',
        ipaddress: '',
        eqtype: '',
        initial: '',
        initialx: '',
        initialy: '',
        initialz: '',
        state: '',
        burialDepth: '',
        checkperiod: '',
        sensortype: '',
        bmwyX: '',
        bmwyY: '',
        bmwyZ: '',
        jrxTrepanning: '',
        jrxBurial: '',
        jrxCoordX: '',
        kswequipno: '',
        gtwangle: '',
        gtsafeheight: '',
        pslspeed: '',
      },
      rules: {
        longitude: {required: true, message: '请在地图上放置设备', trigger: 'blur'},
        equipname: {required: true, message: ' ', trigger: 'blur'},
        equipno: {required: true, message: ' ', trigger: 'blur'},
        devicetype: {required: true, message: ' ', trigger: 'blur'},
        eqdanwei: {required: true, message: ' ', trigger: 'blur'},
        installationdata: {required: true, message: ' ', trigger: 'blur'},
        manufacture: {required: true, message: ' ', trigger: 'blur'},
        datumpoint: {required: true, message: ' ', trigger: 'blur'},
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData();
    })
  },
  methods: {
    formatOpt(arr,val){
      let str='';
      arr.forEach((item)=>{
        if(item.value==val){
          str = item.label;
        }
      });
      return str;
    },
    onMapload(map) {
      map.unbindContextMenu();
      var graphicLayer = new mars3d.layer.GraphicLayer();
      map.addLayer(graphicLayer);
      const graphic = new mars3d.graphic.PointEntity({
        style: {
          color: "#ff0000",
          pixelSize: 10,
          outlineColor: "#ffffff",
          outlineWidth: 2,
          label: {
            text: "放置位置",
            font_size: 18,
            color: "#ff0000",
            outline: true,
            outlineColor: "#000000",
            outlineWidth: 5,
            pixelOffsetY: -24,
            distanceDisplayCondition: true,
            distanceDisplayCondition_far: 500000,
            distanceDisplayCondition_near: 0
          }
        },
      })
      graphicLayer.addGraphic(graphic);
      map.on(mars3d.EventType.click, (event) => {
        let p = mars3d.LngLatPoint.fromCartesian(event.cartesian);
        this.formData.longitude = p.lng;
        this.formData.latitude = p.lat;
        graphicLayer.eachGraphic((graphic) => {
          graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(p.lng, p.lat, 0), 0)
        })
      });
      this.map = map;
      this.graphicLayer = graphicLayer;
    },
    loadData() {
      var sort = 'id,desc';
      var param = this.query;
      param.page = this.page - 1;
      param.pageSize = this.size;
      param.sort = sort;
      this.$nextTick(() => {
        //获取安检信息
        HttpReq.truckDispatching.slopeGetDeviceList(param).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      })
    },
    toAdd() {
      this.title = '新增';
      this.visible = true;
    },
    toEdit(item) {
      HttpReq.truckDispatching.slopeGetDevice({id:item.id}).then((res) => {
        if (res.code == 200) {
          this.title = '编辑';
          this.visible = true;
          this.formData = res.data;
          setTimeout(() => {
            this.graphicLayer.eachGraphic((graphic) => {
              graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(this.formData.longitude, this.formData.latitude, 0), 0)
            })
            this.map.setCameraView({ lat: this.formData.latitude, lng: this.formData.longitude });
          },5000)
        }
      })
    },
    toDelete(item) {
      var id = item.id;
      this.$confirm('确认删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((e) => {
        HttpReq.truckDispatching.slopeDeleteDevice({id}).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.loadData();
          }
        })
      })
    },
    cancelForm() {
      this.visible = false;
      this.$refs.formViewRef.resetFields();
    },
    tableRowClassName({row, rowIndex}) {
    },
    // 点击搜索
    toSearch() {
      this.page = 1;
      this.loadData();
    },
    // 重置搜索
    clearLimit() {
      this.query = {};
      this.loadData()
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.loadData()
    },
    submitForm(validateName, item) {
      this.$refs[validateName].validate(valid => {
        if (valid) {
          if (this.title === '新增') {
            HttpReq.truckDispatching.slopePostDevice(item).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.cancelForm();
                this.loadData()
              }
            })
          } else {
            HttpReq.truckDispatching.slopePutDevice(item).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.cancelForm();
                this.loadData()
              }
            })
          }
        }
      });
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.cell-input {
  //min-width: 220px;
}

.form-cell {
  margin: 0 !important;
  width: 100%;
}

.grid-content {
  //border: 1px solid rgba(100, 100, 100, 0.1);
  padding: 5px 30px;
}
.cell-box {
  min-width: 120px;
}
.cell-box .el-input__inner {
  border: 1px solid rgba(100, 100, 100, 0.1);
}

.cell-box .el-input.is-disabled .el-input__inner {
  border: 1px solid rgba(100, 100, 100, 0.1);
  background: white;
  cursor: text;
}

.cell-box .el-input.is-disabled .el-input__icon {
  cursor: text;
}

.cell-box .el-icon-arrow-up:before {
  content: '';
}

.mapcontainer {
  height: 30vh;
  width: 680px;
  overflow: hidden;
}
</style>
