Vue.component('dl_catastro',{
  data: function () {
    return {
  empresa: "IM",
  logo: 'recursos/logos/icon-384x384.png',
  usuario: store.state.datos_login.usuario,
  ver_datos: false,
  ver_detalle: false,
  ver_historico: false,
  expandir: false,
  cambios_mapa: false,
  tipo_cambio_mapa: 'cambio_existente',
  modo_seleccion: false,
  modal_grabar_audio: false,
  mic_estado: false,
  tipo_filtro: 'zona',
  filtro1_id: 0,
  filtro1_padron: 0,
  filtro1_servicio: 0,
  filtro1_colector: 0,
  filtro1_tgm: 0,
  filtro1_suministro: 0,
  filtro1_medidor: 0,
  tipo_estilo: 'estado',
  ver_ayuda: false,
  calle1: '',
  calle2: '',
  calle2_nombre: '',
  perdidos: [],
  texto_de_dialogo: '',
  modo_zona: false
    }
},	
template: /*html*/`
<div> 
<!--11111111111111111111111111111111111111111111111111111111111111 -->
       <div class="hero is-fixed-top is-mobile p-0 m-0 is-success is-medium">
        <div class="row p-0 m-0">
            <div class="column col-1 p-0 m-1">
                <div class="row p-0 m-0">
                  <b-tooltip v-if="cambios_mapa == false" label="Abrir menú principal" position="is-right" type="is-dark">
                    <b-button  size="is-large" icon-left="reorder-horizontal"  v-if="cambios_mapa == false" v-on:click="$store.state.modal_visible = 'Catastro_Principal'"  type="is-success" ></b-button>
                  </b-tooltip>  
            </div>
            <div class="column col-6 p-0 m-1">
                  <b-button  icon-right="check-bold" v-if="modo_zona == true" class="p-2 m-1" v-on:click="barra_superior_aplico_zona()" rounded  type="is-danger">
                    Guardar Zona
                  </b-button>
                  <div class="box m-0 p-0" v-if="$store.state.modo_conexiones > 0">
                      <b-tooltip label="Limpiar seleccion" multilined position="is-right" type="is-dark">
                           <b-button  class="m-1" size="is-small" rounded icon-left="close" v-on:click="cerrar_reportes()"  type="is-primary is-light" ></b-button>
                      </b-tooltip> 
                      <b-tooltip label="Generar planilla Excel con reporte de conexiones seleccionadas" multilined position="is-right" type="is-dark">
                        <b-button  class="m-1" size="is-medium" icon-left="microsoft-excel"  v-on:click="reporte_excel()"  type="is-success" ></b-button>
                      </b-tooltip> 
                      <b-tooltip label="Generar kmz de Google Earth con conexiones seleccionadas" multilined position="is-right" type="is-dark">
                       <b-button  class="m-1" size="is-medium" icon-left="google-earth" v-on:click="reporte_kml()" type="is-success" ></b-button>
                      </b-tooltip> 
                      <b-tooltip label="Generar Shapefile de Esri con conexiones seleccionadas" multilined position="is-right" type="is-dark" v-if="$store.state.modo_conexiones == 1">
                      <b-button  class="m-1" size="is-medium" icon-left="earth-arrow-right" v-on:click="reporte_shapefile()" type="is-success" ></b-button>
                     </b-tooltip> 

                      <b-field class="box m-1 p-1" v-if="$store.state.modo_conexiones == 1">
                        <b-tag icon="brush">{{$store.state.descripcion_consulta_distribuida}}</b-tag>
                      </b-field>
                  </div>
                  <div class="box m-0 p-0">
                          <b-button  icon-right="check-bold" v-if="modo_seleccion == true" class="p-2 m-1" v-on:click="barra_superior_aplico_seleccion()" rounded  type="is-success">
                                  Aceptar
                          </b-button>
                          <b-button  icon-right="close-circle" v-if="modo_seleccion == true" class="p-2 m-1" v-on:click="barra_superior_descarto_seleccion()" rounded type="is-danger">
                                  Cancelar
                          </b-button>
                  </div>
                  <div class="box m-0 p-0">
                          <b-button  icon-right="content-save" v-if="cambios_mapa == true" class="p-2 m-1" v-on:click="barra_superior_guardar_cambios_mapa()" rounded  type="is-success">
                                  Guardar
                          </b-button>
                          <b-button   icon-right="close-circle"  v-if="cambios_mapa == true" class="p-2 m-1" v-on:click="barra_superior_descartar_cambios_mapa()"  rounded type="is-danger">
                                  Cancelar
                          </b-button>
                  </div>
                </div>       
            </div>

            <div class="column col-1 p-2 m-2 start-xs is-success" style="width:100px" v-if="$store.state.conexiones_en_mapa.length > 0 && cambios_mapa == false && $store.state.modo_conexiones == 0">
            <b-tooltip label="Estilizar elementos" position="is-bottom" type="is-dark" >
              <b-button   icon-left="brush"   type="is-success" inverted  v-on:click="$store.state.modal_visible = 'Principal_Estilos_Tematicos'"></b-button>
            </b-tooltip> 
            </div>

           
            <div class="column col-1 p-2 m-2 start-xs is-success" v-if="$store.state.alerta == true && $store.state.alerta_mensaje[0].startsWith('Padron:') && $store.state.datos_login.nivel_acceso > 4">
            <b-tooltip label="Padron sin conexion" position="is-left" type="is-dark">
                <b-button v-on:click="padron_sin_conexion()" type="is-success"><span class="emoji_mediano">🚫</span></b-button>
            </b-tooltip>
            </div>


            <div class="column col-1 p-2 m-2 end-xs is-success" style="width:100px">
            <b-tooltip label="Ultimos movimientos" multilined position="is-left" type="is-dark">
              <b-button   icon-left="format-list-bulleted-square" v-on:click="ultimos_movimientos()"  type="is-success" inverted ></b-button>
            </b-tooltip> 
            </div>

            <div class="column col-1 p-2 m-2 end-xs is-success" style="width:100px">
                  <div class="row end-xs">
                    <b-tooltip multilined position="is-left" type="is-dark">
                    <template v-slot:content>{{usuario}}</template>
                     <i class="fas fa-user" style="color:white;margin-right:22px;margin-top:3px;font-size:30px"></i>
                     </b-tooltip>
                  </div>                  
            </div>    
      </div>
      </div>
      <!-- Required meta tags comento algo sin problemas-->
      <b-notification :active.sync="$store.state.alerta"
          @click.native="$store.state.alerta = false"
          position='is-top-left'
          aria-close-label="Cerrar" 
          type= 'is-warning is-light'
          style="margin-bottom:1px"
          >
          <p type="square" style="display:inline-block; padding-left:1em" v-for="(item, index) in $store.state.alerta_mensaje">
          <i class="fa fa-thumbtack"> </i>
          {{ item }} 
          </p>
      </b-notification>






<!-- -->
      <div id="map" style="z-index:0"></div>

<!--2222222222222222222222222222222222222222222222222222222222222222222222222MENU MODAL PRINCIPAL -->
      <b-modal :active.sync="$store.state.modal_visible == 'Catastro_Principal'"
        has-modal-card
        trap-focus
        :destroy-on-hide="false"
        aria-role="dialog"
        aria-modal>
        <form action="">
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">Menú Principal</p>
            </header>
            <section class="modal-card-body">
            <div class="column col-xs middle-xs center-xs">	
            <div class="row center-xs middle-xs">
                <b-button   v-on:click="$store.state.modal_visible = 'Principal_Cargar_Conexiones'" type="is-success" rounded  icon-left="map-marker"  style="width:200px">
                  Conexiones Zona
                </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" >
            <b-button  v-on:click="$store.state.modal_visible = 'Principal_Cargar_Conexiones_Distribuidas'" type="is-success" rounded  icon-left="filter"  style="width:200px">
              Conexiones Filtro
            </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 14">
            <b-button  v-on:click="nueva_conexion()" type="is-success" rounded  icon-left="vector-polyline-plus"  style="width:200px">
              Nueva Conexión
            </b-button>
            </div>

            <div class="row center-xs middle-xs m-2">
            <b-button  v-on:click="$store.state.modal_visible = 'Modal_Seleccion_Tipo_Monitoreo'" type="is-success" rounded  icon-left="map-marker"  style="width:200px">
                  Monitoreo
            </b-button>
            </div>

            <div class="row center-xs middle-xs m-2">
            <b-button  v-on:click="$store.state.modal_visible = 'Modal_Mantenimiento'" type="is-success" rounded  icon-left="map-marker"  style="width:200px">
                  Mantenimiento
            </b-button>
            </div>
            </div>
            </section>
            <footer class="modal-card-foot">
            <div class="column start-xs" >
              <b-button  @click="$store.state.modal_visible = ''" type='is-warning' icon-right="backburger" style="float:left">
                Volver
              </b-button>
              </div>
              <div class="column end-xs" >
                  <b-button  @click="salir()" type='is-danger' icon-right="exit-run" style="float:right">
                    Salir
                  </b-button>
              </div>
            </footer>
        </div>
        </form>
        </b-modal>




<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--modal principal de mantenimiento -->
<b-modal :active.sync="$store.state.modal_visible == 'Modal_Mantenimiento'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Mantenimiento</p>
    </header>
    <section class="modal-card-body">
    <div class="column col-xs middle-xs center-xs">	
    <div class="row center-xs middle-xs">
        <b-button   v-on:click="mantenimiento(1)" type="is-warning" rounded  icon-left="vector-polyline-plus"  style="width:200px">
          Topológias
        </b-button>
    </div>
    <div class="row center-xs middle-xs m-2">
    <b-button  v-on:click="mantenimiento(2)" type="is-warning" rounded  icon-left="map-marker-plus-outline"  style="width:200px">
        Conexion a Pluvial
    </b-button>
    </div>
    <div class="row center-xs middle-xs m-2">
    <b-button  v-on:click="mantenimiento(3)" type="is-warning" rounded  icon-left="map-marker-plus-outline"  style="width:200px">
        Sin padrón
    </b-button>
    </div>
    <div class="row center-xs middle-xs m-2" >
    <b-button  v-on:click="mantenimiento(4)" type="is-warning" rounded  icon-left="map-marker-plus"  style="width:200px">
        Tarifas
    </b-button>
    </div>
    <div class="row center-xs middle-xs m-2" >
    <b-button  v-on:click="mantenimiento(0)" type="is-success" rounded  icon-left="broom"  style="width:200px">
        Limpiar
    </b-button>
    </div>
    </div>
    </section>
    <footer class="modal-card-foot">
    <div class="row center-xs middle-xs m-2" >
      <b-button  @click="$store.state.modal_visible = ''" type='is-danger' icon-right="backburger" >
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>



<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->


<!--3333333333333333333333333333333333333333333333333333333333333333333MODAL DE EDICIÓN DE CONEXION -->   
        <b-modal :active.sync="$store.state.modal_visible == 'Catastro_Conexion'"
        has-modal-card
        trap-focus
        :destroy-on-hide="false"
        aria-role="dialog"
        aria-modal>
        <form action="">
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">Conexión {{$store.state.conexion_seleccionada.id}}</p>
            </header>
            <section class="modal-card-body">
            <div class="column col-xs middle-xs center-xs">	
            <div class="row center-xs middle-xs  m-2" >
                <b-button  v-on:click="ver_datos_y_media" type="is-success" rounded  icon-left="eye-check-outline"  style="width:200px">
                  Ver
                </b-button>
            </div>
            <div class="row center-xs middle-xs"  v-if="$store.state.datos_login.nivel_acceso > 0">
                <b-button  v-on:click="$store.state.modal_visible = 'Modificar_Conexion'" type="is-success" rounded  icon-left="pencil"  style="width:200px">
                  Modificar
                </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 14">
                <b-button  v-on:click="eliminar_conexion()"  type="is-danger" rounded  icon-left="trash-can"  style="width:200px">
                  Eliminar
                </b-button>
            </div>
            </div>
            </section>
            <footer class="modal-card-foot">
                <b-button  @click="$store.state.modal_visible = ''" type='is-danger' icon-right="backburger" style="float:right">
                Volver
              </b-button>
            </footer>
        </div>
        </form>
        </b-modal>
<!--4444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL DE VER CONEXION -->  
    <b-modal :active.sync="$store.state.modal_visible == 'Ver_Conexion'"
        has-modal-card
        trap-focus
        :destroy-on-hide="false"
        aria-role="dialog"
        aria-modal>
      <form action="">
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">Conexión {{$store.state.conexion_seleccionada.id}}</p>
            </header>
            <section class="modal-card-body">
              <div class="column col-xs middle-xs center-xs p-1">	
                          <b-button style="height:55px" @click="ver_datos = !ver_datos" expanded type="is-success" :icon-right="ver_datos ? 'upload' : 'download'" >
                            <strong>{{ver_datos ? 'Cerrar datos de conexión' : 'Ver datos de conexión'}}</strong>
                          </b-button>
                          <div class="column m-1 p-1" v-if="ver_datos">
                              <div class="columns is-full-mobile  p-0 m-0">
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Id:</span></strong> {{$store.state.conexion_seleccionada.id}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Tramite:</span></strong> {{$store.state.conexion_seleccionada.tramite}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Tipo:</span></strong> {{$store.state.conexion_seleccionada.tipo}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Seccion:</span></strong> {{$store.state.conexion_seleccionada.seccion}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Profundidad:</span></strong> {{$store.state.conexion_seleccionada.profundidad}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Etapa:</span></strong> {{$store.state.conexion_seleccionada.etapa}}</p> 
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Padron:</span></strong> {{$store.state.conexion_seleccionada.padron}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">SUR:</span></strong> {{$store.state.conexion_seleccionada.sur}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Colector:</span></strong> {{$store.state.conexion_seleccionada.colector}}</p>                                                                      
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-3 m-0"><strong><span style="color: #588585">Comentarios:</span></strong> {{$store.state.conexion_seleccionada.descripcion}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0">          
                                <p class="box column is-full-mobile p-3 m-0"><strong><span style="color: #588585">Fuente:</span></strong> {{$store.state.conexion_seleccionada.alta_fuent}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-3 m-0"><strong><span style="color: #588585">Descripcion de fuente:</span></strong> {{$store.state.conexion_seleccionada.alta_descr}}</p>           
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Accion:</span></strong> {{$store.state.conexion_seleccionada.accion}}</p> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Zampeado colector:</span></strong> {{$store.state.conexion_seleccionada.z_col}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Calle:</span></strong> {{$store.state.conexion_seleccionada.calle}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Puertas:</span></strong> {{puertas}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Tarifas:</span></strong>{{servicios}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Fecha de alta:</span></strong> {{$store.state.conexion_seleccionada.alta_fecha.substring(0,10)}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Tgms:</span></strong> {{tgms}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Oses:</span></strong> {{oses}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Medidores:</span></strong> {{medidores}}</p>
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">CCZ:</span></strong> {{$store.state.conexion_seleccionada.ccz}}</p>
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Empresa:</span></strong> {{$store.state.conexion_seleccionada.empresa}}</p>   
                                </div>  
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Dist Med Izq:</span></strong> {{$store.state.conexion_seleccionada.distmei.substring(0,$store.state.conexion_seleccionada.distmei.indexOf('.') + 3 )}}</p>                              
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Dist Med Der:</span></strong> {{$store.state.conexion_seleccionada.distmed.substring(0,$store.state.conexion_seleccionada.distmed.indexOf('.') + 3 )}}</p>                              
                                </div> 



                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Caudal:</span></strong> {{$store.state.conexion_seleccionada.caudal.substring(0,$store.state.conexion_seleccionada.caudal.indexOf('.') + 2 )}}</p>                              
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Cant. inodoros:</span></strong> {{$store.state.conexion_seleccionada.cantino}}</p>                              
                                </div> 

                                
                                <div class="columns is-full-mobile  p-0 m-0"> 
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Area permeable:</span></strong> {{$store.state.conexion_seleccionada.areaper.substring(0,$store.state.conexion_seleccionada.areaper.indexOf('.') + 2 )}}</p>                            
                                <p class="box column is-full-mobile p-2 m-0"><strong><span style="color: #588585">Area impermeable:</span></strong> {{$store.state.conexion_seleccionada.areaimp.substring(0,$store.state.conexion_seleccionada.areaimp.indexOf('.') + 2 )}}</p>                              
                                </div> 






                               </div>
                               


                          <b-button style="height:55px" @click="ver_historico = !ver_historico" expanded type="is-success" :icon-right="ver_historico ? 'upload' : 'download'" >
                            <strong>{{ver_historico ? 'Cerrar historial' : 'Ver historial'}}</strong>
                          </b-button>
                          <div class="column mt-0 pt-0">
                            <ul class="list-group"  v-if="ver_historico">
                              <template v-for="item in historial">
                                  <li>{{item}}</li>
                                  <ul></ul>
                              </template>   
                            </ul>
                          </div>
                          <div>
                            <template  :active.sync="fotos_a_ver.length > 0">
                            <p class="box column is-full-mobile p-2 m-0" v-if="fotos_a_ver.length > 0"><strong><span style="color: #588585">Fotografias</span></strong></p>
                                    <b-carousel  
                                    :indicator= true
                                    :indicator-background= false
                                    :indicator-inside= true
                                    indicator-mode="hover"
                                    indicator-position="is-bottom"
                                    :arrow= true
                                    :repeat = false
                                    :arrow-hover = false
                                    icon-pack="mdi"
                                    pause-text=""
                                    icon-size="is-small">
                                        <b-carousel-item v-for="(carousel, i) in fotos_a_ver" :key="i">
                                        <p style="color:grey;text-align:left" mt-1>{{carousel.fecha}}</p>
                                            <section>
                                                <div class="hero-body has-text-centered">
                                                <p class="image is-4by3">
                                                <img class="has-ratio img-fluid" :src="carousel.foto" alt="" v-on:click="$store.state.modal_visible = 'Fotos_Pantalla_Completa'">                                             
                                                </p>
                                                </div>
                                            </section>
                                        </b-carousel-item>
                                    </b-carousel>
                            </template>
                          </div>      
                          <div>
                            <template  :active.sync="audios_a_escuchar.length > 0">
                            <p class="box column is-full-mobile p-2 m-0" v-if="audios_a_escuchar.length > 0"><strong><span style="color: #588585">Audios</span></strong></p>
                                  <b-carousel  
                                      :indicator= true
                                      :indicator-background= false
                                      :indicator-inside= true
                                      indicator-mode="hover"
                                      indicator-position="is-top"
                                      :arrow= true
                                      :repeat = false
                                      :arrow-hover = false
                                      icon-pack="mdi"
                                      pause-text=""
                                      icon-size="is-small">
                                      <b-carousel-item v-for="(audio, i) in audios_a_escuchar" :key="i">
                                          <section>
                                              <div class="hero-body has-text-centered">
                                              <p>
                                              <audio controls style="margin:0;display: block"> <source :src="audio.audio"> </audio>
                                              </p>
                                              </div>
                                          </section>
                                          <p style="color:grey;text-align:left" m-1>{{audio.fecha}}</p>
                                      </b-carousel-item>
                                  </b-carousel>
                            </template>    
                          </div>
                           
                  </div>    
            </section>
            <footer class="modal-card-foot">
                <b-button  @click="$store.state.modal_visible =  'Catastro_Conexion'" type='is-danger' icon-right="backburger" style="float:right">
                Volver
              </b-button>
            </footer>
    </div>
  </form>
</b-modal>

<!--55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555MODAL DE EDICIÓN DE CONEXION -->   
<b-modal :active.sync="$store.state.modal_visible == 'Modificar_Conexion'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"Imagen
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Conexión {{$store.state.conexion_seleccionada.id}}</p>
    </header>
    <section class="modal-card-body">
    <div class="column col-xs middle-xs center-xs">	
            <div class="row center-xs middle-xs  m-2"  v-if="$store.state.datos_login.nivel_acceso > 9">
                <b-button  v-on:click="modifico_ubicacion()" type="is-success" rounded  icon-left="map-marker-distance"  style="width:200px">
                  Ubicacion
                </b-button>
            </div>
            <div class="row center-xs middle-xs"  v-if="$store.state.datos_login.nivel_acceso > 4">
                <b-button  v-on:click="modifico_datos()" type="is-success" rounded  icon-left="pencil"  style="width:200px">
                  Datos
                </b-button>
            </div>
            <form enctype="multipart/form-data">
            <input accept="image/*" @change="guardo_fotografia" capture="camera" id="foto_conexion" name="foto_conexion" ref="foto_conexion" style="display:none" type="file"> 
            </form>
            <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 4">
            <b-button  @click="$refs.foto_conexion.click()" type="is-info" rounded  icon-left="camera"  style="width:200px">
              Imagen
            </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 4">
            <b-button  @click="modal_grabar_audio = true" type="is-link" rounded  icon-left="microphone-plus"  style="width:200px">
              Grabar audio
            </b-button>
            </div>
            <div class="row center-xs middle-xs"  v-if="$store.state.datos_login.nivel_acceso > 4">
                <b-button  v-on:click="$store.state.modal_visible = 'Menu_Principal_Encuestas'" type="is-dark" rounded  icon-left="pencil"  style="width:200px">
                  Encuesta
                </b-button>
            </div>
    </div>
    </section>
    <footer class="modal-card-foot">
        <b-button  @click="$store.state.modal_visible = 'Catastro_Conexion'" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
    </footer>
</div>
</form>
</b-modal>
<!--6666666666666666666666666666666666666666666666666666666666666666666666666666666666666MODAL DE MODIFICACION DE DATOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Modal_modificacion_datos'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">datos_colector
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Datos de conexión</p>
    </header>
    <section class="modal-card-body">
    <div class="columns is-full-mobile p-1 m-1">
          <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Padron:" horizontal style="width:180px">
            <b-input placeholder="Padron:" v-model="datos_padron" maxlength="6"></b-input>
          </b-field>
          <b-button class="column is-1 p-1 m-1" @click="seleccionar_padron()" type="is-success" rounded icon-left="map-search-outline" style="width:40px" >
          </b-button>
    </div>
    <div class="columns is-full-mobile p-1 m-1">
      <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Colector:" horizontal style="width:240px">
        <b-input placeholder="Colector:"  v-model="datos_colector" maxlength="8"></b-input>
      </b-field>
      <b-button class="column is-1 p-1 m-1" @click="seleccionar_colector()" type="is-success" rounded icon-left="map-search-outline" style="width:40px" >
      </b-button>
    </div>
    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Calle:" horizontal style="width:300px">
          <p>{{datos_calle}}</p>
        </b-field>
        <b-button class="column is-1 p-1 m-1" @click="seleccionar_calle()" type="is-success" rounded icon-left="map-search-outline" style="width:40px" >
        </b-button>
    </div>
    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Profundidad:" horizontal style="width:240px">
          <b-input placeholder="Profundidad:"  v-model="datos_profundidad" maxlength="8"></b-input>
        </b-field>
    </div>
    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="ZCol:" horizontal style="width:200px">
          <b-input placeholder="Z Colector" v-model="datos_z_col" maxlength="8"></b-input>
        </b-field>
        <b-button class="column  is-1  p-1 m-1" @click="calcular_z_col()" type="is-warning" rounded icon-left="calculator" style="width:40px" >
        </b-button>
    </div>
    <div class="columns is-full-mobile p-1 m-1">
    <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Dist Med Der:" horizontal style="width:200px">
      <b-input placeholder="Dist Med Der" v-model="datos_distmed" maxlength="8"></b-input>
    </b-field>
    <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Dist Med Izq:" horizontal style="width:200px">
      <b-input placeholder="Dist Med Izq" v-model="datos_distmei" maxlength="8"></b-input>
    </b-field>
    </div>
    <div class="columns is-full-mobile p-1 m-1" v-if="$store.state.datos_login.nivel_acceso > 14">
           <p class="p-2 m-2" style="background-color:rgb(202, 170, 30);"><strong>Modificar historial</strong></p>
            <b-button class="column  is-1  p-1 m-1" @click="$store.state.modal_visible = 'Principal_Historial'" type="is-warning"  rounded icon-left="history" style="width:40px;background-color:rgb(202, 170, 30)" >
            </b-button>
    </div>
    <div class="column is-full-mobile p-1 m-1">
         <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="SUR:" horizontal style="width:300px">
        <p>{{$store.state.conexion_seleccionada.sur}}</p>
        </b-field>
    </div> 
    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Tramite:" horizontal style="width:300px">
          <p>{{$store.state.conexion_seleccionada.tramite}}</p>
        </b-field>
    </div>
    <div class="column is-full-mobile p-1 m-1">
      <b-field label="Etapa">
      <b-select  v-model="datos_etapa" placeholder="Sin asignar">
      <option value = "Solicitada">Solicitada</option>
      <option value = "Proyectada">Proyectada</option>
      <option value = "En construccion">En construccion</option>
      <option value = "Construida">Construida</option>
      <option value = "Ramal sin inst. sanitaria conectada">Ramal sin inst. sanitaria conectada</option>
      </b-select>
      </b-field>
    </div>  
    <div class="column is-full-mobile p-1 m-1">
      <b-field label="Accion">
      <b-select  v-model="datos_accion" placeholder="Sin asignar">
      <option value = "a Construir">a Construir</option>
      <option value = "a Limpiar">a Limpiar</option>
      <option value = "a Reparar">a Reparar</option>
      <option value = "a Inspeccionar">a Inspeccionar</option>
      <option value = "Sin asignar">Sin asignar</option>  
      </b-select>
      </b-field>
    </div>     
    <div class="column is-full-mobile p-1 m-1">
        <b-field label="Tipo">
        <b-select    v-model="datos_tipo" placeholder="Tipo">
        <option value = "Circular">Circular</option>
        <option value = "Rectangular">Rectangular</option>
        <option value = "Sin determinar">Sin determinar</option>
        </b-select>
        </b-field>
    </div> 
    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Sección:" horizontal style="width:300px">
          <b-input placeholder="Sección:"  v-model="datos_seccion"></b-input>
        </b-field>
    </div>
    <b-field label="Comentarios">
      <b-input v-model="datos_descripcion" maxlength="500" type="textarea"></b-input>
    </b-field>
    <div class="column is-full-mobile p-1 m-1">
        <b-field label="CCZ">
        <b-select    v-model="datos_ccz" placeholder="CCZ">
        <option value = "CCZ01">CCZ01</option>
        <option value = "CCZ02">CCZ02</option>
        <option value = "CCZ03">CCZ03</option>
        <option value = "CCZ04">CCZ04</option>
        <option value = "CCZ05">CCZ05</option>
        <option value = "CCZ06">CCZ06</option>
        <option value = "CCZ07">CCZ07</option>
        <option value = "CCZ08">CCZ08</option>
        <option value = "CCZ09">CCZ09</option>
        <option value = "CCZ10">CCZ10</option>
        <option value = "CCZ11">CCZ11</option>
        <option value = "CCZ12">CCZ12</option>
        <option value = "CCZ13">CCZ13</option>
        <option value = "CCZ14">CCZ14</option>
        <option value = "CCZ15">CCZ15</option>
        <option value = "CCZ16">CCZ16</option>
        <option value = "CCZ17">CCZ17</option>
        <option value = "CCZ18">CCZ18</option>
        <option value = "Sin determinar">Sin determinar</option>
        </b-select>
        </b-field>
    </div> 
    <div class="column is-full-mobile p-1 m-1">
        <b-field label="Empresa">
        <b-select    v-model="datos_empresa" placeholder="Empresa">
        <option value = "IM">IM</option>
        <option value = "Ciemsa">Ciemsa</option>
        <option value = "Teyma">Teyma</option>
        <option value = "Saccem">Saccem</option>
        <option value = "Sin determinar">Sin determinar</option>
        </b-select>
        </b-field>
    </div> 
    <div class="box mt-2 center-xs middle-xs has-background-light"  style="width:100%">  
      <strong> Tarifas asociadas </strong> 
    </div>
    <div class="columns is-gapless m-1 p-1" v-for="(value, key) in datos_servicios">
    <div class="column">
      <div class="box">
        <div class="columns border border-dark rounded is-gapless m-1 p-1">
          <b-checkbox class="column m-1 p-1 is-mobile" style="width:40px" v-model="value.check" @click.native="modifico_servicio(key)" type="is-success" size="is-medium"></b-checkbox>
          <div class="column bg-white rounded m-2 p-2">Tarifa: {{value.servicio}}</div>
          <div class="column bg-white rounded m-2 p-2">Padron: {{value.padron}}</div>
          <div class="column bg-white rounded m-2 p-2">Tgms: {{value.tgms}}</div>
          <div class="column bg-white rounded m-2 p-2">Oses: {{value.oses}}</div>
          <div class="column bg-white rounded m-2 p-2">Medidores: {{value.medidores}}</div>
          <div class="column bg-white rounded m-2 p-2">Calle: {{value.calle}}</div>
          <div class="column bg-white rounded m-2 p-2">Puertas: {{value.puertas}}</div>
        </div>
      </div>
    </div>
  </div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = 'Modificar_Conexion'">Cerrar</button>
        <b-button  @click="guardo_datos_conexion()" type="is-danger" icon-left="cloud-upload">
          Guardar
        </b-button>
    </footer>
</div>
</form>
</b-modal>
<!--77777777777777777777777777777777777777777777777777777777777777777777777777777777MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Fotos_Pantalla_Completa'"
:on-cancel="function(){$store.state.modal_visible = 'Ver_Conexion'}">
  <template  :active.sync="fotos_a_ver.length > 0">
      <b-carousel  
      :indicator= true
      :indicator-background= false
      :indicator-inside= true
      indicator-mode="hover"
      indicator-position="is-top"
      :arrow= true
      :repeat = false
      :arrow-hover = false
      icon-pack="mdi"
      pause-text=""
      icon-size="is-small">
          <b-carousel-item v-for="(carousel, i) in fotos_a_ver" :key="i">
          <p style="color:grey;text-align:left" m-1>{{carousel.fecha}}</p>
              <section>
                  <div class="hero-body has-text-centered">
                  <p class="image is-4by3">
                  <img class="has-ratio img-fluid" :src="carousel.foto" alt="">
                  </p>
                  </div>
              </section>
              <b-button v-if="$store.state.datos_login.nivel_acceso > 0"  @click="eliminar_fotografia(carousel.foto)" type="is-danger" icon-left="trash-can">             
              </b-button>
          </b-carousel-item>
      </b-carousel>
  </template>
</b-modal>
<!--77777777777777777777777777777777777777777777777777777777777777777777777777777777MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Esquemas_Pantalla_Completa'"
:on-cancel="function(){$store.state.modal_visible = 'Ver_Conexion'}">
  <template  :active.sync="esquemas_a_ver.length > 0">
      <b-carousel  
      :indicator= true
      :indicator-background= false
      :indicator-inside= true
      indicator-mode="hover"
      indicator-position="is-top"
      :arrow= true
      :repeat = false
      :arrow-hover = false
      icon-pack="mdi"
      pause-text=""
      icon-size="is-small">
          <b-carousel-item v-for="(esquema, i) in esquemas_a_ver" :key="i">
          <p style="color:grey;text-align:left" m-1>{{esquema.fecha}}</p>
              <section>
                  <div class="hero-body has-text-centered">
                  <p class="image is-4by3">
                  <img class="has-ratio img-fluid" :src="esquema.foto" alt="">
                  </p>
                  </div>
              </section>
              <b-button v-if="$store.state.datos_login.nivel_acceso > 0"  @click="eliminar_fotografia(esquema.foto)" type="is-danger" icon-left="trash-can">             
              </b-button>
          </b-carousel-item>
      </b-carousel>
  </template>
</b-modal>
<!--77777777777777777777777777777777777777777777777777777777777777777777777777777777MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Actas_Pantalla_Completa'"
:on-cancel="function(){$store.state.modal_visible = 'Ver_Conexion'}">
  <template  :active.sync="actas_a_ver.length > 0">
      <b-carousel  
      :indicator= true
      :indicator-background= false
      :indicator-inside= true
      indicator-mode="hover"
      indicator-position="is-top"
      :arrow= true
      :repeat = false
      :arrow-hover = false
      icon-pack="mdi"
      pause-text=""
      icon-size="is-small">
          <b-carousel-item v-for="(acta, i) in actas_a_ver" :key="i">
          <p style="color:grey;text-align:left" m-1>{{acta.fecha}}</p>
              <section>
                  <div class="hero-body has-text-centered">
                  <p class="image is-4by3">
                  <img class="has-ratio img-fluid" :src="acta.foto" alt="">
                  </p>
                  </div>
              </section>
              <b-button v-if="$store.state.datos_login.nivel_acceso > 0"  @click="eliminar_fotografia(acta.foto)" type="is-danger" icon-left="trash-can">             
              </b-button>
          </b-carousel-item>
      </b-carousel>
  </template>
</b-modal>
<!--888888888888888888888888888888888888888888888888888888888888888888888888888888888MODAL DE grabar audio -->   
<b-modal :active.sync="modal_grabar_audio"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Grabar audio</p>
    </header>
    <section class="modal-card-body">
    <p class="subtitle is-5" style="color:blue" v-if="mic_estado">Grabando audio...</p>
    <b-progress type="is-primary" v-if="mic_estado" ></b-progress>
    </section>
    <footer class="modal-card-foot">
        <b-button  @click="iniciar_grabacion_audio()"   :type="mic_estado ? 'is-grey' : 'is-danger'" icon-left="microphone-plus">
        Iniciar grabación
        </b-button>
        <b-button  @click="finalizar_grabacion_audio()" :type="mic_estado ? 'is-danger' : 'is-grey'" icon-left="microphone-outline">
        Finalizar grabación
      </b-button>
    </footer>
</div>
</form>
</b-modal>
<!--999999999999999999999999999999999999999999999999999999999999999999999999999MODAL DE FILTROS LOCALIZADOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Cargar_Conexiones'"
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="" v-on:submit.prevent="cargar_conexiones(true,'normal',0,0)">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Filtrar Conexiones</p>
    </header>
    <section class="modal-card-body">

    <div class="columns is-gapless m-1 p-1">
      <div class="column">
       <div class="box">
       <div class="columns is-desktop m-1 p-1">
                      <b-radio class="column is-centered" v-model="tipo_filtro" native-value="zona" type="is-success">Zona</b-radio>
                      <div class="column m-0 p-0">
                          <b-radio v-model="tipo_filtro" native-value="id" type="is-success" class="column is-is-half">Id</b-radio>
                          <b-input v-model.number v-if="tipo_filtro == 'id'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_id" maxlength="10"></b-input>
                      </div>

                      <div class="column m-0 p-0 ">
                          <b-radio v-model="tipo_filtro" native-value="padron" type="is-success" class="column is-is-half">Padron</b-radio>
                          <b-input v-if="tipo_filtro == 'padron'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_padron" maxlength="10"></b-input>
                      </div>
                      <div class="column m-0 p-0 ">
                      <b-radio v-model="tipo_filtro" native-value="calles" type="is-success" class="column is-full">Calles</b-radio>
                      </div> 
                      <div v-if="tipo_filtro == 'calles'" class="box m-1 p-1" style="width:280px">
                                    <b-autocomplete 
                                    rounded
                                    v-model="calle1"
                                    placeholder="18 de Julio"
                                    icon="magnify"
                                    :data="cargo_calles"
                                    @select="option => seleccione_calle1(option)"
                                    clearable
                                     >
                                    </b-autocomplete>
                                    <b-select class="p-1" expanded rounded placeholder="Calle esquina" v-model="calle2_nombre" @change.native="cambio_calle2($event)">
                                          <option                 
                                          v-for="calle in calle2"
                                          :value="calle.calle"
                                          :key="calle.id">
                                          {{ calle.calle }}
                                          </option>
                                   </b-select>                            
                        </div>             
                        <div class="column m-0 p-0 ">
                        <b-radio v-model="tipo_filtro" native-value="servicio" type="is-success" class="column is-half">Tarifa</b-radio>
                        <b-input v-if="tipo_filtro == 'servicio'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_servicio" maxlength="15"></b-input>
                        </div>
                        <div class="column m-0 p-0 ">
                        <b-radio v-model="tipo_filtro" native-value="colector" type="is-success" class="column is-half">Colector</b-radio>
                        <b-input v-if="tipo_filtro == 'colector'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_colector" maxlength="15"></b-input>
                        </div>
                        <div class="column m-0 p-0 ">
                        <b-radio v-model="tipo_filtro" native-value="tgm" type="is-success" class="column is-half">Tgm</b-radio>
                        <b-input  v-if="tipo_filtro == 'tgm'"  class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_tgm" maxlength="15"></b-input>
                        </div>  
                        <div class="column m-0 p-0 ">
                        <b-radio v-model="tipo_filtro" native-value="suministro" type="is-success" class="column is-half">Suministro</b-radio>
                        <b-input  v-if="tipo_filtro == 'suministro'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_suministro" maxlength="15"></b-input>
                        </div>
                        <div class="column m-0 p-0 ">
                        <b-radio v-model="tipo_filtro" native-value="medidor" type="is-success" class="column is-half">Medidor</b-radio>
                        <b-input  v-if="tipo_filtro == 'medidor'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_medidor" maxlength="15"></b-input>
                        </div>
            </div>        
      </div>
    </div>
  </div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
        <b-button  @click="cargar_conexiones(true,'normal',0,0)"  type="is-danger" icon-left="cloud-upload">
          Cargar
        </b-button>
    </footer>
</div>
</form>
</b-modal>






<!--101010101010101010101010101010101010101010101010101010101010101010101010101010101010101019MODAL DE FILTROS DISTRIBUIDOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Cargar_Conexiones_Distribuidas'" 
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Consultas</p>
    </header>
    <section class="modal-card-body">

    <div class="columns is-desktop m-1 p-1">

              <div class="column">

                          <div class="box">
                                  <b-icon  icon="filter" type="is-success"></b-icon>
                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.fuente"  
                                  type="is-success">
                                      Fuente
                                  </b-switch>

                                <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.fuente == true">
                                            <b-select    v-model="$store.state.datos_consulta_distribuida.fuente_valor" placeholder="Sistema de conexiones">
                                            <option value = "Sistema de conexiones">Sistema de conexiones</option>
                                            <option value = "Inspeccion red Arteaga">Inspeccion red Arteaga</option>
                                            <option value = "Conforme obra">Conforme obra</option>
                                            <option value = "Sistema unico de reclamos">Sistema unico de reclamos</option>
                                            <option value = "Datos recopilados libros">Datos recopilados libros</option>
                                            <option value = "Aplicacion de Catastro">Aplicacion de Catastro</option>
                                            <option value = "Importacion">Importacion</option>
                                            <option value = "Otros">Otros</option>
                                            </b-select>
                                </div>                 
                          </div>
              </div>

              <div class="column">
                            <div class="box">
                                  <b-icon  icon="filter" type="is-success"></b-icon>
                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.sur"  
                                  type="is-success">
                                      SUR
                                  </b-switch>
                                  <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.sur == true">
                                              <b-select    v-model="$store.state.datos_consulta_distribuida.sur_valor" placeholder="Sin reclamos">
                                              <option value = "Sin reclamos">Sin reclamos</option>
                                              <option value = "SUR Nueva Ingresado">SUR Nueva Ingresado</option>
                                              <option value = "SUR Nueva En Proceso">SUR Nueva En Proceso</option>
                                              <option value = "SUR Nueva Finalizado">SUR Nueva Finalizado</option>
                                              <option value = "SUR Nueva Anulado">SUR Nueva Anulado</option>
                                              <option value = "SUR Rota Ingresado">SUR Rota Ingresado</option>
                                              <option value = "SUR Rota En Proceso">SUR Rota En Proceso</option>
                                              <option value = "SUR Rota Finalizado">SUR Rota Finalizado</option>
                                              <option value = "SUR Rota Anulado">SUR Rota Anulado</option>
                                              <option value = "SUR Obstruida Ingresado">SUR Obstruida Ingresado</option>
                                              <option value = "SUR Obstruida En Proceso">SUR Obstruida En Proceso</option>
                                              <option value = "SUR Obstruida Finalizado">SUR Obstruida Finalizado</option>
                                              <option value = "SUR Obstruida Anulado">SUR Obstruida Anulado</option>
                                              <option value = "SUR Sucia Ingresado">SUR Sucia Ingresado</option>
                                              <option value = "SUR Sucia En Proceso">SUR Sucia En Proceso</option>
                                              <option value = "SUR Sucia Finalizado">SUR Sucia Finalizado</option>
                                              <option value = "SUR Sucia Anulado">SUR Sucia Anulado</option>
                                              </b-select>
                                  </div>                 
                              </div>
              </div>

              <div class="column">
                        <div class="box">
                              <b-icon  icon="filter" type="is-success"></b-icon>
                              <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.ccz"  
                              type="is-success">
                                  CCZ
                              </b-switch>
                              <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.ccz == true">
                                          <b-select  v-model="$store.state.datos_consulta_distribuida.ccz_valor" placeholder="CCZ01">
                                          <option value = "CCZ01">CCZ01</option>
                                          <option value = "CCZ02">CCZ02</option>
                                          <option value = "CCZ03">CCZ03</option>
                                          <option value = "CCZ04">CCZ04</option>
                                          <option value = "CCZ05">CCZ05</option>
                                          <option value = "CCZ06">CCZ06</option>
                                          <option value = "CCZ07">CCZ07</option>
                                          <option value = "CCZ08">CCZ08</option>
                                          <option value = "CCZ09">CCZ09</option>
                                          <option value = "CCZ10">CCZ10</option>
                                          <option value = "CCZ11">CCZ11</option>
                                          <option value = "CCZ12">CCZ12</option>
                                          <option value = "CCZ13">CCZ13</option>
                                          <option value = "CCZ14">CCZ14</option>
                                          <option value = "CCZ15">CCZ15</option>
                                          <option value = "CCZ16">CCZ16</option>
                                          <option value = "CCZ17">CCZ17</option>
                                          <option value = "CCZ18">CCZ18</option>
                                          <option value = "Otros">Sin determinar</option>
                                          </b-select>
                              </div>                 
                          </div>
              </div>

    </div>
             
    <div class="columns is-desktop m-1 p-1">
              <div class="column">
                          <div class="box">
                                  <b-icon  icon="filter" type="is-success"></b-icon>
                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.calle"  
                                        type="is-success">
                                            Calle
                                        </b-switch>
                                        <div v-if="$store.state.datos_consulta_distribuida.calle == true" class="box m-1 p-1 is-full">
                                              <b-autocomplete 
                                              rounded
                                              v-model="calle1"
                                              placeholder="18 de Julio"
                                              icon="magnify"
                                              :data="cargo_calles"
                                              @select="option => seleccione_calle1(option)"
                                              clearable
                                              >
                                              </b-autocomplete>         
                                        </div>                  
                                  </div>
              </div>

               <div class="column">
                                        <div class="box">
                                              <b-icon  icon="filter" type="is-success"></b-icon>
                                              <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.etapa"  
                                              type="is-success">
                                                  Etapa
                                              </b-switch>  
                                              <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.etapa == true">
                                              <b-select    v-model="$store.state.datos_consulta_distribuida.etapa_valor" placeholder="Sin asignar">
                                              <option value = "Solicitada">Solicitada</option>
                                              <option value = "Proyectada">Proyectada</option>
                                              <option value = "En construccion">En construccion</option>
                                              <option value = "Construida">Construida</option>
                                              <option value = "Ramal sin inst. sanitaria conectada">Ramal sin inst. sanitaria conectada</option>
                                              </b-select>
                                              </div>                
                                      </div>
              </div>

              <div class="column">
                                        <div class="box">
                                                <b-icon  icon="filter" type="is-success"></b-icon>
                                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.accion"  
                                                type="is-success">
                                                    Accion
                                                </b-switch>  
                                                <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.accion == true">
                                                  <b-select    v-model="$store.state.datos_consulta_distribuida.accion_valor" placeholder="Sin asignar">
                                                  <option value = "a Construir">a Construir</option>
                                                  <option value = "a Limpiar">a Limpiar</option>
                                                  <option value = "a Reparar">a Reparar</option>
                                                  <option value = "a Inspeccionar">a Inspeccionar</option>
                                                  <option value = "Sin asignar">Sin asignar</option>  
                                                  </b-select>
                                                </div>                
                                        </div>
              </div>

    </div>
              
    <div class="columns is-desktop m-1 p-1">
             <div class="column">
                        <div class="box">
                              <b-icon  icon="filter" type="is-success"></b-icon>
                              <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.servicios"  
                              type="is-success">
                                  Tarifas
                              </b-switch>
                              <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.servicios == true">
                                          <b-select    v-model="$store.state.datos_consulta_distribuida.servicios_valor" placeholder="Sin tarifa">
                                          <option value = "Sin tarifa">Sin tarifa</option>
                                          <option value = "Tarifa unica">Tarifa unica</option>
                                          <option value = "Alguna tarifa">Alguna tarifa</option>
                                          <option value = "Muchas tarifas">Muchas tarifas</option>
                                          </b-select>
                              </div>                 
                          </div>

          </div>
        
          <div class="column">
                     <div class="box">
                           <b-icon  icon="filter" type="is-success"></b-icon>
                           <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.tramite"  
                           type="is-success">
                               Tramite
                           </b-switch>
                           <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.tramite == true">
                                       <b-select    v-model="$store.state.datos_consulta_distribuida.tramite_valor" placeholder="Nueva Inicio">
                                       <option value = "Existente Inicio">Existente Inicio</option>
                                       <option value = "Existente Pend Inf Tecnico">Existente Pend Inf Tecnico</option>
                                       <option value = "Existente Observado">Existente Observado</option>
                                       <option value = "Existente Estudios y Proyectos">Existente Estudios y Proyectos</option>
                                       <option value = "Existente Pend Aprob Insp">Existente Pend Aprob Insp</option>
                                       <option value = "Existente Finalizada">Existente Finalizada</option>
                                       <option value = "Existente Otros">Existente Otros</option>
                                       <option value = "Nueva Inicio">Nueva Inicio</option>
                                       <option value = "Nueva Pend Inf Tecnico">Nueva Pend Inf Tecnico</option>
                                       <option value = "Nueva Observado">Nueva Observado</option>
                                       <option value = "Nueva Estudios y Proyectos">Nueva Estudios y Proyectos</option>
                                       <option value = "Nueva Pend Aprob Insp">Nueva Pend Aprob Insp</option>
                                       <option value = "Nueva en Construccion">Nueva en Construccion</option>
                                       <option value = "Nueva Finalizada">Nueva Finalizada</option>
                                       <option value = "Nueva Otros">Nueva Otros</option>
                                       <option value = "Grup de Conexiones Inicio">Grup de Conexiones Inicio</option>
                                       <option value = "Grup de Conexiones pendiente en uso">Grup de Conexiones pendiente en uso</option>
                                       <option value = "Grup de Conexiones pendiente sin uso">Grup de Conexiones pendiente sin uso</option>
                                       <option value = "Grup de Conexiones Fin">Grup de Conexiones Fin</option>
                                       <option value = "Grup de Conexiones Otros">Grup de Conexiones Otros</option>
                                       <option value = "Cert no saneam">Cert no saneam</option>
                                       <option value = "Otros">Otros</option>
                                       <option value = "Sin tramite">Sin tramite</option>
                                       </b-select>
                           </div>                 
                       </div>
          </div>

          <div class="column">
          <div class="box">
                <b-icon  icon="filter" type="is-success"></b-icon>
                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.certificado"  
                type="is-success">
                    Certificados
                </b-switch>
                <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.certificado == true">
                            <b-select    v-model="$store.state.datos_consulta_distribuida.certificado_valor" placeholder="Con certificado">
                            <option value = "Con certificado">Con certificado</option>
                            <option value = "Sin certificado">Sin certificado</option>
                            </b-select>
                </div>                 
            </div>
</div>

    </div>



    <div class="columns is-desktop m-1 p-1">
            <div class="column">
                            <div class="box">
                            <b-icon  icon="filter" type="is-success"></b-icon>
                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.fecha"  
                                  type="is-success">
                                      Fecha
                                  </b-switch>
                                  <div class="columns  p-1 m-1" v-if="$store.state.datos_consulta_distribuida.fecha == true">
                                            <b-field class="field column p-1 m-1" label="Fecha desde" >
                                            <b-datepicker v-model="$store.state.datos_consulta_distribuida.fecha1_valor"
                                              placeholder="Seleccionar fecha desde..."
                                              icon="calendar-today"
                                              trap-focus
                                              inline >
                                            </b-datepicker>
                                            </b-field> 
                                            <b-field class="field column  p-1 m-1" label="Fecha hasta" >
                                            <b-datepicker v-model="$store.state.datos_consulta_distribuida.fecha2_valor"
                                              placeholder="Seleccionar fecha hasta"
                                              icon="calendar-today"
                                              trap-focus
                                              inline >
                                            </b-datepicker>
                                            </b-field> 
                                  </div>                 
                              </div>
            </div>
            <div class="column">
            <div class="box">
                    <b-icon  icon="filter" type="is-success"></b-icon>
                    <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida.zona"  
                    type="is-success">
                        Zona
                    </b-switch>  
                    <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.zona == true">
                        <b-button  @click="definir_zona_filtro_distribuido()" type="is-success" icon-left="vector-polygon">
                          Definir zona
                        </b-button>
                    </div>  
                    <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida.zona == true">
                        <div v-if="$store.state.datos_consulta_distribuida.zona_valor != ''">Zona definida</div>
                        <div v-else >No hay zona definida</div>              
                    </div>                
            </div>
</div>



    </div>

    </section>

    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
        <b-button  @click="cargar_conexiones2()" type="is-danger" icon-left="cloud-upload">
          Cargar
        </b-button>
    </footer>
</div>
</form>
</b-modal>






<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE ESTILOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Estilos_Tematicos'" 
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Estilos</p>
    </header>
    <section class="modal-card-body">
    <div class="columns is-gapless m-1 p-1">
      <div class="column">
        <div class="box">
          <div class="columns is-desktop m-1 p-1">
                          <div class="column m-0 p-0">
                                <b-radio v-model="tipo_estilo" native-value="fuente" type="is-success" class="column is-is-half">Fuente Conexión</b-radio>
                          </div>
                        <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="etapa" type="is-success" class="column is-is-half">Etapa Conexión</b-radio>
                       </div>
                        <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="tramite" type="is-success" class="column is-is-half">Tramite Conexión</b-radio>
                       </div>
                       <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="sur" type="is-success" class="column is-is-half">Sur Conexión</b-radio>
                        </div>
                      <div class="column m-0 p-0">
                        <b-radio v-model="tipo_estilo" native-value="colector" type="is-success" class="column is-is-half">Tipo Colector</b-radio>
                      </div>
            </div>  
        </div>
      </div>
    </div>


    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
        <b-button  @click="aplicar_estilos()" type="is-danger" icon-left="cloud-upload">
          Aplicar
        </b-button>
    </footer>
</div>
</form>
</b-modal>








<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE MOVIMIENTOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Movimientos'" 
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Movimientos</p>
    </header>
    <section class="modal-card-body">
          <div class="box m-0 p-0"  v-for="(value, key) in $store.state.ultimos_movimientos">
                          <div class="box m-0 p-0">
                            <div class="columns m-1 p-1">
                              <div class="column is-1">
                                <b-tooltip label="Ir a mapa" multilined position="is-right" type="is-primary is-light">
                                  <b-button style="width:30px" @click.native="ver_movimiento(key)" type="is-danger" size="is-small" icon-right="map-marker"></b-button>
                                </b-tooltip>  
                              </div>    
                              <div class="column is-1 bg-white rounded m-2 p-2" >Id: {{value.id}}</div>
                              <div class="column  bg-white rounded m-2 p-2" style="width:80%">Descripcion: {{value.descripcion}}</div>
                            </div>
                          </div>
          </div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
    </footer>
</div>
</form>
</b-modal>



<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE MOVIMIENTOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Historial'" 
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
:can-cancel="false"
aria-role="dialog"
aria-modal>
<form action="">
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title" style="color:green">Historial</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="agregar_elemento_historial()" type="is-success" rounded  icon-left="view-grid-plus">
                        Agregar
                    </b-button>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="$store.state.modal_visible = ''" type="is-danger" icon-left="exit-run" rounded >
                        Cerrar
                    </b-button>
                </header>
                <section class="modal-card-body">
                      <div class="box m-0 p-0"  v-for="(value, key) in historial">
                            <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Eliminar elemento historial" multilined position="is-right" type="is-danger is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="borrar_elemento_historial(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" >{{value}}</div>
                                        </div>
                            </div>
                      </div>
                </section>
                <footer class="modal-card-foot">
                </footer>
            </div>
            </form>
</b-modal>



<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE PERDIDIOS --> 

<b-modal :active.sync="$store.state.modal_visible == 'Principal_Perdidos'" 
full-screen
has-modal-card
trap-focus
:destroy-on-hide="false"
:can-cancel="false"
aria-role="dialog"
aria-modal>
<form action="">
            <div class="modal-card" style="width: auto">
                <header class="modal-card-head">
                    <p class="modal-card-title" style="color:green">Eventos no asociados</p>
                    <b-button style="margin-left:1rem;width:220px" v-on:click="$store.state.modal_visible = 'Principal_Historial'" type="is-danger" icon-left="exit-run"  rounded >
                        Cerrar
                    </b-button>
                </header>
                <section class="modal-card-body">
                      <div class="box m-0 p-0"  v-for="(value, key) in perdidos">
                            <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Agregar elemento historial" multilined position="is-right" type="is-danger is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="agregar_elemento_historial2(key)" type="is-danger"  icon-right="plus-box"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" >{{value}}</div>
                                        </div>
                            </div>
                      </div>
                </section>
                <footer class="modal-card-foot">
                </footer>
            </div>
            </form>
</b-modal>




<!--3333333333333333333333333333333333333333333333333333333333333333333MODAL DE SELECCION TIPO DE MONITOREO -->   
<b-modal :active.sync="$store.state.modal_visible == 'Modal_Seleccion_Tipo_Monitoreo'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Seleccionar parámetro a monitorear</p>
    </header>
    <section class="modal-card-body">
    <div class="column col-xs middle-xs center-xs">	
    <div class="row center-xs middle-xs  m-2" >
        <b-button  v-on:click="monitoreo('Reclamo SUR reiterado')" type="is-success" rounded  icon-left="eye-check-outline"  style="width:250px">
          SUR reclamos reiterados
        </b-button>
    </div>
    <div class="row center-xs middle-xs m-2" >
    <b-button  v-on:click="limpiar_monitoreo()" type="is-danger" rounded  icon-left="broom"  style="width:200px">
        Limpiar
    </b-button>
    </div>
    </div>
    </section>
    <footer class="modal-card-foot">
        <b-button  @click="$store.state.modal_visible = ''" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
    </footer>
</div>
</form>
</b-modal>




<!--55555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555MODAL DE ENCUESTAS -->   
<b-modal :active.sync="$store.state.modal_visible == 'Menu_Principal_Encuestas'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"Imagen
aria-modal>
<form action="">
<div class="modal-card" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Conexión {{$store.state.conexion_seleccionada.id}}</p>
    </header>
    <section class="modal-card-body">

          <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 4">
          <b-button  @click="" type="is-dark" rounded  icon-left="certificate"  style="width:200px">
            SOMS
          </b-button>
          </div>



          <form enctype="multipart/form-data">
          <input accept="image/*" @change="guardo_esquema" capture="camera" id="esquema_conexion" name="esquema_conexion" ref="esquema_conexion" style="display:none" type="file"> 
          </form>
                  <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 4">
                  <b-button  @click="$refs.esquema_conexion.click()" type="is-link" rounded  icon-left="chart-sankey-variant"  style="width:200px">
                    Esquema Funcional
                  </b-button>
                  </div>

                  <div>
                  <template  :active.sync="esquemas_a_ver.length > 0">
                          <b-carousel  
                          :indicator= true
                          :indicator-background= false
                          :indicator-inside= true
                          indicator-mode="hover"
                          indicator-position="is-bottom"
                          :arrow= true
                          :repeat = false
                          :arrow-hover = false
                          icon-pack="mdi"
                          pause-text=""
                          icon-size="is-small">
                              <b-carousel-item v-for="(esquema, i) in esquemas_a_ver" :key="i">
                              <p style="color:grey;text-align:left" mt-1>{{esquema.fecha}}</p>
                                  <section>
                                      <div class="hero-body has-text-centered">
                                      <p class="image is-4by3">
                                      <img class="has-ratio img-fluid" :src="esquema.foto" alt="" v-on:click="$store.state.modal_visible = 'Esquemas_Pantalla_Completa'">                                             
                                      </p>
                                      </div>
                                  </section>
                              </b-carousel-item>
                          </b-carousel>
                  </template>
                </div> 



          <form enctype="multipart/form-data">
          <input accept="image/*" @change="guardo_acta" capture="camera" id="acta_conexion" name="acta_conexion" ref="acta_conexion" style="display:none" type="file"> 
          </form>
                  <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 4">
                  <b-button  @click="$refs.acta_conexion.click()" type="is-link" rounded  icon-left="certificate"  style="width:200px">
                    Acta de Visita
                  </b-button>
                  </div>



             
            <div>
            <template  :active.sync="actas_a_ver.length > 0">
           
                    <b-carousel  
                    :indicator= true
                    :indicator-background= false
                    :indicator-inside= true
                    indicator-mode="hover"
                    indicator-position="is-bottom"
                    :arrow= true
                    :repeat = false
                    :arrow-hover = false
                    icon-pack="mdi"
                    pause-text=""
                    icon-size="is-small">
                        <b-carousel-item v-for="(acta, i) in actas_a_ver" :key="i">
                        <p style="color:grey;text-align:left" mt-1>{{acta.fecha}}</p>
                            <section>
                                <div class="hero-body has-text-centered">
                                <p class="image is-4by3">
                                <img class="has-ratio img-fluid" :src="acta.foto" alt="" v-on:click="$store.state.modal_visible = 'Actas_Pantalla_Completa'">                                             
                                </p>
                                </div>
                            </section>
                        </b-carousel-item>
                    </b-carousel>
            </template>
          </div> 




    </section>
    <footer class="modal-card-foot">
        <b-button  @click="$store.state.modal_visible = 'Catastro_Conexion'" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
    </footer>
</div>
</form>
</b-modal>



      </div>
`,
  computed:{
 
    fotos_a_ver: function(){
          let resultado = [];
          let lista = store.state.conexion_seleccionada.fotos_con_fecha;
          if (lista !== undefined) {
              lista = lista.filter(item => item.foto.includes('CONEXION-'));
              if(lista != []){
              for(i=0;i<lista.length;i++)
              {
                resultado.push(lista[i]);
              }
          }
        }
        //console.log("Fotos a ver: " + JSON.stringify(resultado));
           return resultado;
    },
    esquemas_a_ver: function(){
      let resultado = [];
      let lista = store.state.conexion_seleccionada.fotos_con_fecha;
      if (lista !== undefined) {
      lista = lista.filter(item => item.foto.includes('ESQFUNCI-'));
      if(lista != []){
      for(i=0;i<lista.length;i++)
      {
        resultado.push(lista[i]);
      }
    }
    }
      //console.log("Esquemas funcionales: " + JSON.stringify(resultado));
      return resultado;
    },
    actas_a_ver: function(){
      let resultado = [];
      let lista = store.state.conexion_seleccionada.fotos_con_fecha;
      if (lista !== undefined) {
      lista = lista.filter(item => item.foto.includes('ACTAVISI-'));
      if(lista != []){
      for(i=0;i<lista.length;i++)
      {
        resultado.push(lista[i]);
      }
    }
    }
    //console.log("Actas de Visita: " + JSON.stringify(resultado));
      return resultado;
    },
    audios_a_escuchar: function(){    
      let resultado = [];
      let lista = store.state.conexion_seleccionada.audios_con_fecha;
      if (lista !== undefined) {
      if(lista != []){
      for(i=0;i<lista.length;i++)
      { 
         resultado.push(lista[i]);
      }
      }
    }
      return resultado; 
    },
    historial:{
    get:  function () {
      let resultado = [];
      try{
        let eventos = JSON.parse(store.state.conexion_seleccionada.historial);
            for (let i=0;i<eventos.length;i++){
              let historia = 'Evento: ' + eventos[i].descripcion +  ' en fecha: ' + eventos[i].fecha + ' - Operador: ' + eventos[i].usuario;
              resultado.push(historia);
            }
        }
      catch(e){
        resultado.push(store.state.conexion_seleccionada.historial);
        }
        return resultado; 
      },
      set:  function (valor) {
         store.state.conexion_seleccionada.historial = valor;
      },
    },
    oses:{
        get:  function () {
          let resultado = '';
          try{
            let eventos = JSON.parse(store.state.conexion_seleccionada.oses);
            let oses = ' '
            for (let i=0;i<eventos.length;i++){
                  oses = oses + eventos[i] + " ";
                  }
                resultado = oses; 
            }
          catch(e){
            resultado = store.state.conexion_seleccionada.oses;
            }
            return resultado; 
          },
          set:  function (valor) {
             store.state.conexion_seleccionada.oses = valor;
          },
          },
    medidores:{
            get:  function () {
              let resultado = '';
              try{
                let eventos = JSON.parse(store.state.conexion_seleccionada.medidores);
                let medidores = ' '
                for (let i=0;i<eventos.length;i++){
                      medidores = medidores + eventos[i] + " ";
                      }
                    resultado = medidores; 
                }
              catch(e){
                resultado = store.state.conexion_seleccionada.medidores;
                }
                return resultado; 
              },
              set:  function (valor) {
                 store.state.conexion_seleccionada.medidores = valor;
              },
         },          
    datos_padron:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.padron;
                    return resultado; 
                },
                set:  function (valor) {
                  if(isNaN(valor)) 
                    {
                      this.$buefy.toast.open('El valor ingresado en padrón no es válido. Corregir');
                    }
                  else
                    {
                      store.state.conexion_seleccionada.padron = valor;
                    }  
                  store.state.control_cambios = true;               
                  }
              },
    datos_colector:{
                get:  function () {
                  resultado = store.state.conexion_seleccionada.colector;
                  return resultado; 
                },
                set:  function (valor) {
                  if(isNaN(valor)) 
                  {
                    this.$buefy.toast.open('El valor ingresado de colector no es válido. Corregir');
                  }
                else
                  {
                    store.state.conexion_seleccionada.colector = valor;
                  }  
                store.state.control_cambios = true;  
                }             
              },
    datos_distmed:{
                get:  function () {
                  resultado = store.state.conexion_seleccionada.distmed;
                  return resultado; 
                },
                set:  function (valor) {
                  if(isNaN(valor)) 
                  {
                    this.$buefy.toast.open('El valor ingresado de distancia a medianera no es válido. Corregir');
                  }
                else
                  {
                    if (valor >= 0 && valor < 100)
                    {
                    store.state.conexion_seleccionada.distmed = valor;
                    }else
                    {
                      this.$buefy.toast.open('El valor ingresado de distancia a medianera no es válido. Corregir'); 
                    }
                  }  
                  store.state.control_cambios = true;
                },
              }, 
    datos_distmei:{
                get:  function () {
                  resultado = store.state.conexion_seleccionada.distmei;
                  return resultado; 
                },
                set:  function (valor) {
                  if(isNaN(valor)) 
                  {
                    this.$buefy.toast.open('El valor ingresado de distancia a medianera no es válido. Corregir');
                  }
                else
                  {
                    if (valor >= 0 && valor < 100)
                    {
                    store.state.conexion_seleccionada.distmei = valor;
                    }else
                    {
                      this.$buefy.toast.open('El valor ingresado de distancia a medianera no es válido. Corregir'); 
                    }
                  }  
                  store.state.control_cambios = true;
                },
              }, 
    datos_z_col:{
                get:  function () {
                  resultado = store.state.conexion_seleccionada.z_col;
                  return resultado; 
                },
                set:  function (valor) {
                  if(isNaN(valor)) 
                  {
                    this.$buefy.toast.open('El valor ingresado de zampeado no es válido. Corregir');
                  }
                else
                  {
                    if (valor > -50 && valor < 500)
                    {
                    store.state.conexion_seleccionada.z_col = valor;
                    }else
                    {
                      this.$buefy.toast.open('El valor ingresado de zampeado no es válido. Corregir'); 
                    }
                  }  
                  store.state.control_cambios = true;
                },
              },              
    datos_calle:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.calle;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.calle = valor;
                },
              }, 
    datos_via:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.via;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.via = valor;
                },
              },               
    datos_profundidad:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.profundidad;
                    return resultado; 
                },
                set:  function (valor) {
                          if(isNaN(valor)) 
                            {
                              this.$buefy.toast.open('El valor ingresado en profundidad no es válido');
                            }
                          else 
                            {
                                if(valor > 0 && valor < 50)
                                  {
                                    store.state.conexion_seleccionada.profundidad = valor;
                                    store.state.control_cambios = true;
                                  }
                                  else
                                  {
                                    this.$buefy.toast.open('El valor ingresado en profundidad no es válido');
                                  }
                            }
                },
              },    
    datos_estado:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.estado;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.estado = valor;
                },
              }, 
    datos_tipo:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.tipo;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.tipo = valor;
                },
              },   
    datos_accion:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.accion;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.accion = valor;
                },
              }, 
    datos_etapa:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.etapa;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.etapa = valor;
                },
              },                          
    datos_descripcion:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.descripcion;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  let cadena = valor;
                  cadena = cadena.replace(/Ã¡/g, "á");
                  cadena = cadena.replace(/Ã‰/g, "É");
                  cadena = cadena.replace(/Ã©/g, "é");
                  cadena = cadena.replace(/Ã/g, "Í");
                  cadena = cadena.replace(/Ã­/g,  "í");
                  cadena = cadena.replace(/Ã“/g, "Ó");
                  cadena = cadena.replace(/Ã³/g, "ó");
                  cadena = cadena.replace(/Ãš/g, "Ú");
                  cadena = cadena.replace(/Ãº/g, "ú");
                  cadena = cadena.replace(/Ã/g, "Ñ");
                  cadena = cadena.replace(/Ã±/g, "ñ");
                  cadena = cadena.replace(/Â°/g, "°");
                  store.state.conexion_seleccionada.descripcion = cadena;
                },
              }, 
    datos_seccion:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.seccion;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  let cadena = valor;
                  cadena = cadena.replace(/Ã/g, "Á");
                  cadena = cadena.replace(/Ã¡/g, "á");
                  cadena = cadena.replace(/Ã‰/g, "É");
                  cadena = cadena.replace(/Ã©/g, "é");
                  cadena = cadena.replace(/Ã/g, "Í");
                  cadena = cadena.replace(/Ã­/g,  "í");
                  cadena = cadena.replace(/Ã“/g, "Ó");
                  cadena = cadena.replace(/Ã³/g, "ó");
                  cadena = cadena.replace(/Ãš/g, "Ú");
                  cadena = cadena.replace(/Ãº/g, "ú");
                  cadena = cadena.replace(/Ã/g, "Ñ");
                  cadena = cadena.replace(/Ã±/g, "ñ");
                  cadena = cadena.replace(/Â°/g, "°");
                  store.state.conexion_seleccionada.seccion = cadena;
                },
              },    
    datos_ccz:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.ccz;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.ccz = valor;
                },
              }, 
    datos_empresa:{
                get:  function () {
                    resultado = store.state.conexion_seleccionada.empresa;
                    return resultado; 
                },
                set:  function (valor) {
                  store.state.control_cambios = true;
                  store.state.conexion_seleccionada.empresa = valor;
                },
              }, 
    datos_servicios:{
                get:  function () {
                  let servicios = [];
                  var padron_seleccionado = store.state.conexion_seleccionada.padron;
                  if(padron_seleccionado > 0 && store.state.datos_en_mapa !== undefined && store.state.datos_en_mapa != null && Array.isArray(store.state.datos_en_mapa[0]) == true)
                  {
                    store.state.control_cambios = true;
                    let servicios_ocupados = [];
                    let servicios_ocupados_conexion = [];
                    for(var i=0;i<store.state.datos_en_mapa[0].length;i++)
                    {  
                         if (store.state.datos_en_mapa[0][i]["padron"] == padron_seleccionado) 
                         {
                          let nuevo_elemento = store.state.datos_en_mapa[0][i].servicios;
                          if (nuevo_elemento != '')
                          {
                            let lista_servicios = JSON.parse(nuevo_elemento);
                            for(j=0;j<lista_servicios.length;j++)
                            {
                              (store.state.conexion_seleccionada.id == store.state.datos_en_mapa[0][i].id) ? servicios_ocupados_conexion.push(lista_servicios[j]) : servicios_ocupados.push(lista_servicios[j]);
                            }
                          }
                        } 
                    }
                  for(var i=0;i<store.state.datos_en_mapa[4].length;i++)
                    {  
                      if(store.state.datos_en_mapa[4][i]["padron"] == padron_seleccionado)
                        {
                          /*if (!servicios_ocupados.includes(store.state.datos_en_mapa[4][i]["servicio"])){*/
                          let nuevo_elemento = store.state.datos_en_mapa[4][i];
                          (servicios_ocupados_conexion.includes(store.state.datos_en_mapa[4][i]["servicio"])) ? nuevo_elemento.check = true : nuevo_elemento.check = false;
                          servicios.push(nuevo_elemento);
                          /*}*/
                        } 
                    }
                  }        
                  if(padron_seleccionado == 0 && store.state.datos_en_mapa !== undefined && store.state.datos_en_mapa != null && Array.isArray(store.state.datos_en_mapa[0]) == true)
                  {
                    store.state.control_cambios = true;
                    let servicios_ocupados = [];
                    let servicios_ocupados_conexion = [];
                    for(var i=0;i<store.state.datos_en_mapa[0].length;i++)
                    {  
                         if (store.state.datos_en_mapa[0][i]["padron"] == 0) 
                         {
                          let nuevo_elemento = store.state.datos_en_mapa[0][i].servicios;
                          if (nuevo_elemento != '')
                          {
                            let lista_servicios = JSON.parse(nuevo_elemento);
                            for(j=0;j<lista_servicios.length;j++)
                            {
                              (store.state.conexion_seleccionada.id == store.state.datos_en_mapa[0][i].id) ? servicios_ocupados_conexion.push(lista_servicios[j]) : servicios_ocupados.push(lista_servicios[j]);
                            }
                          }
                        } 
                    }
                  for(var i=0;i<store.state.datos_en_mapa[6].length;i++)
                    {  
                      if(store.state.datos_en_mapa[6][i]["padron"] == padron_seleccionado)
                        {
                          /*if (!servicios_ocupados.includes(store.state.datos_en_mapa[4][i]["servicio"])){*/
                          let nuevo_elemento = store.state.datos_en_mapa[6][i];
                          (servicios_ocupados_conexion.includes(store.state.datos_en_mapa[6][i]["servicio"])) ? nuevo_elemento.check = true : nuevo_elemento.check = false;
                          servicios.push(nuevo_elemento);
                          /*}*/
                        } 
                    }
                  }               
                  return servicios; 
                },
                set:  function (valor) {
                },
              },                                              
    tgms:{
            get:  function () {
              let resultado = '';
              try{
                let eventos = JSON.parse(store.state.conexion_seleccionada.tgms);
                let tgms = ' '
                for (let i=0;i<eventos.length;i++){
                      tgms = tgms + eventos[i] + " ";
                      }
                    resultado = tgms; 
                }
              catch{
                resultado = store.state.conexion_seleccionada.tgms;
                }
                return resultado; 
              },
              set:  function (valor) {
                 store.state.conexion_seleccionada.tgms = valor;
              },
              }, 
    puertas:{
                get:  function () {
                  let resultado = '';
                  try{
                    let eventos = JSON.parse(store.state.conexion_seleccionada.puertas);
                    let puertas = ' '
                    for (let i=0;i<eventos.length;i++){
                      puertas = puertas + eventos[i] + " ";
                          }
                        resultado = puertas; 
                    }
                  catch{
                    resultado = store.state.conexion_seleccionada.puertas;
                    }
                    return resultado; 
                  },
                  set:  function (valor) {
                     store.state.conexion_seleccionada.puertas = valor;
                  },
                  },              
    servicios:{
      get:  function () {
        let resultado = '';
        try{
          let eventos = JSON.parse(store.state.conexion_seleccionada.servicios);
          let servicio = ' '
          for (let i=0;i<eventos.length;i++){
                servicio = servicio + eventos[i] + " ";
                }
              resultado = servicio; 
          }
        catch{
          resultado = store.state.conexion_seleccionada.servicios;
          }
          return resultado; 
        },
        set:  function (valor) {
          //console.log("entra a servicios set" + valor  );
           store.state.conexion_seleccionada.servicios = valor;
        },
        },
    cargo_calles: function(){
             let data = store.state.calles;
               return data.filter((option) => {
                return option
                    .toString()
                    .toLowerCase()
                    .indexOf(this.calle1.toLowerCase()) >= 0
            })
        }
      },

watch:{
  },

  methods:
    { 
      mostrarDialog(titulo,mensaje) {
        titulo = titulo + '🚫';
        return new Promise((resolve, reject) => {
          try {
            this.$buefy.dialog.prompt({
              type: 'is-dark',
              title: titulo,
              message: mensaje,
              inputAttrs: {
                type: 'text',
                required: true,
                style: {
                  border: '1px solid black' // Establece el color del borde a negro
                }
              },
              confirmText: 'Aceptar',
              cancelText: 'Cancelar',
              onConfirm: (valor) => resolve(valor),
              onCancel: () => reject(new Error('El usuario canceló la operación.')),
            });
          } catch (error) {
            reject(error);
          }
        });
      },
      barra_superior_guardar_cambios_mapa: function(){
        app.chequeo_conexion();
        var objeto_conexion = '';
        var padre = this;
        var mapa = map;
        if (store.state.hayconexion == true) {
          if (this.tipo_cambio_mapa == 'cambio_existente')
          {
            for(let i=0;i<store.state.conexiones_en_mapa.length;i++)
              {
                if (store.state.conexiones_en_mapa[i].options.customData.id == store.state.conexion_seleccionada.id)
                {
                  objeto_conexion = store.state.conexiones_en_mapa[i];
                  let coordenadas = objeto_conexion.getLatLngs();
                  var lat1 = coordenadas[0].lat;
                  var lon1 = coordenadas[0].lng;
                  var lat2 = coordenadas[coordenadas.length - 1].lat;
                  var lon2 = coordenadas[coordenadas.length - 1].lng;
                  j = i;
                }
              }  
                  let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                  let historia_array = {"descripcion":"SE MODIFICO UBICACION","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  let sql = "UPDATE conexiones SET SHAPE = GEOMFROMTEXT('LINESTRING(";
                  sql = sql + lon1 + " " + lat1 + "," + lon2 + " " + lat2 + ")'), historial = '" + historia + "' WHERE id = " + store.state.conexion_seleccionada.id; 
                  var fd = new FormData();
                  fd.append("sql",sql);
                  fd.append("historia","SE MODIFICO UBICACION");
                  fd.append("id",store.state.conexion_seleccionada.id);
                  fd.append("tipo","MODIFICA_GEO_CONEXION");                  
                  fd.append("usuario",store.state.datos_login.usuario);
                  var getUrl = window.location;
                  var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                  var phpfile = baseUrl + '/php/guardar_sql.php';
                  var xhr = new XMLHttpRequest();	
                  xhr.open('POST',phpfile,true);
                  xhr.onload = function() {
                    objeto_conexion.options.customData.lat1 = lat1;
                    objeto_conexion.options.customData.lon1 = lon1;
                    objeto_conexion.options.customData.lat2 = lat2;
                    objeto_conexion.options.customData.lon2 = lon2;
                    store.state.conexion_seleccionada.lat1 = lat1;
                    store.state.conexion_seleccionada.lon1 = lon1;
                    store.state.conexion_seleccionada.lat2 = lat2;
                    store.state.conexion_seleccionada.lon2 = lon2;
                    store.state.conexion_seleccionada.historial = historia;
                    padre.$buefy.toast.open('Se actualizaron los datos correctamente');
                    objeto_conexion.disableEdit()
                    padre.cambios_mapa = false;
                    store.state.modal_visible = 'Modificar_Conexion'; 
                  };
                  xhr.send(fd);
            }      
            if (this.tipo_cambio_mapa == 'nueva_conexion')
            {
              let seguir = false;
              if(store.state.nueva_conexion !== '')
              {
                if (store.state.nueva_conexion.getLatLngs().length == 2)
                {seguir = true;}
              }
              if (!seguir){
                this.$buefy.toast.open('Geometria de conexion sin completar');
              }
              else
              {
                    var ccz = '';
                    var accion = '';
                    objeto_conexion = store.state.nueva_conexion;
                    var coordenadas = objeto_conexion.getLatLngs();
                    let puntocamara1 = L.point(coordenadas[0].lat,coordenadas[0].lng);
                    let puntoencolector = L.point(coordenadas[coordenadas.length - 1].lat,coordenadas[coordenadas.length - 1].lng);
                    let menor_distancia = 99999;
                    for (var s = 0;s < store.state.conexiones_en_mapa.length; s++)
                    { 
                      let coordenadas5 = store.state.conexiones_en_mapa[s].getLatLngs();
                      let p1 = L.point(coordenadas5[0].lat,coordenadas5[0].lng);
                      let p2 = L.point(coordenadas5[coordenadas5.length - 1].lat,coordenadas5[coordenadas5.length - 1].lng);
                      let distancia_variable = L.LineUtil.pointToSegmentDistance(puntoencolector,p1,p2);
                      if (distancia_variable < menor_distancia)
                        {
                          ccz = store.state.conexiones_en_mapa[s].options.customData.ccz;
                          menor_distancia = distancia_variable;
                        }
                    }
                    menor_distancia = 99999;
                    let elemred = 0;
                    let tipocol = '';
                    var zres = 0;
                    for (var s = 0;s < store.state.colectores_en_mapa.length; s++)
                    { 
                      let coordenadas2 = store.state.colectores_en_mapa[s].getLatLngs();
                      let puntocol1 = L.point(coordenadas2[0].lat,coordenadas2[0].lng);
                      let puntocol2 = L.point(coordenadas2[coordenadas2.length - 1].lat,coordenadas2[coordenadas2.length - 1].lng);
                      let distancia_variable = L.LineUtil.pointToSegmentDistance(puntoencolector,puntocol1,puntocol2);
                      if (distancia_variable < menor_distancia)
                        {
                          elemred = store.state.colectores_en_mapa[s].options.customData.elemred;
                          tipocol =  store.state.colectores_en_mapa[s].options.customData.tipotra;                         
                          let largototal = 0;
                          let previousPoint = false;
                          coordenadas2.forEach(function (latLng) {
                            if (previousPoint) {
                              largototal = largototal + previousPoint.distanceTo(latLng);
                              puntoabajo = latLng;
                            }
                            previousPoint = latLng;
                          });
                          let zarriba = store.state.colectores_en_mapa[s].options.customData.zarriba;
                          let zabajo = store.state.colectores_en_mapa[s].options.customData.zabajo;
                          let pencolector = L.latLng(coordenadas[coordenadas.length - 1].lat,coordenadas[coordenadas.length - 1].lng);
                          let distancia_abajo = pencolector.distanceTo(puntoabajo);
                          if (largototal > 0 && zarriba > 0 && zabajo > 0 && zarriba > zabajo && distancia_abajo > 0 && distancia_abajo < largototal)
                          {
                            let fac1 = distancia_abajo / largototal;
                            let fac2 = zarriba - zabajo;
                            zres = Number(zabajo) + Number(fac2 * fac1);
                            zres = String(zres);
                          }
                          menor_distancia = distancia_variable;
                        }
                    }
                    if (tipocol == 'PL')
                    {
                      this.$buefy.toast.open({duration: 5000, message: 'Cuidado!! El colector seleccionado es de tipo Pluvial'});
                    }
                    menor_distancia = 99999;
                    let via = 0;
                    let nombre_calle = '';
                    for (var s = 0;s < store.state.calles_en_mapa.length; s++)
                    { 
                      let coordenadas2 = store.state.calles_en_mapa[s].getLatLngs();
                      let puntocalle1 = L.point(coordenadas2[0].lat,coordenadas2[0].lng);
                      let puntocalle2 = L.point(coordenadas2[coordenadas2.length - 1].lat,coordenadas2[coordenadas2.length - 1].lng);
                      let distancia_variable = L.LineUtil.pointToSegmentDistance(puntoencolector,puntocalle1,puntocalle2);
                      if (distancia_variable < menor_distancia)
                        {
                          via = store.state.calles_en_mapa[s].options.customData.cod_nombre;
                          nombre_calle = store.state.calles_en_mapa[s].options.customData.nom_calle;
                          menor_distancia = distancia_variable;
                        }
                    }
                    menor_distancia = 99999;
                    let padron = 0;
                    for (var s = 0;s < store.state.padrones_en_mapa.length; s++)
                    {
                      let poly = store.state.padrones_en_mapa[s];
                      let x = coordenadas[0].lat;
                      let y = coordenadas[0].lng;
                      var inside = false;
                      for (var ii=0;ii<poly.getLatLngs().length;ii++){
                        var polyPoints = poly.getLatLngs()[ii];
                        for (var i = 0, j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
                            var xi = polyPoints[i].lat, yi = polyPoints[i].lng;
                            var xj = polyPoints[j].lat, yj = polyPoints[j].lng; 
                            var intersect = ((yi > y) != (yj > y))
                                && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
                            if (intersect) inside = !inside;
                        }
                    }
                      if (inside)
                      {
                        padron = store.state.padrones_en_mapa[s].options.customData.padron;
                        s = 999999;
                      }
                    }
                    let seguir2 = true;
                    if (padron > 0)
                    {
                      for (var i=0;i < store.state.conexiones_inactivas_en_mapa.length;i++) 
                      {
                        if (store.state.conexiones_inactivas_en_mapa[i].padron == padron)
                        {
                          seguir2 = false;
                        }
                      }
                    }
                    if (seguir2 == false)
                    {
                        this.$buefy.dialog.confirm({
                          message: '😕Existe conexión eliminada previamente en el padrón de la nueva conexión. Quiere continuar?',
                          type: 'is-success',
                          onConfirm: () => {
                                                    let historias = [];
                                                    let fechaactual = app.obtengo_fecha(new Date());
                                                    let historia_array = {"descripcion":"NUEVA CONEXION POR CATASTRO","fecha": fechaactual ,"usuario": store.state.datos_login.usuario};
                                                    historias.push(historia_array);
                                                    var historia = JSON.stringify(historias);
                                                    let sql1 = "INSERT INTO conexiones (SHAPE, id, padron, colector, profundidad, tipo, seccion, alta_fuent, alta_descr, alta_fecha, sur, etapa, ccz, accion,";
                                                    sql1 = sql1 + "activo, z_col, via, id_tramite, id_con_ant, calle, tramite, empresa, oses, medidores, servicios, tgms, audios, fotos, puertas, historial, descripcion) VALUES (";
                                                    sql1 = sql1 + "GEOMFROMTEXT('LINESTRING(" + coordenadas[0].lng + " " + coordenadas[0].lat + "," + coordenadas[coordenadas.length - 1].lng + " " + coordenadas[coordenadas.length - 1].lat + ")'),";
                                                    let sql2 = "," + padron + "," + elemred + ",0.0,'Circular','Sin determinar','INGRESO CON APLICACION DE CATASTRO','Se ingresa conexion con aplicativo de catastro','";
                                                    sql2 = sql2 + fechaactual + "','Sin reclamos','Solicitada','" + ccz + "','Sin asignar',1," + zres + "," + via + ",0,0,'" + nombre_calle;
                                                    sql2 = sql2 + "','Sin tramite','IM','','','','','','','','" + historia  + "','')";   
                                                    var fd = new FormData();
                                                    fd.append("sql1",sql1);
                                                    fd.append("sql2",sql2);
                                                    fd.append("historia",JSON.stringify(historia_array));
                                                    fd.append("usuario",store.state.datos_login.usuario);
                                                    var getUrl = window.location;
                                                    var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                                    var phpfile = baseUrl + '/php/nueva_conexion.php';
                                                    var xhr = new XMLHttpRequest();	
                                                    xhr.open('POST',phpfile,true);
                                                    xhr.onload = function() {
                                                      store.state.nueva_conexion.disableEdit();
                                                      store.state.nueva_conexion.remove(mapa);
                                                      padre.$buefy.toast.open('Se agrego nueva conexion. Cargando datos actualizados....');
                                                      store.state.nueva_conexion = '';
                                                      padre.cargar_conexiones(false,'nueva',0,0);
                                                      store.state.modal_visible = ''; 
                                                      };
                                                    xhr.send(fd);
                                                    store.state.modo_seleccion = 'todo';
                                            },
                                onCancel: () => {
                                  map.editTools.stopDrawing();
                                  if(store.state.nueva_conexion !== ''){
                                  store.state.nueva_conexion.disableEdit();
                                  store.state.nueva_conexion.remove(map);
                                  store.state.nueva_conexion = '';
                                  }
                                  this.cambios_mapa = false;
                                  store.state.modal_visible = ''; 
                                  store.state.modo_seleccion = 'todo';
                                }
                        });
                    }
                    else
                    {
                    let historias = [];
                    let fechaactual = app.obtengo_fecha(new Date());
                    let historia_array = {"descripcion":"NUEVA CONEXION POR CATASTRO","fecha": fechaactual ,"usuario": store.state.datos_login.usuario};
                    historias.push(historia_array);
                    var historia = JSON.stringify(historias);
                    let sql1 = "INSERT INTO conexiones (SHAPE, id, padron, colector, profundidad, tipo, seccion, alta_fuent, alta_descr, alta_fecha, sur, etapa, ccz, accion,";
                    sql1 = sql1 + "activo, z_col, via, id_tramite, id_con_ant, calle, tramite, empresa, oses, medidores, servicios, tgms, audios, fotos, puertas, historial, descripcion) VALUES (";
                    sql1 = sql1 + "GEOMFROMTEXT('LINESTRING(" + coordenadas[0].lng + " " + coordenadas[0].lat + "," + coordenadas[coordenadas.length - 1].lng + " " + coordenadas[coordenadas.length - 1].lat + ")'),";
                    let sql2 = "," + padron + "," + elemred + ",0.0,'Circular','Sin determinar','INGRESO CON APLICACION DE CATASTRO','Se ingresa conexion con aplicativo de catastro','";
                    sql2 = sql2 + fechaactual + "','Sin reclamos','Solicitada','" + ccz + "','Sin asignar',1," + zres + "," + via + ",0,0,'" + nombre_calle;
                    sql2 = sql2 + "','Sin tramite','IM','','','','','','','','" + historia  + "','')";   
                    var fd = new FormData();
                    fd.append("sql1",sql1);
                    fd.append("sql2",sql2);
                    fd.append("historia",JSON.stringify(historia_array));
                    fd.append("usuario",store.state.datos_login.usuario);
                    var getUrl = window.location;
                    var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                    var phpfile = baseUrl + '/php/nueva_conexion.php';
                    var xhr = new XMLHttpRequest();	
                    xhr.open('POST',phpfile,true);
                    xhr.onload = function() {
                      store.state.nueva_conexion.disableEdit();
                      store.state.nueva_conexion.remove(mapa);
                      padre.$buefy.toast.open('Se agrego nueva conexion. Cargando datos actualizados....');
                      store.state.nueva_conexion = '';
                      padre.cargar_conexiones(false,'nueva',0,0);
                      store.state.modal_visible = ''; 
                      };
                    xhr.send(fd);
                    store.state.modo_seleccion = 'todo';
                    }
            }
        }
      }
      else
      {
        this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente'); 
      }
      },  
      barra_superior_descartar_cambios_mapa: function(){
        if (this.tipo_cambio_mapa == 'cambio_existente')
        {
                                        this.$buefy.dialog.confirm({
                                                            message: 'Seguro de descartar cambios?',
                                                            type: 'is-success',
                                                            onConfirm: () => {
                                        let objeto_conexion = false;
                                        let lat1 = store.state.conexion_seleccionada.lat1;
                                        let lon1 = store.state.conexion_seleccionada.lon1;
                                        let lat2 = store.state.conexion_seleccionada.lat2;
                                        let lon2 = store.state.conexion_seleccionada.lon2;
                                        let latlongs = [[lat1,lon1],[lat2,lon2]];
                                        let latlngini = [lat1,lon1];
                                        for(let i=0;i<store.state.conexiones_en_mapa.length;i++)
                                        {
                                            if (store.state.conexiones_en_mapa[i].options.customData.id == store.state.conexion_seleccionada.id)
                                            {
                                              objeto_conexion = store.state.conexiones_en_mapa[i];
                                              objeto_conexion.disableEdit()
                                              objeto_conexion.setLatLngs(latlongs);
                                            }
                                        }
                                        for(let j=0;j<store.state.camaras1_en_mapa.length;j++)
                                        {
                                          if(store.state.camaras1_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                            {
                                              store.state.camaras1_en_mapa[j].setLatLng(latlngini);
                                            } 
                                        }
                                        this.cambios_mapa = false;
                                        store.state.modal_visible = 'Modificar_Conexion'; 
                                      }
                                      });
        }
        if (this.tipo_cambio_mapa == 'nueva_conexion')
        {
        map.editTools.stopDrawing();
        if(store.state.nueva_conexion !== ''){
        store.state.nueva_conexion.disableEdit();
        store.state.nueva_conexion.remove(map);
        store.state.nueva_conexion = '';
        }
        this.cambios_mapa = false;
        store.state.modal_visible = ''; 
        store.state.modo_seleccion = 'todo';
        }
      },
      cerrar_reportes: function(){
        app.limpio_mapa(map,0); 
        store.state.descripcion_consulta_distribuida = '';
        store.state.modo_conexiones = 0;
      },   
      reporte_kml: function(){
        var mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Generando kml......'});
        const cargando_algo =  this.$buefy.loading.open({containter: null});
      app.genero_kml().then(v=>{
        mensaje_espera.close();
        cargando_algo.close();
        });
      },
      reporte_excel: function(){
        var mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Generando excel......'});
        const cargando_algo =  this.$buefy.loading.open({containter: null});
        app.genero_reporte_excel().then(v=>{
        mensaje_espera.close();
        cargando_algo.close();
        });
      },   
      reporte_shapefile(){
        var padre = this;
          app.chequeo_conexion();
          if (store.state.hayconexion == true) {
                    if (store.state.conexiones_en_mapa.length > 0)
                    {
                            var mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Generando shapefile.....'});
                            const cargando_algo =  this.$buefy.loading.open({containter: null});
                            var datos = [];
                            for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
                            {  
                                  datos.push(store.state.conexiones_en_mapa[i].options.customData.id);
                            }
                            var fd = new FormData();
                            fd.append("datos",JSON.stringify(datos));
                            var getUrl = window.location;
                            var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                            var phpfile = baseUrl + '/php/bajar_shape_conexiones.php';
                            var xhr = new XMLHttpRequest();	
                            xhr.open('POST',phpfile,true);
                            xhr.onload = function() {
                              cargando_algo.close();
                              mensaje_espera.close();
                              data = this.response;
                              if (data != '')
                              { 
                                 var fecha_nom_archivo = "Conex_Shp" + app.obtengo_fecha2(new Date()) + ".zip";
                                 app.bajar_archivo('https://' + data, fecha_nom_archivo);
                              }

                              };
                            xhr.send(fd);
                    }
                    else
                    {
                      this.$buefy.toast.open('No hay conexiones para reportar'); 
                    }
            }
            else
            {
              this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente'); 
            }


      },
      barra_superior_aplico_seleccion(){
        store.state.control_cambios = true;
        if(store.state.modo_seleccion == 'padron')
        {
          this.datos_padron = store.state.padron_seleccionado;
        }
        if(store.state.modo_seleccion == 'colector')
        {
          for(var i=0;i<store.state.colectores_en_mapa.length;i++)
          {
            if (store.state.colectores_en_mapa[i].options.customData.elemred == store.state.colector_seleccionado)  
            {
              if (store.state.colectores_en_mapa[i].options.customData.tipotra == 'PL')
              {
                this.$buefy.toast.open({duration: 5000, message: 'Cuidado!! El colector seleccionado es de tipo Pluvial'});
              }
            }
          }  
          this.datos_colector = store.state.colector_seleccionado;
        }
        if(store.state.modo_seleccion == 'calle')
        {
          this.datos_calle = store.state.calle_seleccionada;
          this.datos_via = store.state.via_seleccionada;
        }
        store.state.modo_seleccion = 'todo'
        store.state.modal_visible = 'Modal_modificacion_datos'; 
        this.modo_seleccion = false;
      },
      barra_superior_descarto_seleccion(){
        store.state.modo_seleccion = 'todo'
        store.state.modal_visible = 'Modal_modificacion_datos'; 
        this.modo_seleccion = false;
      },
      ver_datos_y_media(){
        this.ver_datos = true;
        this.ver_detalle = false;
        this.ver_historico =  true;
        var padre = this;
        store.state.conexion_seleccionada.fotos_con_fecha = [];  
        if (store.state.conexion_seleccionada.fotos != '')
        {
          let array_fotos = JSON.parse(store.state.conexion_seleccionada.fotos);
        var fotos_en_servidor = obtengo_fotos(array_fotos);
        fotos_en_servidor.then(function(valor){
          for (i=0;i<valor.length;i++){
            store.state.conexion_seleccionada.fotos_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico =  false;
        });
        }
        store.state.conexion_seleccionada.audios_con_fecha = [];  
        if (store.state.conexion_seleccionada.audios != '')
        {
        let array_audios = JSON.parse(store.state.conexion_seleccionada.audios);
        var audios_en_servidor = obtengo_audios(array_audios);
        audios_en_servidor.then(function(valor){
          for (i=0;i<valor.length;i++){
            store.state.conexion_seleccionada.audios_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico =  false;
        });
        }
    store.state.modal_visible = 'Ver_Conexion'
      },
      modifico_servicio(e){
        store.state.control_cambios = true; 
        var servicios = [];
         (store.state.conexion_seleccionada.servicios != '') ? servicios = JSON.parse(store.state.conexion_seleccionada.servicios) : servicios = [];
        var tgms = [];
         (store.state.conexion_seleccionada.tgms != '') ? tgms = JSON.parse(store.state.conexion_seleccionada.tgms) : tgms = [];
         var oses = [];
         (store.state.conexion_seleccionada.oses != '') ? oses = JSON.parse(store.state.conexion_seleccionada.oses) : oses = [];
         var medidores = [];
         (store.state.conexion_seleccionada.medidores != '') ? medidores = JSON.parse(store.state.conexion_seleccionada.medidores) : medidores = [];
         var puertas = [];
         (store.state.conexion_seleccionada.puertas != '') ? puertas = JSON.parse(store.state.conexion_seleccionada.puertas) : puertas = [];
         var nuevo_servicio = [];
         var nuevo_tgms = [];
         var nuevo_oses = [];
         var nuevo_medidores = [];
         var nuevo_puertas = [];
         var tgms_servicio = this.datos_servicios[e].tgms;
         var oses_servicio = this.datos_servicios[e].oses;
         var medidores_servicio = this.datos_servicios[e].medidores;
         var puertas_servicio = this.datos_servicios[e].puertas;
         tgms_servicio = tgms_servicio.split(";");
         oses_servicio = oses_servicio.split(";");
         medidores_servicio = medidores_servicio.split(";");
         puertas_servicio = puertas_servicio.split(";");
         if (this.datos_servicios[e].check)
         {
              for (i=0;i<servicios.length;i++)
              {if (servicios[i] != this.datos_servicios[e].servicio) {nuevo_servicio.push(servicios[i])}}

              for (i=0;i<tgms.length;i++)
              {if (!tgms_servicio.includes(tgms[i])) {nuevo_tgms.push(tgms[i])}}

              for (i=0;i<oses.length;i++)
              {if (!oses_servicio.includes(oses[i])) {nuevo_oses.push(oses[i])}}

              for (i=0;i<medidores.length;i++)
              {if (!medidores_servicio.includes(medidores[i])) {nuevo_medidores.push(medidores[i])}}
              
              for (i=0;i<puertas.length;i++)
              {if (!puertas_servicio.includes(puertas[i])) {nuevo_puertas.push(puertas[i])}}
         }
         else
         {
            nuevo_servicio = servicios;
            nuevo_servicio.push(this.datos_servicios[e].servicio);
             nuevo_tgms = tgms;
             for (i=0;i<tgms_servicio.length;i++)
             {if (!tgms.includes(tgms_servicio[i])) {nuevo_tgms.push(tgms_servicio[i])}}
             nuevo_oses = oses;
             for (i=0;i<oses_servicio.length;i++)
             {if (!oses.includes(oses_servicio[i])) {nuevo_oses.push(oses_servicio[i])}}
             nuevo_medidores = medidores;
             for (i=0;i<medidores_servicio.length;i++)
             {if (!medidores.includes(medidores_servicio[i])) {nuevo_medidores.push(medidores_servicio[i])}}
             nuevo_puertas = puertas;
             for (i=0;i<puertas_servicio.length;i++)
             {if (!puertas.includes(puertas_servicio[i])) {nuevo_puertas.push(puertas_servicio[i])}}
         }
         
         store.state.conexion_seleccionada.servicios = JSON.stringify(nuevo_servicio);
         store.state.conexion_seleccionada.tgms = JSON.stringify(nuevo_tgms);
         store.state.conexion_seleccionada.oses = JSON.stringify(nuevo_oses);
         store.state.conexion_seleccionada.medidores = JSON.stringify(nuevo_medidores);
         store.state.conexion_seleccionada.puertas = JSON.stringify(nuevo_puertas); 
      },
      seleccionar_padron(){
        store.state.modo_seleccion = 'padron'
        store.state.control_cambios = true;
        this.modo_seleccion = true;
        store.state.modal_visible = ''; 
      },
      padron_sin_conexion(){
          let padre = this;
          let padron = store.state.padron_seleccionado;
          let tiene_conexion = store.state.conexiones_en_mapa.some(objeto => objeto.options.customData.padron === padron);
          if (tiene_conexion == true)
          {
            this.$buefy.toast.open('El padrón tiene conexiones, no puede ser identificado como no conectado');
          }
          else
          {
                    let descripcion = '';
                    let resultado = false;
                    if (store.state.padrones_sin_conexion !== undefined && store.state.padrones_sin_conexion !== null) {
                      resultado = store.state.padrones_sin_conexion.some(objeto => objeto.padron === padron);
                    }
                    if(resultado == false)
                    {
                      this.mostrarDialog("No conectado", "Agregar comentario: ").then(
                        function(value){
                          descripcion = value;
                          let sql = "INSERT INTO padrones_sin_conexion (padron,lat,lon,descripcion) VALUES (";
                          sql += padron + "," + "(SELECT latc FROM padrones WHERE padron = " + padron + " LIMIT 1),(SELECT lonc FROM padrones WHERE padron = " + padron + " LIMIT 1)";
                          sql += ",'" + descripcion + "')";
                          let sqlres = "SELECT padron, lat, lon, descripcion FROM padrones_sin_conexion WHERE padron = " + padron;
                          var fd = new FormData();
                          fd.append("sql",sql);
                          fd.append("sqlres",sqlres);
                          fd.append("historia","SE AGREGA PADRON NO CONECTADO: " + padron);
                          fd.append("id","0");
                          fd.append("tipo","AGREGA_PADRON_NO_CONECTADO");
                          fd.append("usuario",store.state.datos_login.usuario);
                          var getUrl = window.location;
                          var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                          var phpfile = baseUrl + '/php/guardar_sql.php';
                          var xhr = new XMLHttpRequest();	
                          xhr.open('POST',phpfile,true);
                          xhr.onload = function() {
                              padre.$buefy.toast.open({duration: 2000, message: 'Se agregó padrón no conectado exitosamente'});
                              var data = JSON.parse(this.response);
                              store.state.padrones_sin_conexion.push(data[0]);
                              for (var s = 0;s < store.state.padrones_en_mapa.length; s++)
                              { 
                                if(store.state.padrones_en_mapa[s].options.customData.padron == padron)
                                {
                                  store.state.padrones_en_mapa[s].setStyle({color:'black'});
                                  let nuevotooltip = "<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>" + padron + " - 🚫" + descripcion + "</b></div>"
                                  store.state.padrones_en_mapa[s].setTooltipContent(nuevotooltip);
                                }
                              } 
                          }        
                          xhr.send(fd);
                        },
                        function(error){
                          padre.$buefy.toast.open({duration: 2000, message: 'No se ingresa padrón porque no se ingresó descripción'});
                          descripcion = '';
                        }
                      );
                    }
                    else
                    {
                      padre.$buefy.dialog.confirm({
                        message: 'Eliminar padrón de lista de no conectados?',
                        onConfirm: () => {
                          let sql = "DELETE FROM padrones_sin_conexion WHERE padron = " + padron + " LIMIT 1";
                          var fd = new FormData();
                          fd.append("sql",sql);
                          fd.append("historia","SE ELIMINA PADRON NO CONECTADO: " + padron);
                          fd.append("id","0");
                          fd.append("tipo","ELIMINA_PADRON_NO_CONECTADO");
                          fd.append("usuario",store.state.datos_login.usuario);
                          var getUrl = window.location;
                          var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                          var phpfile = baseUrl + '/php/guardar_sql.php';
                          var xhr = new XMLHttpRequest();	
                          xhr.open('POST',phpfile,true);
                          xhr.onload = function() {
                              padre.$buefy.toast.open({duration: 2000, message: 'Se modificó padrón no conectado exitosamente'});
                              store.state.padrones_sin_conexion = store.state.padrones_sin_conexion.filter(objeto => objeto.padron !== padron);
                              for (var s = 0;s < store.state.padrones_en_mapa.length; s++)
                              { 
                                if(store.state.padrones_en_mapa[s].options.customData.padron == padron)
                                {
                                  let color_padron = 'cyan';												
                                  if (store.state.padrones_en_mapa[s].options.customData.saneado != 1){color_padron = 'yellow';};
                                  store.state.padrones_en_mapa[s].setStyle({color: color_padron});
                                  let nuevotooltip = "<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>" + padron + "</b></div>"
                                  store.state.padrones_en_mapa[s].setTooltipContent(nuevotooltip);
                                }
                              } 
                          }        
                          xhr.send(fd);
                        }
                      });
                    }
            }//CIERRO EL IF DE SI TIENE CONEXIONES
      },
      seleccionar_colector(){
        store.state.modo_seleccion = 'colector'
        store.state.control_cambios = true;
        this.modo_seleccion = true;
        store.state.modal_visible = ''; 
      },
      seleccionar_calle(){
        store.state.modo_seleccion = 'calle'
        store.state.control_cambios = true;
        this.modo_seleccion = true;
        store.state.modal_visible = ''; 
      },
      calcular_z_col(e){
        let colector = store.state.colector_seleccionado;
        let puntoabajo = false;
        let distancia_abajo = 0;
        (colector == 0) ? colector = store.state.conexion_seleccionada.colector : colector;
        for(i=0;i<store.state.colectores_en_mapa.length;i++)
        {
          if (store.state.colectores_en_mapa[i].options.customData.elemred == colector)
          {
            let listapuntos = store.state.colectores_en_mapa[i].getLatLngs();
            let largototal = 0;
            let previousPoint = false;
            listapuntos.forEach(function (latLng) {
              if (previousPoint) {
                largototal = largototal + previousPoint.distanceTo(latLng);
                puntoabajo = latLng;
              }
              previousPoint = latLng;
            });
            let zarriba = parseFloat(store.state.colectores_en_mapa[i].options.customData.zarriba);
            let zabajo = parseFloat(store.state.colectores_en_mapa[i].options.customData.zabajo);
            let puntoencolector = L.latLng(store.state.conexion_seleccionada.lat2,store.state.conexion_seleccionada.lon2);
            distancia_abajo = puntoencolector.distanceTo(puntoabajo);
            if (largototal > 0 && zarriba > 0 && zabajo > 0 && zarriba > zabajo && distancia_abajo > 0 && distancia_abajo < largototal)
            {
              let zres = 0;
              let fac1 = distancia_abajo / largototal;
              let fac2 = zarriba - zabajo;
              zres = Number(zabajo) + Number(fac2 * fac1);
              zres = String(zres);
              store.state.conexion_seleccionada.z_col = zres.substring(0,5);
              store.state.control_cambios = true;
            }
            else
            {
              this.$buefy.toast.open('No es posible calcular el zampeado del colector en conexión');
            }
          }
        }
      },
   async  guardo_datos_conexion(){
        var padre = this;
        if (store.state.control_cambios)
        {
          let seguir = true;
          if (store.state.conexion_seleccionada.profundidad <= 0 || store.state.conexion_seleccionada.seccion <= 0) {
            seguir = await new Promise((resolve) => {
                padre.$buefy.dialog.confirm({
                    message: `
                    <div style="text-align: center; color: #6d227c;">
                        <span class="emoji_mediano">⚠️</span><br>
                        Falta ingresar profundidad o sección.<br>    
                        Continuar de todos modos?
                    </div>
                     `,
                    dangerouslyUseHTMLString: true, // Habilita el uso de HTML
                    onCancel: () => {
                        store.state.modal_visible = 'Modal_modificacion_datos'; // Solo si decides cancelar
                        resolve(false);
                    },
                    onConfirm: () => {
                        resolve(true);
                    }
                });
            });
          }
          if (seguir === true)
          {
          app.chequeo_conexion();
          if (store.state.hayconexion == true) {
                    let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                    let historia_array = {"descripcion":"SE MODIFICARON LOS DATOS","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                    historias.push(historia_array);
                    var historia = JSON.stringify(historias);
                    let sql = "UPDATE conexiones SET padron = " + store.state.conexion_seleccionada.padron + ", colector = " + store.state.conexion_seleccionada.colector;
                    sql = sql + ", calle = '" + store.state.conexion_seleccionada.calle + "', via = " + store.state.conexion_seleccionada.via;
                    sql = sql + ", profundidad = '" + store.state.conexion_seleccionada.profundidad + "', z_col = " + store.state.conexion_seleccionada.z_col;                   
                    sql = sql + ", sur = '" + store.state.conexion_seleccionada.sur + "', tramite = '" + store.state.conexion_seleccionada.tramite; 
                    sql = sql + "', etapa = '" + store.state.conexion_seleccionada.etapa + "', accion = '" +  store.state.conexion_seleccionada.accion;
                    sql = sql + "', tipo = '" + store.state.conexion_seleccionada.tipo + "', seccion = '" + store.state.conexion_seleccionada.seccion;   
                    sql = sql + "', distmed = " + store.state.conexion_seleccionada.distmed + ", distmei = " + store.state.conexion_seleccionada.distmei ;             
                    sql = sql + ", descripcion = '" + store.state.conexion_seleccionada.descripcion + "', ccz = '" + store.state.conexion_seleccionada.ccz;
                    sql = sql + "', empresa = '" + store.state.conexion_seleccionada.empresa + "', servicios = '" + store.state.conexion_seleccionada.servicios;
                    sql = sql + "', tgms = '" + store.state.conexion_seleccionada.tgms + "', oses = '" + store.state.conexion_seleccionada.oses + "', medidores = '" + store.state.conexion_seleccionada.medidores;
                    sql = sql + "', puertas = '" + store.state.conexion_seleccionada.puertas + "', historial = '" + historia;
                    sql = sql + "' WHERE id = " + store.state.conexion_seleccionada.id;
                    var fd = new FormData();
                    fd.append("sql",sql);
                    fd.append("historia","SE MODIFICARON LOS DATOS");
                    fd.append("id",store.state.conexion_seleccionada.id);
                    fd.append("tipo","MODIFICA_DATOS_CONEXION");
                    fd.append("usuario",store.state.datos_login.usuario);
                    var getUrl = window.location;
                    var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                    var phpfile = baseUrl + '/php/guardar_sql.php';
                    var xhr = new XMLHttpRequest();	
                    xhr.open('POST',phpfile,true);
                    xhr.onload = function() {

                      store.state.conexion_seleccionada.historial = historia;

                      for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
                      {  
                           if (store.state.datos_en_mapa[0][i]["id"] == store.state.conexion_seleccionada.id) 
                           {
                              store.state.conexiones_en_mapa[i].options.customData.padron =  store.state.conexion_seleccionada.padron;
                              store.state.conexiones_en_mapa[i].options.customData.colector =  store.state.conexion_seleccionada.colector;
                              store.state.conexiones_en_mapa[i].options.customData.calle =  store.state.conexion_seleccionada.calle;
                              store.state.conexiones_en_mapa[i].options.customData.via =  store.state.conexion_seleccionada.via;
                              store.state.conexiones_en_mapa[i].options.customData.profundidad =  store.state.conexion_seleccionada.profundidad;
                              store.state.conexiones_en_mapa[i].options.customData.z_col =  store.state.conexion_seleccionada.z_col;
                              store.state.conexiones_en_mapa[i].options.customData.sur =  store.state.conexion_seleccionada.sur;
                              store.state.conexiones_en_mapa[i].options.customData.tramite =  store.state.conexion_seleccionada.tramite;
                              store.state.conexiones_en_mapa[i].options.customData.etapa =  store.state.conexion_seleccionada.etapa;
                              store.state.conexiones_en_mapa[i].options.customData.accion =  store.state.conexion_seleccionada.accion;
                              store.state.conexiones_en_mapa[i].options.customData.tipo =  store.state.conexion_seleccionada.tipo;
                              store.state.conexiones_en_mapa[i].options.customData.seccion =  store.state.conexion_seleccionada.seccion;
                              store.state.conexiones_en_mapa[i].options.customData.distmed =  store.state.conexion_seleccionada.distmed;
                              store.state.conexiones_en_mapa[i].options.customData.distmei =  store.state.conexion_seleccionada.distmei;
                              store.state.conexiones_en_mapa[i].options.customData.descripcion =  store.state.conexion_seleccionada.descripcion;
                              store.state.conexiones_en_mapa[i].options.customData.empresa =  store.state.conexion_seleccionada.empresa;
                              store.state.conexiones_en_mapa[i].options.customData.ccz =  store.state.conexion_seleccionada.ccz;
                              store.state.conexiones_en_mapa[i].options.customData.servicios =  store.state.conexion_seleccionada.servicios;
                              store.state.conexiones_en_mapa[i].options.customData.tgms =  store.state.conexion_seleccionada.tgms;
                              store.state.conexiones_en_mapa[i].options.customData.oses =  store.state.conexion_seleccionada.oses;
                              store.state.conexiones_en_mapa[i].options.customData.medidores =  store.state.conexion_seleccionada.medidores;
                              store.state.conexiones_en_mapa[i].options.customData.puertas =  store.state.conexion_seleccionada.puertas;
                              store.state.conexiones_en_mapa[i].options.customData.historial = historia;
                              let chequeoetapa = store.state.conexion_seleccionada.etapa;
                              if (chequeoetapa == 'Proyectada' || chequeoetapa == 'Solicitada' || chequeoetapa == 'En construccion')
                                {
                                  var dasharrayvalue = '10,10';
                                  var dashoffsetvalue = '0';
                                  var opacityvalue = 0.5;
                                }
                                else
                                {
                                  var dasharrayvalue = null;
                                  var dashoffsetvalue = null;
                                  var opacityvalue = 1;
                                }
                                store.state.conexiones_en_mapa[i].setStyle({dashArray:dasharrayvalue});
                                store.state.conexiones_en_mapa[i].setStyle({dashOffset:dashoffsetvalue});
                                store.state.conexiones_en_mapa[i].setStyle({opacity:opacityvalue});
                           }
                       }
                       for(var i=0;i<store.state.datos_en_mapa[0].length;i++)
                       {  
                            if (store.state.datos_en_mapa[0][i]["id"] == store.state.conexion_seleccionada.id) 
                            {
                              store.state.datos_en_mapa[0][i]["padron"] =  store.state.conexion_seleccionada.padron;
                              store.state.datos_en_mapa[0][i]["colector"] =  store.state.conexion_seleccionada.colector;
                              store.state.datos_en_mapa[0][i]["calle"] =  store.state.conexion_seleccionada.calle;
                              store.state.datos_en_mapa[0][i]["via"] =  store.state.conexion_seleccionada.via;
                              store.state.datos_en_mapa[0][i]["profundidad"] =  store.state.conexion_seleccionada.profundidad;
                              store.state.datos_en_mapa[0][i]["z_col"] =  store.state.conexion_seleccionada.z_col;
                              store.state.datos_en_mapa[0][i]["sur"] =  store.state.conexion_seleccionada.sur;
                              store.state.datos_en_mapa[0][i]["tramite"] =  store.state.conexion_seleccionada.tramite;
                              store.state.datos_en_mapa[0][i]["etapa"] =  store.state.conexion_seleccionada.etapa;  
                              store.state.datos_en_mapa[0][i]["accion"] =  store.state.conexion_seleccionada.accion;                           
                              store.state.datos_en_mapa[0][i]["tipo"] =  store.state.conexion_seleccionada.tipo;
                              store.state.datos_en_mapa[0][i]["seccion"] =  store.state.conexion_seleccionada.seccion;
                              store.state.datos_en_mapa[0][i]["distmed"] =  store.state.conexion_seleccionada.distmed;
                              store.state.datos_en_mapa[0][i]["distmei"] =  store.state.conexion_seleccionada.distmei;
                              store.state.datos_en_mapa[0][i]["descripcion"] =  store.state.conexion_seleccionada.descripcion;
                              store.state.datos_en_mapa[0][i]["empresa"] =  store.state.conexion_seleccionada.empresa;
                              store.state.datos_en_mapa[0][i]["ccz"] =  store.state.conexion_seleccionada.ccz;
                               store.state.datos_en_mapa[0][i]["servicios"] =  store.state.conexion_seleccionada.servicios;
                               store.state.datos_en_mapa[0][i]["tgms"] =  store.state.conexion_seleccionada.tgms;
                               store.state.datos_en_mapa[0][i]["oses"] =  store.state.conexion_seleccionada.oses;
                               store.state.datos_en_mapa[0][i]["medidores"] =  store.state.conexion_seleccionada.medidores;
                               store.state.datos_en_mapa[0][i]["puertas"] =  store.state.conexion_seleccionada.puertas;
                               store.state.datos_en_mapa[0][i]["historial"] = historia;
                            }
                        }
                      padre.$buefy.toast.open('Se actualizaron los datos correctamente');
                      store.state.modal_visible = 'Modificar_Conexion'; 
                      store.state.control_cambios = false; 
                      };
                    xhr.send(fd);
        }
        else
        {
          this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente'); 
        }
      }//cierro el condicional de seguir
          }//es el cierre del condicional si hay cambios
          else
          {
            this.$buefy.toast.open('No hay cambios que guardar');
          }
      },
      guardo_fotografia(e){//_______________________________________________________________________________________________
        var d = new Date();
            var dirupload;
            var ano = d.getFullYear();
            var mes = d.getMonth() + 1;
            if (mes < 10){
              mes = "0" + mes;
            }
            var dia = d.getDate();
            if (dia < 10){
              dia = "0" + dia;
            }
            var horas = d.getHours();
            var minutos = d.getMinutes();
            var segundos = d.getSeconds();
            nom_archivo_foto = 'CONEXION' + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos;
            let last_dot = e.target.files[0].name.lastIndexOf('.')
            let ext = e.target.files[0].name.slice(last_dot + 1)
        if (ext == 'pdf') { ext = 'jpg'; }
        nom_archivo_foto = nom_archivo_foto + "." + ext;
        var valfoto = e.target.files[0];      
        var canvasBlob = foto_a_800(valfoto);
        canvasBlob.then(function(blob) {
        store.state.conexion_seleccionada.foto_blob = blob;
                  var array_fotos = [];
                  (store.state.conexion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.conexion_seleccionada.fotos);
                  let nombre_foto = "/CONEXIONES/archivos/fotos/" +  nom_archivo_foto;  
                  array_fotos.push(nombre_foto);
                  let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                  let historia_array = {"descripcion":"SE AGREGO FOTOGRAFIA","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  store.state.conexion_seleccionada.historial = historia;
                  let sql = "UPDATE conexiones SET historial = '" + historia + "', fotos = '" + JSON.stringify(array_fotos) + "' WHERE id = " + store.state.conexion_seleccionada.id;
                  var array_fotos_texto = JSON.stringify(array_fotos);
                  app.chequeo_conexion();
                  if (store.state.hayconexion == true) { // si hay conexion........................................................................
                    var fd = new FormData();
                    fd.append("sql",sql);
                    fd.append("foto", nombre_foto);
                    fd.append("archivofoto", blob);
                    fd.append("usuario", store.state.datos_login.usuario);
                    fd.append("historia", store.state.conexion_seleccionada.historial);
                    fd.append("id", store.state.conexion_seleccionada.id);
                    fd.append("tipo", 'FOTOGRAFIA');
                    fd.append("fotos", array_fotos_texto);
                        var getUrl = window.location;
                        var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                        var phpfile = baseUrl + '/php/subo_foto.php';
                        var xhr = new XMLHttpRequest();	
                        xhr.open('POST',phpfile,true);
                        xhr.onload = function() {
                                var data = this.response;
                              var array_fotos2 = JSON.parse(data);
                              var fotos_en_servidor = obtengo_fotos(array_fotos2);
                              fotos_en_servidor.then(function(valor){
                                store.state.conexion_seleccionada.fotos_con_fecha = [];
                                let fotos_fecha = [];
                                for (i=0;i<valor.length;i++){
                                  fotos_fecha.push(valor[i]);
                                }
                                store.state.conexion_seleccionada.fotos_con_fecha = JSON.parse(JSON.stringify(fotos_fecha));;
                                store.state.conexion_seleccionada.fotos = JSON.stringify(array_fotos2);   
                                for(j=0;j<store.state.conexiones_en_mapa.length;j++)
                                  {
                                    if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                    {
                                      store.state.conexiones_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos2);
                                      store.state.conexiones_en_mapa[j].options.customData.historial = store.state.conexion_seleccionada.historial;
                                    }
                                  }
                              });
                            }
                        xhr.send(fd);
                      }
          });  
      }, 
      guardo_esquema(e){//_______________________________________________________________________________________________
        var d = new Date();
            var dirupload;
            var ano = d.getFullYear();
            var mes = d.getMonth() + 1;
            if (mes < 10){
              mes = "0" + mes;
            }
            var dia = d.getDate();
            if (dia < 10){
              dia = "0" + dia;
            }
            var horas = d.getHours();
            var minutos = d.getMinutes();
            var segundos = d.getSeconds();
            nom_archivo_foto = 'ESQFUNCI' + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos;
            let last_dot = e.target.files[0].name.lastIndexOf('.')
            let ext = e.target.files[0].name.slice(last_dot + 1)
        if (ext == 'pdf') { ext = 'jpg'; }
        nom_archivo_foto = nom_archivo_foto + "." + ext;
        var valfoto = e.target.files[0];      
        var canvasBlob = foto_a_800(valfoto);
        canvasBlob.then(function(blob) {
        store.state.conexion_seleccionada.foto_blob = blob;
                  var array_fotos = [];
                  (store.state.conexion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.conexion_seleccionada.fotos);
                  let nombre_foto = "/CONEXIONES/archivos/fotos/" +  nom_archivo_foto;  
                  array_fotos.push(nombre_foto);
                  let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                  let historia_array = {"descripcion":"SE AGREGO ESQUEMA FUNCIONAL","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  store.state.conexion_seleccionada.historial = historia;
                  let sql = "UPDATE conexiones SET fotos = '" + JSON.stringify(array_fotos) + "' WHERE id = " + store.state.conexion_seleccionada.id;
                  var array_fotos_texto = JSON.stringify(array_fotos);
                  app.chequeo_conexion();
                  if (store.state.hayconexion == true) { // si hay conexion........................................................................
                    var fd = new FormData();
                    fd.append("sql",sql);
                    fd.append("foto", nombre_foto);
                    fd.append("archivofoto", blob);
                    fd.append("usuario", store.state.datos_login.usuario);
                    fd.append("historia", store.state.conexion_seleccionada.historial);
                    fd.append("id", store.state.conexion_seleccionada.id);
                    fd.append("tipo", 'ESQUEMA FUNCIONAL');
                    fd.append("fotos", array_fotos_texto);
                        var getUrl = window.location;
                        var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                        var phpfile = baseUrl + '/php/subo_foto.php';
                        var xhr = new XMLHttpRequest();	
                        xhr.open('POST',phpfile,true);
                        xhr.onload = function() {
                          var data = this.response;
                          var array_fotos2 = JSON.parse(data);
                          var fotos_en_servidor = obtengo_fotos(array_fotos2);
                          fotos_en_servidor.then(function(valor){
                                let fotos_fecha = [];
                                for (i=0;i<valor.length;i++){
                                  fotos_fecha.push(valor[i]);
                                }
                                store.state.conexion_seleccionada.fotos_con_fecha = JSON.parse(JSON.stringify(fotos_fecha));;
                                store.state.conexion_seleccionada.fotos = JSON.stringify(array_fotos2);
                                for(j=0;j<store.state.conexiones_en_mapa.length;j++)
                                  {
                                    if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                    {
                                      store.state.conexiones_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos2);
                                      store.state.conexiones_en_mapa[j].options.customData.historial = store.state.conexion_seleccionada.historial;
                                    }
                                  }
                              });
                        };
                        xhr.send(fd);
                      }
          });  
      },  
      guardo_acta(e){//_______________________________________________________________________________________________
        var d = new Date();
            var dirupload;
            var ano = d.getFullYear();
            var mes = d.getMonth() + 1;
            if (mes < 10){
              mes = "0" + mes;
            }
            var dia = d.getDate();
            if (dia < 10){
              dia = "0" + dia;
            }
            var horas = d.getHours();
            var minutos = d.getMinutes();
            var segundos = d.getSeconds();
            nom_archivo_foto = 'ACTAVISI' + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos;
            let last_dot = e.target.files[0].name.lastIndexOf('.')
            let ext = e.target.files[0].name.slice(last_dot + 1)
        if (ext == 'pdf') { ext = 'jpg'; }
        nom_archivo_foto = nom_archivo_foto + "." + ext;
        var valfoto = e.target.files[0];      
        var canvasBlob = foto_a_800(valfoto);
        canvasBlob.then(function(blob) {
        store.state.conexion_seleccionada.foto_blob = blob;
                  var array_fotos = [];
                  (store.state.conexion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.conexion_seleccionada.fotos);
                  let nombre_foto = "/CONEXIONES/archivos/fotos/" +  nom_archivo_foto;  
                  array_fotos.push(nombre_foto);
                  let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                  let historia_array = {"descripcion":"SE AGREGO ACTA DE VISITA","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  store.state.conexion_seleccionada.historial = historia;
                  let sql = "UPDATE conexiones  fotos = '" + JSON.stringify(array_fotos) + "' WHERE id = " + store.state.conexion_seleccionada.id;
                  var array_fotos_texto = JSON.stringify(array_fotos);
                  app.chequeo_conexion();
                  if (store.state.hayconexion == true) { // si hay conexion........................................................................
                    var fd = new FormData();
                    fd.append("sql",sql);
                    fd.append("foto", nombre_foto);
                    fd.append("archivofoto", blob);
                    fd.append("usuario", store.state.datos_login.usuario);
                    fd.append("historia", store.state.conexion_seleccionada.historial);
                    fd.append("id", store.state.conexion_seleccionada.id);
                    fd.append("tipo", 'ACTA DE VISITA');
                    fd.append("fotos", array_fotos_texto);
                        var getUrl = window.location;
                        var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                        var phpfile = baseUrl + '/php/subo_foto.php';
                        var xhr = new XMLHttpRequest();	
                        xhr.open('POST',phpfile,true);
                        xhr.onload = function() {
                          var data = this.response;
                          var array_fotos2 = JSON.parse(data);
                          var fotos_en_servidor = obtengo_fotos(array_fotos2);
                          fotos_en_servidor.then(function(valor){
                                let fotos_fecha = [];
                                for (i=0;i<valor.length;i++){
                                  fotos_fecha.push(valor[i]);
                                }
                                store.state.conexion_seleccionada.fotos_con_fecha = JSON.parse(JSON.stringify(fotos_fecha));
                                store.state.conexion_seleccionada.fotos = JSON.stringify(array_fotos2);
                                for(j=0;j<store.state.conexiones_en_mapa.length;j++)
                                  {
                                    if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                    {
                                      store.state.conexiones_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos2);
                                      store.state.conexiones_en_mapa[j].options.customData.historial = store.state.conexion_seleccionada.historial;
                                    }
                                  }
                              });
                        };
                        xhr.send(fd);
                      }
          });  
      },      
      eliminar_fotografia(e){//_______________________________________________________________________________________________
        var padre = this;
        padre.$buefy.dialog.confirm({
            message: 'Eliminar imagen asociada a conexion?',
            onConfirm: () => {
                                let array_fotos = [];
                                (store.state.conexion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.conexion_seleccionada.fotos);
                                array_fotos =  array_fotos.filter(foto => foto != e);
                                var string_fotos = '';
                                array_fotos.length == 0 ? string_fotos = '' : string_fotos = JSON.stringify(array_fotos); 
                                let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                                let historia_array = {"descripcion":"SE ELIMINO FOTOGRAFIA","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                                historias.push(historia_array);
                                var historia = JSON.stringify(historias);
                                store.state.conexion_seleccionada.historial = historia;
                                let sql = "UPDATE conexiones SET historial = '" + historia + "', fotos = '" + string_fotos + "' WHERE id = " + store.state.conexion_seleccionada.id;
                                app.chequeo_conexion();
                                if (store.state.hayconexion == true) { // si hay conexion........................................................................
                                  var fd = new FormData();
                                  fd.append("sql",sql);
                                  fd.append("id",store.state.conexion_seleccionada.id);
                                  fd.append("usuario", store.state.datos_login.usuario);
                                  fd.append("historia", store.state.conexion_seleccionada.historial);
                                  fd.append("id", store.state.conexion_seleccionada.id);
                                      var getUrl = window.location;
                                      var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                      var phpfile = baseUrl + '/php/eliminar_foto.php';
                                      var xhr = new XMLHttpRequest();	
                                      xhr.open('POST',phpfile,true);
                                      xhr.onload = function() {
                                            var data = JSON.parse(this.response);
                                            if (data.mensaje == 'ok')
                                            {
                                                  for(j=0;j<store.state.conexiones_en_mapa.length;j++)
                                                  {
                                                    if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                                    {
                                                      store.state.conexiones_en_mapa[j].options.customData.fotos = string_fotos;
                                                      store.state.conexion_seleccionada.fotos = string_fotos;
                                                      store.state.conexiones_en_mapa[j].options.customData.historial = historia;
                                                      store.state.conexion_seleccionada.historial = historia;
                                                      store.state.conexion_seleccionada.fotos_con_fecha = store.state.conexion_seleccionada.fotos_con_fecha.filter(foto => foto.foto != e);
                                                    }
                                                  }
                                            }
                                            else
                                            {
                                              padre.$buefy.toast.open({duration: 5000, message: 'No fue posible eliminar fotografia'});
                                            }     
                                      };
                                      xhr.send(fd);
                                    } else
                                    {
                                      padre.$buefy.toast.open({duration: 5000, message: 'No fue posible eliminar fotografia por falta de conexion'});
                                    } 
                              } 
          }) 
      },
      posicion_gps: function(){
          map.setView([store.state.centro_gps.latitud,store.state.centro_gps.longitud], store.state.centro_gps.zoom, false); 
      },      
      salir: function(){
            store.state.modal_visible = '';
            store.state.layout_visible = 'layout_menu_principal';  
      },    
      cargar_conexiones: function(bandera,modo,lati,longi){
        if (typeof legend !== 'undefined'){
          if (legend instanceof L.Control) { map.removeControl(legend)}; 
        }
        var valor = 0;
        var sigue = true; 
        var lat = 0;
        var lon = 0;
        var tipo = 'zona';  
        if(modo == 'normal')
        {
          tipo = this.tipo_filtro;
          var id = this.filtro1_id;
          var padron = this.filtro1_padron;
          var servicio = this.filtro1_servicio;
          var colector = this.filtro1_colector;
          var tgm = this.filtro1_tgm;
          var suministro = this.filtro1_suministro;
          var medidor = this.filtro1_medidor;
          switch(tipo){
            case 'zona': 
              app.obtengo_ubicacion(); 
              lat = store.state.centro_mapa.latitud;
              lon = store.state.centro_mapa.longitud;
              break;
            case 'id':             
                  if(isNaN(id)){
                    this.$buefy.toast.open('El valor de id de conexión ingresado no es correcto');
                    sigue = false;
                  }
                  else if (id < 1 || id > 500000){
                      this.$buefy.toast.open('El valor de id de conexión ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = id;
                  break;
            case 'padron':
                  if(isNaN(padron)){
                    this.$buefy.toast.open('El valor de padrón ingresado no es correcto');
                    sigue = false;
                  }
                  else if (padron < 1 || padron > 600000){
                      this.$buefy.toast.open('El valor de padrón ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = padron;
                  break;
            case 'calles': 
                  lat = store.state.centro.latitud;
                  lon = store.state.centro.longitud;
                  break;
            case 'servicio':
                  if(isNaN(servicio)){
                    this.$buefy.toast.open('El valor de servicio ingresado no es correcto');
                    sigue = false;
                  }
                  else if (servicio < 1 || servicio > 9000000){
                      this.$buefy.toast.open('El valor de servicio ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = servicio; 
                  break;
            case 'colector': 
                  if(isNaN(colector)){
                    this.$buefy.toast.open('El valor de id de colector ingresado no es correcto');
                    sigue = false;
                  }
                  else if (colector < 1 || colector > 100000){
                      this.$buefy.toast.open('El valor de id de colector ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = colector;
                  break;
            case 'tgm': 
                  if(isNaN(tgm)){
                    this.$buefy.toast.open('El valor de tgm ingresado no es correcto');
                    sigue = false;
                  }
                  else if (tgm < 1 || tgm > 10000000){
                      this.$buefy.toast.open('El valor de tgm ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = tgm;
                  break;
            case 'suministro': 
                  if(isNaN(suministro)){
                    this.$buefy.toast.open('El valor de suministro ingresado no es correcto');
                    sigue = false;
                  }
                  else if (suministro < 1 || suministro > 900000000){
                      this.$buefy.toast.open('El valor de suministro ingresado no es correcto');
                      sigue = false;
                  }
                  else
                  valor = suministro;
                  break;
            case 'medidor': 
                  valor = medidor;
                  break;
              default:
                this.$buefy.toast.open('No fue posible identificar un filtro válido');
                sigue = false;
              break;  
          }
          }
          else if (modo == 'nueva')
          {
            app.obtengo_ubicacion(); 
            lat = store.state.centro_mapa.latitud;
            lon = store.state.centro_mapa.longitud;
            tipo = 'zona';
            valor = 0;
          }
          else if (modo == 'movimientos')
          {
            lat = lati;
            lon = longi;
            tipo = 'zona';
            valor = 0;
          }

          if (sigue == true)
              {

          store.state.modal_visible = '';
          this.cambios_mapa = false;
          app.chequeo_conexion();
          if (store.state.hayconexion == true) { // si hay conexion........................................................................
            //consulto base de datos
            const cargando_algo =  this.$buefy.loading.open({containter: null});
            store.state.datos_en_mapa = [];
            var fd = new FormData();
           fd.append("lat",lat);
           fd.append("lon",lon);
           fd.append("tipo",tipo);
           fd.append("valor",valor);
            var este = this;
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/conexiones_zona.php';
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                var data = JSON.parse(this.response);
                  var lati = data[5][0];
                  var long = data[5][1];
                  store.state.conexiones_inactivas_en_mapa = data[7];
                  if (lati < -30 && long < -50)
                    {
                      store.state.centro.latitud = lati;
                      store.state.centro.longitud = long;
                      store.state.centro_mapa.latitud = lati;
                      store.state.centro_mapa.longitud = long;
                     app.cargo_saneamiento(map,data);
                     store.state.datos_en_mapa = data;
                     if (bandera){
                      if (modo == 'movimientos')
                      {
                        map.setView([lati,long],20,false);
                      }
                      else
                      {
                        map.setView([lati,long],18,false);
                      }     
                     }
                     cargando_algo.close();
                    }
                    else
                    {
                    este.$buefy.toast.open('No se encuentra resultado válido para el filtro solicitado. Modifique los datos e intente nuevamente');
                    cargando_algo.close();
                    }
               };
                xhr.send(fd);
              }
              else
              {
                this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
              }
            }
              
      },
      cargar_conexiones2: function(){
        if (typeof legend !== 'undefined'){
          if (legend instanceof L.Control) { map.removeControl(legend)}; 
        }
        if (store.state.descripcion_consulta_distribuida == '')
        {
          this.cerrar_reportes();
        }
        store.state.modal_visible = '';
        let consulta = JSON.stringify(store.state.datos_consulta_distribuida);
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
          //consulto base de datos
          store.state.datos_en_mapa = [];
          if (store.state.datos_consulta_distribuida.certificado == false && store.state.datos_consulta_distribuida.tramite == false && store.state.datos_consulta_distribuida.accion == false && store.state.datos_consulta_distribuida.fuente == false &&store.state.datos_consulta_distribuida.sur == false && store.state.datos_consulta_distribuida.servicios == false && store.state.datos_consulta_distribuida.etapa == false && store.state.datos_consulta_distribuida.ccz == false && store.state.datos_consulta_distribuida.zona == false && store.state.datos_consulta_distribuida.calle == false)
          { 
            this.$buefy.toast.open({duration: 5000, message: 'No se seleccionó ningún filtro. La fecha debe ir acompañada de un filtro adicional'});
          }
          else
          {
            let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
            const cargando_algo =  this.$buefy.loading.open({containter: null});
          var fd = new FormData();
         fd.append("consulta",consulta);
          var este = this;
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/conexiones_distribuidas.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
              var data = JSON.parse(this.response);
                mensaje_espera.close();
                cargando_algo.close();
                store.state.datos_consulta_distribuida = {certificado:false,certificado_valor:'Con certificado',tramite:false,tramite_valor:'Nueva Inicio',sur:false,sur_valor:'Sin reclamos',servicios:false,servicios_valor:'Sin tarifa',fuente:false,fuente_valor:'Otros',etapa:false,etapa_valor:'Solicitada',accion:false,accion_valor:'Sin asignar',ccz:false,ccz_valor:'CCZ01',calle:false,calle_valor:'YI',zona:false,zona_valor:'',fecha:false,fecha1_valor:new Date(),fecha2_valor:new Date()};
                let cantidad_resultados = data[1][0];
                if (store.state.descripcion_consulta_distribuida == '')
                {
                store.state.descripcion_consulta_distribuida = "Consulta: " + data[1][1];
                }
                else
                {
                  store.state.descripcion_consulta_distribuida = store.state.descripcion_consulta_distribuida + " o " + data[1][1];
                }
                 if (cantidad_resultados > 0)
                  {
                   app.cargo_saneamiento2(map,data);
                   map.setView([-34.82,-56.20],11,false);
                  }
                  else
                  {
                  este.$buefy.toast.open({duration: 5000, message: 'No se encuentra resultado válido para el filtro solicitado. Modifique los datos e intente nuevamente'});
                  }
                  if (cantidad_resultados > 24999)
                  {
                  este.$buefy.toast.open({duration: 5000, message: 'Hay un gran número de conexiones como resultado de la consulta. Se despliegan los primeros 25.000 casos'}); 
                  }
             };
              xhr.send(fd);
            }
          }
            else
            {
              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
            }
          
            
      },
      modifico_ubicacion: function(){
          var padre = this;
          this.cambios_mapa = true;
          this.tipo_cambio_mapa = 'cambio_existente';
          let objeto_conexion = false;
          for(let i=0;i<store.state.conexiones_en_mapa.length;i++)
          {
              if (store.state.conexiones_en_mapa[i].options.customData.id == store.state.conexion_seleccionada.id)
              {
                objeto_conexion = store.state.conexiones_en_mapa[i];
              }
          }
          if (objeto_conexion != false)
             {
                      objeto_conexion.on('editable:vertex:dragend',function(e)
                      {
                        guardar_cambios_mapa = true;
                        var lat1 = e.vertex.latlngs[0].lat;
                        var lon1 = e.vertex.latlngs[0].lng;
                        var lat2 = e.vertex.latlngs[1].lat;
                        var lon2 = e.vertex.latlngs[1].lng;
                        if (e.vertex.latlngs[1].lat != store.state.conexion_seleccionada.lat2 || e.vertex.latlngs[1].lng != store.state.conexion_seleccionada.lon2)
                        {
                          padre.$buefy.dialog.confirm({
                            message: 'Ajustar ubicacion a colector?',
                            onConfirm: () => {
                                              var nuevo_punto = app.obtengo_punto_en_colector(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
                                              lat2 = nuevo_punto['lat'];
                                              lon2 = nuevo_punto['lon'];
                                              e.vertex.latlngs[1].lat = lat2;
                                              e.vertex.latlngs[1].lng = lon2;
                                              store.state.conexion_seleccionada.lon2 = lon2;
                                              store.state.conexion_seleccionada.lat2 = lat2;
                                              for(let j=0;j<store.state.conexiones_en_mapa.length;j++)
                                              {
                                                if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                                  {
                                                    var nuevos_puntos = [[lat1,lon1],[lat2,lon2]];
                                                    store.state.conexiones_en_mapa[j].setLatLngs(nuevos_puntos);  
                                                  } 
                                              }
                                              },
                            onCancel: () => {
                                              for(let j=0;j<store.state.conexiones_en_mapa.length;j++)
                                              {
                                                if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                                  {
                                                    var nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[e.vertex.latlngs[1].lat,e.vertex.latlngs[1].lng]];
                                                    store.state.conexiones_en_mapa[j].setLatLngs(nuevos_puntos);  
                                                  } 
                                              }
                                            }       
                          })
                        }
                        else
                        {
                        for(let j=0;j<store.state.conexiones_en_mapa.length;j++)
                            {
                              if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                                {
                                  var nuevos_puntos = [[lat1,lon1],[lat2,lon2]];
                                  store.state.conexiones_en_mapa[j].setLatLngs(nuevos_puntos);  
                                } 
                            }
                        }  


                        let latlngini = [lat1,lon1];
                        for(let j=0;j<store.state.camaras1_en_mapa.length;j++)
                          {
                            if(store.state.camaras1_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                              {
                                store.state.camaras1_en_mapa[j].setLatLng(latlngini);
                              } 
                          }
                      });
                        store.state.modal_visible = '';
                        objeto_conexion.enableEdit();
              }
      },  
      modifico_datos: function(){
          store.state.control_cambios = false;
          store.state.modal_visible = 'Modal_modificacion_datos';
      }, 
      iniciar_grabacion_audio(){
          this.mic_estado = true;
          var media = {
            tag: 'audio',
            type: 'audio/ogg',
            ext: '.ogg',
            gUM: {audio: true}
          }
          var chunks = [];
          navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
            stream = _stream;
            recorder = new MediaRecorder(stream);
            recorder.ondataavailable = e => {
              chunks.push(e.data);
              if(recorder.state == 'inactive'){
                let blob = new Blob(chunks, {type: media.type });
                var d = new Date();
                var dirupload;
                var ano = d.getFullYear();
                var mes = d.getMonth() + 1;
                if (mes < 10){
                  mes = "0" + mes;
                }
                var dia = d.getDate();
                if (dia < 10){
                  dia = "0" + dia;
                }
                var horas = d.getHours();
                var minutos = d.getMinutes();
                var segundos = d.getSeconds();
                nom_archivo_audio = "CONEXIONES" + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos + '.ogg';
                let array_audios = [];
                (store.state.conexion_seleccionada.audios == '') ? array_audios = [] : array_audios = JSON.parse(store.state.conexion_seleccionada.audios);
                let nombre_audio =  "/CONEXIONES/archivos/audios/" + nom_archivo_audio; 
                array_audios.push(nombre_audio);
                let historias = JSON.parse(store.state.conexion_seleccionada.historial);
                let historia_array = {"descripcion":"SE AGREGO AUDIO","fecha": app.obtengo_fecha(new Date()) ,"usuario": store.state.datos_login.usuario};
                historias.push(historia_array);
                let historia = JSON.stringify(historias);
                store.state.conexion_seleccionada.historial = historia;
                let sql = "UPDATE conexiones SET historial = '" + historia + "', audios = '" + JSON.stringify(array_audios) + "' WHERE id = " + store.state.conexion_seleccionada.id;
                for(j=0;j<store.state.conexiones_en_mapa.length;j++)
                {
                  if(store.state.conexiones_en_mapa[j].options.customData.id == store.state.conexion_seleccionada.id)
                  {
                    store.state.conexiones_en_mapa[j].options.customData.audios = JSON.stringify(array_audios);
                    store.state.conexiones_en_mapa[j].options.customData.historial = store.state.conexion_seleccionada.historial;
                  }
                }
                app.chequeo_conexion();
                if (store.state.hayconexion == true) {// si hay conexion........................................................................
                  var fd = new FormData();
                  fd.append("sql",sql);
                  fd.append("audio", nombre_audio);
                  fd.append("archivoaudio", blob);
                  fd.append("usuario", store.state.datos_login.usuario);
                  fd.append("historia", store.state.conexion_seleccionada.historial);
                  fd.append("id", store.state.conexion_seleccionada.id);
                      var getUrl = window.location;
                      var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                      var phpfile = baseUrl + '/php/subo_audio.php';
                      var xhr = new XMLHttpRequest();	
                      xhr.open('POST',phpfile,true);
                      xhr.onload = function() {
                            var data = this.response;
                            var audios_en_servidor = obtengo_audios(array_audios);
                            audios_en_servidor.then(function(valor){
                              store.state.conexion_seleccionada.audios_con_fecha = [];
                              for (i=0;i<valor.length;i++){
                                store.state.conexion_seleccionada.audios_con_fecha.push(valor[i]);
                                 }
                              store.state.conexion_seleccionada.audios = JSON.stringify(array_audios);
                            });
                      };
                      xhr.send(fd);
                    }
              } 
            };
            recorder.start();
          }).catch("no se puede grabar audio");
      },
      finalizar_grabacion_audio(){
          this.mic_estado = false;
          recorder.stop();
          this.modal_grabar_audio = false;
      },
      eliminar_conexion(){     
      var padre = this 
      this.$buefy.dialog.confirm({
        message: 'Confirma eliminar conexión?',
        type: 'is-success',
        onConfirm: () => {


          app.chequeo_conexion();
          if (store.state.hayconexion == true) {// si hay conexion........................................................................
            var fd = new FormData();
            fd.append("id",store.state.conexion_seleccionada.id);
            fd.append("usuario",store.state.datos_login.usuario);
            fd.append("historial",store.state.conexion_seleccionada.historial);
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/eliminar_conexion.php';
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                      var data = this.response;
                      let elemento = { id: store.state.conexion_seleccionada.id, padron: store.state.conexion_seleccionada.padron , historial: store.state.conexion_seleccionada.historial};
                      store.state.conexiones_inactivas_en_mapa.push(elemento);
                      for(let i=0;i<store.state.conexiones_en_mapa.length;i++)
                      {
                          if (store.state.conexiones_en_mapa[i].options.customData.id == store.state.conexion_seleccionada.id)
                          {
                            store.state.conexiones_en_mapa[i].remove(map);
                            store.state.camaras1_en_mapa[i].remove(map);
                            store.state.conexiones_en_mapa.splice([i],1);
                            store.state.camaras1_en_mapa.splice([i],1);
                          }
                      }
                      store.state.conexion_seleccionada = {id:0,lon1:0,lat1:0,lon2:0,lat2:0,padron:0,colector:0,profundidad:'',tipo:'',seccion:'',alta_fuent:'',alta_descr:'',alta_fecha:'',servicios:'',tgms:'',oses:'',medidores:'',sur:'',historial:'',etapa:'',ccz:'',accion:'',fotos:'',audios:'',activo:'',puertas:'',z_col:0,via:0,id_tramite:'',id_con_ant:0,calle:'',tramite:'',empresa:'',descripcion:'',foto_blob:'', fotos_con_fecha: [], audios_con_fecha: []};
                      store.state.modal_visible = '';
                }
                xhr.send(fd);
              } else
              {
                this.$buefy.toast.open('No es posible eliminar conexión por falta de conexión. Intente nuevamente'); 
              }
                          }
        });
      },
      nueva_conexion(){
        var padre = this;
        var lat2 = -34.5555;
        var lon2 = -56.8522;
        if (store.state.conexiones_en_mapa.length < 2)
        {
          this.$buefy.toast.open('Cargando conexiones de zona....');
          this.cargar_conexiones(false,'nueva',0,0);
        }
        store.state.modal_visible = ''; 
        this.cambios_mapa = true;
        store.state.modo_seleccion = 'nada';
        this.tipo_cambio_mapa = 'nueva_conexion';
        map.editTools.stopDrawing();
        map.editTools.commitDrawing();
        var nueva_conexion = map.editTools.startPolyline();
          let cant_vertices = 0;
          nueva_conexion.on('editable:vertex:new',function(e){
            cant_vertices++;
            if (cant_vertices == 2){
                    padre.$buefy.dialog.confirm({
                      message: 'Ajustar ubicacion a colector?',
                      onConfirm: () => {
                                  var nuevo_punto = app.obtengo_punto_en_colector(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
                                  lat2 = nuevo_punto['lat'];
                                  lon2 = nuevo_punto['lon'];
                                  e.vertex.latlngs[1].lat = lat2;
                                  e.vertex.latlngs[1].lng = lon2;
                                  var nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[lat2,lon2]];
                                  nueva_conexion.setLatLngs(nuevos_puntos); 
                                  map.editTools.stopDrawing();
                                  map.editTools.commitDrawing();
                                  store.state.nueva_conexion = nueva_conexion;
                                  lat2 = e.vertex.latlngs[1].lat;
                                  lon2 = e.vertex.latlngs[1].lng;
                                },
                      onCancel: () => {
                                  map.editTools.stopDrawing();
                                  map.editTools.commitDrawing();
                                  store.state.nueva_conexion = nueva_conexion;
                                  lat2 = e.vertex.latlngs[1].lat;
                                  lon2 = e.vertex.latlngs[1].lng;
                                      } 
                              })
            }
          });
          nueva_conexion.on('editable:vertex:dragend',function(e)
          {
            guardar_cambios_mapa = true;
            if (e.vertex.latlngs[1].lat != lat2 || e.vertex.latlngs[1].lng != lon2)
            {
              padre.$buefy.dialog.confirm({
                message: 'Ajustar ubicacion a colector?',
                onConfirm: () => {
                                  var nuevo_punto = app.obtengo_punto_en_colector(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
                                  lat2 = nuevo_punto['lat'];
                                  lon2 = nuevo_punto['lon'];
                                  e.vertex.latlngs[1].lat = lat2;
                                  e.vertex.latlngs[1].lng = lon2;
                                  var nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[lat2,lon2]];
                                  nueva_conexion.setLatLngs(nuevos_puntos); 
                                  map.editTools.commitDrawing();
                                  store.state.nueva_conexion = nueva_conexion;
                                  lat2 = e.vertex.latlngs[1].lat;
                                  lon2 = e.vertex.latlngs[1].lng;
                                  },
                onCancel: () => {
                                  var nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[e.vertex.latlngs[1].lat,e.vertex.latlngs[1].lng]];
                                  nueva_conexion.setLatLngs(nuevos_puntos); 
                                  map.editTools.commitDrawing();
                                  store.state.nueva_conexion = nueva_conexion;
                                  lat2 = e.vertex.latlngs[1].lat;
                                  lon2 = e.vertex.latlngs[1].lng;
                                }
              })
            }
            else
            {
              var nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[e.vertex.latlngs[1].lat,e.vertex.latlngs[1].lng]];
              nueva_conexion.setLatLngs(nuevos_puntos); 
              map.editTools.commitDrawing();
              store.state.nueva_conexion = nueva_conexion;
              lat2 = e.vertex.latlngs[1].lat;
              lon2 = e.vertex.latlngs[1].lng;
            }
          });
      }, 
      seleccione_calle1(calle1_seleccionada){
            this.calle2 = [];
            store.state.datos_consulta_distribuida.calle_valor = calle1_seleccionada;
            let calles_cruzan = store.state.calles_cruzan;
            let lista_calles_cruzan = [];
            let id = 0;
            const puntodereferencia = {
              lat: -90, lon: -90
            };
            for(var i=0;i<calles_cruzan.length;i++){
              if(calles_cruzan[i].calle1 == calle1_seleccionada)
              {
                let elemento = { key: id, calle: calles_cruzan[i].calle2, lat: calles_cruzan[i].lat, lon: calles_cruzan[i].lon};
                if (!lista_calles_cruzan.includes(calles_cruzan[i].calle2)){
                this.calle2.push(elemento);
                lista_calles_cruzan.push(calles_cruzan[i].calle2)
                if(calles_cruzan[i].lat > puntodereferencia.lat){puntodereferencia.lat = calles_cruzan[i].lat};
                if(calles_cruzan[i].lon > puntodereferencia.lon){puntodereferencia.lon = calles_cruzan[i].lon};
                id++;
                }
              }
              if(calles_cruzan[i].calle2 == calle1_seleccionada)
              {
                let elemento = { key: id, calle: calles_cruzan[i].calle1, lat: calles_cruzan[i].lat, lon: calles_cruzan[i].lon};
                if (!lista_calles_cruzan.includes(calles_cruzan[i].calle1)){
                  this.calle2.push(elemento);
                  lista_calles_cruzan.push(calles_cruzan[i].calle1)
                  if(calles_cruzan[i].lat > puntodereferencia.lat){puntodereferencia.lat = calles_cruzan[i].lat};
                  if(calles_cruzan[i].lon > puntodereferencia.lon){puntodereferencia.lon = calles_cruzan[i].lon};
                  id++;
                  }
              }
            }
            this.calle2.sort((a, b) => {
              const distanceA = dl_geometria.dl_distancia_metros_de_geograficas(puntodereferencia.lat, puntodereferencia.lon, a.lat, a.lon);
              const distanceB = dl_geometria.dl_distancia_metros_de_geograficas(puntodereferencia.lat, puntodereferencia.lon, b.lat, b.lon); 
              return distanceA - distanceB; // Ordena en orden ascendente
          });
      },
      cambio_calle2(e){
          for (let i=0;i<this.calle2.length;i++)
          {
            if(this.calle2[i].calle == e.target.value)
            {
              let lat = this.calle2[i].lat;
              let lon = this.calle2[i].lon;
              store.state.centro.latitud  = lat;
              store.state.centro.longitud = lon;
            }
          }
      },
      aplicar_estilos(){
        var tipo_tematico = this.tipo_estilo;
        //console.log(tipo_tematico);
        if (typeof legend !== 'undefined')
        {
        if (legend instanceof L.Control) {map.removeControl(legend); }
        }
        switch(tipo_tematico) {
            case 'sur':
                  for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
                  {
                      store.state.conexiones_en_mapa[i].options.color = 'green';
                      let color = 'green';
                      let sur = store.state.conexiones_en_mapa[i].options.customData.sur
                      switch (sur)
                      { 
                        case 'SUR Nueva Ingresado': color = '#FFF533"'; break;
                        case 'SUR Nueva En Proceso': color = '#C1E528'; break;
                        case 'SUR Nueva Finalizado': color = '#84D51E'; break;
                        case 'SUR Nueva Anulado': color = '#46C513'; break;
                        case 'SUR Rota Ingresado': color = '#09B509'; break;
                        case 'SUR Rota En Proceso': color = '#359F0D'; break;
                        case 'SUR Rota Finalizado': color = '#618912'; break;
                        case 'SUR Rota Anulado': color = '#8E7317'; break;
                        case 'SUR Obstruida Ingresado': color = '#BA5D1C'; break;
                        case 'SUR Obstruida En Proceso': color = '#E74721'; break;
                        case 'SUR Obstruida Finalizado': color = '#D64731'; break;
                        case 'SUR Obstruida Anulado': color = '#C54742'; break;
                        case 'SUR Sucia Ingresado': color = '#B44853'; break;
                        case '<span>SUR Sucia En Proceso': color = '#A34864'; break;
                        case 'SUR Sucia Finalizado': color = '#924975'; break;
                        case 'SUR Sucia Anulado': color = '#814986'; break;
                        case 'Sin reclamos': color = '#704997'; break;
                        default : color = '#BCFCF6'; break;
                      }
                      store.state.conexiones_en_mapa[i].setStyle({color: color});
                  }
                  legend = L.control({position: 'topleft'});
                  legend.onAdd = function (map) {
                    var div = L.DomUtil.create('div', 'legend');
                    var html_tabla = '';
                    html_tabla += '<h4>SUR<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                    html_tabla += '<i style="background: #FFF533"></i><span>SUR Nueva Ingresado</span><br>';
                    html_tabla += '<i style="background: #C1E528"></i><span>SUR Nueva En Proceso</span><br>';
                    html_tabla += '<i style="background: #84D51E"></i><span>SUR Nueva Finalizado</span><br>';
                    html_tabla += '<i style="background: #46C513"></i><span>SUR Nueva Anulado</span><br>';
                    html_tabla += '<i style="background: #09B509"></i><span>SUR Rota Ingresado</span><br>';
                    html_tabla += '<i style="background: #359F0D"></i><span>SUR Rota En Proceso</span><br>';
                    html_tabla += '<i style="background: #618912"></i><span>SUR Rota Finalizado</span><br>';
                    html_tabla += '<i style="background: #8E7317"></i><span>SUR Rota Anulado</span><br>';
                    html_tabla += '<i style="background: #BA5D1C"></i><span>SUR Obstruida Ingresado</span><br>';
                    html_tabla += '<i style="background: #E74721"></i><span>SUR Obstruida En Proceso</span><br>';
                    html_tabla += '<i style="background: #D64731"></i><span>SUR Obstruida Finalizado</span><br>';
                    html_tabla += '<i style="background: #C54742"></i><span>SUR Obstruida Anulado</span><br>';
                    html_tabla += '<i style="background: #B44853"></i><span>SUR Sucia Ingresado</span><br>';
                    html_tabla += '<i style="background: #A34864"></i><span>SUR Sucia En Proceso</span><br>';
                    html_tabla += '<i style="background: #924975"></i><span>SUR Sucia Finalizado</span><br>';
                    html_tabla += '<i style="background: #814986"></i><span>SUR Sucia Anulado</span><br>';
                    html_tabla += '<i style="background: #704997"></i><span>Sin reclamos</span><br>';
                    div.innerHTML += html_tabla; 
                    return div;
                    };
                  legend.addTo(map);
                  var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                  boton_cerrar.addEventListener("click", function(){ legend.remove(map); });
              break;
          case 'etapa':
                        for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
                        {
                            store.state.conexiones_en_mapa[i].options.color = 'green';
                            let color = 'green';
                            let etapa = store.state.conexiones_en_mapa[i].options.customData.etapa
                            switch (etapa)
                            { 
                              case 'Solicitada': color = '#A2D05C'; break;
                              case 'Proyectada': color = '#FF0080'; break;
                              case 'En construccion': color = '#E78D55'; break;
                              case 'Construida': color = '#FFDC00'; break;
                              case 'Ramal sin inst. sanitaria conectada': color = '#0080FF'; break;
                              default : color = '#ebe6df'; break;
                            }
                            store.state.conexiones_en_mapa[i].setStyle({color: color});
                        }
                        legend = L.control({position: 'topleft'});
                        legend.onAdd = function (map) {
                          var div = L.DomUtil.create('div', 'legend');
                          var html_tabla = '';
                          html_tabla += '<h4>Etapa<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                          html_tabla += '<i style="background: #A2D05C"></i><span>Solicitada</span><br>';
                          html_tabla += '<i style="background: #FF0080"></i><span>Proyectada</span><br>';
                          html_tabla += '<i style="background: #E78D55"></i><span>En construccion</span><br>';
                          html_tabla += '<i style="background: #FFDC00"></i><span>Construida</span><br>';  
                          html_tabla += '<i style="background: #0080FF"></i><span>Ramal sin inst. sanitaria conectada</span><br>';
                          div.innerHTML += html_tabla; 
                          return div;
                          };
                        legend.addTo(map);
                        var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                        boton_cerrar.addEventListener("click", function(){ legend.remove(map); });
          break;
          case 'fuente':
                        for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
                        {
                            store.state.conexiones_en_mapa[i].options.color = 'green';
                            let color = 'green';
                            let fuente = store.state.conexiones_en_mapa[i].options.customData.alta_fuent
                            if(fuente.substring(0,13) == 'CONFORME OBRA'){fuente = "CONFORME OBRA";}
                            if(fuente.substring(0,13) == 'INGRESO POR I'){fuente = "INGRESO POR IMPORTACION";}
                            switch (fuente)
                            { 
                              case 'SISTEMA DE CONEXIONES': color = '#4c2882'; break;
                              case 'ARTEAGA': color = '#FF9700'; break;
                              case 'CONFORME OBRA': color = '#FFDC00'; break;
                              case 'DATOS RECOPILADOS DE LIBROS': color = '#A2D05C'; break;
                              case 'DATOS RECOPILADOS DEL SISTEMA UNICO DE RECLAMOS': color = '#0080FF'; break;
                              case 'INGRESO CON APLICACION DE CATASTRO': color = '#254525'; break;
                              case 'INGRESO POR IMPORTACION': color = '#A83297'; break;
                              case 'CARGA INICIAL DE SISTEMA': color = '#FF0000'; break;
                              default : color = '#ebe6df'; break;
                            }
                            store.state.conexiones_en_mapa[i].setStyle({color: color});
                        }
                        legend = L.control({position: 'topleft'});
                        legend.onAdd = function (map) {
                          var div = L.DomUtil.create('div', 'legend');
                          var html_tabla = '';
                          html_tabla += '<h4>Fuente<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                          html_tabla += '<i style="background: #4c2882"></i><span>Sistema de Conexiones</span><br>';
                          html_tabla += '<i style="background: #FF9700"></i><span>Arteaga</span><br>';
                          html_tabla += '<i style="background: #FFDC00"></i><span>Conforme obra</span><br>';
                          html_tabla += '<i style="background: #A2D05C"></i><span>Datos Libros</span><br>';
                          html_tabla += '<i style="background: #0080FF"></i><span>Datos SUR</span><br>';
                          html_tabla += '<i style="background: #254525"></i><span>Ingreso con Aplicacion</span><br>';
                          html_tabla += '<i style="background: #A83297"></i><span>Importacion</span><br>';
                          html_tabla += '<i style="background: #FF0000"></i><span>Carga inicial Sistema</span><br>';
                          div.innerHTML += html_tabla; 
                          return div;
                          };
                        legend.addTo(map);
                        var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                        boton_cerrar.addEventListener("click", function(){ legend.remove(map); });

          break;
          case 'tramite':
            for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
            {
                store.state.conexiones_en_mapa[i].options.color = 'green';
                let color = 'green';
                let tramite = store.state.conexiones_en_mapa[i].options.customData.tramite
                switch (tramite)
                { 
                  case 'Existente Inicio': color = '#FFF533'; break;
                  case 'Existente Pend Inf Tecnico': color = '#C1E528'; break;
                  case 'Existente Observado': color = '#84D51E'; break;
                  case 'Existente Estudios y Proyectos': color = '#46C513'; break;
                  case 'Existente Pend Aprob Insp': color = '#09B509'; break;
                  case 'Existente Finalizada': color = '#359F0D'; break;
                  case 'Existente Otros': color = '#618912'; break;
                  case 'Nueva Inicio': color = '#8E7317'; break;
                  case 'Nueva Pend Inf Tecnico': color = '#BA5D1C'; break;
                  case 'Nueva Observado': color = '#E74721'; break;
                  case 'Nueva Estudios y Proyectos': color = '#D64731'; break;
                  case 'Nueva Pend Aprob Insp': color = '#C54742'; break;
                  case 'Nueva en Construccion': color = '#B44853'; break;
                  case 'Nueva Finalizada': color = '#A34864'; break;
                  case 'Nueva Otros': color = '#924975'; break;
                  case 'Grup de Conexiones Inicio': color = '#814986'; break;
                  case 'Grup de Conexiones pendiente en uso': color = '#704997'; break;
                  case 'Grup de Conexiones pendiente sin uso': color = '#5F4AA8'; break;
                  case 'Grup de Conexiones Fin': color = '#4E4AB9'; break;
                  case 'Grup de Conexiones Otros': color = '#3D4BCA'; break;
                  case 'Cert no saneam': color = '#EE4234'; break;
                  case 'Otros': color = '#59594F'; break;
                  case 'Sin tramite': color = '#BCFCF6'; break;
                  default : color = '#BCFCF6'; break;
                }
                store.state.conexiones_en_mapa[i].setStyle({color: color});
            }
            legend = L.control({position: 'topleft'});
            legend.onAdd = function (map) {
              var div = L.DomUtil.create('div', 'legend');
              var html_tabla = '';
              html_tabla += '<h4>Tramite<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
              html_tabla += '<i style="background: #FFF533"></i><span>Existente Inicio</span><br>';
              html_tabla += '<i style="background: #C1E528"></i><span>Existente Pend Inf Tecnico</span><br>';
              html_tabla += '<i style="background: #84D51E"></i><span>Existente Observado</span><br>';
              html_tabla += '<i style="background: #46C513"></i><span>Existente Estudios y Proyectos</span><br>';
              html_tabla += '<i style="background: #09B509"></i><span>Existente Pend Aprob Insp/span><br>';
              html_tabla += '<i style="background: #359F0D"></i><span>Existente Finalizada</span><br>';
              html_tabla += '<i style="background: #618912"></i><span>Existente Otros</span><br>';
              html_tabla += '<i style="background: #8E7317"></i><span>Nueva Inicio</span><br>';
              html_tabla += '<i style="background: #BA5D1C"></i><span>Nueva Pend Inf Tecnico</span><br>';
              html_tabla += '<i style="background: #E74721"></i><span>Nueva Observado</span><br>';
              html_tabla += '<i style="background: #D64731"></i><span>Nueva Estudios y Proyectos</span><br>';
              html_tabla += '<i style="background: #C54742"></i><span>Nueva Pend Aprob Insp</span><br>';
              html_tabla += '<i style="background: #B44853"></i><span>Nueva en Construccion</span><br>';
              html_tabla += '<i style="background: #A34864"></i><span>Nueva Finalizada</span><br>';
              html_tabla += '<i style="background: #924975"></i><span>Nueva Otros</span><br>';
              html_tabla += '<i style="background: #814986"></i><span>Grup de Conexiones Inicio</span><br>';
              html_tabla += '<i style="background: #704997"></i><span>Grup de Conexiones pendiente en uso</span><br>';
              html_tabla += '<i style="background: #5F4AA8"></i><span>Grup de Conexiones pendiente sin uso</span><br>';
              html_tabla += '<i style="background: #4E4AB9"></i><span>Grup de Conexiones Fin</span><br>';
              html_tabla += '<i style="background: #3D4BCA"></i><span>Grup de Conexiones Otros</span><br>';
              html_tabla += '<i style="background: #EE4234"></i><span>Cert no saneam</span><br>';
              html_tabla += '<i style="background: #59594F"></i><span>Otros</span><br>';
              html_tabla += '<i style="background: #BCFCF6"></i><span>Sin tramite</span><br>';
              div.innerHTML += html_tabla; 
              return div;
              };
            legend.addTo(map);
            var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
            boton_cerrar.addEventListener("click", function(){ legend.remove(map); });
          break;
          case 'colector':
            for (var i = 0; i < store.state.colectores_en_mapa.length; i++) {
              store.state.colectores_en_mapa[i].options.color = '#B2E57A';
              let tipo = String(store.state.colectores_en_mapa[i].options.customData.tipotra).trim();
              color = '#FFFF00';
              for(var j = 0; j < store.state.adm_tipos.length; j++)
              {
                if (store.state.adm_tipos[j].codigo == tipo)
                {
                  color = store.state.adm_tipos[j].color;
                }
              }
              store.state.colectores_en_mapa[i].setStyle({ color: color });
            }
            legend = L.control({ position: 'topleft' });
            legend.onAdd = function (map) {
              var div = L.DomUtil.create('div', 'legend');
              var html_tabla = '';
              html_tabla += '<h4>Tipo<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
              for(var j = 0; j < store.state.adm_tipos.length; j++)
              {
                if (store.state.adm_tipos[j].elemento == 'cat_tramos')
                {
                  html_tabla += '<i style="background: ' + store.state.adm_tipos[j].color + '"></i><span>' + store.state.adm_tipos[j].codigo + '</span><br>';
                }
              }
              div.innerHTML += html_tabla;
              return div;
            };
            legend.addTo(map);
            var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
            boton_cerrar.addEventListener("click", function () { legend.remove(map); });
          break;
          default:
            // code block
        }
        store.state.modal_visible = '';


 
      },
      mantenimiento(tipo_mantenimiento){
        if (tipo_mantenimiento == 0)
        {
          app.limpio_mantenimiento(map);
          legend.remove(map);
          store.state.alerta = false;
          store.state.alerta_mensaje = '';
          store.state.modal_visible = '';
        }
        else
        {
          if (store.state.mantenimiento.length > 0)
          {
            app.limpio_mantenimiento(map);
            legend.remove(map);
          }
        store.state.modo_conexiones = 2;
        store.state.modal_visible = '';
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
          //consulto base de datos
          store.state.mantenimiento = [];
          let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
          const cargando_algo =  this.$buefy.loading.open({containter: null});
          var este = this;
              var fd = new FormData();
              fd.append("tipo",tipo_mantenimiento);
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/mantenimiento.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
              var data = JSON.parse(this.response);
                mensaje_espera.close();
                cargando_algo.close();
                   store.state.modo_conexiones = 2;
                   app.cargo_mantenimiento(map,data[0]);
                   let mensaje = data[1]['mensaje'];
                   store.state.alerta = true;
                   store.state.alerta_mensaje = mensaje;
                   map.setView([-34.82,-56.20],11,false);
                if (tipo_mantenimiento == 1){
                   legend = L.control({ position: 'topleft' });
                   legend.onAdd = function (map) {
                     var div = L.DomUtil.create('div', 'legend');
                     var html_tabla = '';
                     html_tabla += '<h4>Tipo<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                         html_tabla += '<i class="puntolegenda" style="background: #FE2712"></i><span>Padron cruzado</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>Padron mutado</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #ff6600"></i><span>Conexion corta</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #33cc33"></i><span>Conexion larga</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #ffff00"></i><span>Colector alejado</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #00FFFF"></i><span>Colector cero</span><br>';
                     div.innerHTML += html_tabla;
                     return div;
                   };
                   legend.addTo(map);
                   var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                   boton_cerrar.addEventListener("click", function () { legend.remove(map); });
                  }
                  if (tipo_mantenimiento == 2){
                    legend = L.control({ position: 'topleft' });
                    legend.onAdd = function (map) {
                      var div = L.DomUtil.create('div', 'legend');
                      var html_tabla = '';
                      html_tabla += '<h4>Tipo<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                          html_tabla += '<i class="puntolegenda" style="background: #FE2712"></i><span>Conexiones a Pluvial</span><br>';
                      div.innerHTML += html_tabla;
                      return div;
                    };
                    legend.addTo(map);
                    var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                    boton_cerrar.addEventListener("click", function () { legend.remove(map); });
                   }
                   if (tipo_mantenimiento == 3){
                    legend = L.control({ position: 'topleft' });
                    legend.onAdd = function (map) {
                      var div = L.DomUtil.create('div', 'legend');
                      var html_tabla = '';
                      html_tabla += '<h4>Tipo<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                          html_tabla += '<i class="puntolegenda" style="background: #FE2712"></i><span>Padron cero</span><br>';
                      div.innerHTML += html_tabla;
                      return div;
                    };
                    legend.addTo(map);
                    var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                    boton_cerrar.addEventListener("click", function () { legend.remove(map); });
                   }
                   if (tipo_mantenimiento == 4){
                    legend = L.control({ position: 'topleft' });
                    legend.onAdd = function (map) {
                      var div = L.DomUtil.create('div', 'legend');
                      var html_tabla = '';
                      html_tabla += '<h4>Tipo<span><button id="boton_cerrar_leyenda" type="button" style="float: right;background-color: transparent; border: none;outline: none">X</button> </span>  </h4>';
                          html_tabla += '<i class="puntolegenda" style="background: #FE2712"></i><span>Tarifa sin conexion</span><br>';
                          html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>Tarifa sin conexion ep</span><br>';
                          html_tabla += '<i class="puntolegenda" style="background: #ff6600"></i><span>Tarifa padron cruzado</span><br>';
                          html_tabla += '<i class="puntolegenda" style="background: #33cc33"></i><span>Conexion sin tarifa</span><br>';
                      div.innerHTML += html_tabla;
                      return div;
                    };
                    legend.addTo(map);
                    var boton_cerrar = document.getElementById("boton_cerrar_leyenda");
                    boton_cerrar.addEventListener("click", function () { legend.remove(map); });
                   }
             };
              xhr.send(fd);
            }
            else
            {
              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
            }
       }
      },
      limpiar_monitoreo(){
           app.limpio_monitoreo(map);
           legend.remove(map);
           store.state.alerta = false;
           store.state.alerta_mensaje = '';
           store.state.modal_visible = '';
      }
      ,
      monitoreo(parametro){
        if (store.state.monitoreo.length > 0)
        {
          app.limpio_monitoreo(map);
          store.state.modal_visible = '';
        }
        else
        {
        store.state.modal_visible = '';
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
          //consulto base de datos
          store.state.monitoreo = [];
          let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
          const cargando_algo =  this.$buefy.loading.open({containter: null});
          var este = this;
              var fd = new FormData();
              fd.append("tipo",parametro);
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/monitoreo.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
              var data = JSON.parse(this.response);
                mensaje_espera.close();
                cargando_algo.close();
                   app.cargo_monitoreo(map,data[0]);
                   let mensaje = data[1]['mensaje'];
                   store.state.alerta = true;
                   store.state.alerta_mensaje = mensaje;
                   map.setView([-34.82,-56.20],13,false);
             };
              xhr.send(fd);
            }
            else
            {
              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
            }
       }
      },
      ultimos_movimientos: function(){
        store.state.modal_visible = '';
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
            let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
            const cargando_algo =  this.$buefy.loading.open({containter: null});
            var este = this;
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/ultimos_movimientos.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
              var data = JSON.parse(this.response);
                mensaje_espera.close();
                cargando_algo.close();
                store.state.ultimos_movimientos = data;
                store.state.modal_visible = 'Principal_Movimientos';
             };
              xhr.send();
            }
            else
            {
              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
            }
          
            
      },
      ver_movimiento(e){
        store.state.modal_visible = '';  
        let lat = store.state.ultimos_movimientos[e].yc;
        let lon = store.state.ultimos_movimientos[e].xc;
        this.cargar_conexiones(true,'movimientos',lat,lon);
      },
      borrar_elemento_historial(e){
        var padre = this;
        let historia_texto = store.state.conexion_seleccionada.historial;
        let historia = JSON.parse(historia_texto);
        let descripcion = historia[e].descripcion;
        let clave = descripcion.substr(0,4)
        if (clave != 'SUR,' && clave != 'SIC,' && clave != 'CCON')
        {
          this.$buefy.toast.open({duration: 2000, message: 'No es posible eliminar eventos de sistema'});
        }
        else
        {
                this.$buefy.dialog.confirm({
                  message: 'Confirma eliminar elemento de historial?',
                  onConfirm: () => {
                                        let id = store.state.conexion_seleccionada.id;
                                        let elemento_borrado = JSON.stringify(historia[e]);
                                        let historia2 = [];
                                        for(let i = 0; i<historia.length; i++)
                                        {
                                          if (i != e){historia2.push(historia[i])};
                                        }
                                        let historia2_texto = JSON.stringify(historia2);
                                        store.state.conexion_seleccionada.historial = historia2_texto;
                                        for (let j = 0; j<store.state.conexiones_en_mapa.length;j++)
                                        {
                                          if (store.state.conexiones_en_mapa[j].options.customData.id == id)
                                          {
                                            store.state.conexiones_en_mapa[j].options.customData.historial = historia2_texto;
                                          }
                                        }
                                        app.chequeo_conexion();
                                        if (store.state.hayconexion == true) { // si hay conexion........................................................................
                                            padre.mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
                                            padre.cargando_algo =  this.$buefy.loading.open({containter: null});
                                          var fd = new FormData();
                                         fd.append("lat",store.state.conexion_seleccionada.lat1);
                                         fd.append("lon",store.state.conexion_seleccionada.lon1);
                                         fd.append("id",id);
                                         fd.append("elemento_borrado",elemento_borrado);
                                         fd.append("historia",historia2_texto);
                                              var getUrl = window.location;
                                              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                              var phpfile = baseUrl + '/php/eliminar_elemento_historial.php';
                                              var xhr = new XMLHttpRequest();	
                                              xhr.open('POST',phpfile,true);
                                              xhr.onload = function() {
                                                var data = JSON.parse(this.response);                                             
                                                for (let j = 0; j<store.state.conexiones_en_mapa.length;j++)
                                                {
                                                  if (store.state.conexiones_en_mapa[j].options.customData.id == id)
                                                  {
                                                    store.state.conexiones_en_mapa[j].options.customData.historial = historia2_texto;
                                                    if (data["sur"] != ''){store.state.conexiones_en_mapa[j].options.customData.sur = data["sur"];}
                                                    if (data["sic"] != ''){store.state.conexiones_en_mapa[j].options.customData.tramite = data["sic"];}
                                                    store.state.conexiones_en_mapa[j].options.customData.caudal = data["caudal"];
                                                    store.state.conexiones_en_mapa[j].options.customData.cantino = data["cantino"];
                                                    store.state.conexiones_en_mapa[j].options.customData.areaimp = data["areaimp"];
                                                    store.state.conexiones_en_mapa[j].options.customData.areaper = data["areaper"];
                                                  }
                                                }
                                                store.state.conexion_seleccionada.historial = historia2_texto;
                                                if (data["sur"] != ''){store.state.conexion_seleccionada.sur = data["sur"];}
                                                if (data["sic"] != ''){store.state.conexion_seleccionada.tramite = data["sic"]}
                                                store.state.conexion_seleccionada.caudal = data["caudal"];
                                                store.state.conexion_seleccionada.cantino = data["cantino"];
                                                store.state.conexion_seleccionada.areaimp = data["areaimp"];
                                                store.state.conexion_seleccionada.areaper = data["areaper"];
                                                padre.mensaje_espera.close();
                                                padre.cargando_algo.close();

                                             };
                                              xhr.send(fd);
                                            }
                                            else
                                            {
                                              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
                                            }
                                      },
                  onCancel: () => {
                                  }       
                })
        }
      },
      agregar_elemento_historial(){
            let padre = this;
                                        app.chequeo_conexion();
                                        if (store.state.hayconexion == true) { // si hay conexion........................................................................
                                            let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Cargando registros sin vincular......'});
                                            const cargando_algo =  this.$buefy.loading.open({containter: null});
                                          var fd = new FormData();
                                          fd.append("lat",store.state.conexion_seleccionada.lat1);
                                          fd.append("lon",store.state.conexion_seleccionada.lon1);
                                              var getUrl = window.location;
                                              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                              var phpfile = baseUrl + '/php/obtengo_perdidos.php';
                                              var xhr = new XMLHttpRequest();	
                                              xhr.open('POST',phpfile,true);
                                              xhr.onload = function() {
                                                var data = JSON.parse(this.response);
                                                mensaje_espera.close();
                                                cargando_algo.close();
                                                padre.perdidos = data;                                    
                                                store.state.modal_visible = 'Principal_Perdidos';
                                             };
                                              xhr.send(fd);
                                            }
                                            else
                                            {
                                              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
                                            }       
      },
      agregar_elemento_historial2(e){     
        let padre = this;
        let historial_array = JSON.parse(store.state.conexion_seleccionada.historial);
        if (!historial_array.includes(JSON.parse(this.perdidos[e])))
        {
        historial_array.push(JSON.parse(this.perdidos[e]));
        }
        let historial_texto = JSON.stringify(historial_array);
        let id = store.state.conexion_seleccionada.id;
        let elemento_agregado = JSON.stringify(JSON.parse(this.perdidos[e]));
        app.chequeo_conexion();
        if (store.state.hayconexion == true) { // si hay conexion........................................................................
            let mensaje_espera = this.$buefy.toast.open({indefinite:true, message: 'Consulta en proceso......'});
            const cargando_algo =  this.$buefy.loading.open({containter: null});
          var fd = new FormData();
         fd.append("id",id);
         fd.append("elemento_agregado",elemento_agregado);
         fd.append("historia",historial_texto);
              var getUrl = window.location;
              var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
              var phpfile = baseUrl + '/php/agregar_elemento_historial.php';
              var xhr = new XMLHttpRequest();	
              xhr.open('POST',phpfile,true);
              xhr.onload = function() {
                var data = JSON.parse(this.response); 
                mensaje_espera.close();
                cargando_algo.close();
                perdidos2 = [];
                for(let j = 0;j<padre.perdidos.length;j++)
                {
                  if (j != e){perdidos2.push(padre.perdidos[j])};
                }
                padre.perdidos = perdidos2;
                for (let j = 0; j<store.state.conexiones_en_mapa.length;j++)
                {
                  if (store.state.conexiones_en_mapa[j].options.customData.id == id)
                  {
                    store.state.conexiones_en_mapa[j].options.customData.historial = historial_texto;
                    if (data["sur"] != ''){store.state.conexiones_en_mapa[j].options.customData.sur = data["sur"];}
                    if (data["sic"] != ''){store.state.conexiones_en_mapa[j].options.customData.tramite = data["sic"];}
                    store.state.conexiones_en_mapa[j].options.customData.caudal = data["caudal"];
                    store.state.conexiones_en_mapa[j].options.customData.cantino = data["cantino"];
                    store.state.conexiones_en_mapa[j].options.customData.areaimp = data["areaimp"];
                    store.state.conexiones_en_mapa[j].options.customData.areaper = data["areaper"];
                  }
                }
                store.state.conexion_seleccionada.historial = historial_texto;
                if (data["sur"] != ''){store.state.conexion_seleccionada.sur = data["sur"];}
                if (data["sic"] != ''){store.state.conexion_seleccionada.tramite = data["sic"];}
                store.state.conexion_seleccionada.caudal = data["caudal"];
                store.state.conexion_seleccionada.cantino = data["cantino"];
                store.state.conexion_seleccionada.areaimp = data["areaimp"];
                store.state.conexion_seleccionada.areaper = data["areaper"];
             };
              xhr.send(fd);
            }
            else
            {
              this.$buefy.toast.open({duration: 5000, message: 'No hay conectividad para traer los datos. Espere conexión e intente nuevamente'});
            }
      },
      definir_zona_filtro_distribuido(){
        store.state.modal_visible = '';
        this.modo_zona = true;
        map.editTools.stopDrawing();
        map.editTools.commitDrawing();
        map.geom_plano = map.editTools.startPolygon();
        map.geom_plano.enableEdit();
      },
      barra_superior_aplico_zona(){//_______________________________________________________________________________________________
        var capa = map.geom_plano;
        map.geom_plano.disableEdit();
        if (map.geom_plano._latlngs[0].length > 2) {
        store.state.datos_consulta_distribuida.zona_valor = JSON.stringify(map.geom_plano._latlngs[0]);
        }
        else
        {
          store.state.datos_consulta_distribuida.zona_valor = '';
        }
        map.editTools.stopDrawing();
        if(capa){
        map.removeLayer(capa);  // Eliminar el polígono del mapa
        capa = null;              // Limpiar la referencia si ya no la necesitas
        }
        this.modo_zona = false;
        store.state.modal_visible = 'Principal_Cargar_Conexiones_Distribuidas';
      }
    },

//CARGO MAPA BASE______________________________________________________________________________________________________________________
//CARGO MAPA BASE______________________________________________________________________________________________________________________
//CARGO MAPA BASE______________________________________________________________________________________________________________________
//CARGO MAPA BASE______________________________________________________________________________________________________________________
//CARGO MAPA BASE______________________________________________________________________________________________________________________
//CARGO MAPA BASE______________________________________________________________________________________________________________________
//*************************************************************************************************************************************

  mounted: function () {
      app.obtengo_ubicacion();
      app.chequeo_conexion();
 //CARGO MAPA LEAFLET DE PAGINA//////////////////////////////////////////////////////     
        map = new L.Map('map', {
          editable: true,
          editOptions: {skipMiddleMarkers: true},
          zoomControl: false,
          measureControl: {
            enabled: true,
            unitLabel: 'm',
            unitFactor: 1
          }
      });
        map.setView([store.state.centro_mapa.latitud,store.state.centro_mapa.longitud], store.state.centro_mapa.zoom, false);
        marca_centro = L.circleMarker(map.getCenter(),{
          radius: 8.0,
          color: 'red',
          weight: 3,
          opacity: 1.0,
          fill: false
        }).addTo(map);


     CapaOSM =  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'OSM',
        maxZoom: 19
    }).addTo(map);


    var CapaIDE = L.tileLayer.wms('https://mapas.ide.uy/geoserver-raster/ortofotos/ows?SERVICE=WMS&', {
      layers: 'ORTOFOTOS_2019',
      format: 'image/png',
      version: '1.3.0',
      transparent: true,
      maxZoom: 21
  }).addTo(map);

    //var mapLink = '<a href="http://www.esri.com/">Esri</a>';
   // var wholink = 'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
        
   // var CapaESRI =   L.tileLayer(
    //'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    //attribution: '&copy; '+mapLink+', '+wholink,
   //maxZoom: 18,
   // }).addTo(map);


    var CapaGoogle = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
        maxZoom: 21,
        subdomains:['mt0','mt1','mt2','mt3']
    });


    map.on('load',function(){
      var centro = L.latLng(map.getCenter());
      store.state.centro_mapa.latitud = centro.lat;
      store.state.centro_mapa.longitud = centro.lng;
      store.state.centro_mapa.zoom = map.getZoom();
      marca_centro.setLatLng(centro);
    });


     map.on('moveend',function(){
      var centro = L.latLng(map.getCenter());
      store.state.centro_mapa.latitud = centro.lat;
      store.state.centro_mapa.longitud = centro.lng;
      store.state.centro_mapa.zoom = map.getZoom();
      marca_centro.setLatLng(centro);       
   });

/*
   map.on('click', function(e) {        

    var lat2 = e.latlng.lat;
    var lon2 = e.latlng.lng;
    var latres = lat2;
    var lonres = lon2;
    var menor_distancia = 10000;
    var conexionres = false;
    for(var i=0;i<store.state.conexiones_en_mapa.length;i++)
    {
      let conexion = store.state.conexiones_en_mapa[i];
      var lon1 = (Number(conexion.options.customData.lon1) + Number(conexion.options.customData.lon2)) / 2.0;
      var lat1 = (Number(conexion.options.customData.lat1) + Number(conexion.options.customData.lat2)) / 2.0;
      let distancia = dl_geometria.dl_distancia_metros_de_geograficas(lat1,lon1,lat2,lon2);
      if (distancia < menor_distancia)
      {
        menor_distancia = distancia;
        if (distancia < 10){
        conexionres = conexion;
        latres = lat1;
        lonres = lon1;
        }
      }
    }
    if (conexionres != false){
      console.log(conexionres);
      //var evento = e;
     // e.latlng.lat = latres;
      //e.latlng.lng = lonres;
     // map.fireEvent('click', evento);
    }
  });*/

    map.on('zoomend',function(){
        let escala = map.getZoom();
        if(escala < 14 && store.state.modo_conexiones == 0){
          app.limpio_mapa("map",0);
        }
        window.scrollTo({ top: 0, behavior: 'smooth' });
    });

   var baseLayers = {
    "Fotos IDE 2019": CapaIDE,
    "Calles OSM": CapaOSM,
    "Fotos Google": CapaGoogle
  };

  var overlays = {

  };

 var control_layers = L.control.layers(baseLayers,overlays,{
    position: 'topleft',
    collapsed: true
  }).addTo(map);

  L.control.zoom({
    position: 'topright'
}).addTo(map);

//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________
//FIN DE CARGO MAPA BASE______________________________________________________________________________________________________________________






//CARGO DATOS DE CALLES______________________________________________________________________________________________________________________________
app.chequeo_conexion();
          if (store.state.hayconexion == true) { // si hay conexion........................................................................
            //consulto base de datos
            var fd = new FormData();
                var getUrl = window.location;
                var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/cargo_calles_intersecciones.php';
                var xhr = new XMLHttpRequest();	
                xhr.open('POST',phpfile,true);
                xhr.onload = function() {
                var data = JSON.parse(this.response);
                     store.state.calles = data[0];
                     store.state.calles_cruzan = data[1];
               };
                xhr.send(fd);
              }
              else
              {
                this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
              }

//CARGO DATOS DE CALLES______________________________________________________________________________________________________________________________



    //CARGO DATOS DE CALLES______________________________________________________________________________________________________________________________
    app.chequeo_conexion();
    if (store.state.hayconexion == true) { // si hay conexion........................................................................
      //consulto base de datos
      var fd = new FormData();
      var getUrl = window.location;
      var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
      var phpfile = baseUrl + '/php/cargo_calles_intersecciones.php';
      var xhr = new XMLHttpRequest();
      xhr.open('POST', phpfile, true);
      xhr.onload = function () {
        var data = JSON.parse(this.response);
        store.state.calles = data[0];
        store.state.calles_cruzan = data[1];
      };
      xhr.send(fd);
    }
    else {
      this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
    }

    //CARGO DATOS DE CALLES______________________________________________________________________________________________________________________________
    //CARGO DATOS ADMINISTRATIVOS______________________________________________________________________________________________________________________________
    app.chequeo_conexion();
    if (store.state.hayconexion == true) { // si hay conexion........................................................................
      //consulto base de datos
      var fd = new FormData();
      var getUrl = window.location;
      var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
      var phpfile = baseUrl + '/php/cargo_datos_administrativos.php';
      var xhr = new XMLHttpRequest();
      xhr.open('POST', phpfile, true);
      xhr.onload = function () {
        var data = JSON.parse(this.response);
        store.state.adm_tipos = data[0];
        store.state.adm_clases = data[1];
        store.state.adm_contratos = data[2];
        store.state.adm_proyectos = data[3];
        store.state.padrones_sin_conexion = data[4];
      };
      xhr.send(fd);
    }
    else {
      this.$buefy.toast.open('No hay conectividad para traer los datos. Espere conexión e intente nuevamente');
    }

    //CARGO DATOS ADMINISTRATIVOS______________________________________________________________________________________________________________________________




}

  

})

    
 

 