Vue.component('dl_catastro', {
  data: function () {
    return {
      menu_en_mapa: false,
      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,
      modal_grabar_audio2: false,
      mic_estado: false,
      tipo_filtro: 'zona',
      filtro1_id: 0,
      filtro1_padron: 0,
      filtro1_servicio: 0,
      filtro1_colector: 0,
      filtro1_psingular: 0,
      filtro1_captacion: 0,
      filtro1_tgm: 0,
      filtro1_suministro: 0,
      tipo_estilo: 'Tipo',
      tipo_filtro_distribuido: 'Colectores',
      ver_ayuda: false,
      calle1: '',
      calle2: '',
      calle2_nombre: '',
      ver_diagrama1: false,
      es_terminal: false,
      colores_datos_modificados: {'tramo_longitud': '000000','tramo_pendiente': '000000','tramo_salto':'000000','psingular_salto': '000000'},
      isZoomed: false,
      zoomOrigin: "0 0",
      lista_planos: []
    }
  },
  template: /*html*/`
<div> 
<meta charset="UTF-8">
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--inicio   MENU PRINCIPAL DE CATASTRO_____________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

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

<!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111     111111111111111111111111111 -->
       <div class="hero is-fixed-top is-mobile p-0 m-0 is-warning 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-primary is-light">
                    <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-warning" ></b-button>
                  </b-tooltip>  
            </div>
            <div class="column col-6 p-0 m-1">
                  <div class="box m-0 p-0" v-if="$store.state.modo_consulta_distribuida == 1">
                      <b-tooltip label="Limpiar seleccion" position="is-right" type="is-primary is-light">
                           <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 elementos sececcionados" multilined position="is-right" type="is-warning is-light">
                        <b-button  class="m-1" size="is-medium" icon-left="microsoft-excel"  v-on:click="reporte_excel()"  type="is-warning" ></b-button>
                      </b-tooltip> 
                      <b-tooltip label="Generar kmz de Google Earth con elementos seleccionados" multilined position="is-right" type="is-warning is-light">
                       <b-button  class="m-1" size="is-medium" icon-left="google-earth" v-on:click="reporte_kml()" type="is-warning" ></b-button>
                      </b-tooltip> 
                      <b-tooltip label="Generar Shapefile de Esri con elementos seleccionados" multilined position="is-right" type="is-warning is-light">
                      <b-button  class="m-1" size="is-medium" icon-left="earth-arrow-right" v-on:click="reporte_shapefile()" type="is-warning" ></b-button>
                     </b-tooltip> 
                      <b-field class="box m-1 p-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-warning">
                                  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-warning">
                                  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="buttons end-xs">
            <b-tooltip label="Estilizar" position="is-bottom" type="is-primary is-light">
              <b-button style="width:60px" class = "m-1 p-1 mt-4" v-if="$store.state.tramos_en_mapa.length > 0" rounded icon-left="brush"   type="is-warning" inverted  v-on:click="$store.state.modal_visible = 'Principal_Estilos_Tematicos'"></b-button>
            </b-tooltip> 
            <b-tooltip label="Ultimos movimientos"  position="is-left" type="is-primary is-light">
              <b-button  style="width:50px" class = "m-1 p-1 mt-4" icon-left="format-list-bulleted-square" v-on:click="ultimos_movimientos()"  rounded type="is-warning" inverted ></b-button>
            </b-tooltip> 
        </div>




            <div class="column col-1 p-2 m-2 end-xs is-warning" style="width:100px">
                  <div class="row end-xs">
                    <b-tooltip multilined position="is-left" type="is-primary is-light">
                    <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 class="column" id="map" style="z-index:0"></div>

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MENU 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_Colectores'" type="is-warning" rounded  icon-left="map-marker"  style="width:200px">
                  Red Zona
                </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" >
            <b-button  v-on:click="abro_modal_distribuida_tipo_elemento()" type="is-warning" rounded  icon-left="filter"  style="width:200px">
              Red 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="$store.state.modal_visible = 'Modal_Nuevo_Elemento_Red'" type="is-warning" rounded  icon-left="vector-polyline-plus"  style="width:200px">
              Nuevo elemento Red
            </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="$store.state.modal_visible = 'Modal_Ayudas'" type="is-warning" rounded  icon-left="lifebuoy"  style="width:200px">
              Ayudas
            </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-warning" 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-warning" rounded  icon-left="map-marker"  style="width:200px">
              Red 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>


<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--inicio   FILTROS____________________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE FILTROS LOCALIZADOS --> 

        <b-modal :active.sync="$store.state.modal_visible == 'Principal_Cargar_Colectores'"

        has-modal-card
        trap-focus
        :destroy-on-hide="false"
        aria-role="dialog"
        aria-modal>

        <form action="" v-on:submit.prevent="cargar_colectores(true,'normal',0,0)">
        <div class="modal-card m-1 p-1" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">Filtrar Colectores</p>
            </header>
            <section class="modal-card-body">

            <div class="columns is-gapless m-1 p-1">
              <div class="column">
            
                            
                          <b-radio class="row box  is-full m-3 p-3 pl-2" v-model="tipo_filtro" native-value="zona" type="is-success" :style="{ backgroundColor: '#D1F0E5', height: '50px', width: '150px'}">Zona</b-radio>

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


                              

                              <div class="column box m-1 p-1 ">
                              <b-radio v-model="tipo_filtro" native-value="colector" type="is-warning" 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 box m-1 p-1">
                              <b-radio v-model="tipo_filtro" native-value="psingular" type="is-warning" class="column is-half">PSingular</b-radio>
                              <b-input  v-model.number v-if="tipo_filtro == 'psingular'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_psingular" maxlength="10"></b-input>
                              </div>
                                          
                              <div class="column box m-1 p-1 ">
                              
                              <b-radio v-model="tipo_filtro" native-value="captacion" type="is-warning" class="column is-half">Captación</b-radio>
                              <b-input v-if="tipo_filtro == 'captacion'" class="column m-0 p-0 " position="is-right" placeholder=""  v-model="filtro1_captacion" maxlength="15"></b-input>
                              
                              </div>


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

                           

                      <div class="column box m-1 p-1 ">
                      <b-radio v-model="tipo_filtro" native-value="calles" type="is-warning" class="column is-full">Calles</b-radio>
                      

                              <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> 


                              <div class="column box m-1 p-1 ">
                                  <b-radio v-model="tipo_filtro" native-value="padron" type="is-warning" class="column 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 box  m-1 p-1 " v-if="false">
                                <b-radio v-model="tipo_filtro" native-value="servicio" type="is-warning" 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 box m-1 p-1 " 
                                <div class="column box  m-1 p-1 " v-if="false">
                                <b-radio v-model="tipo_filtro" native-value="tgm" type="is-warning" 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 box m-1 p-1 " v-if="false">
                                <b-radio v-model="tipo_filtro" native-value="suministro" type="is-warning" 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> 
                        
              </div>
          </div>
            </section>
            <footer class="modal-card-foot">
                <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
                <b-button  @click="cargar_colectores(true,'normal',0,0)" type="is-danger" icon-left="cloud-upload">
                  Cargar
                </b-button>
            </footer>
        </div>
        </form>
        </b-modal>


<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1A1AA1  MODAL SELECCIÓN TIPO FILTRO DISTRIBUIDO --> 

<b-modal :active.sync="$store.state.modal_visible == 'Modal_Distribuida_Tipo_Elemento'"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-modal>
<form action="">
<div class="modal-card m-1 p-1" style="width: auto">
    <header class="modal-card-head">
        <p class="modal-card-title">Tipo de elemento</p>
    </header>
    <section class="modal-card-body">
      <div class="column col-xs middle-xs center-xs">	
                      <b-radio class="row center-xs middle-xs" v-model="tipo_filtro_distribuido" native-value="Colectores" type="is-warning">Colectores</b-radio>
                      <b-radio class="row center-xs middle-xs" v-model="tipo_filtro_distribuido" native-value="PSingulares" type="is-warning">PSingulares</b-radio>
                      <b-radio class="row center-xs middle-xs" v-model="tipo_filtro_distribuido" native-value="Captaciones" type="is-warning">Captaciones</b-radio>                
      </div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
        <b-button  @click="$store.state.modal_visible = 'Principal_Cargar_Colectores_Distribuidos'" type="is-danger" icon-left="cloud-upload">
          Cargar
        </b-button>
    </footer>
</div>
</form>
</b-modal>


<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222221MODAL DE FILTROS DISTRIBUIDOS --> 

          <b-modal :active.sync="$store.state.modal_visible == 'Principal_Cargar_Colectores_Distribuidos'" 
          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">



              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN COLECTORES_______________________-->
              <div v-if = "tipo_filtro_distribuido == 'Colectores'">
                            <div class="columns is-desktop m-1 p-1">
                                      <div class="column">
                                                <div class="box">
                                                      <b-icon  icon="filter" type="is-warning"></b-icon>
                                                      <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.ccz"  
                                                      type="is-warning">
                                                          CCZ
                                                      </b-switch>
                                                      <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.ccz == true">
                                                                  <b-select  v-model="$store.state.datos_consulta_distribuida_colectores.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 class="column">
                                                  <div class="box">
                                                          <b-icon  icon="filter" type="is-warning"></b-icon>
                                                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.calle"  
                                                                type="is-warning">
                                                                    Calle
                                                                </b-switch>
                                                                <div v-if="$store.state.datos_consulta_distribuida_colectores.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-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.etapa"  
                                                          type="is-warning">
                                                              Etapa
                                                          </b-switch>
                                                          <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.etapa == true">
                                                                      <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.etapa_valor" placeholder="Sin asignar">
                                                                      <option value = "A Construir">A Construir</option>
                                                                      <option value = "En Construccion">En Construccion</option>
                                                                      <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
                                                                      <option value = "Construido con Recepcion">Construido con Recepcion</option>
                                                                      <option value = "Construido Habilitado">Construido Habilitado</option>
                                                                      <option value = "Construido en Desuso">Construido en Desuso</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-warning"></b-icon>
                                                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.accion"  
                                                                        type="is-warning">
                                                                            Accion
                                                                        </b-switch>  
                                                                        <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.accion == true">
                                                                        <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.accion_valor" placeholder="Sin intervencion adicional">
                                                                        <option value = "Sin intervencion adicional">Sin intervencion adicional</option>
                                                                        <option value = "Intervencion en breve">Intervencion en breve</option>
                                                                        <option value = "Intervencion urgente">Intervencion urgente</option>  
                                                                        </b-select>
                                                              </div>                
                                                  </div>
                                      </div>






                                      <div class="column">
                                          <div class="box">
                                                  <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.material"  
                                                  type="is-warning">
                                                      Material
                                                  </b-switch>  
                                                  <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.material == true">
                                                        <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.material_valor" placeholder="Sin asignar">
                                                        <option value = "PVC">PVC</option>
                                                        <option value = "Hormigon">Hormigon</option>
                                                        <option value = "Hierro">Hierro</option>
                                                        <option value = "PPL">PPL</option>
                                                        <option value = "PEAD">PEAD</option>
                                                        <option value = "PRFV">PRFV</option>
                                                        <option value = "Gres">Gres</option>
                                                        <option value = "Fundicion">Fundicion</option>
                                                        <option value = "Sin asignar">Sin asignar</option>  
                                                        </b-select>
                                                  </div>                
                                           </div>
                                      </div>


                                      



                                      <div class="column">
                                            <div class="box">
                                                    <b-icon  icon="filter" type="is-warning"></b-icon>
                                                    <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.tipo_seccion"  
                                                    type="is-warning">
                                                        Tipo Seccion
                                                    </b-switch>  
                                                    <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.tipo_seccion == true">
                                                          <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.tipo_seccion_valor" placeholder="Sin asignar">
                                                              <option                 
                                                              v-for="tipo in datos_tramos_tipos_seccion"
                                                              :value="tipo.codigo"
                                                              :key="tipo.id">
                                                              {{ tipo.codigo }}
                                                              </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-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.tipo_tramo"  
                                                  type="is-warning">
                                                      Tipo Tramo
                                                  </b-switch>  
                                                  <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.tipo_tramo == true">
                                                        <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.tipo_tramo_valor" placeholder="Sin asignar">
                                                            <option                 
                                                            v-for="tipo in datos_tramos_tipos_tramo"
                                                            :value="tipo.codigo"
                                                            :key="tipo.id">
                                                            {{ tipo.codigo }}
                                                            </option>
                                                        </b-select>
                                                  </div>                
                                          </div>
                                      </div>



                                      <div class="column">
                                                  <div class="box">
                                                          <b-icon  icon="filter" type="is-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.dim1" type="is-warning">
                                                              Ancho
                                                          </b-switch>
                                                          <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.dim1 == true">
                                                                    <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.dim1_valor" placeholder="0.15">
                                                                    <option value = "Menor de 0.15">Menor de 0.15</option>
                                                                    <option value = "Mayor igual a 0.15 y menor a 0.20">Mayor igual a 0.15 y menor a 0.20</option>
                                                                    <option value = "Mayor igual a 0.20 y menor a 0.25">Mayor igual a 0.20 y menor a 0.25</option>
                                                                    <option value = "Mayor igual a 0.25 y menor a 0.30">Mayor igual a 0.25 y menor a 0.30</option>
                                                                    <option value = "Mayor igual a 0.30 y menor a 0.35">Mayor igual a 0.30 y menor a 0.35</option>
                                                                    <option value = "Mayor igual a 0.35 y menor a 0.40">Mayor igual a 0.35 y menor a 0.40</option>
                                                                    <option value = "Mayor igual a 0.40 y menor a 0.45">Mayor igual a 0.40 y menor a 0.45</option>
                                                                    <option value = "Mayor igual a 0.50 y menor a 0.80">Mayor igual a 0.50 y menor a 0.80</option>
                                                                    <option value = "Mayor igual a 0.80 y menor a 1.00">Mayor igual a 0.80 y menor a 1.00</option>
                                                                    <option value = "Mayor igual a 1.00 y menor a 1.20">Mayor igual a 1.00 y menor a 1.20</option>
                                                                    <option value = "Mayor igual a 1.20">Mayor igual a 1.20</option>
                                                                    </b-select>
                                                          </div>            
                                                  </div>
                                      </div>


                                      <div class="column">
                                          <div class="box">
                                                  <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.dim2"  
                                                  type="is-warning">
                                                      Alto
                                                  </b-switch>
                                                  <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.dim2 == true">
                                                  <b-select    v-model="$store.state.datos_consulta_distribuida_colectores.dim2_valor" placeholder="0.15">
                                                  <option value = "Menor de 0.15">Menor de 0.15</option>
                                                  <option value = "Mayor igual a 0.15 y menor a 0.20">Mayor igual a 0.15 y menor a 0.20</option>
                                                  <option value = "Mayor igual a 0.20 y menor a 0.25">Mayor igual a 0.20 y menor a 0.25</option>
                                                  <option value = "Mayor igual a 0.25 y menor a 0.30">Mayor igual a 0.25 y menor a 0.30</option>
                                                  <option value = "Mayor igual a 0.30 y menor a 0.35">Mayor igual a 0.30 y menor a 0.35</option>
                                                  <option value = "Mayor igual a 0.35 y menor a 0.40">Mayor igual a 0.35 y menor a 0.40</option>
                                                  <option value = "Mayor igual a 0.40 y menor a 0.45">Mayor igual a 0.40 y menor a 0.45</option>
                                                  <option value = "Mayor igual a 0.50 y menor a 0.80">Mayor igual a 0.50 y menor a 0.80</option>
                                                  <option value = "Mayor igual a 0.80 y menor a 1.00">Mayor igual a 0.80 y menor a 1.00</option>
                                                  <option value = "Mayor igual a 1.00 y menor a 1.20">Mayor igual a 1.00 y menor a 1.20</option>
                                                  <option value = "Mayor igual a 1.20">Mayor igual a 1.20</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-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.avalidar"  
                                                          type="is-warning">
                                                              A Validar
                                                          </b-switch>
                                                    </div>
                                          </div>
                                          <div class="column">
                                            <div class="box">
                                                  <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.habilitado"  
                                                  type="is-warning">
                                                      Habilitados
                                                  </b-switch>
                                            </div>
                                          </div>
                                          <div class="column">
                                            <div class="box">
                                                  <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.publicado"  
                                                  type="is-warning">
                                                      Publicados
                                                  </b-switch>
                                            </div>
                                          </div>
                                          <div class="column">
                                            <div class="box">
                                                  <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.fueraservicio"  
                                                  type="is-warning">
                                                      Fuera Servicio
                                                  </b-switch>
                                            </div>
                                          </div>
                                </div>        




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

                                      
                                      <div class="column">
                                                    <div class="box">
                                                    <b-icon  icon="filter" type="is-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_colectores.fecha"  
                                                          type="is-warning">
                                                              Fecha
                                                          </b-switch>
                                                          <div class="columns  p-1 m-1" v-if="$store.state.datos_consulta_distribuida_colectores.fecha == true">
                                                                    <b-field class="field column p-1 m-1" label="Fecha desde" >
                                                                    <b-datepicker v-model="$store.state.datos_consulta_distribuida_colectores.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_colectores.fecha2_valor"
                                                                      placeholder="Seleccionar fecha hasta"
                                                                      icon="calendar-today"
                                                                      trap-focus
                                                                      inline >
                                                                    </b-datepicker>
                                                                    </b-field> 
                                                          </div>                 
                                                      </div>
                                    </div>     
                      </div>
              </div>
              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN COLECTORES_______________________-->



              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN PUNTOS SIGULARES_______________________-->
              <div v-if = "tipo_filtro_distribuido == 'PSingulares'">
              <div class="columns is-desktop m-1 p-1">
                        <div class="column">
                                  <div class="box">
                                        <b-icon  icon="filter" type="is-warning"></b-icon>
                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.ccz"  
                                        type="is-warning">
                                            CCZ
                                        </b-switch>
                                        <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.ccz == true">
                                                    <b-select  v-model="$store.state.datos_consulta_distribuida_psingulares.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 class="column">
                                    <div class="box">
                                            <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.calle"  
                                                  type="is-warning">
                                                      Calle
                                                  </b-switch>
                                                  <div v-if="$store.state.datos_consulta_distribuida_psingulares.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-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.etapa"  
                                            type="is-warning">
                                                Etapa
                                            </b-switch>
                                            <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.etapa == true">
                                                        <b-select    v-model="$store.state.datos_consulta_distribuida_psingulares.etapa_valor" placeholder="Sin asignar">
                                                        <option value = "A Construir">A Construir</option>
                                                        <option value = "En Construccion">En Construccion</option>
                                                        <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
                                                        <option value = "Construido con Recepcion">Construido con Recepcion</option>
                                                        <option value = "Construido Habilitado">Construido Habilitado</option>
                                                        <option value = "Construido en Desuso">Construido en Desuso</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-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.accion"  
                                                          type="is-warning">
                                                              Accion
                                                          </b-switch>  
                                                          <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.accion == true">
                                                          <b-select    v-model="$store.state.datos_consulta_distribuida_psingulares.accion_valor" placeholder="Sin intervencion adicional">
                                                          <option value = "Sin intervencion adicional">Sin intervencion adicional</option>
                                                          <option value = "Intervencion en breve">Intervencion en breve</option>
                                                          <option value = "Intervencion urgente">Intervencion urgente</option>  
                                                          </b-select>
                                                </div>                
                                    </div>
                        </div>




                        <div class="column">
                              <div class="box">
                                      <b-icon  icon="filter" type="is-warning"></b-icon>
                                      <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.tipo"  
                                      type="is-warning">
                                          Tipo 
                                      </b-switch>  
                                      <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.tipo == true">
                                            <b-select    v-model="$store.state.datos_consulta_distribuida_psingulares.tipo_valor" placeholder="Sin asignar">
                                                <option                 
                                                v-for="tipo in datos_psingular_tipos"
                                                :value="tipo.codigo"
                                                :key="tipo.id">
                                                {{ tipo.codigo }}
                                                </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-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.profundidad" type="is-warning">
                                                Profundidad
                                            </b-switch>
                                            <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.profundidad == true">
                                                      <b-select    v-model="$store.state.datos_consulta_distribuida_psingulares.profundidad_valor" placeholder="2.00">
                                                      <option value = "Menos de 1">Menos de 1</option>
                                                      <option value = "Mayor igual a 1 y menor a 2">Mayor igual a 1 y menor a 2</option>
                                                      <option value = "Mayor igual a 2 y menor a 3">Mayor igual a 2 y menor a 3</option>
                                                      <option value = "Mayor igual a 3 y menor a 4">Mayor igual a 3 y menor a 4</option>
                                                      <option value = "Mayor de 4">Mayor de 4</option>
                                                      </b-select>
                                            </div>            
                                    </div>
                        </div>


                        <div class="column">
                            <div class="box">
                                    <b-icon  icon="filter" type="is-warning"></b-icon>
                                    <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.salto"  
                                    type="is-warning">
                                        Salto
                                    </b-switch>
                                    <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.salto == true">
                                    <b-select    v-model="$store.state.datos_consulta_distribuida_psingulares.salto_valor" placeholder="0.15">
                                    <option value = "Menos de 0.25">Menos de 0.25</option>
                                    <option value = "Mayor igual a 0.25 y menor a 0.50">Mayor igual a 0.25 y menor a 0.50</option>
                                    <option value = "Mayor igual a 0.50 y menor a 0.75">Mayor igual a 0.50 y menor a 0.75</option>
                                    <option value = "Mayor igual a 0.75 y menor a 1.00">Mayor igual a 0.75 y menor a 1.00</option>
                                    <option value = "Mayor de 1.00">Mayor de 1.00</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-warning"></b-icon>
                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.avalidar"  
                                        type="is-warning">
                                            A Validar
                                        </b-switch>
                                  </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.habilitado"  
                                type="is-warning">
                                    Habilitados
                                </b-switch>
                          </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.publicado"  
                                type="is-warning">
                                    Publicados
                                </b-switch>
                          </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.fueraservicio"  
                                type="is-warning">
                                    Fuera Servicio
                                </b-switch>
                          </div>
                        </div>
              </div>  





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

                        
                        <div class="column">
                                      <div class="box">
                                      <b-icon  icon="filter" type="is-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_psingulares.fecha"  
                                            type="is-warning">
                                                Fecha
                                            </b-switch>
                                            <div class="columns  p-1 m-1" v-if="$store.state.datos_consulta_distribuida_psingulares.fecha == true">
                                                      <b-field class="field column p-1 m-1" label="Fecha desde" >
                                                      <b-datepicker v-model="$store.state.datos_consulta_distribuida_psingulares.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_psingulares.fecha2_valor"
                                                        placeholder="Seleccionar fecha hasta"
                                                        icon="calendar-today"
                                                        trap-focus
                                                        inline >
                                                      </b-datepicker>
                                                      </b-field> 
                                            </div>                 
                                        </div>
                      </div>     
              </div>
              </div>
              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN PSINGULARES_______________________-->





              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN CAPTACIONES_______________________-->
              <div v-if = "tipo_filtro_distribuido == 'Captaciones'">
              <div class="columns is-desktop m-1 p-1">
                        <div class="column">
                                  <div class="box">
                                        <b-icon  icon="filter" type="is-warning"></b-icon>
                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.ccz"  
                                        type="is-warning">
                                            CCZ
                                        </b-switch>
                                        <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.ccz == true">
                                                    <b-select  v-model="$store.state.datos_consulta_distribuida_captaciones.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 class="column">
                                    <div class="box">
                                            <b-icon  icon="filter" type="is-warning"></b-icon>
                                                  <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.calle"  
                                                  type="is-warning">
                                                      Calle
                                                  </b-switch>
                                                  <div v-if="$store.state.datos_consulta_distribuida_captaciones.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-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.etapa"  
                                            type="is-warning">
                                                Etapa
                                            </b-switch>
                                            <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.etapa == true">
                                                        <b-select    v-model="$store.state.datos_consulta_distribuida_captaciones.etapa_valor" placeholder="Sin asignar">
                                                        <option value = "A Construir">A Construir</option>
                                                        <option value = "En Construccion">En Construccion</option>
                                                        <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
                                                        <option value = "Construido con Recepcion">Construido con Recepcion</option>
                                                        <option value = "Construido Habilitado">Construido Habilitado</option>
                                                        <option value = "Construido en Desuso">Construido en Desuso</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-warning"></b-icon>
                                                          <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.estado"  
                                                          type="is-warning">
                                                              Estado
                                                          </b-switch>  
                                                          <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.estado == true">
                                                          <b-select    v-model="$store.state.datos_consulta_distribuida_captaciones.estado_valor" placeholder="Sin determinar">
                                                          <option value = "Operativa">Operativa</option>
                                                          <option value = "Operativa a Limpiar">Operativa a Limpiar</option>
                                                          <option value = "Operativa a Reparar">Operativa a Reparar</option>
                                                          <option value = "Operativa a Reparar y Limpiar">Operativa a Reparar y Limpiar</option> 
                                                          <option value = "No Operativa">No Operativa</option>
                                                          <option value = "No Operativa por Limpieza">No Operativa por Limpieza</option>
                                                          <option value = "No Operativa por Rotura">No Operativa por Rotura</option>
                                                          <option value = "No Operativa por Limpieza y Rotura">No Operativa por Limpieza y Rotura</option>    
                                                          <option value = "Sin acceso">Sin acceso</option>    
                                                          <option value = "No encontrada">No encontrada</option>  
                                                          <option value = "Sin determinar">Sin determinar</option>  
                                                          </b-select>
                                                </div>                
                                    </div>
                        </div>

                        <div class="column">
                              <div class="box">
                                      <b-icon  icon="filter" type="is-warning"></b-icon>
                                      <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.tipo"  
                                      type="is-warning">
                                          Tipo 
                                      </b-switch>  
                                      <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.tipo == true">
                                            <b-select    v-model="$store.state.datos_consulta_distribuida_captaciones.tipo_valor" placeholder="Sin asignar">
                                                <option                 
                                                v-for="tipo in datos_captacion_tipos"
                                                :value="tipo.codigo"
                                                :key="tipo.id">
                                                {{ tipo.codigo }}
                                                </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-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.dimension" type="is-warning">
                                                Dimension
                                            </b-switch>
                                            <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.dimension == true">
                                                      <b-select    v-model="$store.state.datos_consulta_distribuida_captaciones.dimension_valor" placeholder="Menos de 1">
                                                      <option value = "Menos de 1">Menos de 1</option>
                                                      <option value = "Mayor igual a 1 y menor a 2">Mayor igual a 1 y menor a 2</option>
                                                      <option value = "Mayor igual a 2 y menor a 3">Mayor igual a 2 y menor a 3</option>
                                                      <option value = "Mayor igual a 3 y menor a 4">Mayor igual a 3 y menor a 4</option>
                                                      <option value = "Mayor de 4">Mayor de 4</option>
                                                      </b-select>
                                            </div>            
                                    </div>
                        </div>


                        <div class="column">
                            <div class="box">
                                    <b-icon  icon="filter" type="is-warning"></b-icon>
                                    <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.bocas"  
                                    type="is-warning">
                                        Bocas
                                    </b-switch>
                                    <div class="column is-full-mobile p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.bocas == true">
                                    <b-select    v-model="$store.state.datos_consulta_distribuida_captaciones.bocas_valor" placeholder="1">
                                    <option value = "1">1</option>
                                    <option value = "2">2</option>
                                    <option value = "3">3</option>
                                    <option value = "4">4</option>
                                    <option value = "Mas de 4">Mas de 4</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-warning"></b-icon>
                                        <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.avalidar"  
                                        type="is-warning">
                                            A Validar
                                        </b-switch>
                                  </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.habilitado"  
                                type="is-warning">
                                    Habilitados
                                </b-switch>
                          </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.publicado"  
                                type="is-warning">
                                    Publicados
                                </b-switch>
                          </div>
                        </div>
                        <div class="column">
                          <div class="box">
                                <b-icon  icon="filter" type="is-warning"></b-icon>
                                <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.fueraservicio"  
                                type="is-warning">
                                    Fuera Servicio
                                </b-switch>
                          </div>
                        </div>
              </div>  


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

                        
                        <div class="column">
                                      <div class="box">
                                      <b-icon  icon="filter" type="is-warning"></b-icon>
                                            <b-switch :value="true" v-model="$store.state.datos_consulta_distribuida_captaciones.fecha"  
                                            type="is-warning">
                                                Fecha
                                            </b-switch>
                                            <div class="columns  p-1 m-1" v-if="$store.state.datos_consulta_distribuida_captaciones.fecha == true">
                                                      <b-field class="field column p-1 m-1" label="Fecha desde" >
                                                      <b-datepicker v-model="$store.state.datos_consulta_distribuida_captaciones.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_captaciones.fecha2_valor"
                                                        placeholder="Seleccionar fecha hasta"
                                                        icon="calendar-today"
                                                        trap-focus
                                                        inline >
                                                      </b-datepicker>
                                                      </b-field> 
                                            </div>                 
                                        </div>
                      </div>     
              </div>
              </div>
              <!-- TODA ESTA SECCION ES SOLAMENTE PARA EL CASO DE FILTROS EN CAPTACINES_______________________-->





              </section>

              <footer class="modal-card-foot">
                  <button class="button" type="button" @click="$store.state.modal_visible = ''">Cerrar</button>
                  <b-button  @click="cargar_colectores2()" type="is-danger" icon-left="cloud-upload">
                    Cargar
                  </b-button>
              </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"  style="width:200px">
        Datos Tramos
    </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"  style="width:200px">
        Datos Psingulares
    </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">
        Datos Captaciones
    </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>



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



<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MENU MODAL NUEVO ELEMENTO DE RED -->
        <b-modal :active.sync="$store.state.modal_visible == 'Modal_Nuevo_Elemento_Red'"
        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">Nuevo Elemento Red</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="nuevo_tramo()" type="is-warning" rounded  icon-left="vector-polyline-plus"  style="width:200px">
                  Tramo
                </b-button>
            </div>
            <div class="row center-xs middle-xs m-2" >
            <b-button  v-on:click="nuevo_psingular()" type="is-warning" rounded  icon-left="map-marker-plus"  style="width:200px">
                Punto Singular
            </b-button>
            </div>
            <div class="row center-xs middle-xs m-2">
            <b-button  v-on:click="nueva_captacion()" type="is-warning" rounded  icon-left="map-marker-plus-outline"  style="width:200px">
                Captación
            </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>



<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a33aa3a3a3a3a3a3a3a3a3a3MENU MODAL AYUDAS -->
<b-modal :active.sync="$store.state.modal_visible == 'Modal_Ayudas'"
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">Ayudas</p>
    </header>
    <section class="modal-card-body">
    <div class="column col-xs middle-xs center-xs">	
    <div class="row center-xs middle-xs">

                  <b-field class="file is-warning is-full" >
                      <b-upload v-model="geotif" class="file-label" rounded >
                          <span class="file-cta">
                              <b-icon class="file-icon" icon="upload"></b-icon>
                              <span class="file-label">Cargar GeoTif</span>
                          </span>
                      </b-upload>
                  </b-field>

    </div>

    <div class="row center-xs middle-xs m-2" >
    <b-button v-on:click="$store.state.modal_visible = 'Modal_Ayuda_Coordenadas'"  type="is-warning" rounded  icon-left="map-marker-plus"  style="width:200px">
        Ayuda Coordenadas
    </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 = 'Catastro_Principal'" type='is-danger' icon-right="backburger" >
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>


<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a3a33aa3a3a3a3a3a3a3a3a3a3MENU MODAL AYUDA COORDENADAS -->
<b-modal :active.sync="$store.state.modal_visible == 'Modal_Ayuda_Coordenadas'"
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">Ayuda Coordenadas</p>
    </header>
    <section class="modal-card-body">
    <div class="box columns is-full-mobile  p-1 m-1">
                <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Este:" horizontal style="width:200px">
                    <b-input placeholder="Este:" v-model="ayudas_marca_x" maxlength="10"></b-input>
                </b-field>
                <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Norte:" horizontal style="width:200px">
                  <b-input placeholder="Norte:" v-model="ayudas_marca_y" maxlength="10"></b-input>
                </b-field>
                <b-tooltip label="Crear marca en mapa" multilined position="is-left" type="is-primary is-light">
                <b-button class="column  is-1  p-1 m-1" @click="crear_marca_ayuda()" type="is-warning" rounded icon-left="map-marker-circle" style="width:40px"></b-button>
                </b-tooltip>
    </div>

                <div class="row center-xs middle-xs m-2" >
                <b-button  @click="limpiar_marcas_ayuda()" type='is-success' icon-right="broom" >
                  Limpiar marcas de ayuda
                </b-button>
                </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>



<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--inicio   SECCION TRAMOS_____________________________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE EVENTO DE SELECCION DE UN TRAMO -->   
        <b-modal :active.sync="$store.state.modal_visible == 'Evento_Seleccion_Tramo'"
        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">Tramo {{$store.state.tramo_seleccionado.id_tramo}}</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_tramo" type="is-warning" 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_Tramo'" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
                  Modificar
                </b-button>
            </div>
            <div class="row center-xs middle-xs  m-2" v-if="false">
            <b-button  v-on:click= "$store.state.modal_visible = ''" type="is-info" rounded  icon-left="magnify"  style="width:200px">
                  Inspeccionar
            </b-button>
            </div>
            <div class="row center-xs middle-xs  m-2" v-if="false">
            <b-button  v-on:click= "$store.state.modal_visible = ''" type="is-info" rounded  icon-left="eye-check-outline"  style="width:200px">
                  Ver Inspecciones
            </b-button>
            </div>
            <div class="row center-xs middle-xs  m-2" v-if="$store.state.datos_login.nivel_acceso > 19 && $store.state.tramo_seleccionado.dato3 == 1">
            <b-button  v-on:click= "validar_elemento(1)" type="is-success" rounded  icon-left="eye-check-outline"  style="width:200px">
                  Validar Tramo
            </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_tramo()"  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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL DE VER DATOS Y MEDIA DE TRAMO -->  
        <b-modal :active.sync="$store.state.modal_visible == 'Ver_Datos_y_Media_Tramo'" :can-cancel="['esc', 'click', 'close']"  class="draggable-modal"
        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">Tramo {{$store.state.tramo_seleccionado.id_tramo}}</p>
            </header>
            <section class="modal-card-body">
              <div class="column col-xs middle-xs center-xs">	
                  <b-button class="m-1 p-1" style="height:55px" @click="ver_datos = !ver_datos" expanded type="is-warning" :icon-right="ver_datos ? 'upload' : 'download'" >
                    <strong>{{ver_datos ? 'Cerrar datos de tramo' : 'Ver datos de tramo'}}</strong>
                  </b-button>
                  <div class="column m-1 p-1" v-if="ver_datos">
                        <p v-if= "datos_tramo_provisorio == 1"  class="box column is-full-mobile p-3 m-0"><strong><span style="color: red">Provisorio</span></strong></p> 




                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Tipo Sección:</span></strong> {{datos_tramo_tiposec}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Tipo Tramo:</span></strong> {{datos_tramo_tipotra}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Material:</span></strong> {{$store.state.tramo_seleccionado.material}}</p> 
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Contrato:</span></strong> {{datos_tramo_contrato}} - {{$store.state.contrato_activo.nombre}} </p> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Proyecto:</span></strong> {{datos_tramo_proyecto}} - {{$store.state.proyecto_activo.nombre}}</p>                                                            
                        </div> 
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Dimensiones:</span></strong> {{datos_tramo_dimensiones}}</p> 
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1">                         
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">IdPSAa:</span></strong> {{$store.state.tramo_seleccionado.id_psig_aa}}</p>                         
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">IdPSAb:</span></strong> {{$store.state.tramo_seleccionado.id_psig_ab}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Zaa:</span></strong> {{$store.state.tramo_seleccionado.zarriba}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Zab:</span></strong> {{$store.state.tramo_seleccionado.zabajo}}</p>
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Material:</span></strong> {{$store.state.tramo_seleccionado.material}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Z Tapa aa:</span></strong> {{$store.state.tramo_seleccionado.z_tapa_aa}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Z Tapa ab:</span></strong> {{$store.state.tramo_seleccionado.z_tapa_ab}}</p> 
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Prof aa:</span></strong> {{$store.state.tramo_seleccionado.prof_aa}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Prof ab:</span></strong> {{$store.state.tramo_seleccionado.prof_ab}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Pendiente:</span></strong> {{$store.state.tramo_seleccionado.pendiente}}</p> 
                        </div> 
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.tramo_seleccionado.habilitado != ''"><strong><span style="color: #588585">Habilitado: </span></strong> {{$store.state.tramo_seleccionado.habilitado.substring(0,10)}}</p> 
                              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.tramo_seleccionado.publicado != ''"><strong><span style="color: #588585">Publicado: </span></strong> {{$store.state.tramo_seleccionado.publicado.substring(0,10)}}</p> 
                              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.tramo_seleccionado.fueraservicio != ''"><strong><span style="color: #588585">Fuera Servicio: </span></strong> {{$store.state.tramo_seleccionado.fueraservicio.substring(0,10)}}</p> 
                        </div> 
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Alta Fecha:</span></strong> {{$store.state.tramo_seleccionado.alta_fecha.substring(0,10)}} </p> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Fuente:</span></strong> {{$store.state.tramo_seleccionado.alta_fuente}}</p> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Propietario:</span></strong> {{$store.state.tramo_seleccionado.dato1}}</p> 
                              <p class="box column is-full-mobile p-3 m-1" v-if="$store.state.tramo_seleccionado.dato4 != 0"><strong><span style="color: #588585">Año Constr:</span></strong> {{$store.state.tramo_seleccionado.dato4}}</p> 
                        </div>
                        <div class="columns is-full-mobile  p-0 m-1">
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Longitud:</span></strong>
                               <span :style="{color: '#' + colores_datos_modificados.tramo_longitud}">{{$store.state.tramo_seleccionado.longitud}}</span></p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Etapa:</span></strong> {{$store.state.tramo_seleccionado.etapa}} </p>
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Accion:</span></strong> {{$store.state.tramo_seleccionado.accion}}  </p>      
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Salto:</span></strong> {{$store.state.tramo_seleccionado.salto}}</p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">CCZ:</span></strong> {{$store.state.tramo_seleccionado.ccz}} </p> 
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Cuenca:</span></strong> {{$store.state.tramo_seleccionado.cuenca}}</p> 
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1">                              
                              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Calle:</span></strong> {{$store.state.tramo_seleccionado.calle}} </p> 
                        </div>  
                        <div class="columns is-full-mobile  p-0 m-1"> 
                              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Comentarios:</span></strong> {{$store.state.tramo_seleccionado.comentarios}}</p>  
                        </div>
                    </div> 

                    <div class="row row-xs middle-xs center-xs is-full-mobile  p-1 m-1">
                    <b-button  v-on:click="ver_planos(1)" type="is-warning" rounded  icon-left="card-search"></b-button>
                    <p class="p-1 m-1"><strong><span style="color: #804000">Ver planos</span></strong></p>
                    </div>
                    

                    <section class="modal-card-body" v-if="lista_planos.length > 0">
                    <div class="box m-0 p-0"  v-for="(value, key) in lista_planos">
                                    <div class="box m-0 p-0">
                                      <div class="columns m-0 p-0">
                                        <div class="column is-2">
                                          <b-tooltip label="Ver plano" position="is-right" type="is-warning is-light">
                                            <b-button class="m-1" style="width:40px" @click.native="ver_plano(key)" type="is-warning is-light"  rounded icon-right="floor-plan"></b-button>
                                          </b-tooltip>  
                                        </div> 
                                        <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id}} <b> - Nombre:</b> {{value.nombre}}<b> - Descripcion:</b> {{value.descripcion}}</div>
                                      </div>
                                    </div>
                    </div>
                    </section>





                  <b-button class="m-1 p-1" style="height:55px" @click="ver_historico = !ver_historico" expanded type="is-warning" :icon-right="ver_historico ? 'upload' : 'download'" >
                    <strong>{{ver_historico ? 'Cerrar historial' : 'Ver historial'}}</strong>
                  </b-button>
                  <div class="column mt-1 pt-0" v-if="ver_historico">
                      <template v-for="item in datos_tramo_historial">
                      <div class="box m-1 p-1" >{{item}}</div>
                      </template>   
                  </div>
                  <div>
                    <template  :active.sync="datos_tramo_fotos_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="(carousel, i) in datos_tramo_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="datos_tramo_audios_a_escuchar.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="(audio, i) in datos_tramo_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>    

          <div class="column col-xs middle-xs center-xs" v-if="false">	
              <div class="row center-xs middle-xs  m-2" >
                  <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
                    Documentos
                  </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
                    Videos
                  </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
                    Económica
                  </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
                    Hidráulica
                  </b-button>
              </div>
          </div>
          </section>




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

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
      <!--33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MODAL DE EDICIÓN DE TRAMO -->   
      <b-modal :active.sync="$store.state.modal_visible == 'Modificar_Tramo'"
      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">Tramo {{$store.state.tramo_seleccionado.id_tramo}}</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_tramo()" type="is-warning" rounded  icon-left="map-marker-distance"  style="width:200px">
                Ubicacion
              </b-button>
          </div>
          <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_tramo_division()" type="is-warning" rounded  icon-left="arrow-split-vertical"  style="width:200px">
                Dividir
          </b-button>
          </div>
          <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_tramo_sentido()" type="is-warning" rounded  icon-left="autorenew"  style="width:200px">
                Sentido
          </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_tramo()" type="is-warning" 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_tramo" name="foto_tramo" ref="foto_tramo" style="display:none" type="file"> 
         </form>
         <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
          <b-button @click="$refs.foto_tramo.click()" type="is-info" rounded icon-left="camera" style="width:200px">
            Tomar Fotografia
          </b-button>
         </div>
         <form enctype="multipart/form-data">
          <input accept="image/*" @change="guardo_fotografia" id="foto_tramo2" name="foto_tramo2" ref="foto_tramo2" style="display:none" type="file"> 
         </form>
         <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
          <b-button @click="$refs.foto_tramo2.click()" type="is-info" rounded icon-left="file-find" style="width:200px">
            Seleccionar Fotografia
          </b-button>
         </div>
          <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
          <b-button  @click="modal_grabar_audio = true" type="is-link" rounded  icon-left="microphone-plus"  style="width:200px">
                Grabar audio
          </b-button>
          </div>
          </div>
          </section>
          <footer class="modal-card-foot">
              <b-button  @click="$store.state.modal_visible = 'Evento_Seleccion_Tramo'" type='is-danger' icon-right="backburger" style="float:right">
                Volver
              </b-button>
          </footer>
      </div>
      </form>
      </b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL DE MODIFICACION DE DATOS DE TRAMO --> 

        <b-modal :active.sync="$store.state.modal_visible == 'Modal_modificacion_datos_tramo'" 
        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">Datos de tramo</p>

            </header>
            <section class="modal-card-body">


            <b-switch class="column  is-1  p-1 m-1" v-model="ver_diagrama1" type="is-warning" size="is-small">Diagrama</b-switch> 
              <b-image v-if="ver_diagrama1 == true"  src="recursos/diagramas/diagrama1.png"></b-image>

            

            <div class="columns is-full-mobile  p-1 m-1">
                  <p class="box column is-full-mobile p-1 m-1"><strong>PS arriba:</strong> {{$store.state.tramo_seleccionado.id_psig_aa}}</p>
                  <p class="box column is-full-mobile p-1 m-1"><strong>Z Tapa arriba: </strong>{{$store.state.tramo_seleccionado.z_tapa_aa}}</p>
            </div>
            <div class="columns is-full-mobile  p-1 m-1">
                  <p class="box column is-full-mobile p-1 m-1"><strong>PS abajo: </strong>{{$store.state.tramo_seleccionado.id_psig_ab}}</p>
                  <p class="box column is-full-mobile p-1 m-1"><strong>Z Tapa abajo: </strong>{{$store.state.tramo_seleccionado.z_tapa_ab}}</p>
            </div>
            <div class="columns is-full-mobile  p-1 m-1">
             <p class="box column is-full-mobile p-1 m-1"><strong>Prof arriba: </strong>{{$store.state.tramo_seleccionado.prof_aa}}</p>
             <p class="box column is-full-mobile p-1 m-1"><strong>Prof abajo: </strong>{{$store.state.tramo_seleccionado.prof_ab}}</p>
            </div>



            <div class="columns is-full-mobile p-1 m-1">
                <b-field class="field column is-full-mobile p-1 m-1" label="Año Construido:" horizontal style="width:250px">
                    <b-input placeholder="Año Construido" type="number" maxlength="4" has-counter 
                    v-model="ano_construido_tramo"  
                    validation-message="Valor no permitido"
                    icon="calendar" style="width:200px">
                    </b-input>
                </b-field>       
            </div>        



            <div class="columns is-full-mobile p-1 m-1">
                    <div class="box is-full-mobile  p-2 m-2">
                    <b-switch  class="column  is-1  p-1 m-1" v-model="datos_tramo_habilitado" type="is-warning" size="is-small">Habilitado</b-switch> 
                    <p v-if="$store.state.tramo_seleccionado.habilitado != ''" class="box column is-full-mobile p-1 m-1">
                    {{$store.state.tramo_seleccionado.habilitado.substring(0,10)}}
                    </p>
                    </div> 
      
                  <div class="box is-full-mobile  p-2 m-2">
                    <b-switch  class="column  is-1  p-1 m-1" v-model="datos_tramo_publicado" type="is-warning" size="is-small">Publicado</b-switch> 
                    <p v-if="$store.state.tramo_seleccionado.publicado != ''" class="box column is-full-mobile p-1 m-1">
                    {{$store.state.tramo_seleccionado.publicado.substring(0,10)}}
                    </p>
                    </div> 

                    <div class="box is-full-mobile  p-2 m-2">
                    <b-switch  class="column  is-1  p-1 m-1" v-model="datos_tramo_fueraservicio" type="is-warning" size="is-small">Fuera Servicio</b-switch> 
                    <p v-if="$store.state.tramo_seleccionado.fueraservicio != ''" class="box column is-full-mobile p-1 m-1">
                    {{$store.state.tramo_seleccionado.fueraservicio.substring(0,10)}}
                    </p>
                  </div> 
          </div>  



            <div class="columns is-full-mobile p-1 m-1">
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="ZArriba:" horizontal style="width:200px">
                  <b-input placeholder="ZArriba" v-model="datos_tramo_zarriba" maxlength="8"></b-input>
                </b-field>
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="ZAbajo:" horizontal style="width:200px">
                  <b-input placeholder="ZAbajo" v-model="datos_tramo_zabajo" maxlength="8"></b-input>
                </b-field>       
            </div>

            <div class="columns is-full-mobile p-1 m-1">
            <div class="box is-full-mobile  p-2 m-2">
            <b-switch class="column  is-1  p-1 ml-8" v-model="datos_tramo_provisorio" type="is-danger" size="is-small">Provisorio</b-switch>
            </div>

            </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="Longitud:" horizontal style="width:200px">
                  <b-input  :style="{color: '#' + colores_datos_modificados.tramo_longitud}" placeholder="Longitud" v-model="datos_tramo_longitud" maxlength="8"></b-input>
                </b-field>
                <b-button class="column  is-1  p-1 m-1" @click="calcular_longitud_tramo()" 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="Pendiente:" horizontal style="width:200px">
                    <b-input  :style="{color: '#' + colores_datos_modificados.tramo_pendiente}" placeholder="Pendiente" v-model="datos_tramo_pendiente" maxlength="8"></b-input>
                  </b-field>
                  <b-button class="column  is-1  p-1 m-1" @click="calcular_pendiente_tramo()" 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="Salto:" horizontal style="width:200px">
                    <b-input  :style="{color: '#' + colores_datos_modificados.tramo_salto}" placeholder="Salto" v-model="datos_tramo_salto" maxlength="8"></b-input>
                  </b-field>
                  <b-button class="column  is-1  p-1 m-1" @click="calcular_salto_tramo()" type="is-warning" rounded icon-left="calculator" style="width:40px" >
                  </b-button>
            </div>

            
            <div class="columns is-full-mobile p-1 m-1">  
              <div class="column is-full-mobile id-half p-1 m-1">
                    <b-field label="Tipo de tramo:"> Código: {{datos_tramo_tipotra}} 
                    <b-select  v-model="datos_tramo_tipotra" placeholder="Sin determinar">
                    <option
                    v-for="valor in datos_tipo_tramo_tramo"
                    :value="valor.codigodesc"
                    :key="valor.id">
                    {{ valor.codigodesc }}
                    </option>
                    </b-select>
                    </b-field>
                </div> 


                <div class="column is-full-mobile is-half p-1 m-1">
                  <b-field label="Tipo de sección:"> Código: {{datos_tramo_tiposec}} 
                  <b-select  v-model="datos_tramo_tiposec" placeholder="Sin determinar">
                  <option
                  v-for="valor in datos_tipo_tramo_seccion"
                  :value="valor.codigodesc"
                  :key="valor.id">
                  {{ valor.codigodesc }}
                  </option>
                  </b-select>
                  </b-field>
                </div> 
                </div>     

                <img  v-if="ver_clase_tramo != ''" class="has-ratio img-fluid" :src="ver_clase_tramo" alt="" width="400" height="300">

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

                <div class="column is-full-mobile is-half  p-1 m-1">
                    <b-field label="Material">
                    <b-select  v-model="datos_material_tramo" placeholder="Sin asignar">
                    <option value = "PVC">PVC</option>
                    <option value = "Hormigon">Hormigon</option>
                    <option value = "Hierro">Hierro</option>
                    <option value = "PPL">PPL</option>
                    <option value = "PEAD">PEAD</option>
                    <option value = "PRFV">PRFV</option>
                    <option value = "Gres">Gres</option>
                    <option value = "Fundicion">Fundicion</option>
                    <option value = "Sin asignar">Sin asignar</option>  
                    </b-select>
                    </b-field>
                  </div>


                  <div class="column is-full-mobile is-half p-1 m-1">
                  <b-field label="CCZ">
                  <b-select    v-model="datos_ccz_tramo" placeholder="Sin asignar">
                  <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 asignar">Sin asignar</option>
                  </b-select>
                  </b-field>
              </div> 

            </div> 
          
            <div class="columns is-full-mobile p-1 m-1">  
              <div class="column is-full-mobile is-half  p-1 m-1">
              <b-field label="Propietario">
              <b-select  v-model="datos_empresa_tramo" placeholder="Sin asignar">
              <option value = "IM">IM</option>
              <option value = "CIEMSA">CIEMSA</option>
              <option value = "TEYMA">TEYMA</option>
              <option value = "Sin asignar">Sin asignar</option>  
              </b-select>
              </b-field>
              </div>
            </div>

            <b-field label="Comentarios">
              <b-input v-model="datos_descripcion_tramo" maxlength="500" type="textarea"></b-input>
            </b-field>

            <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" v-model="datos_calle_tramo">
                  <p>{{datos_calle_tramo}}</p>
                </b-field>
                <b-button class="column is-1 p-1 m-1" @click="seleccionar_calle_tramo()" type="is-warning" rounded icon-left="map-search-outline" style="width:40px" >
                </b-button>
            </div>


            <div class="columns is-full-mobile p-1 m-1">
              <div class="column is-full-mobile p-1 m-1">
                <b-field label="Etapa">
                <b-select  v-model="datos_etapa_tramo" placeholder="Sin asignar">
                <option value = "A Construir">A Construir</option>
                <option value = "En Construccion">En Construccion</option>
                <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
                <option value = "Construido con Recepcion">Construido con Recepcion</option>
                <option value = "Construido Habilitado">Construido Habilitado</option>
                <option value = "Construido en Desuso">Construido en Desuso</option>
                <option value = "Sin asignar">Sin asignar</option> 
                </b-select>
                </b-field>
              </div> 


            </div>

            <div class="columns is-full-mobile p-1 m-1">
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="Alto(m):" horizontal style="width:200px">
                  <b-input placeholder="Alto(m)" v-model="datos_tramo_dim1" maxlength="8"></b-input>
                </b-field>
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="Ancho(m):" horizontal style="width:200px">
                  <b-input placeholder="Ancho(m)" v-model="datos_tramo_dim2" maxlength="8"></b-input>
                </b-field>    
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="Dim3(m):" horizontal style="width:200px">
                  <b-input placeholder="Dim3(m)" v-model="datos_tramo_dim3" maxlength="8"></b-input>
                </b-field>
                <b-field class="field column is-full-mobile is-half p-1 m-1" label="Dim4(m):" horizontal style="width:200px">
                  <b-input placeholder="Dim4(m)" v-model="datos_tramo_dim4" 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="Proyecto:" horizontal style="width:180px">
                    <b-input placeholder="Proyecto:" v-model="datos_tramo_proyecto" maxlength="10" :readonly="true"></b-input>
                  </b-field>
                  <b-tooltip label="Ver lista Proyectos">
                  <b-button class="column is-1 p-1 m-1" @click="seleccionar_proyecto(1)" type="is-warning" rounded icon-left="view-list" style="width:40px" >
                  </b-button>
                  </b-tooltip>
                  <dl v-if="$store.state.proyecto_activo.id != 0" >
                    <dt>Nombre</dt>
                    <dd>   - {{$store.state.proyecto_activo.nombre}}</dd>
                    <dt>Clasificacion</dt>
                    <dd>   - {{$store.state.proyecto_activo.clasificacion}}</dd>
                    <dt>Tipo</dt>
                    <dd>   - {{$store.state.proyecto_activo.tipo}}</dd>
                    <dt>Construido</dt>
                    <dd>   - {{$store.state.proyecto_activo.construido}}</dd>
                    <dt>Año</dt>
                    <dd>   - {{$store.state.proyecto_activo.anoproy}}</dd>
                    <dt>Descripcion</dt>
                    <dd>   - {{$store.state.proyecto_activo.descripcion}}</dd>
                  </dl>
            </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="Contrato:" horizontal style="width:180px">
                    <b-input placeholder="Contrato:" v-model="datos_tramo_contrato" maxlength="10"></b-input>
                  </b-field>
                  <b-button class="column is-1 p-1 m-1" @click="" type="is-warning" rounded icon-left="card-search-outline" style="width:40px" >
                  </b-button>
                  <p class="columns is-full-mobile p-0 m-0">{{$store.state.contrato_activo.nombre}} - {{$store.state.contrato_activo.descripcion}}</p>
            </div>


            <div class="column col-xs middle-xs center-xs" v-if="false">	
            <div class="row center-xs middle-xs  m-2" >
                <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
                  Documentos
                </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
                  Videos
                </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
                  Económica
                </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
                  Hidráulica
                </b-button>
            </div>
        </div>




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


<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--   SECCION PUNTOS SINGULARES_____________________________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE EVENTO DE SELECCION DE UN PSINGULAR -->   
<b-modal :active.sync="$store.state.modal_visible == 'Evento_Seleccion_Psingular'"
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">Punto Singular {{$store.state.psingular_seleccionado.id_psingular}}</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_psingular" type="is-warning" 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_Psingular'" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
          Modificar
        </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" v-if="false">
    <b-button  v-on:click= "$store.state.modal_visible = ''" type="is-info" rounded  icon-left="magnify"  style="width:200px">
          Inspeccionar
    </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" v-if="false">
    <b-button  v-on:click= "$store.state.modal_visible = ''" type="is-info" rounded  icon-left="eye-check-outline"  style="width:200px">
          Ver Inspecciones
    </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" v-if="$store.state.datos_login.nivel_acceso > 19 && $store.state.psingular_seleccionado.dato3 == 1">
    <b-button  v-on:click= "validar_elemento(2)" type="is-success" rounded  icon-left="eye-check-outline"  style="width:200px">
          Validar Psingular
    </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_psingular()"  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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL DE VER DATOS Y MEDIA DE PUNTO SINGULAR -->  
<b-modal :active.sync="$store.state.modal_visible == 'Ver_Datos_y_Media_Psingular'"
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">Punto Singular {{$store.state.psingular_seleccionado.id_psingular}}</p>
    </header>
    <section class="modal-card-body">
      <div class="column col-xs middle-xs center-xs">	
          <b-button class="m-1 p-1" style="height:55px" @click="ver_datos = !ver_datos" expanded type="is-warning" :icon-right="ver_datos ? 'upload' : 'download'" >
            <strong>{{ver_datos ? 'Cerrar datos de punto singular' : 'Ver datos de punto singular'}}</strong>
          </b-button>
            <div class="column m-1 p-1" v-if="ver_datos">
                  <p v-if= "datos_psingular_provisorio == 1"  class="box column is-full-mobile p-3 m-0"><strong><span style="color: red">Provisorio</span></strong></p> 
 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Tipo:</span></strong>{{datos_psingular_tipo}}</p>  
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">      
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">ZTapa:</span></strong> {{$store.state.psingular_seleccionado.z_tapa}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">ZFondo:</span></strong> {{$store.state.psingular_seleccionado.z_ab}}</p>    
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Profundidad:</span></strong> {{$store.state.psingular_seleccionado.profundidad}}</p>
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1"> 
                        <p class="box column is-full-mobile p-2 m-1" v-if="es_terminal"><strong><span style="color: #588585">Salto:</span></strong>{{$store.state.psingular_seleccionado.salto}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Etapa:</span></strong> {{$store.state.psingular_seleccionado.etapa}}</p>
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Accion:</span></strong> {{$store.state.psingular_seleccionado.accion}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1"> 
                        <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.psingular_seleccionado.habilitado != ''"><strong><span style="color: #588585">Habilitado: </span></strong> {{$store.state.psingular_seleccionado.habilitado.substring(0,10)}}</p> 
                        <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.psingular_seleccionado.publicado != ''"><strong><span style="color: #588585">Publicado: </span></strong> {{$store.state.psingular_seleccionado.publicado.substring(0,10)}}</p> 
                        <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.psingular_seleccionado.fueraservicio != ''"><strong><span style="color: #588585">Fuera Servicio: </span></strong> {{$store.state.psingular_seleccionado.fueraservicio.substring(0,10)}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">CCZ:</span></strong> {{$store.state.psingular_seleccionado.ccz}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Cuenca:</span></strong> {{$store.state.psingular_seleccionado.cuenca}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Alta Fecha:</span></strong> {{$store.state.psingular_seleccionado.alta_fecha.substring(0,10)}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"  v-if="$store.state.psingular_seleccionado.dato4 != 0"><strong><span style="color: #588585">Año Constr:</span></strong> {{$store.state.psingular_seleccionado.dato4}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Calle:</span></strong> {{$store.state.psingular_seleccionado.calle}}</p> 
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Inspeccionable:</span></strong> {{$store.state.psingular_seleccionado.inspeccion}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Fuente Alta:</span></strong> {{$store.state.psingular_seleccionado.alta_fuente}}</p>           
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Comentarios:</span></strong> {{$store.state.psingular_seleccionado.comentarios}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">                    
                        <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Contrato:</span></strong> {{datos_psingular_contrato}} - {{$store.state.contrato_activo.nombre}}</p> 
                  </div> 
                  <div class="columns is-full-mobile  p-0 m-1">
                        <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Proyecto:</span></strong> {{datos_psingular_proyecto}} - {{$store.state.proyecto_activo.nombre}}</p>                                                          
                  </div>
            </div> 

            <div class="row row-xs middle-xs center-xs is-full-mobile  p-1 m-1">
            <b-button  v-on:click="ver_planos(2)" type="is-warning" rounded  icon-left="card-search"></b-button>
            <p class="p-1 m-1"><strong><span style="color: #804000">Ver planos</span></strong></p>
            </div>
            

            <section class="modal-card-body" v-if="lista_planos.length > 0">
            <div class="box m-0 p-0"  v-for="(value, key) in lista_planos">
                            <div class="box m-0 p-0">
                              <div class="columns m-0 p-0">
                                <div class="column is-2">
                                  <b-tooltip label="Ver plano" position="is-right" type="is-warning is-light">
                                    <b-button class="m-1" style="width:40px" @click.native="ver_plano(key)" type="is-warning is-light"  rounded icon-right="floor-plan"></b-button>
                                  </b-tooltip>  
                                </div> 
                                <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id}} <b> - Nombre:</b> {{value.nombre}}<b> - Descripcion:</b> {{value.descripcion}}</div>
                              </div>
                            </div>
            </div>
            </section>

                    <b-button class="m-1 p-1" style="height:55px" @click="ver_historico = !ver_historico" expanded type="is-warning" :icon-right="ver_historico ? 'upload' : 'download'" >
                      <strong>{{ver_historico ? 'Cerrar historial' : 'Ver historial'}}</strong>
                    </b-button>
                        <div class="column mt-1 pt-0" v-if="ver_historico">
                          <template v-for="item in  datos_psingular_historial">
                            <div class="box m-1 p-1" >{{item}}</div>
                          </template>   
                        </div>           
          </div>
        <div> 
          <div>
            <template  :active.sync="datos_psingular_fotos_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="(carousel, i) in datos_psingular_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="datos_psingular_audios_a_escuchar.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="(audio, i) in datos_psingular_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>    

  <div class="column col-xs middle-xs center-xs" v-if="false">	
      <div class="row center-xs middle-xs  m-2" >
          <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
            Documentos
          </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
            Videos
          </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
            Económica
          </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
            Hidráulica
          </b-button>
      </div>
  </div>
  </section>

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

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MODAL DE EDICIÓN DE PSINGULAR-->   
<b-modal :active.sync="$store.state.modal_visible == 'Modificar_Psingular'"
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">Punto Singular {{$store.state.psingular_seleccionado.id_psingular}}</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_psingular()" type="is-warning" 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_psingular()" type="is-warning" 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_psingular" name="foto_psingular" ref="foto_tramo" style="display:none" type="file"> 
 </form>
 <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button @click="$refs.foto_psingular.click()" type="is-info" rounded icon-left="camera" style="width:200px">
    Tomar Fotografia
  </b-button>
 </div>
 <form enctype="multipart/form-data">
  <input accept="image/*" @change="guardo_fotografia" id="foto_tramo2" name="foto_psingular2" ref="foto_psingular2" style="display:none" type="file"> 
 </form>
 <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button @click="$refs.foto_psingular2.click()" type="is-info" rounded icon-left="file-find" style="width:200px">
    Seleccionar Fotografia
  </b-button>
 </div>
  <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button  @click="modal_grabar_audio = true" type="is-link" rounded  icon-left="microphone-plus"  style="width:200px">
        Grabar audio
  </b-button>
  </div>
  </div>
  </section>
  <footer class="modal-card-foot">
      <b-button  @click="$store.state.modal_visible = 'Evento_Seleccion_Psingular'" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
  </footer>
</div>
</form>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL DE MODIFICACION DE DATOS DE PSINGULAR --> 

<b-modal :active.sync="$store.state.modal_visible == 'Modal_modificacion_datos_psingular'"
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">Datos de punto singular</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="ZTapa:" horizontal style="width:180px">
            <b-input placeholder="ZTapa:" v-model="datos_psingular_ztapa" maxlength="8"></b-input>
          </b-field>
          <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="ZFondo:" horizontal style="width:180px">
            <b-input placeholder="ZFondo:" v-model="datos_psingular_zab" maxlength="8"></b-input>
          </b-field>
          <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="Salto:" horizontal style="width:180px"  v-if="es_terminal">
            <b-input placeholder="Salto:" v-model="datos_psingular_salto" maxlength="6"></b-input>
          </b-field>
          <b-button class="column  is-1  p-1 m-1" @click="calcular_salto_psingular()" type="is-warning" rounded icon-left="calculator" style="width:40px"  v-if="es_terminal">
          </b-button>
    </div>

    <div class="columns is-full-mobile p-1 m-1">
    <div class="box is-full-mobile  p-2 m-2">
    <b-switch class="column  is-1  p-1 ml-8" v-model="datos_psingular_provisorio" type="is-danger" size="is-small">Provisorio</b-switch>
    </div>

    </div>



    <div class="columns is-full-mobile p-1 m-1">
        <b-field class="field column is-full-mobile p-1 m-1" label="Año Construido:" horizontal style="width:250px">
            <b-input placeholder="Año Construido" type="number" maxlength="4" has-counter 
            v-model="ano_construido_psingular"  
            validation-message="Valor no permitido"
            icon="calendar" style="width:200px">
            </b-input>
        </b-field>       
    </div>        


        <div class="columns is-full-mobile p-1 m-1">
                <div class="box is-full-mobile  p-2 m-2">
                <b-switch  class="column  is-1  p-1 m-1" v-model="datos_psingular_habilitado" type="is-warning" size="is-small">Habilitado</b-switch> 
                <p v-if="$store.state.psingular_seleccionado.habilitado != ''" class="box column is-full-mobile p-1 m-1">
                {{$store.state.psingular_seleccionado.habilitado.substring(0,10)}}
                </p>
                </div> 

              <div class="box is-full-mobile  p-2 m-2">
                <b-switch  class="column  is-1  p-1 m-1" v-model="datos_psingular_publicado" type="is-warning" size="is-small">Publicado</b-switch> 
                <p v-if="$store.state.psingular_seleccionado.publicado != ''" class="box column is-full-mobile p-1 m-1">
                {{$store.state.psingular_seleccionado.publicado.substring(0,10)}}
                </p>
                </div> 

                <div class="box is-full-mobile  p-2 m-2">
                <b-switch  class="column  is-1  p-1 m-1" v-model="datos_psingular_fueraservicio" type="is-warning" size="is-small">Fuera Servicio</b-switch> 
                <p v-if="$store.state.psingular_seleccionado.fueraservicio != ''" class="box column is-full-mobile p-1 m-1">
                {{$store.state.psingular_seleccionado.fueraservicio.substring(0,10)}}
                </p>
              </div> 
    </div>  




    <div class="columns is-full-mobile  p-1 m-1">
      <p class="column is-full-mobile p-2 m-2"><span style="color: #588585">Profundidad:</span> {{$store.state.psingular_seleccionado.profundidad}}</p>
      <div class="box is-full-mobile  p-2 m-2">
      <b-switch class="column" :value="true" v-model="datos_psingular_inspeccionable"  size="is-small"
        type="is-warning">
            Inspeccionable
       </b-switch>
       </div>
    </div>

      <div class="columns is-full-mobile p-1 m-1">  
        <div class="column is-full-mobile id-half p-1 m-1">
            <b-field label="Tipo de punto singular:"> Código: {{datos_psingular_tipo}} 
            <b-select  v-model="datos_psingular_tipo" placeholder="Sin determinar">
            <option
            v-for="valor in datos_tipo_psingular_psingular"
            :value="valor.codigodesc"
            :key="valor.id">
            {{ valor.codigodesc }}
            </option>
            </b-select>
            </b-field>
        </div> 
        </div>


        <div class="columns is-full-mobile p-1 m-1">
        <div class="column is-full-mobile p-1 m-1">
          <b-field label="Etapa">
          <b-select  v-model="datos_etapa_psingular" placeholder="Sin asignar">
          <option value = "A Construir">A Construir</option>
          <option value = "En Construccion">En Construccion</option>
          <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
          <option value = "Construido con Recepcion">Construido con Recepcion</option>
          <option value = "Construido Habilitado">Construido Habilitado</option>
          <option value = "Construido en Desuso">Construido en Desuso</option>
          <option value = "Sin asignar">Sin asignar</option> 
          </b-select>
          </b-field>
        </div> 
  
 

        <div class="column is-full-mobile is-half p-1 m-1">
            <b-field label="CCZ">
            <b-select    v-model="datos_ccz_psingular" placeholder="Sin asignar">
            <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 asignar">Sin asignar</option>
            </b-select>
            </b-field>
        </div> 

        </div>


        <div class="columns is-full-mobile p-1 m-1">  
          <div class="column is-full-mobile is-half  p-1 m-1">
          <b-field label="Propietario">
          <b-select  v-model="datos_empresa_psingular" placeholder="Sin asignar">
          <option value = "IM">IM</option>
          <option value = "CIEMSA">CIEMSA</option>
          <option value = "TEYMA">TEYMA</option>
          <option value = "Sin asignar">Sin asignar</option>  
          </b-select>
          </b-field>
          </div>
        </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" v-model="datos_calle_tramo">
              <p>{{datos_calle_psingular}}</p>
            </b-field>
            <b-button class="column is-1 p-1 m-1" @click="seleccionar_calle_psingular()" type="is-warning" rounded icon-left="map-search-outline" style="width:40px" >
            </b-button>
        </div>


       <b-field label="Comentarios">
            <b-input v-model="datos_descripcion_psingular" maxlength="500" type="textarea"></b-input>
       </b-field>




    <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="Proyecto:" horizontal style="width:180px">
            <b-input placeholder="Proyecto:" v-model="datos_psingular_proyecto" maxlength="10" :readonly="true"></b-input>
          </b-field>
          <b-tooltip label="Ver lista Proyectos">
          <b-button class="column is-1 p-1 m-1" @click="seleccionar_proyecto(2)" type="is-warning" rounded icon-left="view-list" style="width:40px" >
          </b-button>
          </b-tooltip>
          <dl v-if="$store.state.proyecto_activo.id != 0" >
            <dt>Nombre</dt>
            <dd>   - {{$store.state.proyecto_activo.nombre}}</dd>
            <dt>Clasificacion</dt>
            <dd>   - {{$store.state.proyecto_activo.clasificacion}}</dd>
            <dt>Tipo</dt>
            <dd>   - {{$store.state.proyecto_activo.tipo}}</dd>
            <dt>Construido</dt>
            <dd>   - {{$store.state.proyecto_activo.construido}}</dd>
            <dt>Año</dt>
            <dd>   - {{$store.state.proyecto_activo.anoproy}}</dd>
            <dt>Descripcion</dt>
            <dd>   - {{$store.state.proyecto_activo.descripcion}}</dd>
          </dl>
    </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="Contrato:" horizontal style="width:180px">
            <b-input placeholder="Contrato:" v-model="datos_psingular_contrato" maxlength="10"></b-input>
          </b-field>
          <b-button class="column is-1 p-1 m-1" @click="" type="is-warning" rounded icon-left="card-search-outline" style="width:40px" >
          </b-button>
          <p class="columns is-full-mobile p-0 m-0">{{$store.state.contrato_activo.nombre}} - {{$store.state.contrato_activo.descripcion}}</p>
    </div>


    <div class="column col-xs middle-xs center-xs" v-if="false">	
    <div class="row center-xs middle-xs  m-2" >
        <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
          Documentos
        </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
          Videos
        </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
          Económica
        </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
          Hidráulica
        </b-button>
    </div>
</div>




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


<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--   SECCION CAPTACIONES__________________________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE EVENTO DE SELECCION DE CAPTACION -->   
<b-modal :active.sync="$store.state.modal_visible == 'Evento_Seleccion_Captacion'"
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">Captación {{$store.state.captacion_seleccionada.id_captacion}}</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_captacion" type="is-warning" 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_Captacion'" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
          Modificar
        </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" >
    <b-button  v-on:click= "cargar_intervenciones_captacion()" type="is-info" rounded  icon-left="magnify"  style="width:200px">
          Intervenciones
    </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" v-if="$store.state.datos_login.nivel_acceso > 19 && $store.state.captacion_seleccionada.dato3 == 1">
    <b-button  v-on:click= "validar_elemento(3)" type="is-success" rounded  icon-left="eye-check-outline"  style="width:200px">
          Validar Captacion
    </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_captacion()"  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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL DE VER DATOS Y MEDIA DE CAPTACION -->  
<b-modal :active.sync="$store.state.modal_visible == 'Ver_Datos_y_Media_Captacion'"
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">Captación {{$store.state.captacion_seleccionada.id_captacion}}</p>
    </header>
    <section class="modal-card-body">
    <div class="column col-xs middle-xs center-xs">	
    <b-button class="m-1 p-1" style="height:55px" @click="ver_datos = !ver_datos" expanded type="is-warning" :icon-right="ver_datos ? 'upload' : 'download'" >
      <strong>{{ver_datos ? 'Cerrar datos de captación' : 'Ver datos de captación'}}</strong>
    </b-button>
            <div class="column m-1 p-1" v-if="ver_datos">

                    <p v-if="datos_captacion_provisorio == 1"  class="box column is-full-mobile p-3 m-0"><strong><span style="color: red">Provisorio</span></strong></p> 
 
                    <div class="columns is-full-mobile  p-0 m-1">   
                    <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Tipo:</span></strong> {{datos_captacion_tipo}} </p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">                    
                    <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Clase:</span></strong> {{datos_captacion_clase}} </p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">ZTapa:</span></strong> {{$store.state.captacion_seleccionada.z_tapa}} </p> 
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">ZCol:</span></strong> {{$store.state.captacion_seleccionada.z_col}} </p>   
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Colector:</span></strong> {{$store.state.captacion_seleccionada.id_tramo}} </p>      
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Conexión:</span></strong> {{$store.state.captacion_seleccionada.id_conex_capt}} </p>
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Dimensión:</span></strong> {{$store.state.captacion_seleccionada.dim}} </p>
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Cant Bocas:</span></strong> {{$store.state.captacion_seleccionada.cant_bocas}} </p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Etapa:</span></strong> {{$store.state.captacion_seleccionada.etapa}} </p>
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Estado:</span></strong> {{$store.state.captacion_seleccionada.estado}} </p> 
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Accion:</span></strong> {{$store.state.captacion_seleccionada.accion}} </p> 
                    <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.captacion_seleccionada.dato4 != 0"><strong><span style="color: #588585">Año Constr:</span></strong> {{$store.state.captacion_seleccionada.dato4}}</p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Cuenca:</span></strong> {{$store.state.captacion_seleccionada.cuenca}}</p> 
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Alta Fecha:</span></strong> {{$store.state.captacion_seleccionada.alta_fecha.substring(0,10)}}</p>
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Calle:</span></strong> {{$store.state.captacion_seleccionada.calle}}</p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1"> 
                      <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.captacion_seleccionada.habilitado != ''"><strong><span style="color: #588585">Habilitado: </span></strong> {{$store.state.captacion_seleccionada.habilitado.substring(0,10)}}</p> 
                      <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.captacion_seleccionada.publicado != ''"><strong><span style="color: #588585">Publicado: </span></strong> {{$store.state.captacion_seleccionada.publicado.substring(0,10)}}</p> 
                      <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.captacion_seleccionada.fueraservicio != ''"><strong><span style="color: #588585">Fuera Servicio: </span></strong> {{$store.state.captacion_seleccionada.fueraservicio.substring(0,10)}}</p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">CCZ:</span></strong> {{$store.state.captacion_seleccionada.ccz}}</p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Fuente Alta:</span></strong> {{$store.state.captacion_seleccionada.alta_fuente}} </p> 
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">                    
                    <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Comentarios:</span></strong> {{$store.state.captacion_seleccionada.comentarios}} </p>      
                    </div>
                    <div class="columns is-full-mobile  p-0 m-1">
                    <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Proyecto:</span></strong> {{datos_captacion_proyecto}} - {{$store.state.proyecto_activo.nombre}} </p>                                                           
                    </div>
            </div>

            <div class="row row-xs middle-xs center-xs is-full-mobile  p-1 m-1">
            <b-button  v-on:click="ver_planos(3)" type="is-warning" rounded  icon-left="card-search"></b-button>
            <p class="p-1 m-1"><strong><span style="color: #804000">Ver planos</span></strong></p>
            </div>
            

            <section class="modal-card-body" v-if="lista_planos.length > 0">
            <div class="box m-0 p-0"  v-for="(value, key) in lista_planos">
                            <div class="box m-0 p-0">
                              <div class="columns m-0 p-0">
                                <div class="column is-2">
                                  <b-tooltip label="Ver plano" position="is-right" type="is-warning is-light">
                                    <b-button class="m-1" style="width:40px" @click.native="ver_plano(key)" type="is-warning is-light"  rounded icon-right="floor-plan"></b-button>
                                  </b-tooltip>  
                                </div> 
                                <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id}} <b> - Nombre:</b> {{value.nombre}}<b> - Descripcion:</b> {{value.descripcion}}</div>
                              </div>
                            </div>
            </div>
            </section>

            <b-button class="m-1 p-1" style="height:55px" @click="ver_historico = !ver_historico" expanded type="is-warning" :icon-right="ver_historico ? 'upload' : 'download'" >
              <strong>{{ver_historico ? 'Cerrar historial' : 'Ver historial'}}</strong>
            </b-button>
            <div class="column mt-1 pt-0" v-if="ver_historico">
            <template v-for="item in datos_captacion_historial">
            <div class="box m-1 p-1" >{{item}}</div>
            </template>   
            </div>


            <div>
            <template  :active.sync="datos_captacion_fotos_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="(carousel, i) in datos_captacion_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="datos_captacion_audios_a_escuchar.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="(audio, i) in datos_captacion_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>    

  <div class="column col-xs middle-xs center-xs" v-if="false">	
      <div class="row center-xs middle-xs  m-2" >
          <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
            Documentos
          </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
            Videos
          </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
            Económica
          </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
            Hidráulica
          </b-button>
      </div>
  </div>
  </section>

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

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MODAL DE EDICIÓN DE CAPTACION -->   
<b-modal :active.sync="$store.state.modal_visible == 'Modificar_Captacion'"
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">Captación {{$store.state.captacion_seleccionada.id_captacion}}</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_captacion()" type="is-warning" 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_captacion()" type="is-warning" 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_captacion" name="foto_captacion" ref="foto_captacion" style="display:none" type="file"> 
 </form>
 <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button @click="$refs.foto_captacion.click()" type="is-info" rounded icon-left="camera" style="width:200px">
    Tomar Fotografia
  </b-button>
 </div>
 <form enctype="multipart/form-data">
  <input accept="image/*" @change="guardo_fotografia" id="foto_captacion2" name="foto_captacion2" ref="foto_captacion2" style="display:none" type="file"> 
 </form>
 <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button @click="$refs.foto_captacion2.click()" type="is-info" rounded icon-left="file-find" style="width:200px">
    Seleccionar Fotografia
  </b-button>
 </div>
  <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
  <b-button  @click="modal_grabar_audio = true" type="is-link" rounded  icon-left="microphone-plus"  style="width:200px">
        Grabar audio
  </b-button>
  </div>
  </div>
  </section>
  <footer class="modal-card-foot">
      <b-button  @click="$store.state.modal_visible = 'Evento_Seleccion_Captacion'" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
  </footer>
</div>
</form>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL DE MODIFICACION DE DATOS DE CAPTACION --> 

<b-modal :active.sync="$store.state.modal_visible == 'Modal_modificacion_datos_captacion'"
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">Captación {{$store.state.captacion_seleccionada.id_captacion}}</p>
    </header>
    <section class="modal-card-body">

          <div class="columns is-full-mobile  p-0 m-0">
          <p class="column is-full-mobile p-0 m-0"><span style="color: #588585">Colector:</span> {{$store.state.captacion_seleccionada.id_tramo}}</p>
          <p class="column is-full-mobile p-0 m-0"><span style="color: #588585">Conexión:</span> {{$store.state.captacion_seleccionada.id_conex_capt}}</p>
          <p class="column is-full-mobile p-0 m-0"><span style="color: #588585">Estado:</span> {{$store.state.captacion_seleccionada.estado}}</p>
          </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="ZTapa:" horizontal style="width:180px">
                  <b-input placeholder="ZTapa:" v-model="datos_captacion_ztapa" maxlength="8"></b-input>
                </b-field>
                <b-field class="field column is-full-mobile is-three-quarters p-1 m-1" label="ZCol:" horizontal style="width:180px">
                  <b-input placeholder="ZCol:" v-model="datos_captacion_zcol" maxlength="8"></b-input>
                </b-field>
                <b-button class="column  is-1  p-1 m-1" @click="calcular_zcol_captacion()" type="is-warning" rounded icon-left="calculator" style="width:40px" >
                </b-button>
          </div>

          <div class="columns is-full-mobile p-1 m-1">
                    <div class="box is-full-mobile  p-2 m-2">
                    <b-switch class="column  is-1  p-1 ml-8" v-model="datos_captacion_provisorio" type="is-danger" size="is-small">Provisorio</b-switch>
                    </div>
          </div>



            <div class="columns is-full-mobile p-1 m-1">
                <b-field class="field column is-full-mobile p-1 m-1" label="Año Construido:" horizontal style="width:250px">
                    <b-input placeholder="Año Construido" type="number" maxlength="4" has-counter 
                    v-model="ano_construido_captacion"  
                    validation-message="Valor no permitido"
                    icon="calendar" style="width:200px">
                    </b-input>
                </b-field>       
            </div>        


        <div class="columns is-full-mobile p-1 m-1">
            <div class="box is-full-mobile  p-2 m-2">
            <b-switch  class="column  is-1  p-1 m-1" v-model="datos_captacion_habilitado" type="is-warning" size="is-small">Habilitado</b-switch> 
            <p v-if="$store.state.captacion_seleccionada.habilitado != ''" class="box column is-full-mobile p-1 m-1">
            {{$store.state.captacion_seleccionada.habilitado.substring(0,10)}}
            </p>
            </div> 

            <div class="box is-full-mobile  p-2 m-2">
              <b-switch  class="column  is-1  p-1 m-1" v-model="datos_captacion_publicado" type="is-warning" size="is-small">Publicado</b-switch> 
              <p v-if="$store.state.captacion_seleccionada.publicado != ''" class="box column is-full-mobile p-1 m-1">
              {{$store.state.captacion_seleccionada.publicado.substring(0,10)}}
              </p>
              </div> 

              <div class="box is-full-mobile  p-2 m-2">
              <b-switch  class="column  is-1  p-1 m-1" v-model="datos_captacion_fueraservicio" type="is-warning" size="is-small">Fuera Servicio</b-switch> 
              <p v-if="$store.state.captacion_seleccionada.fueraservicio != ''" class="box column is-full-mobile p-1 m-1">
              {{$store.state.captacion_seleccionada.fueraservicio.substring(0,10)}}
              </p>
            </div> 
        </div>  



        <div class="columns is-full-mobile p-1 m-1">  
          <div class="column is-full-mobile id-half p-1 m-1">
                <b-field label="Tipo de captación:"> Código: {{datos_captacion_tipo}} 
                <b-select  v-model="datos_captacion_tipo" placeholder="Sin determinar">
                <option
                v-for="valor in datos_tipo_captacion_captacion"
                :value="valor.codigodesc"
                :key="valor.id">
                {{ valor.codigodesc }}
                </option>
                </b-select>
                </b-field>
            </div> 
            </div>

            <div class="columns is-full-mobile p-1 m-1">  
            <div class="column is-full-mobile id-half p-1 m-1">
                  <b-field label="Clase de captación:"> Código: {{datos_captacion_clase}} 
                  <b-select  v-model="datos_captacion_clase" placeholder="Sin determinar">
                  <option
                  v-for="valor in datos_clase_captacion_captacion"
                  :value="valor.codigodesc"
                  :key="valor.id">
                  {{ valor.codigodesc }}
                  </option>
                  </b-select>
                  </b-field>
              </div> 
              </div>

          <img  v-if="ver_clase_captacion != ''" class="has-ratio img-fluid" :src="ver_clase_captacion" alt="" width="400" height="300">
  

      <div class="columns is-full-mobile p-1 m-1">
            <div class="column is-full-mobile p-1 m-1">
              <b-field label="Etapa">
              <b-select  v-model="datos_etapa_captacion" placeholder="Sin asignar">
              <option value = "A Construir">A Construir</option>
              <option value = "En Construccion">En Construccion</option>
              <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
              <option value = "Construido con Recepcion">Construido con Recepcion</option>
              <option value = "Construido Habilitado">Construido Habilitado</option>
              <option value = "Construido en Desuso">Construido en Desuso</option>
              <option value = "Sin asignar">Sin asignar</option>
              </b-select>
              </b-field>
            </div> 
        </div>
 


        <div class="columns is-full-mobile p-1 m-1">
          <div class="column is-full-mobile is-half p-1 m-1">
              <b-field label="CCZ">
              <b-select    v-model="datos_ccz_captacion" placeholder="Sin asignar">
              <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 asignar">Sin asignar</option>
              </b-select>
              </b-field>
            </div> 

            <div class="columns is-full-mobile p-1 m-1">  
              <div class="column is-full-mobile is-half  p-1 m-1">
              <b-field label="Propietario">
              <b-select  v-model="datos_empresa_captacion" placeholder="Sin asignar">
              <option value = "IM">IM</option>
              <option value = "CIEMSA">CIEMSA</option>
              <option value = "TEYMA">TEYMA</option>
              <option value = "Sin asignar">Sin asignar</option>  
              </b-select>
              </b-field>
              </div>
         </div>

        <div class="column is-full-mobile p-1 m-1">
        <b-field label="Bocas">
            <b-select  v-model="datos_bocas_captacion" placeholder="Sin asignar">
            <option value = "1">1</option>
            <option value = "2">2</option>
            <option value = "3">3</option>
            <option value = "4">4</option>
            <option value = "5">1</option>
            <option value = "6">2</option>
            <option value = "7">3</option>
            <option value = "mas de 7">mas de 7</option>
            <option value = "Sin asignar">Sin asignar</option>  
            </b-select>
            </b-field>
        </div>


        </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" v-model="datos_calle_tramo">
              <p>{{datos_calle_captacion}}</p>
            </b-field>
            <b-button class="column is-1 p-1 m-1" @click="seleccionar_calle_captacion()" type="is-warning" rounded icon-left="map-search-outline" style="width:40px" >
            </b-button>
        </div>


       <b-field label="Comentarios">
            <b-input v-model="datos_descripcion_captacion" maxlength="500" type="textarea"></b-input>
       </b-field>



          <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="Proyecto:" horizontal style="width:180px">
                      <b-input placeholder="Proyecto:" v-model="datos_captacion_proyecto" maxlength="10" :readonly="true"></b-input>
                    </b-field>
                    <b-tooltip label="Ver lista Proyectos">
                    <b-button class="column is-1 p-1 m-1" @click="seleccionar_proyecto(3)" type="is-warning" rounded icon-left="view-list" style="width:40px" >
                    </b-button>
                    </b-tooltip>
                    <dl v-if="$store.state.proyecto_activo.id != 0" >
                      <dt>Nombre</dt>
                      <dd>   - {{$store.state.proyecto_activo.nombre}}</dd>
                      <dt>Clasificacion</dt>
                      <dd>   - {{$store.state.proyecto_activo.clasificacion}}</dd>
                      <dt>Tipo</dt>
                      <dd>   - {{$store.state.proyecto_activo.tipo}}</dd>
                      <dt>Construido</dt>
                      <dd>   - {{$store.state.proyecto_activo.construido}}</dd>
                      <dt>Año</dt>
                      <dd>   - {{$store.state.proyecto_activo.anoproy}}</dd>
                      <dt>Descripcion</dt>
                      <dd>   - {{$store.state.proyecto_activo.descripcion}}</dd>
                    </dl>
      </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="Contrato:" horizontal style="width:180px">
            <b-input placeholder="Contrato:" v-model="datos_captacion_contrato" maxlength="10"></b-input>
          </b-field>
          <b-button class="column is-1 p-1 m-1" @click="" type="is-warning" rounded icon-left="card-search-outline" style="width:40px" >
          </b-button>
          <p class="columns is-full-mobile p-0 m-0">{{$store.state.contrato_activo.nombre}} - {{$store.state.contrato_activo.descripcion}}</p>
    </div>

    <div class="column col-xs middle-xs center-xs" v-if="false">	
    <div class="row center-xs middle-xs  m-2" >
        <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
          Documentos
        </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 = ''" type="is-info" rounded  icon-left="movie-open"  style="width:200px">
          Videos
        </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
          Económica
        </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
          Hidráulica
        </b-button>
    </div>
</div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = 'Modificar_Captacion'">Cerrar</button>
        <b-button  @click="guardo_datos_captacion()" type="is-danger" icon-left="cloud-upload">
          Guardar
        </b-button>
    </footer>
</div>
</form>
</b-modal>

<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--   SECCION CONEXIONES DE CAPTACIONES____________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE EVENTO DE SELECCION DE UNA CONEXION DE CAPTACION -->   
<b-modal :active.sync="$store.state.modal_visible == 'Evento_Seleccion_Conex_capta'"
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 de captación {{$store.state.conex_capta_seleccionada.id_conex_capt}}</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_conex_captacion" type="is-warning" 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_Conex_Captacion'" type="is-warning" 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 > 19 && $store.state.conex_capta_seleccionada.dato3 == 1">
    <b-button  v-on:click= "validar_elemento(4)" type="is-success" rounded  icon-left="eye-check-outline"  style="width:200px">
          Validar Conex Capta
    </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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL DE VER DATOS DE  CONEXION DE CAPTACION -->  
<b-modal :active.sync="$store.state.modal_visible == 'Ver_Datos_Conex_Captacion'"
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 de captación {{$store.state.conex_capta_seleccionada.id_conex_capt}}</p>
    </header>
    <section class="modal-card-body">
        <div class="column col-xs middle-xs center-xs">	
            <b-button class="m-1 p-1" style="height:55px" @click="ver_datos = !ver_datos" expanded type="is-warning" :icon-right="ver_datos ? 'upload' : 'download'" >
              <strong>{{ver_datos ? 'Cerrar datos de conexión de captación' : 'Ver datos de conexión de captación'}}</strong>
            </b-button>
           <div class="column m-1 p-1" v-if="ver_datos">
              <div class="columns is-full-mobile  p-0 m-1">         
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Tipo:</span></strong> {{datos_conex_captacion_tipo}}</p>  
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Captacion:</span></strong> {{$store.state.conex_capta_seleccionada.id_captacion}}</p>  
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Colector:</span></strong> {{$store.state.conex_capta_seleccionada.id_tramo}}</p> 
              </div>
              <div class="columns is-full-mobile  p-0 m-1">  
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Longitud:</span></strong>{{$store.state.conex_capta_seleccionada.longitud}}</p>    
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Material:</span></strong> {{$store.state.conex_capta_seleccionada.material}}</p>       
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Sección:</span></strong> {{$store.state.conex_capta_seleccionada.seccion}}</p> 
              </div>
              <div class="columns is-full-mobile  p-0 m-1">  
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Profundidad:</span></strong> {{$store.state.conex_capta_seleccionada.profundidad}}</p> 
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Etapa:</span></strong> {{$store.state.conex_capta_seleccionada.etapa}}</p> 
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Accion:</span></strong> {{$store.state.conex_capta_seleccionada.accion}}</p> 
              </div>
              <div class="columns is-full-mobile  p-0 m-1"> 
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Alta Fecha:</span></strong> {{$store.state.conex_capta_seleccionada.alta_fecha.substring(0,10)}}</p> 
              <p class="box column is-full-mobile p-2 m-1"><strong><span style="color: #588585">Fuente Alta:</span></strong> {{$store.state.conex_capta_seleccionada.alta_fuente}}</p>            
              <p class="box column is-full-mobile p-2 m-1"  v-if="$store.state.conex_capta_seleccionada.dato4 != 0"><strong><span style="color: #588585">Año Constr:</span></strong> {{$store.state.conex_capta_seleccionada.dato4}}</p>            
              </div>
              <div class="columns is-full-mobile  p-0 m-1"> 
              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.conex_capta_seleccionada.habilitado != ''"><strong><span style="color: #588585">Habilitado: </span></strong> {{$store.state.conex_capta_seleccionada.habilitado.substring(0,10)}}</p> 
              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.conex_capta_seleccionada.publicado != ''"><strong><span style="color: #588585">Publicado: </span></strong> {{$store.state.conex_capta_seleccionada.publicado.substring(0,10)}}</p> 
              <p class="box column is-full-mobile p-2 m-1" v-if="$store.state.conex_capta_seleccionada.fueraservicio != ''"><strong><span style="color: #588585">Fuera Servicio: </span></strong> {{$store.state.conex_capta_seleccionada.fueraservicio.substring(0,10)}}</p> 
              </div>           
              <div class="columns is-full-mobile  p-0 m-1"> 
              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Comentarios:</span></strong> {{$store.state.conex_capta_seleccionada.comentarios}}</p> 
              </div>
              <div class="columns is-full-mobile  p-0 m-1">               
              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Contrato:</span></strong> {{datos_conex_capta_contrato}} - {{$store.state.contrato_activo.nombre}}</p>  
              </div>
              <div class="columns is-full-mobile  p-0 m-1"> 
              <p class="box column is-full-mobile p-3 m-1"><strong><span style="color: #588585">Proyecto:</span></strong> {{datos_conex_capta_proyecto}} - {{$store.state.proyecto_activo.nombre}}</p>                                                            
              </div>
        </div> 
        <b-button class="m-1 p-1" style="height:55px" @click="ver_historico = !ver_historico" expanded type="is-warning" :icon-right="ver_historico ? 'upload' : 'download'" >
          <strong>{{ver_historico ? 'Cerrar historial' : 'Ver historial'}}</strong>
        </b-button>
        <div class="column mt-1 pt-0" v-if="ver_historico">
          <template v-for="item in datos_conex_captacion_historial">
            <div class="box m-1 p-1" >{{item}}</div>
          </template>   
        </div>

        </div>

  <div class="column col-xs middle-xs center-xs" v-if="false">	
      <div class="row center-xs middle-xs  m-2" >
          <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
            Documentos
          </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
            Económica
          </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
            Hidráulica
          </b-button>
      </div>
  </div>
  </section>

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

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MODAL DE EDICIÓN DE CONEXION DE CAPTACION -->   
<b-modal :active.sync="$store.state.modal_visible == 'Modificar_Conex_Captacion'"
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 de captación {{$store.state.conex_capta_seleccionada.id_conex_capt}}</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_conex_captacion()" type="is-warning" 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_conex_captacion()" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
        Datos
      </b-button>
  </div>
  </div>
  </section>
  <footer class="modal-card-foot">
      <b-button  @click="$store.state.modal_visible = 'Evento_Seleccion_Conex_capta'" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
  </footer>
</div>
</form>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL DE MODIFICACION DE DATOS DE CONEXION DE CAPTACION --> 

<b-modal :active.sync="$store.state.modal_visible == 'Modal_modificacion_datos_conex_captacion'"
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 de captación {{$store.state.conex_capta_seleccionada.id_conex_capt}}</p>
    </header>
    <section class="modal-card-body">


    <div class="columns is-full-mobile  p-0 m-0">
      <p class="column is-full-mobile p-0 m-0"><span style="color: #588585">Colector:</span> {{$store.state.conex_capta_seleccionada.id_tramo}}</p>
      <p class="column is-full-mobile p-0 m-0"><span style="color: #588585">Captación:</span> {{$store.state.conex_capta_seleccionada.id_captacion}}</p>
    </div>


    
    <div class="columns is-full-mobile p-1 m-1">
    <b-field class="field column is-full-mobile p-1 m-1" label="Año Construido:" horizontal style="width:250px">
        <b-input placeholder="Año Construido" type="number" maxlength="4" has-counter 
        v-model="ano_construido_conex_capta"  
        validation-message="Valor no permitido"
        icon="calendar" style="width:200px">
        </b-input>
    </b-field>       
  </div>        



        <div class="columns is-full-mobile p-1 m-1">
        <div class="box is-full-mobile  p-2 m-2">
        <b-switch  class="column  is-1  p-1 m-1" v-model="datos_conex_capta_habilitado" type="is-warning" size="is-small">Habilitado</b-switch> 
        <p v-if="$store.state.conex_capta_seleccionada.habilitado != ''" class="box column is-full-mobile p-1 m-1">
        {{$store.state.conex_capta_seleccionada.habilitado.substring(0,10)}}
        </p>
        </div> 

      <div class="box is-full-mobile  p-2 m-2">
        <b-switch  class="column  is-1  p-1 m-1" v-model="datos_conex_capta_publicado" type="is-warning" size="is-small">Publicado</b-switch> 
        <p v-if="$store.state.conex_capta_seleccionada.publicado != ''" class="box column is-full-mobile p-1 m-1">
        {{$store.state.conex_capta_seleccionada.publicado.substring(0,10)}}
        </p>
        </div> 

        <div class="box is-full-mobile  p-2 m-2">
        <b-switch  class="column  is-1  p-1 m-1" v-model="datos_conex_capta_fueraservicio" type="is-warning" size="is-small">Fuera Servicio</b-switch> 
        <p v-if="$store.state.conex_capta_seleccionada.fueraservicio != ''" class="box column is-full-mobile p-1 m-1">
        {{$store.state.conex_capta_seleccionada.fueraservicio.substring(0,10)}}
        </p>
      </div> 
      </div> 


    <div class="columns is-full-mobile p-1 m-1">  
      <div class="column is-full-mobile id-half p-1 m-1">
            <b-field label="Tipo de captación:"> Código: {{datos_conex_captacion_tipo}} 
            <b-select  v-model="datos_conex_captacion_tipo" placeholder="Sin determinar">
            <option
            v-for="valor in datos_tipo_conex_captacion_captacion"
            :value="valor.codigodesc"
            :key="valor.id">
            {{ valor.codigodesc }}
            </option>
            </b-select>
            </b-field>
        </div> 
        </div>


      <div class="columns is-full-mobile p-1 m-1">
        <div class="column is-full-mobile p-1 m-1">
          <b-field label="Etapa">
          <b-select  v-model="datos_etapa_conex_captacion" placeholder="Sin asignar">
          <option value = "A Construir">A Construir</option>
          <option value = "En Construccion">En Construccion</option>
          <option value = "Construido sin Recepcion">Construido sin Recepcion</option>
          <option value = "Construido con Recepcion">Construido con Recepcion</option>
          <option value = "Construido Habilitado">Construido Habilitado</option>
          <option value = "Construido en Desuso">Construido en Desuso</option>
          <option value = "Sin asignar">Sin asignar</option> 
          </b-select>
          </b-field>
        </div> 
  

        </div>
        <div class="columns is-full-mobile p-1 m-1">
         <b-field class="field column is-full-mobile is-half p-1 m-1" label="Sección(mm):" horizontal style="width:200px">
             <b-input placeholder="Seccion(mm)" v-model="datos_conex_captacion_seccion" maxlength="5"></b-input>
         </b-field>

         <b-field class="field column is-full-mobile is-half p-1 m-1" label="Prof(m):" horizontal style="width:200px">
             <b-input placeholder="Profundidad(m)" v-model="datos_conex_captacion_profundidad" maxlength="6"></b-input>
         </b-field>

         <b-field class="field column is-full-mobile is-half p-1 m-1" label="Long(m):" horizontal style="width:200px">
             <b-input placeholder="Longitud(m)" v-model="datos_conex_captacion_longitud" maxlength="6"></b-input>
         </b-field>


        </div>



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

            <div class="column is-full-mobile is-half  p-1 m-1">
                  <b-field label="Material">
                  <b-select  v-model="datos_material_conex_captacion" placeholder="Sin asignar">
                  <option value = "PVC">PVC</option>
                  <option value = "Hormigon">Hormigon</option>
                  <option value = "Hierro">Hierro</option>
                  <option value = "PPL">PPL</option>
                  <option value = "PEAD">PEAD</option>
                  <option value = "PRFV">PRFV</option>
                  <option value = "Gres">Gres</option>
                  <option value = "Fundicion">Fundicion</option>
                  <option value = "Sin asignar">Sin asignar</option>  
                  </b-select>
                  </b-field>
            </div>

        </div>





       <b-field label="Comentarios">
            <b-input v-model="datos_descripcion_conex_captacion" maxlength="500" type="textarea"></b-input>
       </b-field>

       <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="Proyecto:" horizontal style="width:180px">
         <b-input placeholder="Proyecto:" v-model="datos_conex_capta_proyecto" maxlength="10" :readonly="true"></b-input>
       </b-field>
       <b-tooltip label="Ver lista Proyectos">
       <b-button class="column is-1 p-1 m-1" @click="seleccionar_proyecto(4)" type="is-warning" rounded icon-left="view-list" style="width:40px" >
       </b-button>
       </b-tooltip>
       <dl v-if="$store.state.proyecto_activo.id != 0" >
         <dt>Nombre</dt>
         <dd>   - {{$store.state.proyecto_activo.nombre}}</dd>
         <dt>Clasificacion</dt>
         <dd>   - {{$store.state.proyecto_activo.clasificacion}}</dd>
         <dt>Tipo</dt>
         <dd>   - {{$store.state.proyecto_activo.tipo}}</dd>
         <dt>Construido</dt>
         <dd>   - {{$store.state.proyecto_activo.construido}}</dd>
         <dt>Año</dt>
         <dd>   - {{$store.state.proyecto_activo.anoproy}}</dd>
         <dt>Descripcion</dt>
         <dd>   - {{$store.state.proyecto_activo.descripcion}}</dd>
       </dl>
 </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="Contrato:" horizontal style="width:180px">
            <b-input placeholder="Contrato:" v-model="datos_conex_capta_contrato" maxlength="10"></b-input>
          </b-field>
          <b-button class="column is-1 p-1 m-1" @click="" type="is-warning" rounded icon-left="card-search-outline" style="width:40px" >
          </b-button>
          <p class="column is-full-mobile p-0 m-0">{{$store.state.contrato_activo.nombre}} - {{$store.state.contrato_activo.descripcion}}</p>
    </div>

    <div class="column col-xs middle-xs center-xs" v-if="false">	
    <div class="row center-xs middle-xs  m-2" >
        <b-button  v-on:click="$store.state.modal_visible = ''" type="is-warning" rounded  icon-left="file-document"  style="width:200px">
          Documentos
        </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="$store.state.modal_visible = ''"  type="is-success" rounded  icon-left="cash-multiple"  style="width:200px">
          Económica
        </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="$store.state.modal_visible = ''"  type="is-danger" rounded  icon-left="waves"  style="width:200px">
          Hidráulica
        </b-button>
    </div>
</div>
    </section>
    <footer class="modal-card-foot">
        <button class="button" type="button" @click="$store.state.modal_visible = 'Modificar_Conex_Captacion'">Cerrar</button>
        <b-button  @click="guardo_datos_conex_captacion()" type="is-danger" icon-left="cloud-upload">
          Guardar
        </b-button>
    </footer>
</div>
</form>
</b-modal>

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






<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!--   SECCION MODALES COMPARTIDOS      ____________________________________________________________________________________________________________________-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->
<!-- ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Fotos_Pantalla_Completa'"
:on-cancel="function(){if($store.state.tipo_elemento_seleccionado == 'TRAMO'){$store.state.modal_visible = 'Ver_Datos_y_Media_Tramo'}
else if($store.state.tipo_elemento_seleccionado == 'PSINGULAR'){$store.state.modal_visible = 'Ver_Datos_y_Media_Psingular'}
else if($store.state.tipo_elemento_seleccionado == 'CAPTACION'){$store.state.modal_visible = 'Ver_Datos_y_Media_Captacion'}
else {$store.state.modal_visible = ''}
}">
  <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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->

<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Fotos_Pantalla_Completa2'"
:has-modal-card="true"
:on-cancel="function(){if($store.state.tipo_elemento_seleccionado == 'TRAMO'){$store.state.modal_visible = 'Ver_Datos_y_Media_Tramo'}
else if($store.state.tipo_elemento_seleccionado == 'PSINGULAR'){$store.state.modal_visible = 'Ver_Datos_y_Media_Psingular'}
else if($store.state.tipo_elemento_seleccionado == 'CAPTACION'){$store.state.modal_visible = 'Ver_Datos_y_Media_Captacion'}
else {$store.state.modal_visible = ''}
}"
full-screen
>
<div class="hero is-fixed-top is-mobile p-1 m-1 is-warning is-medium">
<div class="row p-1 m-1 is-warning">
<b-button @click="cerrar_pantalla_completa2" type='is-warning' icon-right="backburger" style="float:left">Volver</b-button>
</div>
</div>
<div ref="panzoomContainer" class="image-container">
  <img  ref="fotoPantallaCompleta" :src="$store.state.plano" alt="Imagen" class="zoom-container">
</div>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->


<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE fotos PANTALLA COMPLETA -->   
<b-modal :active.sync="$store.state.modal_visible == 'Fotos_Pantalla_Completa_Intervenciones_Captacion'"
:has-modal-card="true"
:on-cancel="function(){$store.state.modal_visible = 'modal_editar_intervencion_captacion'}"
full-screen
>
<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 datos_intervencion_captacion_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-carousel-item>
</b-carousel>
</template>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->



<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE fotos PANTALLA COMPLETA -->   


<!--2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL 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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE fotos PANTALLA COMPLETA -->   


<!--2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222MODAL DE grabar audio -->   
<b-modal :active.sync="modal_grabar_audio2"
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_audio2()"   :type="mic_estado ? 'is-grey' : 'is-danger'" icon-left="microphone-plus">
        Iniciar grabación
        </b-button>
        <b-button  @click="finalizar_grabacion_audio2()" :type="mic_estado ? 'is-danger' : 'is-grey'" icon-left="microphone-outline">
        Finalizar grabación
      </b-button>
    </footer>
</div>
</form>
</b-modal>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--3333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333MODAL DE ESTILOS --> 
<b-modal :active.sync="$store.state.modal_visible == 'Principal_Estilos_Tematicos'" 
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="Tipo" type="is-warning" class="column is-is-half">Tipo de Red</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Etapa" type="is-warning" class="column is-is-half">Etapa</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Revisar" type="is-warning" class="column is-is-half">Revisar</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Provisorios" type="is-warning" class="column is-is-half">Provisorios</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Fotos" type="is-warning" class="column is-is-half">Fotos</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Planos" type="is-warning" class="column is-is-half">Planos</b-radio>
                          </div>
                          <div class="column m-0 p-0">
                          <b-radio v-model="tipo_estilo" native-value="Estados" type="is-warning" class="column is-is-half">Estados</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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->
<!--44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444MODAL 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>
<!-- ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄-->




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



<!--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('Elementos a Revisar')" type="is-success" rounded  icon-left="eye-check-outline"  style="width:250px">
          Elementos a Revisar
        </b-button>
    </div>
    <div class="row center-xs middle-xs  m-2" >
    <b-button  v-on:click="monitoreo('Acciones pendientes')" type="is-success" rounded  icon-left="account-clock-outline"  style="width:250px">
      Acciones pendientes
    </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>




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


<!--__________________________________________________________________________________________modal conexiones eliminadas-->
<b-modal :active.sync="$store.state.modal_visible == 'modal_seleccionar_proyecto'"
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 Proyecto</p>
    </header>
    <section class="modal-card-body">
    <div class="box m-0 p-0"  v-for="(value, key) in $store.state.adm_proyectos">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Asignar Proyecto" multilined position="is-right" type="is-success is-light">
                                              <b-button class="m-1" style="width:40px" @click.native="asignar_proyecto(key)" type="is-success"  icon-right="database-edit"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id}} <br><b>Nombre:</b> {{value.nombre}} </div>
                                        </div>
                                      </div>
                      </div>
    </section>
    <footer class="modal-card-foot">
    <div class="column start-xs" >
      <b-button  @click="volver_modal_anterior()" type='is-warning' icon-right="backburger" style="float:left">
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>

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







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


<!--__________________________________________________________________________________________modal inspecciones captaciones lista-->
<b-modal :active.sync="$store.state.modal_visible == 'modal_intervenciones_captaciones_lista'"
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" style="color:black">Captacion: {{$store.state.captacion_seleccionada.id_captacion}}</p>
          <b-tooltip label="Agregar intervención" position="is-left" type="is-link is-light">
          <b-button style="padding-top: 15px; margin-left: 1rem; width: 60px;" v-on:click="editar_intervencion_captacion(-1)" type="is-info" rounded>
                    <b-icon icon="plus-thick" size="is-medium"></b-icon>
          </b-button>
          </b-tooltip>
          </header>
    <section class="modal-card-body">
    <div class="box m-0 p-0"  v-for="(value, key) in $store.state.intervenciones_captacion">
                                      <div class="box m-0 p-0">
                                        <div class="columns m-0 p-0">
                                          <div class="column is-2">
                                            <b-tooltip label="Abrir" position="is-right" type="is-link is-light">
                                              <b-button class="m-1" style="width:30px" @click.native="editar_intervencion_captacion(key)" type="is-success"  icon-right="database-edit"></b-button>
                                            </b-tooltip>  
                                          </div> 
                                          <div class="column is-2">
                                          <b-tooltip label="Eliminar" position="is-right" type="is-link is-light">
                                            <b-button class="mt-1" style="width:30px" @click.native="borrar_intervencion_captacion(key)" type="is-danger"  icon-right="trash-can"></b-button>
                                          </b-tooltip>  
                                        </div> 
                                          <div class="column  bg-white rounded m-2 p-2" ><b>Id:</b> {{value.id_intervencion}} <br><b>Fecha:</b> {{value.fecha}}  <br><b>Estado:</b> {{value.estado_fin}} </div>
                                        </div>
                                      </div>
                      </div>
    </section>
    <footer class="modal-card-foot">
    <div class="column start-xs" >
      <b-button  @click="$store.state.modal_visible = 'Evento_Seleccion_Captacion'" type='is-info' icon-right="backburger" style="float:left">
        Volver
      </b-button>
      </div>
    </footer>
</div>
</form>
</b-modal>

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


      
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111MODAL DE usuario --> 

<b-modal :active.sync="$store.state.modal_visible == 'modal_editar_intervencion_captacion'"
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">Intervención en Captación</p>
    </header>
    <section class="modal-card-body">
<!--INGRESO DE FECHA -->
    <b-field class="field column p-1 m-1" label="Fecha de intervención" >
    <b-datepicker v-model="datos_fecha_intervenciones"
        ref="datepicker"
        expanded
        placeholder="Elegir fecha">
    </b-datepicker>
    <b-button
        @click="$refs.datepicker.toggle()"
        icon-left="calendar-today"
        type="is-info" />
</b-field>

<!--INGRESO DE ESTADO INICIAL -->
<div class="column is-full-mobile p-1 m-1">
Estado inicial
        <b-select  v-model="$store.state.int_captacion_seleccionada.estado_ini" placeholder="Operativa">
        <option value = "Operativa">Operativa</option>
        <option value = "Operativa a Limpiar">Operativa a Limpiar</option>
        <option value = "Operativa a Reparar">Operativa a Reparar</option>
        <option value = "Operativa a Reparar y Limpiar">Operativa a Reparar y Limpiar</option> 
        <option value = "No Operativa">No Operativa</option>
        <option value = "No Operativa por Limpieza">No Operativa por Limpieza</option>
        <option value = "No Operativa por Rotura">No Operativa por Rotura</option>
        <option value = "No Operativa por Limpieza y Rotura">No Operativa por Limpieza y Rotura</option>    
        <option value = "Sin acceso">Sin acceso</option>    
        <option value = "No encontrada">No encontrada</option>  
        <option value = "Sin determinar">Sin determinar</option>                                  
        </b-select>
</div> 

<!--INGRESO DE ESTADO FINAL -->
<div class="column is-full-mobile p-1 m-1">
Estado final
        <b-select  v-model="$store.state.int_captacion_seleccionada.estado_fin" placeholder="Operativa">
        <option value = "Operativa">Operativa</option>
        <option value = "Operativa a Limpiar">Operativa a Limpiar</option>
        <option value = "Operativa a Reparar">Operativa a Reparar</option>
        <option value = "Operativa a Reparar y Limpiar">Operativa a Reparar y Limpiar</option> 
        <option value = "No Operativa">No Operativa</option>
        <option value = "No Operativa por Limpieza">No Operativa por Limpieza</option>
        <option value = "No Operativa por Rotura">No Operativa por Rotura</option>
        <option value = "No Operativa por Limpieza y Rotura">No Operativa por Limpieza y Rotura</option>    
        <option value = "Sin acceso">Sin acceso</option>    
        <option value = "No encontrada">No encontrada</option>  
        <option value = "Sin determinar">Sin determinar</option>                                    
        </b-select>
</div>

<!--INGRESO DE TIPO -->
<div class="column is-full-mobile p-1 m-1">
Tipo de intervención
        <b-select  v-model="$store.state.int_captacion_seleccionada.tipo" placeholder="Inspeccion">
            <option value = "Inspeccion">Inspeccion</option>
            <option value = "Limpieza Manual">Limpieza Manual</option>
            <option value = "Limpieza Mecanica">Limpieza Mecanica</option>
            <option value = "Reparacion">Reparacion</option>
            <option value = "Reparacion y Limpieza">Reparacion y Limpieza</option>                                  
        </b-select>
</div>

<!--INGRESO DE ACCION -->
<div class="column is-full-mobile p-1 m-1">
Alerta acción futura
<div class="box m-1 p-1" v-if="$store.state.int_captacion_seleccionada.accion == 'Sin intervencion adicional'" :style="{backgroundColor: '#00FF00', width: '200px', height: '4px'}"> </div>
<div class="box m-1 p-1" v-if="$store.state.int_captacion_seleccionada.accion == 'Intervencion en breve'" :style="{backgroundColor: '#FFFF00', width: '200px', height: '4px'}"> </div>
<div class="box m-1 p-1" v-if="$store.state.int_captacion_seleccionada.accion == 'Intervencion urgente'" :style="{backgroundColor: '#FF0000', width: '200px', height: '4px'}"> </div>
        <b-select  v-model="$store.state.int_captacion_seleccionada.accion" placeholder="Sin intervencion adicional">
            <option value = "Sin intervencion adicional">Sin intervencion adicional</option>
            <option value = "Intervencion en breve">Intervencion en breve</option>
            <option value = "Intervencion urgente">Intervencion urgente</option>                               
        </b-select>
</div>

<b-field label="Observaciones">
<b-input v-model="$store.state.int_captacion_seleccionada.observaciones" maxlength="500" type="textarea"></b-input>
</b-field>




<div class="column col-xs middle-xs center-xs">	
    <form enctype="multipart/form-data">
      <input accept="image/*" @change="guardo_fotografia_intervencion_captacion" capture="camera" id="foto_int_captacion" name="foto_int_captacion" ref="foto_int_captacion" style="display:none" type="file"> 
    </form>
    <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
     <b-button @click="$refs.foto_int_captacion.click()" type="is-info" rounded icon-left="camera" style="width:200px">
       Tomar Fotografia
     </b-button>
    </div>

    <form enctype="multipart/form-data">
     <input accept="image/*" @change="guardo_fotografia_intervencion_captacion" id="foto_int_captacion2" name="foto_int_captacion2" ref="foto_int_captacion2" style="display:none" type="file"> 
    </form>
    <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
     <b-button @click="$refs.foto_int_captacion2.click()" type="is-info" rounded icon-left="file-find" style="width:200px">
        Seleccionar Fotografia
      </b-button>
    </div>

    <div class="row center-xs middle-xs m-2" v-if="$store.state.datos_login.nivel_acceso > 2">
        <b-button  @click="abro_modal_grabar_audio2()" type="is-link" rounded  icon-left="microphone-plus"  style="width:200px">
              Grabar audio
        </b-button>
    </div>
</div>





<div>
      <div class="box m-0 p-1">
            <template  :active.sync="datos_intervencion_captacion_fotos_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="(carousel, i) in datos_intervencion_captacion_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_Intervenciones_Captacion'">                                             
                                </p>
                                <b-button class="m-1 is-pulled-right" size="is-small" rounded v-if="$store.state.datos_login.nivel_acceso > 0"  @click="eliminar_fotografia_intervencion_captacion(carousel.foto)" type="is-danger" icon-left="trash-can">             
                                </b-button>
                                </div>

                          </section>
                        </b-carousel-item>
                    </b-carousel>  
            </template>
      </div> 
</div>      
<div>
      <div class="box m-0 p-1">
            <template  :active.sync="datos_intervencion_captacion_audios_a_escuchar.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="(audio, i) in datos_intervencion_captacion_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>
                              <b-button class="m-1 is-pulled-right" size="is-small" rounded v-if="$store.state.datos_login.nivel_acceso > 0"  @click="eliminar_audio_intervencion_captacion(audio.audio)" type="is-danger" icon-left="trash-can">             
                              </b-button>
                              </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="volver_datos_intervencion_captacion()" type='is-danger' icon-right="backburger" style="float:right">
        Volver
      </b-button>
      <b-button  v-if="$store.state.datos_login.nivel_acceso > 2" v-on:click="guardar_datos_intervencion_captacion()" type="is-warning" rounded  icon-left="pencil"  style="width:200px">
       Guardar
    </b-button>
    </footer>
</div>
</form>
</b-modal>

















      </div>
`,
  computed: {

    fotos_a_ver: function () {
      let resultado = [];
      let lista = [];
      var tipo_elemento = store.state.tipo_elemento_seleccionado;
      switch (tipo_elemento) {
        case 'TRAMO':
          lista = store.state.tramo_seleccionado.fotos_con_fecha;
          break;
          case 'PSINGULAR':
            lista = store.state.psingular_seleccionado.fotos_con_fecha;
          break;
          case 'CAPTACION':
              lista = store.state.captacion_seleccionada.fotos_con_fecha;
          break;
      }
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    audios_a_escuchar: function () {
      let resultado = [];
      let lista = [];
      var tipo_elemento = store.state.tipo_elemento_seleccionado;
      switch (tipo_elemento) {
        case 'TRAMO':
          lista = store.state.tramo_seleccionado.audios_con_fecha;
          break;
      }
      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;
      },
    },
    datos_psingular_tramos: {
      get: function () {
        let tramos = store.state.psingular_seleccionado.tramos;
        let resultado = '';
        if (tramos != '') {
          let tramos_arr = JSON.parse(tramos);
          for (let tram of tramos_arr) {
            resultado += " " + tram;
          }
        }
        return resultado;
      },
      set: function (valor) {
      },
    },
    datos_psingular_tipos: {
      get: function () {
        let resultado = store.state.adm_tipos.filter(function(element){return element.elemento == 'cat_psingulares'});
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_psingular_provisorio: {
      get: function () {
        let resultado = store.state.psingular_seleccionado.provisorio;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.provisorio = valor;
      }
    },
    datos_psingular_proyecto: {
      get: function () {
        if (store.state.psingular_seleccionado.proyecto > 0)
        {
          var fd = new FormData();
          fd.append("id", store.state.psingular_seleccionado.proyecto);
          var getUrl = window.location;
          var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
          var phpfile = baseUrl + '/php/cargo_datos_proyecto.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
           var data = JSON.parse(this.response);
           store.state.proyecto_activo.id = data.id;
           store.state.proyecto_activo.nombre = data.nombre;
           store.state.proyecto_activo.clasificacion = data.clasificacion;
           store.state.proyecto_activo.tipo = data.tipo;
           store.state.proyecto_activo.construido = data.construido;
           store.state.proyecto_activo.anoproy = data.anoproy;
           store.state.proyecto_activo.descripcion = data.descripcion;
         };
         xhr.send(fd);
        }
        else
        {
            store.state.proyecto_activo.id = 0;
            store.state.proyecto_activo.nombre = '';
            store.state.proyecto_activo.clasificacion = '';
            store.state.proyecto_activo.tipo = '';
            store.state.proyecto_activo.construido = '';
            store.state.proyecto_activo.anoproy = '';
            store.state.proyecto_activo.descripcion = '';
          }
        resultado =  store.state.psingular_seleccionado.proyecto;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
        }
        else {
          if (valor > -1 && valor < 999999999) {
            store.state.psingular_seleccionado.proyecto = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_psingular_contrato: {
      get: function () {
        store.state.contrato_activo.nombre = '';
        store.state.contrato_activo.descripcion = '';
        for (var i = 0; i < store.state.adm_contratos.length; i++) {
          if (store.state.adm_contratos[i]["id"] == store.state.psingular_seleccionado.contrato) {
            store.state.contrato_activo.nombre = store.state.adm_contratos[i]["nombre"];
            store.state.contrato_activo.descripcion = store.state.adm_contratos[i]["descripcion"];
          }
        }
        resultado = store.state.psingular_seleccionado.contrato;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 999999999) {
            store.state.psingular_seleccionado.contrato = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_psingular_historial: {
      get: function () {
        let resultado = [];
        if (store.state.psingular_seleccionado.historial != '') {
          let eventos = JSON.parse(store.state.psingular_seleccionado.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);
          }
        }
        return resultado;
      },
      set: function (valor) {
        store.state.psingular_seleccionado.historial = valor;
      }
    },
    datos_psingular_fotos_a_ver: function () {
      let resultado = [];
      let lista = store.state.psingular_seleccionado.fotos_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_psingular_audios_a_escuchar: function () {
      let resultado = [];
      let lista = store.state.psingular_seleccionado.audios_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_psingular_inspeccionable: {
      get: function () {
        (store.state.psingular_seleccionado.inspeccion == 1)?resultado = true: resultado=false;
        return resultado;
      },
      set: function (valor) {
        (valor == true)?store.state.psingular_seleccionado.inspeccion = 1:store.state.psingular_seleccionado.inspeccion = 0;
        store.state.control_cambios = true;
      }
    },
    datos_psingular_ztapa: {
      get: function () {
        resultado = store.state.psingular_seleccionado.z_tapa;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de cota de tapa de punto singular no es válido. Corregir');
          store.state.psingular_seleccionado.z_tapa = 0;
        }
        else {
          if (valor > -2 && valor < 200) {
            store.state.psingular_seleccionado.z_tapa = valor;
            store.state.psingular_seleccionado.profundidad = Math.abs(store.state.psingular_seleccionado.z_tapa - store.state.psingular_seleccionado.z_ab).toFixed(2);
          }
          else {
            this.$buefy.toast.open('El valor ingresado de cota de tapa de punto singular no es válido. Corregir');
            store.state.psingular_seleccionado.z_tapa = 0;
            store.state.psingular_seleccionado.profundidad = 0;
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_psingular_zab: {
      get: function () {
        resultado = store.state.psingular_seleccionado.z_ab;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de cota de zampeado de punto singular no es válido. Corregir');
          store.state.psingular_seleccionado.z_ab = 0;
        }
        else {
          if (valor > -20 && valor < 200) {
            store.state.psingular_seleccionado.z_ab = valor;
            store.state.psingular_seleccionado.profundidad = Math.abs(store.state.psingular_seleccionado.z_tapa - store.state.psingular_seleccionado.z_ab).toFixed(2);
          }
          else {
            this.$buefy.toast.open('El valor ingresado de cota de zampeado de punto singular no es válido. Corregir');
            store.state.psingular_seleccionado.z_ab = 0;
            store.state.psingular_seleccionado.profundidad = 0;
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_psingular_salto: {
      get: function () {
        resultado = store.state.psingular_seleccionado.salto;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de salto de punto singular no es válido. Corregir');
          store.state.psingular_seleccionado.salto = 0;
        }
        else {
          if (valor > 0 && valor < 20) {
            store.state.psingular_seleccionado.salto = valor;
          }
          else {
            this.$buefy.toast.open('El valor ingresado de salto de punto singular no es válido. Corregir');
            store.state.psingular_seleccionado.salto = 0;
          }
        }
        store.state.control_cambios = true;
      }
    },
    ayudas_marca_x: {
      get: function () {
        resultado = store.state.centro_marca_ayuda.x;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de coordenada este de marca de ayuda no es válido. Corregir');
          store.state.centro_marca_ayuda.x = 0;
        }
        else {
              if (valor > 0 && valor < 700000) {
                store.state.centro_marca_ayuda.x = valor;
                }
                else
                {
                  this.$buefy.toast.open('El valor ingresado de coordenada este de marca de ayuda no es válido. Corregir');
                }
              }
      }
    },  
    ayudas_marca_y: {
      get: function () {
        resultado = store.state.centro_marca_ayuda.y;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de coordenada este de marca de ayuda no es válido. Corregir');
          store.state.centro_marca_ayuda.y = 0;
        }
        else {
              if (valor > 0 && valor < 7000000) {
                store.state.centro_marca_ayuda.y = valor;
                }
                else
                {
                  this.$buefy.toast.open('El valor ingresado de coordenada este de marca de ayuda no es válido. Corregir');
                }
             }
      }
    },       
    datos_psingular_tipo: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["id"] == store.state.psingular_seleccionado.tipo) {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              resultado = store.state.adm_tipos[i]["codigo"];
            }
            else {
              resultado = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
          }
        }
        (store.state.psingular_seleccionado.tipo == 10 || store.state.psingular_seleccionado.tipo == 11 || store.state.psingular_seleccionado.tipo == 12)? this.es_terminal = false: this.es_terminal = true;
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          let clave = '';
          if (store.state.adm_tipos[i]["descripcion"] == '') {
            clave = store.state.adm_tipos[i]["codigo"];
          }
          else {
            clave = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.psingular_seleccionado.tipo = store.state.adm_tipos[i]["id"];
          }
        }
        (store.state.psingular_seleccionado.tipo == 10 || store.state.psingular_seleccionado.tipo == 11 || store.state.psingular_seleccionado.tipo == 12)? this.es_terminal = false: this.es_terminal = true;
        store.state.control_cambios = true;
      }
    },
    datos_tipo_psingular_psingular: {
      get: function () {
        let tipos = [];
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["elemento"] == 'cat_psingulares') {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"];
            }
            else {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
            tipos.push(store.state.adm_tipos[i]);
          }
        }
        return tipos;
      },
      set: function (valor) {
      }
    },
    datos_ccz_psingular: {
      get: function () {
        if (store.state.psingular_seleccionado.ccz == '') {
          store.state.psingular_seleccionado.ccz = 'Sin asignar';
        }
        resultado = store.state.psingular_seleccionado.ccz;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.ccz = valor;
      },
    },
    datos_calle_psingular: {
      get: function () {
        resultado = store.state.psingular_seleccionado.calle;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.via = store.state.via_seleccionada;
        store.state.psingular_seleccionado.calle = valor;
      }
    },
    datos_etapa_psingular: {
      get: function () {
        if (store.state.psingular_seleccionado.etapa == '') {
          store.state.psingular_seleccionado.etapa = "Sin asignar";
        }
        resultado = store.state.psingular_seleccionado.etapa;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.etapa = valor;
      },
    },
    datos_accion_psingular: {
      get: function () {
        if (store.state.psingular_seleccionado.accion == '') {
          store.state.psingular_seleccionado.accion = "Sin asignar";
        }
        resultado = store.state.psingular_seleccionado.accion;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.accion = valor;
      },
    },
    datos_captacion_tipo: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["id"] == store.state.captacion_seleccionada.tipo) {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              resultado = store.state.adm_tipos[i]["codigo"];
            }
            else {
              resultado = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          let clave = '';
          if (store.state.adm_tipos[i]["descripcion"] == '') {
            clave = store.state.adm_tipos[i]["codigo"];
          }
          else {
            clave = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.captacion_seleccionada.tipo = store.state.adm_tipos[i]["id"];
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_captacion_tipos: {
      get: function () {
        let resultado = store.state.adm_tipos.filter(function(element){return element.elemento == 'cat_captaciones'});
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_captacion_provisorio: {
      get: function () {
        let resultado = store.state.captacion_seleccionada.provisorio;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.provisorio = valor;
      }
    },
    datos_captacion_clase: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["id"] == store.state.captacion_seleccionada.clase) {
            if (store.state.adm_clases[i]["descripcion"] == '') {
              resultado = store.state.adm_clases[i]["codigo"];
            }
            else {
              resultado = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          let clave = '';
          if (store.state.adm_clases[i]["descripcion"] == '') {
            clave = store.state.adm_clases[i]["codigo"];
          }
          else {
            clave = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.captacion_seleccionada.clase = store.state.adm_clases[i]["id"];
          }
        }
      }
    },
    datos_captacion_proyecto: {
      get: function () {
        if (store.state.captacion_seleccionada.proyecto > 0)
        {
          var fd = new FormData();
          fd.append("id", store.state.captacion_seleccionada.proyecto);
          var getUrl = window.location;
          var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
          var phpfile = baseUrl + '/php/cargo_datos_proyecto.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
           var data = JSON.parse(this.response);
           store.state.proyecto_activo.id = data.id;
           store.state.proyecto_activo.nombre = data.nombre;
           store.state.proyecto_activo.clasificacion = data.clasificacion;
           store.state.proyecto_activo.tipo = data.tipo;
           store.state.proyecto_activo.construido = data.construido;
           store.state.proyecto_activo.anoproy = data.anoproy;
           store.state.proyecto_activo.descripcion = data.descripcion;
         };
         xhr.send(fd);
        }
        else
        {
            store.state.proyecto_activo.id = 0;
            store.state.proyecto_activo.nombre = '';
            store.state.proyecto_activo.clasificacion = '';
            store.state.proyecto_activo.tipo = '';
            store.state.proyecto_activo.construido = '';
            store.state.proyecto_activo.anoproy = '';
            store.state.proyecto_activo.descripcion = '';
          }
        resultado =  store.state.captacion_seleccionada.proyecto;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
        }
        else {
          if (valor > -1 && valor < 999999999) {
            store.state.captacion_seleccionada.proyecto = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_captacion_contrato: {
      get: function () {
        store.state.contrato_activo.nombre = '';
        store.state.contrato_activo.descripcion = '';
        for (var i = 0; i < store.state.adm_contratos.length; i++) {
          if (store.state.adm_contratos[i]["id"] == store.state.captacion_seleccionada.contrato) {
            store.state.contrato_activo.nombre = store.state.adm_contratos[i]["nombre"];
            store.state.contrato_activo.descripcion = store.state.adm_contratos[i]["descripcion"];
          }
        }
        resultado = store.state.captacion_seleccionada.contrato;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 999999999) {
            store.state.captacion_seleccionada.contrato = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_captacion_historial: {
      get: function () {
        let resultado = [];
        if (store.state.captacion_seleccionada.historial != '') {
          let eventos = JSON.parse(store.state.captacion_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);
          }
        }
        return resultado;
      },
      set: function (valor) {
        store.state.captacion_seleccionada.historial = valor;
      }
    },
    datos_captacion_fotos_a_ver: function () {
      let resultado = [];
      let lista = store.state.captacion_seleccionada.fotos_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_captacion_audios_a_escuchar: function () {
      let resultado = [];
      let lista = store.state.captacion_seleccionada.audios_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_captacion_ztapa: {
      get: function () {
        resultado = store.state.captacion_seleccionada.z_tapa;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de cota de tapa de captación no es válido. Corregir');
          store.state.captacion_seleccionada.z_tapa = 0;
        }
        else {
          if (valor > -20 && valor < 200) {
            store.state.captacion_seleccionada.z_tapa = valor;
          }
          else {
            this.$buefy.toast.open('El valor ingresado de cota de tapa de captación no es válido. Corregir');
            store.state.captacion_seleccionada.z_tapa = 0;
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_captacion_zcol: {
      get: function () {
        resultado = store.state.captacion_seleccionada.z_col;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de cota de zampeado en colector de captación no es válido. Corregir');
          store.state.captacion_seleccionada.z_col = 0;
        }
        else {
          if (valor > -20 && valor < 200) {
            store.state.captacion_seleccionada.z_col = valor;
          }
          else {
            this.$buefy.toast.open('El valor ingresado de cota de tapa de zampeado en colector de captación no es válido. Corregir');
            store.state.captacion_seleccionada.z_col = 0;
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_bocas_captacion: {
      get: function () {
        if (store.state.captacion_seleccionada.cant_bocas == '') {
          store.state.captacion_seleccionada.cant_bocas = "Sin asignar";
        }
        resultado = store.state.captacion_seleccionada.cant_bocas;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.cant_bocas = valor;
      },
    },
    datos_tipo_captacion_captacion: {
      get: function () {
        let tipos = [];
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["elemento"] == 'cat_captaciones') {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"];
            }
            else {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
            tipos.push(store.state.adm_tipos[i]);
          }
        }
        return tipos;
      },
      set: function (valor) {
      }
    },
    datos_clase_captacion_captacion: {
      get: function () {
        let clases = [];
        let tipo = store.state.captacion_seleccionada.tipo;
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["elemento"] == 'cat_captaciones' && store.state.adm_clases[i]["id_tipo"] == tipo) {
            if (store.state.adm_clases[i]["descripcion"] == '') {
              store.state.adm_clases[i]["codigodesc"] = store.state.adm_clases[i]["codigo"];
            }
            else {
              store.state.adm_clases[i]["codigodesc"] = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
            }
            clases.push(store.state.adm_clases[i]);
          }
        }
        return clases;
      },
      set: function (valor) {
      }
    },
    datos_ccz_captacion: {
      get: function () {
        if (store.state.captacion_seleccionada.ccz == '') {
          store.state.captacion_seleccionada.ccz = 'Sin asignar';
        }
        resultado = store.state.captacion_seleccionada.ccz;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.ccz = valor;
      },
    },
    datos_calle_captacion: {
      get: function () {
        resultado = store.state.captacion_seleccionada.calle;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.via = store.state.via_seleccionada;
        store.state.captacion_seleccionada.calle = valor;
      }
    },
    datos_etapa_captacion: {
      get: function () {
        if (store.state.captacion_seleccionada.etapa == '') {
          store.state.captacion_seleccionada.etapa = "Sin asignar";
        }
        resultado = store.state.captacion_seleccionada.etapa;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.etapa = valor;
      },
    },
    datos_accion_captacion: {
      get: function () {
        if (store.state.captacion_seleccionada.accion == '') {
          store.state.captacion_seleccionada.accion = "Sin asignar";
        }
        resultado = store.state.captacion_seleccionada.accion;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.accion = valor;
      },
    },
    datos_material_conex_captacion: {
      get: function () {
        if (store.state.conex_capta_seleccionada.material == '') {
          store.state.conex_capta_seleccionada.material = "Sin asignar";
        }
        resultado = store.state.conex_capta_seleccionada.material;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.conex_capta_seleccionada.material = valor;
      },
    },
    datos_conex_captacion_tipo: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["id"] == store.state.conex_capta_seleccionada.tipo) {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              resultado = store.state.adm_tipos[i]["codigo"];
            }
            else {
              resultado = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          let clave = '';
          if (store.state.adm_tipos[i]["descripcion"] == '') {
            clave = store.state.adm_tipos[i]["codigo"];
          }
          else {
            clave = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.conex_capta_seleccionada.tipo = store.state.adm_tipos[i]["id"];
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_conex_capta_proyecto: {
      get: function () {
          if (store.state.conex_capta_seleccionada.proyecto > 0)
          {
            var fd = new FormData();
            fd.append("id", store.state.conex_capta_seleccionada.proyecto);
            var getUrl = window.location;
            var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
            var phpfile = baseUrl + '/php/cargo_datos_proyecto.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
             var data = JSON.parse(this.response);
             store.state.proyecto_activo.id = data.id;
             store.state.proyecto_activo.nombre = data.nombre;
             store.state.proyecto_activo.clasificacion = data.clasificacion;
             store.state.proyecto_activo.tipo = data.tipo;
             store.state.proyecto_activo.construido = data.construido;
             store.state.proyecto_activo.anoproy = data.anoproy;
             store.state.proyecto_activo.descripcion = data.descripcion;
           };
           xhr.send(fd);
          }
          else
          {
              store.state.proyecto_activo.id = 0;
              store.state.proyecto_activo.nombre = '';
              store.state.proyecto_activo.clasificacion = '';
              store.state.proyecto_activo.tipo = '';
              store.state.proyecto_activo.construido = '';
              store.state.proyecto_activo.anoproy = '';
              store.state.proyecto_activo.descripcion = '';
            }
          resultado =  store.state.conex_capta_seleccionada.proyecto;
          return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
        }
        else {
          if (valor > -1 && valor < 999999999) {
            store.state.conex_capta_seleccionada.proyecto = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_conex_capta_contrato: {
      get: function () {
        store.state.contrato_activo.nombre = '';
        store.state.contrato_activo.descripcion = '';
        for (var i = 0; i < store.state.adm_contratos.length; i++) {
          if (store.state.adm_contratos[i]["id"] == store.state.conex_capta_seleccionada.contrato) {
            store.state.contrato_activo.nombre = store.state.adm_contratos[i]["nombre"];
            store.state.contrato_activo.descripcion = store.state.adm_contratos[i]["descripcion"];
          }
        }
        resultado = store.state.conex_capta_seleccionada.contrato;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 999999999) {
            store.state.conex_capta_seleccionada.contrato = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_conex_captacion_seccion: {
      get: function () {
        resultado = store.state.conex_capta_seleccionada.seccion;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de seccion no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.conex_capta_seleccionada.seccion = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de seccion no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_conex_captacion_profundidad: {
      get: function () {
        resultado = store.state.conex_capta_seleccionada.profundidad;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de profundidad no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.conex_capta_seleccionada.profundidad = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de profundidad no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_conex_captacion_longitud: {
      get: function () {
        resultado = store.state.conex_capta_seleccionada.longitud;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de longitud no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.conex_capta_seleccionada.longitud = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de longitud no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_conex_captacion_historial: {
      get: function () {
        let resultado = [];
        if (store.state.conex_capta_seleccionada.historial != '') {
          let eventos = JSON.parse(store.state.conex_capta_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);
          }
        }
        return resultado;
      },
      set: function (valor) {
        store.state.conex_capta_seleccionada.historial = valor;
      }
    },
    datos_conex_captacion_tipo: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["id"] == store.state.conex_capta_seleccionada.tipo) {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              resultado = store.state.adm_tipos[i]["codigo"];
            }
            else {
              resultado = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          let clave = '';
          if (store.state.adm_tipos[i]["descripcion"] == '') {
            clave = store.state.adm_tipos[i]["codigo"];
          }
          else {
            clave = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.conex_capta_seleccionada.tipo = store.state.adm_tipos[i]["id"];
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_tipo_conex_captacion_captacion: {
      get: function () {
        let tipos = [];
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["elemento"] == 'cat_conex_capt') {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"];
            }
            else {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
            tipos.push(store.state.adm_tipos[i]);
          }
        }
        return tipos;
      },
      set: function (valor) {
      }
    },
    datos_etapa_conex_captacion: {
      get: function () {
        if (store.state.conex_capta_seleccionada.etapa == '') {
          store.state.conex_capta_seleccionada.etapa = "Sin asignar";
        }
        resultado = store.state.conex_capta_seleccionada.etapa;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.conex_capta_seleccionada.etapa = valor;
      },
    },
    datos_accion_conex_captacion: {
      get: function () {
        if (store.state.conex_capta_seleccionada.accion == '') {
          store.state.conex_capta_seleccionada.accion = "Sin asignar";
        }
        resultado = store.state.conex_capta_seleccionada.accion;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.conex_capta_seleccionada.accion = valor;
      },
    },
    ano_construido_tramo: {
      get: function () {
        let ano_actual = new Date(). getFullYear();
        if (store.state.tramo_seleccionado.dato4 < 1800 && store.state.tramo_seleccionado.dato4 > ano_actual ) 
        {
          store.state.tramo_seleccionado.dato4 = 0
        }
        let resultado = store.state.tramo_seleccionado.dato4;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
        }
        else {
          let ano_actual = new Date(). getFullYear();
          if (valor >= 1800 && valor <= ano_actual ) {
            store.state.tramo_seleccionado.dato4 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    ano_construido_psingular: {
      get: function () {
        let ano_actual = new Date(). getFullYear();
        if (store.state.psingular_seleccionado.dato4 < 1800 && store.state.psingular_seleccionado.dato4 > ano_actual ) 
        {
          store.state.psingular_seleccionado.dato4 = 0
        }
        let resultado = store.state.psingular_seleccionado.dato4;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
        }
        else {
          let ano_actual = new Date(). getFullYear();
          if (valor >= 1800 && valor <= ano_actual ) {
            store.state.psingular_seleccionado.dato4 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    ano_construido_captacion: {
      get: function () {
        let ano_actual = new Date(). getFullYear();
        if (store.state.captacion_seleccionada.dato4 < 1800 && store.state.captacion_seleccionada.dato4 > ano_actual ) 
        {
          store.state.captacion_seleccionada.dato4 = 0
        }
        let resultado = store.state.captacion_seleccionada.dato4;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
        }
        else {
          let ano_actual = new Date(). getFullYear();
          if (valor >= 1800 && valor <= ano_actual ) {
            store.state.captacion_seleccionada.dato4 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    ano_construido_conex_capta: {
      get: function () {
        let ano_actual = new Date(). getFullYear();
        if (store.state.conex_capta_seleccionada.dato4 < 1800 && store.state.conex_capta_seleccionada.dato4 > ano_actual ) 
        {
          store.state.conex_capta_seleccionada.dato4 = 0
        }
        let resultado = store.state.conex_capta_seleccionada.dato4;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
        }
        else {
          let ano_actual = new Date(). getFullYear();
          if (valor >= 1800 && valor <= ano_actual ) {
            store.state.conex_capta_seleccionada.dato4 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de año de construído no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_tramos_tipos_seccion: {
      get: function () {
        let resultado = store.state.adm_clases.filter(function(element){return element.elemento == 'cat_tramos'});
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_tramo_provisorio: {
      get: function () {
        let resultado = store.state.tramo_seleccionado.provisorio;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.provisorio = valor;
      }
    },
    datos_tramo_habilitado: {
      get: function () {
        if (store.state.tramo_seleccionado.habilitado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.tramo_seleccionado.habilitado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.tramo_seleccionado.habilitado = fechaactual;
        }
        else
        {
          store.state.tramo_seleccionado.habilitado = '';
        }
      }
    },
    datos_tramo_publicado: {
      get: function () {
        if (store.state.tramo_seleccionado.publicado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.tramo_seleccionado.publicado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.tramo_seleccionado.publicado = fechaactual;
        }
        else
        {
          store.state.tramo_seleccionado.publicado = '';
        }
      }
    },
    datos_tramo_fueraservicio: {
      get: function () {
        if (store.state.tramo_seleccionado.fueraservicio == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.tramo_seleccionado.fueraservicio == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.tramo_seleccionado.fueraservicio = fechaactual;
        }
        else
        {
          store.state.tramo_seleccionado.fueraservicio = '';
        }
      }
    },
    datos_psingular_habilitado: {
      get: function () {
        if (store.state.psingular_seleccionado.habilitado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.psingular_seleccionado.habilitado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.psingular_seleccionado.habilitado = fechaactual;
        }
        else
        {
          store.state.psingular_seleccionado.habilitado = '';
        }
      }
    },
    datos_psingular_publicado: {
      get: function () {
        if (store.state.psingular_seleccionado.publicado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.psingular_seleccionado.publicado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.psingular_seleccionado.publicado = fechaactual;
        }
        else
        {
          store.state.psingular_seleccionado.publicado = '';
        }
      }
    },
    datos_psingular_fueraservicio: {
      get: function () {
        if (store.state.psingular_seleccionado.fueraservicio == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.psingular_seleccionado.fueraservicio == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.psingular_seleccionado.fueraservicio = fechaactual;
        }
        else
        {
          store.state.psingular_seleccionado.fueraservicio = '';
        }
      }
    },
    datos_captacion_habilitado: {
      get: function () {
        if (store.state.captacion_seleccionada.habilitado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.captacion_seleccionada.habilitado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.captacion_seleccionada.habilitado = fechaactual;
        }
        else
        {
          store.state.captacion_seleccionada.habilitado = '';
        }
      }
    },
    datos_captacion_publicado: {
      get: function () {
        if (store.state.captacion_seleccionada.publicado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.captacion_seleccionada.publicado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.captacion_seleccionada.publicado = fechaactual;
        }
        else
        {
          store.state.captacion_seleccionada.publicado = '';
        }
      }
    },
    datos_captacion_fueraservicio: {
      get: function () {
        if (store.state.captacion_seleccionada.fueraservicio == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.captacion_seleccionada.fueraservicio == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.captacion_seleccionada.fueraservicio = fechaactual;
        }
        else
        {
          store.state.captacion_seleccionada.fueraservicio = '';
        }
      }
    },
    datos_conex_capta_habilitado: {
      get: function () {
        if (store.state.conex_capta_seleccionada.habilitado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.conex_capta_seleccionada.habilitado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.conex_capta_seleccionada.habilitado = fechaactual;
        }
        else
        {
          store.state.conex_capta_seleccionada.habilitado = '';
        }
      }
    },
    datos_conex_capta_publicado: {
      get: function () {
        if (store.state.conex_capta_seleccionada.publicado == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.conex_capta_seleccionada.publicado == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.conex_capta_seleccionada.publicado = fechaactual;
        }
        else
        {
          store.state.conex_capta_seleccionada.publicado = '';
        }
      }
    },
    datos_conex_capta_fueraservicio: {
      get: function () {
        if (store.state.conex_capta_seleccionada.fueraservicio == '')
        {
          return false;
        }
        else
        {
          return true;
        }
      },
      set: function (valor) {
        store.state.control_cambios = true;
        if (store.state.conex_capta_seleccionada.fueraservicio == '')
        {
          let fechaactual = app.obtengo_fecha(new Date());
          store.state.conex_capta_seleccionada.fueraservicio = fechaactual;
        }
        else
        {
          store.state.conex_capta_seleccionada.fueraservicio = '';
        }
      }
    },
    datos_tramos_tipos_tramo: {
      get: function () {
        let resultado = store.state.adm_tipos.filter(function(element){return element.elemento == 'cat_tramos'});
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_tramo_tiposec: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["id"] == store.state.tramo_seleccionado.tiposec) {
            if (store.state.adm_clases[i]["descripcion"] == '') {
              resultado = store.state.adm_clases[i]["codigo"];
            }
            else {
              resultado = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          let clave = '';
          if (store.state.adm_clases[i]["descripcion"] == '') {
            clave = store.state.adm_clases[i]["codigo"];
          }
          else {
            clave = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.tramo_seleccionado.tiposec = store.state.adm_clases[i]["id"];
          }
        }
      }
    },
    datos_tramo_tipotra: {
      get: function () {
        let resultado = "Sin determinar";
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["id"] == store.state.tramo_seleccionado.tipotra) {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              resultado = store.state.adm_tipos[i]["codigo"];
            }
            else {
              resultado = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
          }
        }
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          let clave = '';
          if (store.state.adm_tipos[i]["descripcion"] == '') {
            clave = store.state.adm_tipos[i]["codigo"];
          }
          else {
            clave = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
          }
          if (clave == valor) {
            store.state.tramo_seleccionado.tipotra = store.state.adm_tipos[i]["id"];
          }
        }
      }
    },
    ver_clase_tramo: {
      get: function () {
        let resultado = "";
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["id"] == store.state.tramo_seleccionado.tiposec) {
              resultado = store.state.adm_clases[i]["diagrama"];
          }
        }
        return resultado;
      },
      set: function (valor) {
      }
    },
    ver_clase_captacion: {
      get: function () {
        let resultado = "";
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["id"] == store.state.captacion_seleccionada.clase) {
              resultado = store.state.adm_clases[i]["diagrama"];
          }
        }
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_tramo_dimensiones: {
      get: function () {
        resultado = "Alto:" + store.state.tramo_seleccionado.dim1 + " Ancho:" + store.state.tramo_seleccionado.dim2 + " Dim3:" + store.state.tramo_seleccionado.dim3 + " Dim4: " + store.state.tramo_seleccionado.dim4;
        return resultado;
      },
      set: function (valor) {
      }
    },
    datos_tramo_historial: {
      get: function () {
        let resultado = [];
        try {
          let eventos = JSON.parse(store.state.tramo_seleccionado.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.tramo_seleccionado.historial);
        }
        return resultado;
      },
      set: function (valor) {
        store.state.tramo_seleccionado.historial = valor;
      }
    },
    datos_tramo_fotos_a_ver: function () {
      let resultado = [];
      let lista = store.state.tramo_seleccionado.fotos_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_tramo_audios_a_escuchar: function () {
      let resultado = [];
      let lista = store.state.tramo_seleccionado.audios_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    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;
      },
    },
    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_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_tramo_longitud: {
      get: function () {
        let longitud_calculada = dl_geometria.dl_largo_en_metros_de_geograficas(store.state.tramo_seleccionado.geometria);
        let dif_long = 100 * Math.abs(store.state.tramo_seleccionado.longitud - longitud_calculada) / store.state.tramo_seleccionado.longitud;
        (dif_long > 5) ? this.colores_datos_modificados.tramo_longitud = 'ff0000' : this.colores_datos_modificados.tramo_longitud = '000000';
        store.state.control_cambios = true;
        return store.state.tramo_seleccionado.longitud;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de largo de tramo no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {         
            store.state.tramo_seleccionado.longitud = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de largo de tramo no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_pendiente: {
      get: function () {
        let pendiente_calculada = 100 * (Math.abs(store.state.tramo_seleccionado.zarriba - store.state.tramo_seleccionado.zabajo) / store.state.tramo_seleccionado.longitud);
        let dif_pend = Math.abs(pendiente_calculada - store.state.tramo_seleccionado.pendiente);
        (dif_pend > 0.1) ? this.colores_datos_modificados.tramo_pendiente = 'ff0000' : this.colores_datos_modificados.tramo_pendiente = '000000';
        resultado = store.state.tramo_seleccionado.pendiente;
        store.state.control_cambios = true;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de pendiente de tramo no es válido. Corregir');
        }
        else {
          if (valor >= 0 && valor < 100) {
            store.state.tramo_seleccionado.pendiente = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de pendiente de tramo no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_salto: {
      get: function () {
        resultado = store.state.tramo_seleccionado.salto;
        store.state.control_cambios = true;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de salto de tramo no es válido. Corregir');
        }
        else {
          if (valor >= 0 && valor < 100) {
            store.state.tramo_seleccionado.salto = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de salto de tramo no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },    
    datos_tramo_dim1: {
      get: function () {
        resultado = store.state.tramo_seleccionado.dim1;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de dim1 no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.tramo_seleccionado.dim1 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de dim1 no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_dim2: {
      get: function () {
        resultado = store.state.tramo_seleccionado.dim2;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de dim2 no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.tramo_seleccionado.dim2 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de dim2 no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_dim3: {
      get: function () {
        resultado = store.state.tramo_seleccionado.dim3;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de dim3 no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.tramo_seleccionado.dim3 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de dim3 no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_dim4: {
      get: function () {
        resultado = store.state.tramo_seleccionado.dim4;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de dim4 no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 15000) {
            store.state.tramo_seleccionado.dim4 = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de dim4 no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_zarriba: {
      get: function () {
        resultado = store.state.tramo_seleccionado.zarriba;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de zampeado arriba no es válido. Corregir');
        }
        else {
          if (valor > -2 && valor < 200) {
            store.state.tramo_seleccionado.zarriba = valor;
            (store.state.tramo_seleccionado.z_tapa_aa != 0) ? store.state.tramo_seleccionado.prof_aa = store.state.tramo_seleccionado.z_tapa_aa - valor: store.state.tramo_seleccionado.prof_aa = 0.00;
            store.state.tramo_seleccionado.prof_aa = store.state.tramo_seleccionado.prof_aa.toFixed(2);
          } else {
            this.$buefy.toast.open('El valor ingresado de zampeado arriba no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_plano: {
      get: function () {
        resultado = store.state.tramo_seleccionado.plano;
        return resultado;
      },
      set: function (valor) {
        store.state.tramo_seleccionado.plano = valor;
        store.state.control_cambios = true;
      },
    },
    datos_psingular_plano: {
      get: function () {
        resultado = store.state.psingular_seleccionado.plano;
        return resultado;
      },
      set: function (valor) {
        store.state.psingular_seleccionado.plano = valor;
        store.state.control_cambios = true;
      },
    },
    datos_captacion_plano: {
      get: function () {
        resultado = store.state.captacion_seleccionada.plano;
        return resultado;
      },
      set: function (valor) {
        store.state.captacion_seleccionada.plano = valor;
        store.state.control_cambios = true;
      },
    },
    datos_tramo_zabajo: {
      get: function () {
        resultado = store.state.tramo_seleccionado.zabajo;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de zampeado abajo no es válido. Corregir');
        }
        else {
          if (valor > -10 && valor < 200) {
            store.state.tramo_seleccionado.zabajo = valor;
            (store.state.tramo_seleccionado.z_tapa_ab != 0) ? store.state.tramo_seleccionado.prof_ab = store.state.tramo_seleccionado.z_tapa_ab - valor: store.state.tramo_seleccionado.prof_ab = 0.00;
            store.state.tramo_seleccionado.prof_ab = store.state.tramo_seleccionado.prof_ab.toFixed(2);
          }
          else {
            this.$buefy.toast.open('El valor ingresado de zampeado abajo no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      },
    },
    datos_tramo_proyecto: {
      get: function () {
        if (store.state.tramo_seleccionado.proyecto > 0)
        {
          var fd = new FormData();
          fd.append("id", store.state.tramo_seleccionado.proyecto);
          var getUrl = window.location;
          var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
          var phpfile = baseUrl + '/php/cargo_datos_proyecto.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
           var data = JSON.parse(this.response);
           store.state.proyecto_activo.id = data.id;
           store.state.proyecto_activo.nombre = data.nombre;
           store.state.proyecto_activo.clasificacion = data.clasificacion;
           store.state.proyecto_activo.tipo = data.tipo;
           store.state.proyecto_activo.construido = data.construido;
           store.state.proyecto_activo.anoproy = data.anoproy;
           store.state.proyecto_activo.descripcion = data.descripcion;
         };
         xhr.send(fd);
        }
        else
        {
            store.state.proyecto_activo.id = 0;
            store.state.proyecto_activo.nombre = '';
            store.state.proyecto_activo.clasificacion = '';
            store.state.proyecto_activo.tipo = '';
            store.state.proyecto_activo.construido = '';
            store.state.proyecto_activo.anoproy = '';
            store.state.proyecto_activo.descripcion = '';
          }
        resultado =  store.state.tramo_seleccionado.proyecto;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
        }
        else {
          if (valor > -1 && valor < 999999999) {
            store.state.tramo_seleccionado.proyecto = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de proyecto no es válido. Corregir');
          }
        }
        store.state.control_cambios = true;
      }
    },
    datos_tramo_contrato: {
      get: function () {
        store.state.contrato_activo.nombre = '';
        store.state.contrato_activo.descripcion = '';
        for (var i = 0; i < store.state.adm_contratos.length; i++) {
          if (store.state.adm_contratos[i]["id"] == store.state.tramo_seleccionado.contrato) {
            store.state.contrato_activo.nombre = store.state.adm_contratos[i]["nombre"];
            store.state.contrato_activo.descripcion = store.state.adm_contratos[i]["descripcion"];
          }
        }
        resultado = store.state.tramo_seleccionado.contrato;
        return resultado;
      },
      set: function (valor) {
        if (isNaN(valor)) {
          this.$buefy.toast.open('El valor ingresado de id de contrato no es válido. Corregir');
        }
        else {
          if (valor > 0 && valor < 999999999) {
            store.state.tramo_seleccionado.contrato = valor;
          } else {
            this.$buefy.toast.open('El valor ingresado de id de contrato 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_calle_tramo: {
      get: function () {
        resultado = store.state.tramo_seleccionado.calle;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.via = store.state.via_seleccionada;
        store.state.tramo_seleccionado.calle = 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_accion_tramo: {
      get: function () {
        if (store.state.tramo_seleccionado.accion == '') {
          store.state.tramo_seleccionado.accion = "Sin asignar";
        }
        resultado = store.state.tramo_seleccionado.accion;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.accion = valor;
      },
    },
    datos_material_tramo: {
      get: function () {
        if (store.state.tramo_seleccionado.material == '') {
          store.state.tramo_seleccionado.material = "Sin asignar";
        }
        resultado = store.state.tramo_seleccionado.material;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.material = valor;
      },
    },
    datos_empresa_tramo: {
      get: function () {
        if (store.state.tramo_seleccionado.dato1 == '') {
          store.state.tramo_seleccionado.dato1 = "Sin asignar";
        }
        resultado = store.state.tramo_seleccionado.dato1;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.dato1 = valor;
      },
    },
    datos_empresa_psingular: {
      get: function () {
        if (store.state.psingular_seleccionado.dato1 == '') {
          store.state.psingular_seleccionado.dato1 = "Sin asignar";
        }
        resultado = store.state.psingular_seleccionado.dato1;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.psingular_seleccionado.dato1 = valor;
      },
    },
    datos_empresa_captacion: {
      get: function () {
        if (store.state.captacion_seleccionada.dato1 == '') {
          store.state.captacion_seleccionada.dato1 = "Sin asignar";
        }
        resultado = store.state.captacion_seleccionada.dato1;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.captacion_seleccionada.dato1 = 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_etapa_tramo: {
      get: function () {
        if (store.state.tramo_seleccionado.etapa == '') {
          store.state.tramo_seleccionado.etapa = "Sin asignar";
        }
        resultado = store.state.tramo_seleccionado.etapa;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.etapa = valor;
      },
    },
    datos_descripcion_tramo: {
      get: function () {
        resultado = store.state.tramo_seleccionado.comentarios;
        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.tramo_seleccionado.comentarios = cadena;
      },
    },
    datos_descripcion_psingular: {
      get: function () {
        resultado = store.state.psingular_seleccionado.comentarios;
        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.psingular_seleccionado.comentarios = cadena;
      },
    },
    datos_descripcion_captacion: {
      get: function () {
        resultado = store.state.captacion_seleccionada.comentarios;
        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.captacion_seleccionada.comentarios = cadena;
      },
    },
    datos_descripcion_conex_captacion: {
      get: function () {
        resultado = store.state.conex_capta_seleccionada.comentarios;
        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.conex_capta_seleccionada.comentarios = cadena;
      },
    },
    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, "ñ");
        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_ccz_tramo: {
      get: function () {
        if (store.state.tramo_seleccionado.ccz == '') {
          store.state.tramo_seleccionado.ccz = 'Sin asignar';
        }
        resultado = store.state.tramo_seleccionado.ccz;
        return resultado;
      },
      set: function (valor) {
        store.state.control_cambios = true;
        store.state.tramo_seleccionado.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_tipo_tramo_tramo: {
      get: function () {
        let tipos = [];
        for (var i = 0; i < store.state.adm_tipos.length; i++) {
          if (store.state.adm_tipos[i]["elemento"] == 'cat_tramos') {
            if (store.state.adm_tipos[i]["descripcion"] == '') {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"];
            }
            else {
              store.state.adm_tipos[i]["codigodesc"] = store.state.adm_tipos[i]["codigo"] + "-" + store.state.adm_tipos[i]["descripcion"];
            }
            tipos.push(store.state.adm_tipos[i]);
          }
        }
        return tipos;
      },
      set: function (valor) {
      }
    },
    datos_tipo_tramo_seccion: {
      get: function () {
        let clases = [];
        for (var i = 0; i < store.state.adm_clases.length; i++) {
          if (store.state.adm_clases[i]["elemento"] == 'cat_tramos') {
            if (store.state.adm_clases[i]["descripcion"] == '') {
              store.state.adm_clases[i]["codigodesc"] = store.state.adm_clases[i]["codigo"];
            }
            else {
              store.state.adm_clases[i]["codigodesc"] = store.state.adm_clases[i]["codigo"] + "-" + store.state.adm_clases[i]["descripcion"];
            }
            clases.push(store.state.adm_clases[i]);
          }
        }
        return clases;
      },
      set: function (valor) {
      }
    },
    datos_servicios: {
      get: function () {
      },
      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) {
        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
      })
    },
    geotif: {
      get: function () {
      },
      set: function (valor) {
          if (store.state.geotif == false)
          {
              if (valor.type == 'image/tiff')
                  {
                  store.state.geotif = valor;
                  valor.arrayBuffer().then(buff => {app.cargo_geotif(map,buff);});
                  store.state.geotif = true;
                  }
                  else
                  {
                    this.$buefy.toast.open('No es un formato válido');
                  }
          }
        else
          {
            map.removeLayer(layertif);
            layertif == undefined;
            store.state.geotif = false;
            this.$buefy.toast.open('Ya existía GeoTiff y se eliminó. Para cargar nuevo GeoTiff repita la operación');
            
          }
          store.state.modal_visible = '';
      },
    },

    intervencion_captacion_fotos_a_ver: function () {
      let resultado = [];
      let lista = store.int_captacion_seleccionada.fotos_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    intervencion_captacion_audios_a_escuchar: function () {
      let resultado = [];
      let lista = store.state.int_captacion_seleccionada.audios_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_fecha_intervenciones: {
      get: function () {
        if (store.state.int_captacion_seleccionada.fecha == '')
        {  
          store.state.int_captacion_seleccionada.fecha = app.obtengo_fecha(new Date());
        }  
        return app.devuelvo_fecha(store.state.int_captacion_seleccionada.fecha);
      },
      set: function (valor) {
        let resultado = app.date_a_fechatexto(new Date(valor));
        store.state.int_captacion_seleccionada.fecha = resultado;
        return resultado;
      },
    },
    datos_intervencion_captacion_fotos_a_ver: function () {
      let resultado = [];
      let lista = store.state.int_captacion_seleccionada.fotos_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    },
    datos_intervencion_captacion_audios_a_escuchar: function (e) {
      let resultado = [];
      let lista = store.state.int_captacion_seleccionada.audios_con_fecha;
      if (lista != []) {
        for (i = 0; i < lista.length; i++) {
          resultado.push(lista[i]);
        }
      }
      return resultado;
    }




  },

  watch: {
      '$store.state.modal_visible': function (nuevoValor) {
        if (nuevoValor === 'Fotos_Pantalla_Completa2') {
          this.$nextTick(() => {
            this.habilitarPanzoomEnImagen();
          });
        }
      }
  },

  methods:
   {

    cerrar_pantalla_completa2(){
      if(store.state.tipo_elemento_seleccionado == 'TRAMO')
      {store.state.modal_visible = 'Ver_Datos_y_Media_Tramo'}
      else if(store.state.tipo_elemento_seleccionado == 'PSINGULAR')
      {store.state.modal_visible = 'Ver_Datos_y_Media_Psingular'}
      else if(store.state.tipo_elemento_seleccionado == 'CAPTACION')
      {store.state.modal_visible = 'Ver_Datos_y_Media_Captacion'}
      else 
      {store.state.modal_visible = ''}
    },
    habilitarPanzoomEnImagen() {
      const panzoomContainer = this.$refs.panzoomContainer;
      const zoomableImage = this.$refs.fotoPantallaCompleta;
      if (panzoomContainer && zoomableImage) {
        // Inicializa Panzoom
        const pz = panzoom(zoomableImage, {
          // Configuración de Panzoom
          zoomSpeed: 0.065,
          minZoom: 1,
          maxZoom: 8,
          contain: 'outside',
          startScale: 1,
        });
     }
    },
    volver_modal_anterior() {
      if (store.state.modal_anterior != '') {
        store.state.modal_visible = store.state.modal_anterior;
      }
      else
      {
      store.state.modal_visible = '';
      }
    },
    barra_superior_guardar_cambios_mapa: function () {
      map.editTools.options.skipMiddleMarkers = false;
      app.chequeo_conexion();
      var objeto_tramo = '';
      var padre = this;
      var mapa = map;
      if (store.state.hayconexion == true) {


        if (this.tipo_cambio_mapa == 'cambio_tramo_existente') {
          this.$buefy.toast.open({duration: 5000, message: 'Cambiando tramo...'});
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
              objeto_tramo = store.state.tramos_en_mapa[i];
              var coordenadas = objeto_tramo.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 z_tapa_aa = 0;
          let z_tapa_ab = 0;
          if (objeto_tramo.options.customData.id_psig_aa != 0)
          {            
              for (var s = 0; s < store.state.psingulares_en_mapa.length; s++) {
                if (store.state.psingulares_en_mapa[s].options.customData.id_psingular == objeto_tramo.options.customData.id_psig_aa) {
                  z_tapa_aa = store.state.psingulares_en_mapa[s].options.customData.z_tapa;
                }
              }
          }
          if (objeto_tramo.options.customData.id_psig_ab != 0)
          {            
              for (var s = 0; s < store.state.psingulares_en_mapa.length; s++) {
                if (store.state.psingulares_en_mapa[s].options.customData.id_psingular == objeto_tramo.options.customData.id_psig_ab) {
                  z_tapa_ab = store.state.psingulares_en_mapa[s].options.customData.z_tapa;
                }
              }
          }
          let dif_largo = 100 * Math.abs(objeto_tramo.options.customData.longitud - store.state.tramo_seleccionado.longitud) / store.state.tramo_seleccionado.longitud;
          if (dif_largo <= 5){
            objeto_tramo.options.customData.longitud = store.state.tramo_seleccionado.longitud;
          }
          else
          {
            let pendiente_calculada = 100 * (Math.abs(store.state.tramo_seleccionado.zarriba - store.state.tramo_seleccionado.zabajo) / objeto_tramo.options.customData.longitud);
            objeto_tramo.options.customData.pendiente = pendiente_calculada;
          }
          let historias = JSON.parse(store.state.tramo_seleccionado.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 cat_tramos SET SHAPE = GEOMFROMTEXT('LINESTRING(";
          for (let i = 0; i < coordenadas.length; i++) {
            sql += coordenadas[i].lng + " " + coordenadas[i].lat + ",";
          }
          sql = sql.slice(0, -1);
          sql += ")'), historial = '" + historia + "', longitud = " + objeto_tramo.options.customData.longitud + ", pendiente = " + objeto_tramo.options.customData.pendiente;
          sql += ", id_psig_aa = " + objeto_tramo.options.customData.id_psig_aa + ", id_psig_ab = " + objeto_tramo.options.customData.id_psig_ab;
          sql += ", z_tapa_aa = " + z_tapa_aa + ", z_tapa_ab = " + z_tapa_ab;
          sql += ", dato3 = " + store.state.datos_login.revisar ;          
          sql += " WHERE elemred = " + store.state.tramo_seleccionado.id_tramo;
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.tramo_seleccionado.id_tramo);
          fd.append("tipo", "TRAMO");
          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/modifico_geometria_tramo.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            objeto_tramo.disableEdit()
            store.state.modo_seleccion = 'todo';
            padre.cambios_mapa = false;
            store.state.tramo_seleccionado.historial = historia;
            objeto_tramo.options.customData.historial = historia;
            store.state.tramo_seleccionado.longitud = objeto_tramo.options.customData.longitud;
            store.state.tramo_seleccionado.geometria =JSON.parse(JSON.stringify(objeto_tramo.getLatLngs()));
            store.state.tramo_seleccionado.pendiente = objeto_tramo.options.customData.pendiente;
            store.state.tramo_seleccionado.id_psig_aa = objeto_tramo.options.customData.id_psig_aa;
            store.state.tramo_seleccionado.id_psig_ab = objeto_tramo.options.customData.id_psig_ab;
            store.state.tramo_seleccionado.z_tapa_aa = z_tapa_aa;
            objeto_tramo.options.customData.z_tapa_aa = z_tapa_aa;
            store.state.tramo_seleccionado.z_tapa_ab = z_tapa_ab;
            objeto_tramo.options.customData.z_tapa_ab = z_tapa_ab;
            let nuevopopup = "<div style='background:white;padding:6px 11px 11px 6px'><b>TRAMO:</b><br><b>Id:" + store.state.tramo_seleccionado.id_tramo + "</b><br><b>Long: " + store.state.tramo_seleccionado.longitud + "</b><br><b>Pend: " + store.state.tramo_seleccionado.pendiente + "</b><br><b>Dim1: " + store.state.tramo_seleccionado.dim1 + "</b><br><b>ZAa: " + store.state.tramo_seleccionado.zarriba + "</b><br><b>ZAb: " + store.state.tramo_seleccionado.zabajo + "</b></div>"
            objeto_tramo.setTooltipContent(nuevopopup);
            store.state.modal_visible = 'Modificar_Tramo';
          };
          xhr.send(fd);
        }


        if (this.tipo_cambio_mapa == 'nuevo_tramo') {
          let seguir = false;
          if (store.state.nuevo_tramo !== '') {
            if (store.state.nuevo_tramo.getLatLngs().length == 2) { seguir = true; }
          }
          if (!seguir) {
            this.$buefy.toast.open('Geometria de tramo sin completar');
          }
          else {
            let lat_nueva = store.state.nuevo_tramo.getLatLngs()[0].lat;
            let lon_nueva = store.state.nuevo_tramo.getLatLngs()[0].lng;
            app.permiso_por_punto_y_tipo_elemento('Red', lat_nueva, lon_nueva)
            .then(resultado => {
              if (!resultado) {
                this.$buefy.toast.open({duration: 5000, message: 'El usuario no tiene permisos para crear este elemento.'});
                this.barra_superior_descartar_cambios_mapa();
              } else
            {
            this.$buefy.toast.open({duration: 5000, message: 'Guardando nuevo tramo...'});

            var ccz = '';
            var accion = '';
            objeto_tramo = store.state.nuevo_tramo;
            var coordenadas = objeto_tramo.getLatLngs();
            var puntomedio = L.point((coordenadas[0].lat + coordenadas[coordenadas.length - 1].lat) / 2.0, (coordenadas[0].lng + coordenadas[coordenadas.length - 1].lng) / 2.0);
            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(puntomedio, p1, p2);
              if (distancia_variable < menor_distancia) {
                ccz = store.state.conexiones_en_mapa[s].options.customData.ccz;
                menor_distancia = distancia_variable;
              }
            }
            menor_distancia = 99999;
            var zarriba = 0;
            var z_tapa_aa = 0;
            var prof_aa = 0;
            if (store.state.portavariables[0] != 0)
            {            
                for (var s = 0; s < store.state.psingulares_en_mapa.length; s++) {
                  if (store.state.psingulares_en_mapa[s].options.customData.id_psingular == store.state.portavariables[0]) {
                    z_tapa_aa = store.state.psingulares_en_mapa[s].options.customData.z_tapa;
                  }
                }
            }
            var zabajo = 0;
            var z_tapa_ab = 0;
            var prof_ab = 0;
            if (store.state.portavariables[1] != 0)
            {            
                for (var s = 0; s < store.state.psingulares_en_mapa.length; s++) {
                  if (store.state.psingulares_en_mapa[s].options.customData.id_psingular == store.state.portavariables[1]) {
                    z_tapa_ab = store.state.psingulares_en_mapa[s].options.customData.z_tapa;
                  }
                }
            }
            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(puntomedio, 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;
              }
            }
            let longitud = dl_geometria.dl_largo_en_metros_de_geograficas(coordenadas);
            let historias = [];
            let fechaactual = app.obtengo_fecha(new Date());
            let historia_array = { "descripcion": "NUEVO TRAMO POR CATASTRO", "fecha": fechaactual, "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            var historia = JSON.stringify(historias);
            let sql = "INSERT INTO cat_tramos (SHAPE, elemred, id_psig_aa, id_psig_ab, zarriba, zabajo, z_tapa_aa, z_tapa_ab, prof_aa, prof_ab, longitud,";
            sql += "ccz, calle, via, historial,alta_fuente,alta_fecha,etapa,tiposec,tipotra,dim1,dim2,dim3,dim4,contrato,proyecto,material,accion,dato3) VALUES (";
            sql += "GEOMFROMTEXT('LINESTRING(" + coordenadas[0].lng + " " + coordenadas[0].lat + "," + coordenadas[coordenadas.length - 1].lng + " " + coordenadas[coordenadas.length - 1].lat + ")'),";
            sql += "(SELECT MAX(elemred) + 1 FROM cat_tramos CAT)," + store.state.portavariables[0] + "," + store.state.portavariables[1] + ",";
            sql += zarriba + "," + zabajo + "," + z_tapa_aa + "," + z_tapa_ab + "," + prof_aa + "," + prof_ab + "," + longitud + ",'" + ccz + "','";
            sql += nombre_calle + "'," + via + ",'" + historia + "','INGRESO CON APLICACION DE CATASTRO','" + fechaactual + "','" + store.state.datos_por_defecto.etapa;
            sql += "'," + store.state.datos_por_defecto.tramo_tiposec + "," + store.state.datos_por_defecto.tramo_tipotra;
            sql += "," + store.state.datos_por_defecto.tramo_dim1 + "," + store.state.datos_por_defecto.tramo_dim2;           
            sql += "," + store.state.datos_por_defecto.tramo_dim3 + "," + store.state.datos_por_defecto.tramo_dim4;            
            sql += "," + store.state.datos_por_defecto.contrato + "," + store.state.datos_por_defecto.proyecto; 
            sql += ",'" + store.state.datos_por_defecto.tramo_material + "','Sin asignar'," + store.state.datos_login.revisar + ")";
            var fd = new FormData();
            fd.append("sql", sql);
            fd.append("historia", historia);
            fd.append("idpsing1", store.state.portavariables[0]);
            fd.append("idpsing2", store.state.portavariables[1]);
            fd.append("lat1", coordenadas[0].lat);
            fd.append("lon1", coordenadas[0].lng);
            fd.append("lat2", coordenadas[1].lat);
            fd.append("lon2", coordenadas[1].lng);
            fd.append("calle", nombre_calle);
            fd.append("via", via);
            fd.append("zarriba", zarriba);
            fd.append("zabajo", zabajo);
            fd.append("z_tapa_aa", z_tapa_aa);
            fd.append("z_tapa_ab", z_tapa_ab);
            fd.append("datos_por_defecto", JSON.stringify(store.state.datos_por_defecto));
            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/nuevo_tramo.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
              store.state.nuevo_tramo.disableEdit();
              store.state.nuevo_tramo.remove(mapa);
              padre.$buefy.toast.open('Se agrego nuevo tramo. Cargando datos actualizados....');
              store.state.nuevo_tramo = '';
              store.state.portavariables = [];
              let datos = JSON.parse(this.response);

//AGREGO COLECTOR A MAPA______________________________________________________________________________________________________
              var lat1 = coordenadas[0].lat;
              var lon1 = coordenadas[0].lng;
              var lat2 = coordenadas[coordenadas.length - 1].lat;
              var lon2 = coordenadas[coordenadas.length - 1].lng;
              var latlngs = [[lat1,lon1],[lat2,lon2]];
              if (store.state.datos_por_defecto.etapa == 'A Construir')
              {
                var dasharrayvalue = '10,10';
                var dashoffsetvalue = '0';
                var opacityvalue = 0.9;
              }
              else
              {
                var dasharrayvalue = null;
                var dashoffsetvalue = null;
                var opacityvalue = 1;
              }
              var colector = L.polyline(latlngs, {
                    color: '#D5872A',
                    opacity: opacityvalue,
                    weight: 6,
                    dashArray: dasharrayvalue,
                    dashOffset: dashoffsetvalue,
                    customData:{
                      id_tramo:datos[0],
                      lon1:coordenadas[0].lng,
                      lat1:coordenadas[0].lat,
                      lon2:coordenadas[coordenadas.length - 1].lat,
                      lat2:coordenadas[coordenadas.length - 1].lng,
                      tiposec:store.state.datos_por_defecto.tramo_tiposec,
                      tipotra:store.state.datos_por_defecto.tramo_tipotra,
                      id_psig_aa:store.state.portavariables[0],
                      id_psig_ab:store.state.portavariables[1],
                      dim1: store.state.datos_por_defecto.tramo_dim1,
                      dim2: store.state.datos_por_defecto.tramo_dim2,
                      dim3: store.state.datos_por_defecto.tramo_dim3,
                      dim4: store.state.datos_por_defecto.tramo_dim4,
                      pendiente:0,
                      salto:0,
                      contrato:store.state.datos_por_defecto.contrato,
                      proyecto:store.state.datos_por_defecto.proyecto,
                      material:store.state.datos_por_defecto.tramo_material,
                      zarriba:0,
                      zabajo:0,
                      z_tapa_aa:z_tapa_aa,
                      z_tapa_ab:z_tapa_ab,
                      prof_aa:prof_aa,
                      prof_ab:prof_ab,
                      longitud:longitud,
                      etapa:store.state.datos_por_defecto.etapa,
                      estado:'',
                      accion:"Sin asignar",
                      ccz:datos[1],
                      cuenca:datos[2],
                      historial:historia,
                      documentos:'',
                      fotos:'',
                      audios:'',
                      videos:'',
                      alta_fuente:'INGRESO CON APLICACION DE CATASTRO',
                      alta_fecha:fechaactual,
                      calle:nombre_calle,
                      via:via,
                      hidraulica:'',
                      economica:'',
                      comentarios:'',
                      plano:'',
                      provisorio:0,
                      dato1:'',
                      dato2:'',
                      dato3:0,
                      dato4:0,
                      habilitado:'',
                      publicado:'',
                      fueraservicio:''
                    }
                }).bindTooltip("<div style='background:white;padding:6px 11px 11px 6px'><b>TRAMO:</b><br><b>Id:" + datos[0] + "</b><br><b>Long: " + Number(longitud).toFixed(0,2) + "m</b><br><b>Dim1: " + store.state.datos_por_defecto.tramo_dim1 + "</b><br><b>ZAa:0.00 </b><br><b>ZAb:0.00</b></div>", 
                    {
                          direction: 'right',
                          permanent: false,
                          sticky: true,
                          offset: [10, 0],
                          opacity: 0.85,
                          className: 'leaflet-tooltip-own' 
                }).addTo(mapa).on('click',function(e){
                  if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'colector'  || store.state.modo_seleccion == 'tramo_conex_captacion')
                    {
                      for(var j=0; j<store.state.tramos_en_mapa.length;j++)
                      {
                        store.state.tramos_en_mapa[j].setStyle({weight:8});
                      }
                      this.setStyle({weight:12});
                    store.state.tramo_seleccionado.geometria = JSON.parse(JSON.stringify(this.getLatLngs()));
                    store.state.tramo_seleccionado.id_tramo = this.options.customData.id_tramo;
                    store.state.tramo_seleccionado.lon1 = this.options.customData.lon1;
                    store.state.tramo_seleccionado.lat1 = this.options.customData.lat1;
                    store.state.tramo_seleccionado.lon2 = this.options.customData.lon2;
                    store.state.tramo_seleccionado.lat2 = this.options.customData.lat2;
                    store.state.tramo_seleccionado.tiposec = this.options.customData.tiposec;
                    store.state.tramo_seleccionado.tipotra = this.options.customData.tipotra;
                    store.state.tramo_seleccionado.id_psig_aa = this.options.customData.id_psig_aa;
                    store.state.tramo_seleccionado.id_psig_ab = this.options.customData.id_psig_ab;
                    store.state.tramo_seleccionado.dim1 = this.options.customData.dim1;
                    store.state.tramo_seleccionado.dim2 = this.options.customData.dim2;
                    store.state.tramo_seleccionado.dim3 = this.options.customData.dim3;
                    store.state.tramo_seleccionado.dim4 = this.options.customData.dim4;
                    store.state.tramo_seleccionado.pendiente = Number(this.options.customData.pendiente).toFixed(2);
                    store.state.tramo_seleccionado.salto = Number(this.options.customData.salto).toFixed(2);
                    store.state.tramo_seleccionado.contrato = this.options.customData.contrato;
                    store.state.tramo_seleccionado.proyecto = this.options.customData.proyecto;
                    store.state.tramo_seleccionado.material = this.options.customData.material;
                    store.state.tramo_seleccionado.zarriba = Number(this.options.customData.zarriba).toFixed(2);
                    store.state.tramo_seleccionado.zabajo = Number(this.options.customData.zabajo).toFixed(2);
                    store.state.tramo_seleccionado.z_tapa_aa = Number(this.options.customData.z_tapa_aa).toFixed(2);
                    store.state.tramo_seleccionado.z_tapa_ab = Number(this.options.customData.z_tapa_ab).toFixed(2);
                    store.state.tramo_seleccionado.prof_aa = Number(this.options.customData.prof_aa).toFixed(2);
                    store.state.tramo_seleccionado.prof_ab = Number(this.options.customData.prof_ab).toFixed(2);
                    store.state.tramo_seleccionado.longitud = Number(this.options.customData.longitud).toFixed(2);
                    store.state.tramo_seleccionado.etapa = this.options.customData.etapa;
                    store.state.tramo_seleccionado.estado = this.options.customData.estado;
                    store.state.tramo_seleccionado.accion = this.options.customData.accion;
                    store.state.tramo_seleccionado.ccz = this.options.customData.ccz;
                    store.state.tramo_seleccionado.cuenca = this.options.customData.cuenca;
                    store.state.tramo_seleccionado.historial = this.options.customData.historial;
                    store.state.tramo_seleccionado.documentos = this.options.customData.documentos;
                    store.state.tramo_seleccionado.fotos = this.options.customData.fotos;
                    store.state.tramo_seleccionado.audios = this.options.customData.audios;
                    store.state.tramo_seleccionado.videos = this.options.customData.videos;
                    store.state.tramo_seleccionado.alta_fuente = this.options.customData.alta_fuente;
                    store.state.tramo_seleccionado.alta_fecha = this.options.customData.alta_fecha;
                    store.state.tramo_seleccionado.calle = this.options.customData.calle;
                    store.state.tramo_seleccionado.via = this.options.customData.via;
                    store.state.tramo_seleccionado.hidraulica = this.options.customData.hidraulica;
                    store.state.tramo_seleccionado.economica = this.options.customData.economica;
                    store.state.tramo_seleccionado.comentarios = this.options.customData.comentarios;
                    store.state.tramo_seleccionado.plano = this.options.customData.plano;
                    store.state.tramo_seleccionado.provisorio = this.options.customData.provisorio;
                    store.state.tramo_seleccionado.dato1 = this.options.customData.dato1;
                    store.state.tramo_seleccionado.dato2 = this.options.customData.dato2;
                    store.state.tramo_seleccionado.dato3 = this.options.customData.dato3;
                    store.state.tramo_seleccionado.dato4 = this.options.customData.dato4;
                    store.state.tramo_seleccionado.habilitado = this.options.customData.habilitado;
                    store.state.tramo_seleccionado.publicado = this.options.customData.publicado;
                    store.state.tramo_seleccionado.fueraservicio = this.options.customData.fueraservicio;
                    store.state.punto_en_tramo = e;
                    }
                    if (store.state.modo_seleccion == 'todo')
                    {
                      store.state.modal_visible = 'Evento_Seleccion_Tramo';
                      store.state.tipo_elemento_seleccionado = 'TRAMO';
                    }
                    if (store.state.modo_seleccion == 'tramo_captacion' || store.state.modo_seleccion == 'tramo_conex_captacion')
                    {
                    store.state.alerta_mensaje = [];
                    store.state.alerta_mensaje.push("Tramo seleccionado: " + this.options.customData.id_tramo);
                    store.state.alerta = true;
                    }
              }).on('mouseover',function(e){
                this.setText('  ►  ', {repeat: true, attributes: {fill: 'brown',"font-weight": "bold","font-size": "24"}});
                store.state.color_anterior_tramos = this.options.color;
                this.setStyle({color :'red'});
                for (var s = 0;s < store.state.conex_capta_en_mapa.length; s++)
                { 
                  if (store.state.conex_capta_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                    {
                      store.state.color_anterior_conex_capt = store.state.conex_capta_en_mapa[s].options.color;
                      store.state.conex_capta_en_mapa[s].setStyle({color :'red'});
                    }
                }
                for (var s = 0;s < store.state.psingulares_en_mapa.length; s++)
                { 
                  let id_psingular = store.state.psingulares_en_mapa[s].options.customData.id_psingular;
                  if (this.options.customData.id_psig_aa == id_psingular || this.options.customData.id_psig_ab == id_psingular)
                  {
                      store.state.color_anterior_psingulares = store.state.psingulares_en_mapa[s].options.color;
                      store.state.psingulares_en_mapa[s].setStyle({color :'red'});
                  }	
                }
                var lista_padrones = [];
                for (var s = 0;s < store.state.conexiones_en_mapa.length; s++)
                { 
                  if (store.state.conexiones_en_mapa[s].options.customData.colector == this.options.customData.id_tramo)
                    {
                      store.state.conexiones_en_mapa[s].setStyle({color :'red'});
                      if (!lista_padrones.includes(store.state.conexiones_en_mapa[s].options.customData.padron))
                      {lista_padrones.push(store.state.conexiones_en_mapa[s].options.customData.padron)}
                    }
                }	
                for (var s = 0;s < store.state.captaciones_en_mapa.length; s++)
                { 
                  if (store.state.captaciones_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                    {
                      store.state.color_anterior_captaciones = store.state.captaciones_en_mapa[s].options.color;
                      store.state.captaciones_en_mapa[s].setStyle({color :'red'});
                    }
                }
                for (var s = 0;s < store.state.padrones_en_mapa.length; s++)
                { 
                  if (lista_padrones.includes(store.state.padrones_en_mapa[s].options.customData.padron))
                    {
                      store.state.color_anterior_padron = store.state.padrones_en_mapa[s].options.color;
                      store.state.padrones_en_mapa[s].setStyle({color :'red'});
                    }
                }														
              }).on('mouseout',function(e){
                this.setText(null);														
                this.setStyle({color :store.state.color_anterior_tramos});
                  for (var s = 0;s < store.state.conexiones_en_mapa.length; s++)
                  { 
                    if (store.state.conexiones_en_mapa[s].options.customData.colector == this.options.customData.id_tramo)
                      {
                        store.state.conexiones_en_mapa[s].setStyle({color :'green'});
                      }
                  }
                  for (var s = 0;s < store.state.captaciones_en_mapa.length; s++)
                  { 
                    if (store.state.captaciones_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                      {
                        store.state.captaciones_en_mapa[s].setStyle({color : store.state.color_anterior_captaciones});
                      }
                  }
                  for (var s = 0;s < store.state.psingulares_en_mapa.length; s++)
                  { 
                    let id_psingular = store.state.psingulares_en_mapa[s].options.customData.id_psingular;
                    if (this.options.customData.id_psig_aa == id_psingular || this.options.customData.id_psig_ab == id_psingular)
                    {
                      store.state.psingulares_en_mapa[s].setStyle({color :store.state.color_anterior_psingulares});
                    }
                  }	
                  for (var s = 0;s < store.state.conex_capta_en_mapa.length; s++)
                  { 
                    if (store.state.conex_capta_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                      {
                        store.state.conex_capta_en_mapa[s].setStyle({color : store.state.color_anterior_conex_capt});
                      }
                  }	
                  for (var s = 0;s < store.state.padrones_en_mapa.length; s++)
                  { 
                        let color_padron = 'grey';
                        if (store.state.padrones_en_mapa[s].options.customData.saneado != 1){color_padron = 'yellow';};
                        store.state.padrones_en_mapa[s].setStyle({color : color_padron});
                  }	
              });
          store.state.tramos_en_mapa.push(colector);

//FIN AGREGO COLECTOR A MAPA______________________________________________________________________________________________________

//AGREGO psingular 1 a MAPA______________________________________________________________________________________________________
        if (datos[3]["nuevo"] == 'NO')
        {
          colector.options.customData.id_psig_aa = datos[3]["id"];
        }
        else
        {
          colector.options.customData.id_psig_aa = datos[3]["id"];
          var lat1 = datos[3]["lat"];
          var lon1 = datos[3]["lon"];
          var latlngs = [lat1,lon1];
          if (datos[3]["etapa"] == 'A Construir')
          {
            var opacityvalue = 0.7;
            var colorfondo = 'grey';
          }
          else
          {
            var opacityvalue = 1;
            var colorfondo = 'white';
          }
          var camara = L.circle(latlngs, {
            color: 'black',
            fillColor: colorfondo,
            fillOpacity: 1,
            radius:0.6,
            opacity: opacityvalue,
            customData:{
              id_psingular:datos[3]["id"],
              lon1:datos[3]["lon"],
              lat1:datos[3]["lat"],
              tipo:datos[3]["tipo"],
              z_tapa:datos[3]["ztapa"],
              inspeccion:1,
              profundidad:datos[3]["profundidad"],
              salto:0,
              z_ab:datos[3]["z_ab"],
              contrato:datos[3]["contrato"],
              proyecto:datos[3]["proyecto"],
              etapa:datos[3]["etapa"],
              estado:'Sin asignar',
              accion:'Sin asignar',
              ccz:datos[3]["ccz"],
              cuenca:datos[3]["cuenca"],
              historial:datos[3]["historial"],
              documentos:'',
              fotos:'',
              audios:'',
              alta_fuente:datos[3]["alta_fuente"],
              alta_fecha:datos[3]["fecha"],
              calle:datos[3]["calle"],
              via:datos[3]["via"],
              hidraulica:'',
              economica:'',
              comentarios:''
            }
          }).bindTooltip("<div style='background:white;padding:6px 11px 11px 6px'><b>PSINGULAR:</b><br><b>Id:" + datos[3]["id"] + "</b><br><b>Z Tapa: 0.00m</b><br><b>Z ab: " + datos[3]["z_ab"] + "</b><br><b>Prof: " + datos[3]["profundidad"] + "</b></div>", 
          {
                direction: 'right',
                permanent: false,
                sticky: true,
                offset: [10, 0],
                opacity: 0.85,
                className: 'leaflet-tooltip-own' 
          }).addTo(mapa).on('click',function(e){
          if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
              {
                store.state.psingular_seleccionado.id_psingular = this.options.customData.id_psingular;
                store.state.psingular_seleccionado.lon1 = this.options.customData.lon1;
                store.state.psingular_seleccionado.lat1 = this.options.customData.lat1;
                store.state.psingular_seleccionado.tipo = this.options.customData.tipo;
                store.state.psingular_seleccionado.z_tapa = Number(this.options.customData.z_tapa).toFixed(2);
                store.state.psingular_seleccionado.inspeccion = this.options.customData.inspeccion;
                store.state.psingular_seleccionado.profundidad = Number(this.options.customData.profundidad).toFixed(2);
                store.state.psingular_seleccionado.salto = Number(this.options.customData.salto).toFixed(2);
                store.state.psingular_seleccionado.z_ab = Number(this.options.customData.z_ab).toFixed(2);
                store.state.psingular_seleccionado.contrato = this.options.customData.contrato;
                store.state.psingular_seleccionado.proyecto = this.options.customData.proyecto;
                store.state.psingular_seleccionado.etapa = this.options.customData.etapa;
                store.state.psingular_seleccionado.estado = this.options.customData.estado;
                store.state.psingular_seleccionado.accion = this.options.customData.accion;
                store.state.psingular_seleccionado.ccz = this.options.customData.ccz;
                store.state.psingular_seleccionado.cuenca = this.options.customData.cuenca;
                store.state.psingular_seleccionado.historial = this.options.customData.historial;
                store.state.psingular_seleccionado.documentos = this.options.customData.documentos;
                store.state.psingular_seleccionado.fotos = this.options.customData.fotos;
                store.state.psingular_seleccionado.audios = this.options.customData.audios;
                store.state.psingular_seleccionado.alta_fuente = this.options.customData.alta_fuente;
                store.state.psingular_seleccionado.alta_fecha = this.options.customData.alta_fecha;
                store.state.psingular_seleccionado.calle = this.options.customData.calle;
                store.state.psingular_seleccionado.via = this.options.customData.via;
                store.state.psingular_seleccionado.hidraulica = this.options.customData.hidraulica;
                store.state.psingular_seleccionado.economica = this.options.customData.economica;
                store.state.psingular_seleccionado.comentarios = this.options.customData.comentarios;
                store.state.psingular_seleccionado.plano = this.options.customData.plano;
                store.state.psingular_seleccionado.provisorio = this.options.customData.provisorio;
                store.state.psingular_seleccionado.dato1 = this.options.customData.dato1;
                store.state.psingular_seleccionado.dato2 = this.options.customData.dato2;
                store.state.psingular_seleccionado.dato3 = this.options.customData.dato3;
                store.state.psingular_seleccionado.dato4 = this.options.customData.dato4;
                store.state.psingular_seleccionado.habilitado = this.options.customData.habilitado;
                store.state.psingular_seleccionado.publicado = this.options.customData.publicado;
                store.state.psingular_seleccionado.fueraservicio = this.options.customData.fueraservicio;
                if (store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
                {
                this.setStyle({ weight: 8});
                store.state.alerta_mensaje = [];
                store.state.alerta_mensaje.push("Punto singular seleccionado: " + this.options.customData.id_psingular);
                store.state.alerta = true;
                }	
                if (store.state.modo_seleccion == 'todo')
                {
                  store.state.tipo_elemento_seleccionado = 'PSINGULAR';
                  store.state.modal_visible = 'Evento_Seleccion_Psingular';
                }
              }
            }).on('mouseover',function(e){
              store.state.color_anterior_psingulares = this.options.color;
              this.setStyle({color :'yellow'});
              store.state.color_anterior_tramos_varios = [];
              let id_psingular = this.options.customData.id_psingular;
              for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
              { 	
                if (id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_aa || id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_ab)
                {
                  store.state.color_anterior_tramos_varios.push([store.state.tramos_en_mapa[s].options.customData.id_tramo,store.state.tramos_en_mapa[s].options.color])
                  store.state.tramos_en_mapa[s].setStyle({color :'yellow'});
                }	
              }
            }).on('mouseout',function(e){
              for(i=0;i<store.state.color_anterior_tramos_varios.length;i++)
              {
                let id_tramo = store.state.color_anterior_tramos_varios[i][0];
                  for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                  { 	
                    if (store.state.tramos_en_mapa[s].options.customData.id_tramo == id_tramo)
                    {
                      store.state.tramos_en_mapa[s].setStyle({color :store.state.color_anterior_tramos_varios[i][1]});
                    }	
                  }
              }
              this.setStyle({color :store.state.color_anterior_psingulares});
            });		
            store.state.psingulares_en_mapa.push(camara);	
        }

//AGREGO psingular 2 a MAPA______________________________________________________________________________________________________
          if (datos[4]["nuevo"] == 'NO')
          {
            colector.options.customData.id_psig_ab = datos[4]["id"];
          }
          else
          {
            colector.options.customData.id_psig_ab = datos[4]["id"];
            var lat1 = datos[4]["lat"];
            var lon1 = datos[4]["lon"];
            var latlngs = [lat1,lon1];
            if (datos[4]["etapa"] == 'A Construir')
            {
              var opacityvalue = 0.7;
              var colorfondo = 'grey';
            }
            else
            {
              var opacityvalue = 1;
              var colorfondo = 'white';
            }
            var camara2 = L.circle(latlngs, {
              color: 'black',
              fillColor: colorfondo,
              fillOpacity: 1,
              radius:0.6,
              opacity: opacityvalue,
              customData:{
                id_psingular:datos[4]["id"],
                lon1:datos[4]["lon"],
                lat1:datos[4]["lat"],
                tipo:datos[4]["tipo"],
                z_tapa:datos[4]["ztapa"],
                inspeccion:1,
                profundidad:datos[4]["profundidad"],
                salto:0,
                z_ab:datos[4]["z_ab"],
                contrato:datos[4]["contrato"],
                proyecto:datos[4]["proyecto"],
                etapa:datos[4]["etapa"],
                estado:'Sin asignar',
                accion:'Sin asignar',
                ccz:datos[4]["ccz"],
                cuenca:datos[4]["cuenca"],
                historial:datos[4]["historial"],
                documentos:'',
                fotos:'',
                audios:'',
                alta_fuente:datos[4]["alta_fuente"],
                alta_fecha:datos[4]["fecha"],
                calle:datos[4]["calle"],
                via:datos[4]["via"],
                hidraulica:'',
                economica:'',
                comentarios:''
              }
            }).bindTooltip("<div style='background:white;padding:6px 11px 11px 6px'><b>PSINGULAR:</b><br><b>Id:" + datos[4]["id"] + "</b><br><b>Z Tapa: 0.00m</b><br><b>Z ab: " + datos[4]["z_ab"] + "</b><br><b>Prof: " + datos[4]["profundidad"] + "</b></div>", 
            {
                  direction: 'right',
                  permanent: false,
                  sticky: true,
                  offset: [10, 0],
                  opacity: 0.85,
                  className: 'leaflet-tooltip-own' 
            }).addTo(mapa).on('click',function(e){
            if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
                {
                  store.state.psingular_seleccionado.id_psingular = this.options.customData.id_psingular;
                  store.state.psingular_seleccionado.lon1 = this.options.customData.lon1;
                  store.state.psingular_seleccionado.lat1 = this.options.customData.lat1;
                  store.state.psingular_seleccionado.tipo = this.options.customData.tipo;
                  store.state.psingular_seleccionado.z_tapa = Number(this.options.customData.z_tapa).toFixed(2);
                  store.state.psingular_seleccionado.inspeccion = this.options.customData.inspeccion;
                  store.state.psingular_seleccionado.profundidad = Number(this.options.customData.profundidad).toFixed(2);
                  store.state.psingular_seleccionado.salto = Number(this.options.customData.salto).toFixed(2);
                  store.state.psingular_seleccionado.z_ab = Number(this.options.customData.z_ab).toFixed(2);
                  store.state.psingular_seleccionado.contrato = this.options.customData.contrato;
                  store.state.psingular_seleccionado.proyecto = this.options.customData.proyecto;
                  store.state.psingular_seleccionado.etapa = this.options.customData.etapa;
                  store.state.psingular_seleccionado.estado = this.options.customData.estado;
                  store.state.psingular_seleccionado.accion = this.options.customData.accion;
                  store.state.psingular_seleccionado.ccz = this.options.customData.ccz;
                  store.state.psingular_seleccionado.cuenca = this.options.customData.cuenca;
                  store.state.psingular_seleccionado.historial = this.options.customData.historial;
                  store.state.psingular_seleccionado.documentos = this.options.customData.documentos;
                  store.state.psingular_seleccionado.fotos = this.options.customData.fotos;
                  store.state.psingular_seleccionado.audios = this.options.customData.audios;
                  store.state.psingular_seleccionado.alta_fuente = this.options.customData.alta_fuente;
                  store.state.psingular_seleccionado.alta_fecha = this.options.customData.alta_fecha;
                  store.state.psingular_seleccionado.calle = this.options.customData.calle;
                  store.state.psingular_seleccionado.via = this.options.customData.via;
                  store.state.psingular_seleccionado.hidraulica = this.options.customData.hidraulica;
                  store.state.psingular_seleccionado.economica = this.options.customData.economica;
                  store.state.psingular_seleccionado.comentarios = this.options.customData.comentarios;
                  store.state.psingular_seleccionado.plano = this.options.customData.plano;
                  store.state.psingular_seleccionado.provisorio = this.options.customData.provisorio;
                  store.state.psingular_seleccionado.dato1 = this.options.customData.dato1;
                  store.state.psingular_seleccionado.dato2 = this.options.customData.dato2;
                  store.state.psingular_seleccionado.dato3 = this.options.customData.dato3;
                  store.state.psingular_seleccionado.dato4 = this.options.customData.dato4;
                  store.state.psingular_seleccionado.habilitado = this.options.customData.habilitado;
                  store.state.psingular_seleccionado.publicado = this.options.customData.publicado;
                  store.state.psingular_seleccionado.fueraservicio = this.options.customData.fueraservicio;
                  if (store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
                  {
                  this.setStyle({ weight: 8});
                  store.state.alerta_mensaje = [];
                  store.state.alerta_mensaje.push("Punto singular seleccionado: " + this.options.customData.id_psingular);
                  store.state.alerta = true;
                  }	
                  if (store.state.modo_seleccion == 'todo')
                  {
                    store.state.tipo_elemento_seleccionado = 'PSINGULAR';
                    store.state.modal_visible = 'Evento_Seleccion_Psingular';
                  }
                }
              }).on('mouseover',function(e){
                store.state.color_anterior_psingulares = this.options.color;
                this.setStyle({color :'yellow'});
                store.state.color_anterior_tramos_varios = [];
                let id_psingular = this.options.customData.id_psingular;
                for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                { 	
                  if (id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_aa || id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_ab)
                  {
                    store.state.color_anterior_tramos_varios.push([store.state.tramos_en_mapa[s].options.customData.id_tramo,store.state.tramos_en_mapa[s].options.color])
                    store.state.tramos_en_mapa[s].setStyle({color :'yellow'});
                  }	
                }
              }).on('mouseout',function(e){
                for(i=0;i<store.state.color_anterior_tramos_varios.length;i++)
                {
                  let id_tramo = store.state.color_anterior_tramos_varios[i][0];
                    for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                    { 	
                      if (store.state.tramos_en_mapa[s].options.customData.id_tramo == id_tramo)
                      {
                        store.state.tramos_en_mapa[s].setStyle({color :store.state.color_anterior_tramos_varios[i][1]});
                      }	
                    }
                }
                this.setStyle({color :store.state.color_anterior_psingulares});
              });		
              store.state.psingulares_en_mapa.push(camara2);	
          }

              padre.cambios_mapa = false;
              store.state.modal_visible = 'Modal_Nuevo_Elemento_Red';
            };
            xhr.send(fd);
            store.state.modo_seleccion = 'todo';
            }//control de acceso por zona y tipo
          });//control de acceso por zona y tipo
          }
        }


        if (this.tipo_cambio_mapa == 'cambio_psingular_existente') {
          this.$buefy.toast.open({duration: 5000, message: 'Cambiando ubicación de punto singular...'});
          var objeto_psingular = false;
          var objeto_tramo = false;
          var tramos = '';
          for (let i = 0; i < store.state.psingulares_en_mapa.length; i++) {
            if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
              objeto_psingular = store.state.psingulares_en_mapa[i];
            }
          }
          var ztapa = objeto_psingular.options.customData.z_tapa;
          let distmovida = dl_geometria.dl_distancia_metros_de_geograficas(objeto_psingular.options.customData.lat1,objeto_psingular.options.customData.lon1,store.state.psingular_seleccionado.lat1,store.state.psingular_seleccionado.lon1);
          (distmovida > 15) ? ztapa = 0.00 : true;
          objeto_psingular.options.customData.z_tapa = ztapa;
          store.state.psingular_seleccionado.z_tapa = ztapa;
          let nuevopopup =  "<div style='background:white;padding:6px 11px 11px 6px'><b>PSINGULAR:</b><br><b>Id:" + objeto_psingular.options.customData.id_psingular + "</b><br><b>Z Tapa: " + objeto_psingular.options.customData.z_tapa + "m</b><br><b>Z ab: " + objeto_psingular.options.customData.z_ab + "</b><br><b>Prof: " + objeto_psingular.options.customData.profundidad + "</b></div>";
          objeto_psingular.setTooltipContent(nuevopopup);
          var sql_tramos = '';
          for (let i = 0; i < store.state.tramos_movidos_por_camara.length; i++) 
          {
            for (let j = 0; j < store.state.tramos_en_mapa.length; j++) {
              if (store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramos_movidos_por_camara[i].id_tramo) {
                objeto_tramo = store.state.tramos_en_mapa[j];
              }
            }
            //si tramo cambió su longitud más de 5% recalculo longitud y pendiente
                      let coordenadas_tramos = objeto_tramo.getLatLngs();
                      let longitud_calculada = dl_geometria.dl_largo_en_metros_de_geograficas(objeto_tramo.getLatLngs());
                      let longitud_tramo = objeto_tramo.options.customData.longitud;
                      (longitud_tramo == 0) ? longitud_tramo = longitud_calculada:true;
                      let facmodif = 100 * (Math.abs(longitud_calculada - longitud_tramo) / longitud_tramo);
                      (facmodif >= 5) ? longitud_tramo = longitud_calculada : true;
                      objeto_tramo.options.customData.longitud = longitud_tramo;
                      let pendiente_tramo = objeto_tramo.options.customData.pendiente;
                      let pendiente_calculada = 100 * (Math.abs(objeto_tramo.options.customData.zarriba - objeto_tramo.options.customData.zabajo) / longitud_tramo);
                      (facmodif >= 5) ? pendiente_tramo = pendiente_calculada: pendiente_tramo = Number(pendiente_tramo);
                      objeto_tramo.options.customData.pendiente = pendiente_tramo.toFixed(2);
                      let nuevopopup = "<div style='background:white;padding:6px 11px 11px 6px'><b>TRAMO:</b><br><b>Id:" + objeto_tramo.options.customData.id_tramo + "</b><br><b>Long: " + objeto_tramo.options.customData.longitud + "</b><br><b>Pend: " + objeto_tramo.options.customData.pendiente + "</b><br><b>Dim1: " + objeto_tramo.options.customData.dim1 + "</b><br><b>ZAa: " + objeto_tramo.options.customData.zarriba + "</b><br><b>ZAb: " + objeto_tramo.options.customData.zabajo + "</b></div>";
                      objeto_tramo.setTooltipContent(nuevopopup);
            let historias = JSON.parse(objeto_tramo.options.customData.historial);
            let historia_array = { "descripcion": "SE MODIFICO UBICACION POR AJUSTE DE PUNTO SINGULAR", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            let historia = JSON.stringify(historias);
            sql_tramos += "UPDATE cat_tramos SET SHAPE = GEOMFROMTEXT('LINESTRING(";
            for (let i = 0; i < coordenadas_tramos.length; i++) {
              sql_tramos += coordenadas_tramos[i].lng + " " + coordenadas_tramos[i].lat + ",";
            }
            sql_tramos = sql_tramos.slice(0, -1);
            sql_tramos += ")'), historial = '" + historia + "', longitud = " + longitud_tramo + ", pendiente = " + pendiente_tramo + " WHERE elemred = " + objeto_tramo.options.customData.id_tramo;
            sql_tramos += ";"
          }
          sql_tramos = sql_tramos.slice(0, -1);
          let historias = JSON.parse(store.state.psingular_seleccionado.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 cat_psingulares SET SHAPE = GEOMFROMTEXT('POINT(";
          sql += objeto_psingular.options.customData.lon1 + " " + objeto_psingular.options.customData.lat1;
          sql += ")'), historial = '" + historia + "', z_tapa= " + ztapa ;
          sql += ", dato3 = " + store.state.datos_login.revisar ;   
          sql += " WHERE elem_red = " + store.state.psingular_seleccionado.id_psingular;
          var fd = new FormData();
          fd.append("sql_tramos", sql_tramos);
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.psingular_seleccionado.id_psingular);
          fd.append("tipo", "PSINGULAR");
          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/modifico_geometria_psingular.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            objeto_psingular.disableEdit()
            store.state.tramos_movidos_por_camara = [];
            store.state.modo_seleccion = 'todo';
            padre.cambios_mapa = false;
            store.state.modal_visible = 'Modificar_Psingular';
          };
          xhr.send(fd);
        }


        if (this.tipo_cambio_mapa == 'nuevo_psingular') {
          var lat_nueva = store.state.nuevo_psingular._latlng.lat;
          var lon_nueva = store.state.nuevo_psingular._latlng.lng;
          app.permiso_por_punto_y_tipo_elemento('Red', lat_nueva, lon_nueva)
          .then(resultado => {
            if (!resultado) {
              this.$buefy.toast.open({duration: 5000, message: 'El usuario no tiene permisos para crear este elemento.'});
              this.barra_superior_descartar_cambios_mapa();
            } else
          {
          this.$buefy.toast.open({duration: 5000, message: 'Agregando nuevo punto singular...'});
          var ccz = '';
          var via = 0;
          var puntomedio = L.point(lat_nueva, lon_nueva);
          let menor_distancia = 99999;
          menor_distancia = 99999;
          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(puntomedio, 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;
            }
          }
          let historias = [];
          let fechaactual = app.obtengo_fecha(new Date());
          let historia_array = { "descripcion": "NUEVO PUNTO SINGULAR POR CATASTRO", "fecha": fechaactual, "usuario": store.state.datos_login.usuario };
          historias.push(historia_array);
          var historia = JSON.stringify(historias);
          let sql = "INSERT INTO cat_psingulares (SHAPE, elem_red, ccz, calle, via, historial, alta_fuente, alta_fecha, activo, etapa, tipo, profundidad, contrato, proyecto,dato3) VALUES (";
          sql += "GEOMFROMTEXT('POINT(" + lon_nueva + " " + lat_nueva + ")'),";
          sql += "(SELECT MAX(elem_red) + 1 FROM cat_psingulares CAT),'" + ccz + "','" + nombre_calle + "'," + via + ",'";
          sql += historia + "','INGRESO CON APLICACION DE CATASTRO','" + fechaactual + "',1,'" + store.state.datos_por_defecto.etapa;
          sql += "'," + store.state.datos_por_defecto.psingular_tipo + "," + store.state.datos_por_defecto.psingular_profundidad + ",";
          sql += store.state.datos_por_defecto.contrato + "," + store.state.datos_por_defecto.proyecto + "," + store.state.datos_login.revisar + ")";
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("historia", historia);
          fd.append("lat", lat_nueva);
          fd.append("lon", lon_nueva);
          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/nuevo_psingular.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            store.state.nuevo_psingular.disableEdit();
            store.state.nuevo_psingular.remove(mapa);
            padre.$buefy.toast.open('Se agrego nuevo punto_singular. Cargando datos actualizados....');
            store.state.nuevo_psingular = '';
            store.state.portavariables = [];
            var datos = JSON.parse(this.response);

//AGREGO psingular a MAPA______________________________________________________________________________________________________
                    var latlngs = [lat_nueva, lon_nueva];
                    if (store.state.datos_por_defecto.etapa == 'A Construir')
                    {
                      var opacityvalue = 0.7;
                      var colorfondo = 'grey';
                    }
                    else
                    {
                      var opacityvalue = 1;
                      var colorfondo = 'white';
                    }
                    var camara = L.circle(latlngs, {
                      color: 'black',
                      fillColor: colorfondo,
                      fillOpacity: 1,
                      radius:0.6,
                      opacity: opacityvalue,
                      customData:{
                        id_psingular:datos[0],
                        lon1:lon_nueva,
                        lat1:lat_nueva,
                        tipo:store.state.datos_por_defecto.psingular_tipo,
                        z_tapa:0.00,
                        inspeccion:1,
                        profundidad:store.state.datos_por_defecto.psingular_profundidad,
                        salto:0,
                        z_ab:0.00,
                        contrato:store.state.datos_por_defecto.contrato,
                        proyecto:store.state.datos_por_defecto.proyecto,
                        etapa:store.state.datos_por_defecto.etapa,
                        estado:'Sin asignar',
                        accion:'Sin asignar',
                        ccz:datos[1],
                        cuenca:datos[2],
                        historial:historia,
                        documentos:'',
                        fotos:'',
                        audios:'',
                        alta_fuente:'INGRESO CON APLICACION DE CATASTRO',
                        alta_fecha:fechaactual,
                        calle:nombre_calle,
                        via:via,
                        hidraulica:'',
                        economica:'',
                        comentarios:'',
                        plano:'',
                        provisorio:0,
                        dato1:'',
                        dato2:'',
                        dato3:0,
                        dato4:0,
                        habilitado:'',
                        publicado:'',
                        fueraservicio:''
                      }
                    }).bindTooltip("<div style='background:white;padding:6px 11px 11px 6px'><b>PSINGULAR:</b><br><b>Id:" + datos[0] + "</b><br><b>Z Tapa: 0.00m</b><br><b>Z ab: 0.00 </b><br><b>Prof: " + store.state.datos_por_defecto.psingular_profundidad + "</b></div>", 
                    {
                          direction: 'right',
                          permanent: false,
                          sticky: true,
                          offset: [10, 0],
                          opacity: 0.85,
                          className: 'leaflet-tooltip-own' 
                    }).addTo(mapa).on('click',function(e){
                    if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
                        {
                          store.state.psingular_seleccionado.id_psingular = this.options.customData.id_psingular;
                          store.state.psingular_seleccionado.lon1 = this.options.customData.lon1;
                          store.state.psingular_seleccionado.lat1 = this.options.customData.lat1;
                          store.state.psingular_seleccionado.tipo = this.options.customData.tipo;
                          store.state.psingular_seleccionado.z_tapa = Number(this.options.customData.z_tapa).toFixed(2);
                          store.state.psingular_seleccionado.inspeccion = this.options.customData.inspeccion;
                          store.state.psingular_seleccionado.profundidad = Number(this.options.customData.profundidad).toFixed(2);
                          store.state.psingular_seleccionado.salto = Number(this.options.customData.salto).toFixed(2);
                          store.state.psingular_seleccionado.z_ab = Number(this.options.customData.z_ab).toFixed(2);
                          store.state.psingular_seleccionado.contrato = this.options.customData.contrato;
                          store.state.psingular_seleccionado.proyecto = this.options.customData.proyecto;
                          store.state.psingular_seleccionado.etapa = this.options.customData.etapa;
                          store.state.psingular_seleccionado.estado = this.options.customData.estado;
                          store.state.psingular_seleccionado.accion = this.options.customData.accion;
                          store.state.psingular_seleccionado.ccz = this.options.customData.ccz;
                          store.state.psingular_seleccionado.cuenca = this.options.customData.cuenca;
                          store.state.psingular_seleccionado.historial = this.options.customData.historial;
                          store.state.psingular_seleccionado.documentos = this.options.customData.documentos;
                          store.state.psingular_seleccionado.fotos = this.options.customData.fotos;
                          store.state.psingular_seleccionado.audios = this.options.customData.audios;
                          store.state.psingular_seleccionado.alta_fuente = this.options.customData.alta_fuente;
                          store.state.psingular_seleccionado.alta_fecha = this.options.customData.alta_fecha;
                          store.state.psingular_seleccionado.calle = this.options.customData.calle;
                          store.state.psingular_seleccionado.via = this.options.customData.via;
                          store.state.psingular_seleccionado.hidraulica = this.options.customData.hidraulica;
                          store.state.psingular_seleccionado.economica = this.options.customData.economica;
                          store.state.psingular_seleccionado.comentarios = this.options.customData.comentarios;
                          store.state.psingular_seleccionado.plano = this.options.customData.plano;
                          store.state.psingular_seleccionado.provisorio = this.options.customData.provisorio;
                          store.state.psingular_seleccionado.dato1 = this.options.customData.dato1;
                          store.state.psingular_seleccionado.dato2 = this.options.customData.dato2;
                          store.state.psingular_seleccionado.dato3 = this.options.customData.dato3;
                          store.state.psingular_seleccionado.dato4 = this.options.customData.dato4;
                          store.state.psingular_seleccionado.habilitado = this.options.customData.habilitado;
                          store.state.psingular_seleccionado.publicado = this.options.customData.publicado;
                          store.state.psingular_seleccionado.fueraservicio = this.options.customData.fueraservicio;
                          if (store.state.modo_seleccion == 'psingularaa' || store.state.modo_seleccion == 'psingularab')
                          {
                          this.setStyle({ weight: 8});
                          store.state.alerta_mensaje = [];
                          store.state.alerta_mensaje.push("Punto singular seleccionado: " + this.options.customData.id_psingular);
                          store.state.alerta = true;
                          }	
                          if (store.state.modo_seleccion == 'todo')
                          {
                            store.state.tipo_elemento_seleccionado = 'PSINGULAR';
                            store.state.modal_visible = 'Evento_Seleccion_Psingular';
                          }
                        }
                      }).on('mouseover',function(e){
                        store.state.color_anterior_psingulares = this.options.color;
                        this.setStyle({color :'yellow'});
                        store.state.color_anterior_tramos_varios = [];
                        let id_psingular = this.options.customData.id_psingular;
                        for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                        { 	
                          if (id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_aa || id_psingular == store.state.tramos_en_mapa[s].options.customData.id_psig_ab)
                          {
                            store.state.color_anterior_tramos_varios.push([store.state.tramos_en_mapa[s].options.customData.id_tramo,store.state.tramos_en_mapa[s].options.color])
                            store.state.tramos_en_mapa[s].setStyle({color :'yellow'});
                          }	
                        }
                      }).on('mouseout',function(e){
                        for(i=0;i<store.state.color_anterior_tramos_varios.length;i++)
                        {
                          let id_tramo = store.state.color_anterior_tramos_varios[i][0];
                            for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                            { 	
                              if (store.state.tramos_en_mapa[s].options.customData.id_tramo == id_tramo)
                              {
                                store.state.tramos_en_mapa[s].setStyle({color :store.state.color_anterior_tramos_varios[i][1]});
                              }	
                            }
                        }
                        this.setStyle({color :store.state.color_anterior_psingulares});
                      });		
                      store.state.psingulares_en_mapa.push(camara);	
                      padre.cambios_mapa = false;
                      store.state.modal_visible = 'Modal_Nuevo_Elemento_Red';
          };
          xhr.send(fd);
          store.state.modo_seleccion = 'todo';
           }//control de acceso por zona y tipo
         });//control de acceso por zona y tipo
        }


        if (this.tipo_cambio_mapa == 'cambio_captacion_existente') {
          this.$buefy.toast.open({duration: 5000, message: 'Cambiando ubicación de captación existente...'});
          var objeto_captacion = false;
          for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
            if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
              objeto_captacion = store.state.captaciones_en_mapa[i];
            }
          }

          var ztapa = objeto_captacion.options.customData.z_tapa;
          let distmovida = dl_geometria.dl_distancia_metros_de_geograficas(objeto_captacion.options.customData.lat1,objeto_captacion.options.customData.lon1,store.state.captacion_seleccionada.lat1,store.state.captacion_seleccionada.lon1);
          (distmovida > 15) ? ztapa = 0.00 : true;
          objeto_captacion.options.customData.z_tapa = ztapa;
          store.state.captacion_seleccionada.z_tapa = ztapa;

          let nuevopopup = "<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>CAPTACION: <br>Id:" + objeto_captacion.options.customData.id_captacion + "</b><br><b>Tramo: " + objeto_captacion.options.customData.id_tramo + "</b></div>"; 
          objeto_captacion.setTooltipContent(nuevopopup);

          var coordenadas_conex_capta = [];
          var objeto_conex_capta = [];
          var sql_conex = '';
          if (store.state.captacion_seleccionada.id_conex_capt != 0)
          {            
            for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
              if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.captacion_seleccionada.id_conex_capt)
               {
                objeto_conex_capta = store.state.conex_capta_en_mapa[i];
                coordenadas_conex_capta = store.state.conex_capta_en_mapa[i].getLatLngs();
               }
            }
                  let longitud = dl_geometria.dl_largo_en_metros_de_geograficas(coordenadas_conex_capta);
                  let historias = JSON.parse(objeto_conex_capta.options.customData.historial);
                  let historia_array = { "descripcion": "SE MODIFICO UBICACION POR AJUSTE DE CAPTACION", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  sql_conex += "UPDATE cat_conex_capt SET SHAPE = GEOMFROMTEXT('LINESTRING(";
                  sql_conex += coordenadas_conex_capta[0].lng + " " + coordenadas_conex_capta[0].lat + "," + coordenadas_conex_capta[1].lng + " " + coordenadas_conex_capta[1].lat;
                  sql_conex += ")'), historial = '" + historia + "', longitud = " + longitud + " WHERE id = " + objeto_conex_capta.options.customData.id_conex_capt;
                  objeto_conex_capta.options.customData.longitud = longitud;
                  objeto_conex_capta.options.customData.historial = historia;
           }
          let historias = JSON.parse(store.state.captacion_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 cat_captaciones SET SHAPE = GEOMFROMTEXT('POINT(";
          sql += objeto_captacion.options.customData.lon1 + " " + objeto_captacion.options.customData.lat1;
          sql += ")'), historial = '" + historia + "', z_tapa = " + objeto_captacion.options.customData.z_tapa;
          sql += ", dato3 = " + store.state.datos_login.revisar ;  
          sql += " WHERE elem_red = " + store.state.captacion_seleccionada.id_captacion;
          objeto_captacion.options.customData.historial = historia;
          var fd = new FormData();
          fd.append("sql_conex", sql_conex);
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.captacion_seleccionada.id_captacion);
          fd.append("tipo", "CAPTACION");
          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/modifico_geometria_captacion.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            objeto_captacion.disableEdit()
            store.state.modo_seleccion = 'todo';
            padre.cambios_mapa = false;
            store.state.modal_visible = 'Modificar_Captacion';
          };
          xhr.send(fd);
        }


        if (this.tipo_cambio_mapa == 'nueva_captacion') {
          
          var lat_nueva = store.state.nueva_captacion._latlng.lat;
          var lon_nueva = store.state.nueva_captacion._latlng.lng;
          app.permiso_por_punto_y_tipo_elemento('Captaciones', lat_nueva, lon_nueva)
          .then(resultado => {
            if (!resultado) {
              this.$buefy.toast.open({duration: 5000, message: 'El usuario no tiene permisos para crear este elemento.'});
              this.barra_superior_descartar_cambios_mapa();
            } else
          {
          this.$buefy.toast.open({duration: 5000, message: 'Creando nueva captación y conexión de captación...'});
          var ccz = '';
          var via = 0;
          var puntomedio = L.point(lat_nueva, lon_nueva);
          let menor_distancia = 99999;
          menor_distancia = 99999;
          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(puntomedio, 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;
          var id_tramo_colector = 0;
          var lat_en_colector = 0;
          var lon_en_colector = 1;
          var colector_vinculado = false;
          for (let s = 0; s < store.state.tramos_en_mapa.length; s++) {
            let coordenadas = '';
            let coordenadas2 = store.state.tramos_en_mapa[s].getLatLngs();
            coordenadas2.forEach(function(latlng, idx){
              coordenadas += latlng.lng + " " + latlng.lat + ",";
             });
             coordenadas = coordenadas.slice(0, -1);
            let res_dist = dl_geometria.dl_punto_cercano_linestring(puntomedio.x,puntomedio.y,coordenadas)
            let tipotr = store.state.tramos_en_mapa[s].options.customData.tipotra;
            if ((res_dist.distancia < menor_distancia) && (tipotr == 49 || tipotr == 51 || tipotr == 53)) {
              id_tramo_colector = store.state.tramos_en_mapa[s].options.customData.id_tramo;
              lat_en_colector = res_dist.lat;
              lon_en_colector = res_dist.lon;
              menor_distancia = res_dist.distancia;
              colector_vinculado = store.state.tramos_en_mapa[s];
            }
          }
          var zencol = 0.00;
           (colector_vinculado != false) ? zencol = app.calcular_z_en_col(lat_en_colector,lon_en_colector,colector_vinculado): zencol = 0.00;
          let largo_conex = dl_geometria.dl_distancia_metros_de_geograficas(lat_nueva,lon_nueva,lat_en_colector,lon_en_colector);
          let historias = [];
          let fechaactual = app.obtengo_fecha(new Date());
          let historia_array = { "descripcion": "NUEVA CONEXION DE CAPTACION POR CATASTRO", "fecha": fechaactual, "usuario": store.state.datos_login.usuario };
          historias.push(historia_array);
          var historia = JSON.stringify(historias);
          let sql_conex = "INSERT INTO cat_conex_capt (SHAPE, id, id_tramo, longitud, historial, alta_fuente, alta_fecha, activo, etapa, tipo,material,seccion,profundidad,contrato,proyecto) VALUES (";
          sql_conex += "GEOMFROMTEXT('LINESTRING(" + lon_nueva + " " + lat_nueva + "," + lon_en_colector + " " + lat_en_colector + ")'),";
          sql_conex += "(SELECT MAX(id) + 1 FROM cat_conex_capt CAT)," + id_tramo_colector + "," + largo_conex + ",'" ;
          sql_conex +=  historia + "','INGRESO CON APLICACION DE CATASTRO','" + fechaactual + "',1,'";
          sql_conex +=  store.state.datos_por_defecto.etapa + "'," + store.state.datos_por_defecto.conex_capta_tipo + ",'" + store.state.datos_por_defecto.conex_capta_material;
          sql_conex +=  "'," + store.state.datos_por_defecto.conex_capta_seccion + "," + store.state.datos_por_defecto.conex_capta_profundidad + ",";
          sql_conex +=  store.state.datos_por_defecto.contrato + "," + store.state.datos_por_defecto.proyecto + ")";
          historias = [];
          fechaactual = app.obtengo_fecha(new Date());
          historia_array = { "descripcion": "NUEVA CAPTACION POR CATASTRO", "fecha": fechaactual, "usuario": store.state.datos_login.usuario };
          historias.push(historia_array);
          var historia2 = JSON.stringify(historias);
          let sql = "INSERT INTO cat_captaciones (SHAPE, elem_red, ccz, calle, via, historial, alta_fuente, alta_fecha, activo, id_tramo, z_col, etapa, tipo, clase, contrato, proyecto,dato3) VALUES (";
          sql += "GEOMFROMTEXT('POINT(" + lon_nueva + " " + lat_nueva + ")'),";
          sql += "(SELECT MAX(elem_red) + 1 FROM cat_captaciones CAT),'" + ccz + "','" + nombre_calle + "'," + via + ",'";
          sql += historia2 + "','INGRESO CON APLICACION DE CATASTRO','" + fechaactual + "',1," + id_tramo_colector + "," + zencol;
          sql += ",'" + store.state.datos_por_defecto.etapa + "'," + store.state.datos_por_defecto.captacion_tipo + "," + store.state.datos_por_defecto.captacion_clase;
          sql += "," + store.state.datos_por_defecto.contrato + "," + store.state.datos_por_defecto.proyecto + "," + store.state.datos_login.revisar + ")";
          var fd = new FormData();
          fd.append("sql_conex", sql_conex);
          fd.append("sql", sql);
          fd.append("historia", historia2);
          fd.append("lat", lat_nueva);
          fd.append("lon", lon_nueva);  
          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_captacion.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            store.state.nueva_captacion.disableEdit();
            store.state.nueva_captacion.remove(mapa);
            padre.$buefy.toast.open('Se agrego nueva captacion. Cargando datos actualizados....');
            store.state.nueva_captacion = '';
            store.state.portavariables = [];
            let datos = JSON.parse(this.response);

              var latlngs = [lat_nueva,lon_nueva];
              if (store.state.datos_por_defecto.etapa == 'A Construir')
              {
                var opacityvalue = 0.7;
                var colorfondo = 'grey';
              }
              else
              {
                var opacityvalue = 1;
                var colorfondo = 'cyan';
              }
              var captacion = L.circle(latlngs, {
                opacity: opacityvalue,
                color: 'blue',
                fillColor: colorfondo,
                fillOpacity: 1,
                radius:1.1,
                customData:{
                  id_captacion:datos[0],
                  lon1:lon_nueva,
                  lat1:lat_nueva,
                  id_tramo:id_tramo_colector,
                  id_conex_capt:datos[1],
                  tipo:store.state.datos_por_defecto.captacion_tipo,
                  clase:store.state.datos_por_defecto.captacion_clase,
                  dim:0.00,
                  cant_bocas:1,
                  rotacion:0,
                  z_col:zencol,
                  z_tapa:0.00,
                  contrato:store.state.datos_por_defecto.contrato,
                  proyecto:store.state.datos_por_defecto.proyecto,
                  etapa:store.state.datos_por_defecto.etapa,
                  estado:"Sin asignar",
                  accion:"Sin asignar",
                  ccz:datos[2],
                  cuenca:datos[3],
                  historial:historia2,
                  documentos:'',
                  fotos:'',
                  audios:'',
                  alta_fuente:'INGRESO CON APLICACION DE CATASTRO',
                  alta_fecha:fechaactual,
                  calle:nombre_calle,
                  via:via,
                  hidraulica:'',
                  economica:'',
                  comentarios:'',
                  plano:'',
                  provisorio:0,
                  dato1:'',
                  dato2:'',
                  dato3:0,
                  dato4:0,
                  habilitado:'',
                  publicado:'',
                  fueraservicio:''
                }
              }).bindTooltip("<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>CAPTACION: <br>Id:" + datos[0] + "</b><br><b>Tramo: " + id_tramo_colector + "</b></div>", 
              {
                    direction: 'left',
                    permanent: false,
                    sticky: true,
                    offset: [10, 0],
                    opacity: 0.75,
                    className: 'leaflet-tooltip-own' 
              }).addTo(mapa).on('click',function(e){

                if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'captacion')
                  {
                    store.state.captacion_seleccionada.id_captacion = this.options.customData.id_captacion;
                    store.state.captacion_seleccionada.lon1 = this.options.customData.lon1;
                    store.state.captacion_seleccionada.lat1 = this.options.customData.lat1;
                    store.state.captacion_seleccionada.id_tramo = this.options.customData.id_tramo;
                    store.state.captacion_seleccionada.id_conex_capt = this.options.customData.id_conex_capt;
                    store.state.captacion_seleccionada.tipo = this.options.customData.tipo;
                    store.state.captacion_seleccionada.clase = this.options.customData.clase;
                    store.state.captacion_seleccionada.dim = this.options.customData.dim;
                    store.state.captacion_seleccionada.cant_bocas = this.options.customData.cant_bocas;
                    store.state.captacion_seleccionada.rotacion = this.options.customData.rotacion;
                    store.state.captacion_seleccionada.z_col = Number(this.options.customData.z_col).toFixed(2);
                    store.state.captacion_seleccionada.z_tapa = Number(this.options.customData.z_tapa).toFixed(2);
                    store.state.captacion_seleccionada.contrato = this.options.customData.contrato;
                    store.state.captacion_seleccionada.proyecto = this.options.customData.proyecto;
                    store.state.captacion_seleccionada.etapa = this.options.customData.etapa;
                    store.state.captacion_seleccionada.estado = this.options.customData.estado;
                    store.state.captacion_seleccionada.accion = this.options.customData.accion;
                    store.state.captacion_seleccionada.ccz = this.options.customData.ccz;
                    store.state.captacion_seleccionada.cuenca = this.options.customData.cuenca;
                    store.state.captacion_seleccionada.historial = this.options.customData.historial;
                    store.state.captacion_seleccionada.documentos = this.options.customData.documentos;
                    store.state.captacion_seleccionada.fotos = this.options.customData.fotos;
                    store.state.captacion_seleccionada.audios = this.options.customData.audios;
                    store.state.captacion_seleccionada.alta_fuente = this.options.customData.alta_fuente;
                    store.state.captacion_seleccionada.alta_fecha = this.options.customData.alta_fecha;
                    store.state.captacion_seleccionada.calle = this.options.customData.calle;
                    store.state.captacion_seleccionada.via = this.options.customData.via;
                    store.state.captacion_seleccionada.hidraulica = this.options.customData.hidraulica;
                    store.state.captacion_seleccionada.economica = this.options.customData.economica;
                    store.state.captacion_seleccionada.comentarios = this.options.customData.comentarios;
                    store.state.captacion_seleccionada.plano = this.options.customData.plano;
                    store.state.captacion_seleccionada.provisorio = this.options.customData.provisorio;
                    store.state.captacion_seleccionada.dato1 = this.options.customData.dato1;
                    store.state.captacion_seleccionada.dato2 = this.options.customData.dato2;
                    store.state.captacion_seleccionada.dato3 = this.options.customData.dato3;
                    store.state.captacion_seleccionada.dato4 = this.options.customData.dato4;
                    store.state.captacion_seleccionada.habilitado = this.options.customData.habilitado;
                    store.state.captacion_seleccionada.publicado = this.options.customData.publicado;
                    store.state.captacion_seleccionada.fueraservicio = this.options.customData.fueraservicio;
                  }
                  if (store.state.modo_seleccion == 'todo')
                  {
                      store.state.tipo_elemento_seleccionado = 'CAPTACION';
                    store.state.modal_visible = 'Evento_Seleccion_Captacion';															
                  }	
                }).on('mouseover',function(e){
                  store.state.color_anterior_captaciones = this.options.color;
                  this.setStyle({color :'blue'});
                  for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                  { 	
                    if (store.state.tramos_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                    {
                      store.state.color_anterior_tramos = store.state.tramos_en_mapa[s].options.color;
                      store.state.tramos_en_mapa[s].setStyle({color :'blue'});
                    }	
                  }
                  for (var s = 0;s < store.state.conex_capta_en_mapa.length; s++)
                      { 
                        if (store.state.conex_capta_en_mapa[s].options.customData.id_conex_capt == this.options.customData.id_conex_capt)
                          {
                            store.state.color_anterior_conex_capt = store.state.conex_capta_en_mapa[s].options.color;
                            store.state.conex_capta_en_mapa[s].setStyle({color :'blue'});
                          }
                      }
                }).on('mouseout',function(e){
                  for (var s = 0;s < store.state.conex_capta_en_mapa.length; s++)
                        { 
                          if (store.state.conex_capta_en_mapa[s].options.customData.id_conex_capt == this.options.customData.id_conex_capt)
                            {
                              store.state.conex_capta_en_mapa[s].setStyle({color : store.state.color_anterior_conex_capt});
                            }
                        }
                  for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                      { 	
                        if (store.state.tramos_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                        {
                          store.state.tramos_en_mapa[s].setStyle({color :store.state.color_anterior_tramos});
                        }	
                      }
                  this.setStyle({color :store.state.color_anterior_captaciones});
                });	
                store.state.captaciones_en_mapa.push(captacion);

                var lat1 = lat_nueva;
                var lon1 = lon_nueva;
                var lat2 = lat_en_colector;
                var lon2 = lon_en_colector;
                var latlngs = [[lat1,lon1],[lat2,lon2]];
                var latlngini = [lat1,lon1];
                if (store.state.datos_por_defecto.etapa == 'A Construir')
                {
                  var dasharrayvalue = '10,10';
                  var dashoffsetvalue = '0';
                }
                else
                {
                  var dasharrayvalue = null;
                  var dashoffsetvalue = null;
                }
                var conex_capt = L.polyline(latlngs, {
                      color: 'cyan',
                      opacity: 0.8,
                      weight: 6,
                      dashArray: dasharrayvalue,
                      dashOffset: dashoffsetvalue,
                      customData:{
                        id_conex_capt:datos[1],
                        lon1:lat_nueva,
                        lat1:lon_nueva,
                        lon2:lat_en_colector,
                        lat2:lon_en_colector,
                        id_captacion:datos[0],
                        id_tramo:id_tramo_colector,
                        longitud:largo_conex,
                        tipo:store.state.datos_por_defecto.conex_capta_tipo,
                        material:store.state.datos_por_defecto.conex_capta_material,
                        seccion:store.state.datos_por_defecto.conex_capta_seccion,
                        profundidad:store.state.datos_por_defecto.conex_capta_profundidad,
                        contrato:store.state.datos_por_defecto.contrato,
                        proyecto:store.state.datos_por_defecto.proyecto,
                        etapa:store.state.datos_por_defecto.etapa,
                        estado:"Sin asignar",
                        accion:"Sin asignar",
                        historial:historia,
                        documentos:'',
                        alta_fuente:'INGRESO CON APLICACION DE CATASTRO',
                        alta_fecha:fechaactual,
                        hidraulica:'',
                        economica:'',
                        comentarios:'',
                        plano:'',
                        provisorio:0,
                        dato1:'',
                        dato2:'',
                        dato3:0,
                        dato4:0,
                        habilitado:'',
                        publicado:'',
                        fueraservicio:''
                  }
                  }).bindTooltip("<div style='background:cyan; padding:6px 11px 11px 6px'><b>CONEX CAPTA:<br>Id:" + datos[1] + "</br></div>", 
                  {
                        direction: 'right',
                        permanent: false,
                        sticky: true,
                        offset: [10, 0],
                        opacity: 0.75,
                        className: 'leaflet-tooltip-own' 
                  }).addTo(mapa).on('click',function(e){
                    if (store.state.modo_seleccion == 'todo')
                    {
                    store.state.tipo_elemento_seleccionado = 'CONEX_CAPTA';
                    store.state.modal_visible = 'Evento_Seleccion_Conex_capta';														
                    }
                    if (store.state.modo_seleccion == 'todo' || store.state.modo_seleccion == 'conex_capta' || store.state.modo_seleccion == 'conexion_captacion' )
                      {												
                        store.state.conex_capta_seleccionada.id_conex_capt = this.options.customData.id_conex_capt;
                        store.state.conex_capta_seleccionada.lon1 = this.options.customData.lon1;
                        store.state.conex_capta_seleccionada.lat1 = this.options.customData.lat1;
                        store.state.conex_capta_seleccionada.lon2 = this.options.customData.lon2;
                        store.state.conex_capta_seleccionada.lat2 = this.options.customData.lat2;
                        store.state.conex_capta_seleccionada.id_captacion = this.options.customData.id_captacion;
                        store.state.conex_capta_seleccionada.id_tramo = this.options.customData.id_tramo;
                        store.state.conex_capta_seleccionada.longitud = Number(this.options.customData.longitud).toFixed(2);
                        store.state.conex_capta_seleccionada.tipo = this.options.customData.tipo;
                        store.state.conex_capta_seleccionada.material = this.options.customData.material;
                        store.state.conex_capta_seleccionada.seccion = this.options.customData.seccion;
                        store.state.conex_capta_seleccionada.profundidad = Number(this.options.customData.profundidad).toFixed(2);
                        store.state.conex_capta_seleccionada.contrato = this.options.customData.contrato;
                        store.state.conex_capta_seleccionada.proyecto = this.options.customData.proyecto;
                        store.state.conex_capta_seleccionada.etapa = this.options.customData.etapa;
                        store.state.conex_capta_seleccionada.estado = this.options.customData.estado;
                        store.state.conex_capta_seleccionada.accion = this.options.customData.accion;
                        store.state.conex_capta_seleccionada.historial = this.options.customData.historial;
                        store.state.conex_capta_seleccionada.documentos = this.options.customData.documentos;
                        store.state.conex_capta_seleccionada.alta_fuente = this.options.customData.alta_fuente;
                        store.state.conex_capta_seleccionada.alta_fecha = this.options.customData.alta_fecha;
                        store.state.conex_capta_seleccionada.hidraulica = this.options.customData.hidraulica;
                        store.state.conex_capta_seleccionada.economica = this.options.customData.economica;
                        store.state.conex_capta_seleccionada.comentarios = this.options.customData.comentarios;
                        store.state.conex_capta_seleccionada.plano = this.options.customData.plano;
                        store.state.conex_capta_seleccionada.provisorio = this.options.customData.provisorio;
                        store.state.conex_capta_seleccionada.dato1 = this.options.customData.dato1;
                        store.state.conex_capta_seleccionada.dato2 = this.options.customData.dato2;
                        store.state.conex_capta_seleccionada.dato3 = this.options.customData.dato3;
                        store.state.conex_capta_seleccionada.dato4 = this.options.customData.dato4;
                        store.state.conex_capta_seleccionada.habilitado = this.options.customData.habilitado;
                        store.state.conex_capta_seleccionada.publicado = this.options.customData.publicado;
                        store.state.conex_capta_seleccionada.fueraservicio = this.options.customData.fueraservicio;
                      }
                      if (store.state.modo_seleccion == 'conexion_captacion')
                      {
                      store.state.alerta_mensaje = [];
                      store.state.alerta_mensaje.push("Conexión de captación seleccionada: " + this.options.customData.id_conex_capt);
                      store.state.alerta = true;
                      }
                    }).on('mouseover',function(e){
                      store.state.color_anterior_conex_capt = this.options.color;
                      this.setStyle({color :'cyan'});
                      for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                      { 	
                        if (this.options.customData.id_tramo == store.state.tramos_en_mapa[s].options.customData.id_tramo)
                        {
                          store.state.color_anterior_tramos = store.state.tramos_en_mapa[s].options.color;
                          store.state.tramos_en_mapa[s].setStyle({color :'cyan'});
                        }	
                      }
                      for (var s = 0;s < store.state.captaciones_en_mapa.length; s++)
                      { 
                        if (store.state.captaciones_en_mapa[s].options.customData.id_captacion == this.options.customData.id_captacion)
                          {
                            store.state.color_anterior_captaciones = store.state.captaciones_en_mapa[s].options.color;
                            store.state.captaciones_en_mapa[s].setStyle({color :'cyan'});
                          }
                      }
                    }).on('mouseout',function(e){
                      for (var s = 0;s < store.state.tramos_en_mapa.length; s++)
                      { 	
                        if (store.state.tramos_en_mapa[s].options.customData.id_tramo == this.options.customData.id_tramo)
                        {
                          store.state.tramos_en_mapa[s].setStyle({color :store.state.color_anterior_tramos});
                        }	
                      }
                      for (var s = 0;s < store.state.captaciones_en_mapa.length; s++)
                      { 
                        if (store.state.captaciones_en_mapa[s].options.customData.id_captacion == this.options.customData.id_captacion)
                          {
                            store.state.captaciones_en_mapa[s].setStyle({color : store.state.color_anterior_captaciones});
                          }
                      }		
                      this.setStyle({color :store.state.color_anterior_conex_capt});
                    });	
                    store.state.conex_capta_en_mapa.push(conex_capt);

           padre.cambios_mapa = false;
           store.state.modal_visible = 'Modal_Nuevo_Elemento_Red';
          };
          xhr.send(fd);
          store.state.modo_seleccion = 'todo';


            }//CIERRO EL ELSE DEL CHEQUEO DE PERMISOS POR UBICACION
            });//CIERRO EL LLAMADO A APP.PERMISO POR PUNTO Y TIPO ELEMENTO
        }  
        


        if (this.tipo_cambio_mapa == 'cambio_conex_captacion_existente') {
          this.$buefy.toast.open({duration: 5000, message: 'Modifico ubicación de conexión de captación...'});
          var objeto_conex_capta = false;
          var sql = '';
          var id_tramo = 0;
          var coordenadas_conex_capta = [];
          for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
            if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.conex_capta_seleccionada.id_conex_capt)
             {
              var objeto_conex_capta = store.state.conex_capta_en_mapa[i];
              id_tramo = objeto_conex_capta.options.customData.id_tramo;
              coordenadas_conex_capta = store.state.conex_capta_en_mapa[i].getLatLngs();
             }
          }
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_tramo == id_tramo)
             {
              var objeto_tramo = store.state.tramos_en_mapa[i];
             }
          }
          var sql_capta = '';
          if (store.state.id_generico != 0)
          {
            id_tramo = store.state.id_generico;
            let id_captacion = objeto_conex_capta.options.customData.id_captacion;
            let zentramo = app.calcular_z_en_col(coordenadas_conex_capta[1].lat,coordenadas_conex_capta[1].lng,objeto_tramo);
            sql_capta = "UPDATE cat_captaciones SET id_tramo = " + id_tramo + ", z_col = " + zentramo + " WHERE elem_red = " + id_captacion;
            for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
              if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == objeto_conex_capta.options.customData.id_captacion)
               {
                store.state.captaciones_en_mapa[i].options.customData.id_tramo = id_tramo;
                store.state.captaciones_en_mapa[i].options.customData.z_col = zentramo;
                let nuevopopup = "<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>CAPTACION: <br>Id:" + id_captacion + "</b><br><b>Tramo: " + id_tramo + "</b></div>";
                store.state.captaciones_en_mapa[i].setTooltipContent(nuevopopup);
              }
            }
          }
                  let longitud = dl_geometria.dl_largo_en_metros_de_geograficas(coordenadas_conex_capta);
                  longitud = Number(longitud).toFixed(2);
                  let historias = JSON.parse(objeto_conex_capta.options.customData.historial);
                  let historia_array = { "descripcion": "SE MODIFICO UBICACION EN COLECTOR", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                  historias.push(historia_array);
                  let historia = JSON.stringify(historias);
                  sql = "UPDATE cat_conex_capt SET SHAPE = GEOMFROMTEXT('LINESTRING(";
                  sql += coordenadas_conex_capta[0].lng + " " + coordenadas_conex_capta[0].lat + "," + coordenadas_conex_capta[1].lng + " " + coordenadas_conex_capta[1].lat;
                  sql += ")'), historial = '" + historia + "', longitud = " + longitud + ", id_tramo =" + id_tramo;
                  sql += ", dato3 = " + store.state.datos_login.revisar ;  
                  sql += " WHERE id = " + objeto_conex_capta.options.customData.id_conex_capt;

                  objeto_conex_capta.options.customData.historial = historia;
                  objeto_conex_capta.options.customData.longitud = longitud;
                  objeto_conex_capta.options.customData.id_tramo = id_tramo;
                  store.state.conex_capta_seleccionada.historial = historia;
                  store.state.conex_capta_seleccionada.longitud = longitud;
                  store.state.conex_capta_seleccionada.id_tramo = id_tramo;                 

          var fd = new FormData();
          fd.append("sql_capta", sql_capta);
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", objeto_conex_capta.options.customData.id_conex_capt);
          fd.append("tipo", "CONEX_CAPTA");
          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/modifico_geometria_conex_captacion.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            objeto_conex_capta.disableEdit()
            store.state.modo_seleccion = 'todo';
            padre.cambios_mapa = false;
            store.state.modal_visible = 'Modificar_Conex_Captacion';   
          };
          xhr.send(fd);
        }
      }
      else {
        this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente');
      }
    },
    barra_superior_descartar_cambios_mapa: function () {
      map.editTools.options.skipMiddleMarkers = false;
      var padre = this;
      if (this.tipo_cambio_mapa == 'nuevo_tramo') {
        map.editTools.stopDrawing();
        if (store.state.nuevo_tramo !== '') {
          store.state.nuevo_tramo.disableEdit();
          store.state.nuevo_tramo.remove(map);
          store.state.nuevo_tramo = '';
        }
        this.cambios_mapa = false;
        store.state.modal_visible = '';
        store.state.modo_seleccion = 'todo';
      }
      if (this.tipo_cambio_mapa == 'cambio_tramo_existente') {
        this.$buefy.dialog.confirm({
          message: 'Seguro de descartar cambios?',
          type: 'is-warning',
          onConfirm: () => {
            for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
              if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                store.state.tramos_en_mapa[i].setLatLngs(store.state.tramo_seleccionado.geometria);
                store.state.tramos_en_mapa[i].options.customData.longitud = store.state.tramo_seleccionado.longitud;
                store.state.tramos_en_mapa[i].options.customData.id_psig_aa = store.state.tramo_seleccionado.id_psig_aa;
                store.state.tramos_en_mapa[i].options.customData.id_psig_ab = store.state.tramo_seleccionado.id_psig_ab;
                store.state.tramos_en_mapa[i].disableEdit();
              }
            }
            store.state.modo_seleccion = 'todo';
            store.state.modal_visible = 'Modificar_Tramo';
            padre.cambios_mapa = false;
          }
        });
      }
      if (this.tipo_cambio_mapa == 'cambio_psingular_existente') {
        this.$buefy.dialog.confirm({
          message: 'Seguro de descartar cambios?',
          type: 'is-warning',
          onConfirm: () => {
            for (let i = 0; i < store.state.psingulares_en_mapa.length; i++) {
              if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
                let punto_anterior = L.latLng(store.state.psingular_seleccionado.lat1, store.state.psingular_seleccionado.lon1);
                store.state.psingulares_en_mapa[i].setLatLng(punto_anterior);
                store.state.psingulares_en_mapa[i].disableEdit();
                store.state.psingulares_en_mapa[i].setRadius(0.6);
              }
            }
            for (let i = 0; i < store.state.tramos_movidos_por_camara.length; i++) {
              for (let j = 0; j < store.state.tramos_en_mapa.length; j++) {
                if (store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramos_movidos_por_camara[i].id_tramo) {
                  store.state.tramos_en_mapa[j].setLatLngs(store.state.tramos_movidos_por_camara[i].geometria);
                  store.state.tramos_en_mapa[j].options.customData.longitud = store.state.tramos_movidos_por_camara[i].longitud;
                }
              }
            }
            store.state.tramos_movidos_por_camara = [];
            store.state.modo_seleccion = 'todo';
            store.state.modal_visible = 'Modificar_Psingular';
            padre.cambios_mapa = false;
          }
        });
      }
      if (this.tipo_cambio_mapa == 'nuevo_psingular') {
        map.editTools.stopDrawing();
        if (store.state.nuevo_psingular !== '') {
          store.state.nuevo_psingular.disableEdit();
          store.state.nuevo_psingular.remove(map);
          store.state.nuevo_psingular = '';
        }
        this.cambios_mapa = false;
        store.state.modal_visible = '';
        store.state.modo_seleccion = 'todo';
      }

      if (this.tipo_cambio_mapa == 'cambio_captacion_existente') {
        this.$buefy.dialog.confirm({
          message: 'Seguro de descartar cambios?',
          type: 'is-warning',
          onConfirm: () => {
            for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
              if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
                let punto_anterior = L.latLng(store.state.captacion_seleccionada.lat1, store.state.captacion_seleccionada.lon1)
                store.state.captaciones_en_mapa[i].setLatLng(punto_anterior);
                store.state.captaciones_en_mapa[i].disableEdit();
                store.state.captaciones_en_mapa[i].setRadius(1.5);
              }
            }
            if (store.state.captacion_seleccionada.id_conex_capt != 0)
            {            
              for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
                if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.captacion_seleccionada.id_conex_capt)
                 {
                let coords = store.state.conex_capta_en_mapa[i].getLatLngs();
                let nuevos_puntos = [[store.state.captacion_seleccionada.lat1,store.state.captacion_seleccionada.lon1],[coords[1].lat,coords[1].lng]];               
                store.state.conex_capta_en_mapa[i].setLatLngs(nuevos_puntos);
                 }
              }
            }
            store.state.modo_seleccion = 'todo';
            store.state.modal_visible = 'Modificar_Captacion';
            padre.cambios_mapa = false;
          }
        });
      }

      if (this.tipo_cambio_mapa == 'nueva_captacion') {
        map.editTools.stopDrawing();
        if (store.state.nueva_captacion !== '') {
          store.state.nueva_captacion.disableEdit();
          store.state.nueva_captacion.remove(map);
          store.state.nueva_captacion = '';
        }
        this.cambios_mapa = false;
        store.state.modal_visible = '';
        store.state.modo_seleccion = 'todo';
      }

      if (this.tipo_cambio_mapa == 'cambio_conex_captacion_existente') {
        this.$buefy.dialog.confirm({
          message: 'Seguro de descartar cambios?',
          type: 'is-warning',
          onConfirm: () => {
            for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
              if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.conex_capta_seleccionada.id_conex_capt) 
              {
                let puntos_anteriores = [[store.state.conex_capta_seleccionada.lat1, store.state.conex_capta_seleccionada.lon1],[store.state.conex_capta_seleccionada.lat2, store.state.conex_capta_seleccionada.lon2]]; 
                store.state.conex_capta_en_mapa[i].setLatLngs(puntos_anteriores);
                store.state.conex_capta_en_mapa[i].disableEdit();
              }
            }
            store.state.modo_seleccion = 'todo';
            store.state.modal_visible = 'Modificar_Conex_Captacion';
            padre.cambios_mapa = false;
          }
        });
      }


    },
    cerrar_reportes: function () {
      app.limpio_mapa(map, 0);
      store.state.descripcion_consulta_distribuida = '';
      store.state.descripcion_consulta_distribuida_colectores = '';
      store.state.descripcion_consulta_distribuida_psingulares = '';
      store.state.descripcion_consulta_distribuida_captaciones = '';
      store.state.modo_consulta_distribuida = 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(this.tipo_filtro_distribuido).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(this.tipo_filtro_distribuido).then(v => {
        mensaje_espera.close();
      //  cargando_algo.close();
      });
    },
    reporte_shapefile() {
      var padre = this;
      app.chequeo_conexion();
      if (store.state.hayconexion == true) {
        if(this.tipo_filtro_distribuido == 'Colectores')
        {
                        if (store.state.tramos_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.tramos_en_mapa.length; i++) {
                            datos.push(store.state.tramos_en_mapa[i].options.customData.elemred);
                          }
                          var fd = new FormData();
                          fd.append("datos", JSON.stringify(datos));
                          fd.append("tipo", 'Colectores');
                          var getUrl = window.location;
                          var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                          var phpfile = baseUrl + '/php/bajar_shapes_redes.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 = "Tramos_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 tramos para reportar');
                        }
                }

        if(this.tipo_filtro_distribuido == 'PSingulares')
                {
                                if (store.state.psingulares_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.psingulares_en_mapa.length; i++) {
                                    datos.push(store.state.psingulares_en_mapa[i].options.customData.elem_red);
                                  }
                                  var fd = new FormData();
                                  fd.append("datos", JSON.stringify(datos));
                                  fd.append("tipo", 'PSingulares');
                                  var getUrl = window.location;
                                  var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                  var phpfile = baseUrl + '/php/bajar_shapes_redes.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 = "PSingulares_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 puntos singulares para reportar');
                                }
                }



        if(this.tipo_filtro_distribuido == 'Captaciones')
                {
                                if (store.state.captaciones_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.captaciones_en_mapa.length; i++) {
                                    datos.push(store.state.captaciones_en_mapa[i].options.customData.elem_red);
                                  }
                                  var fd = new FormData();
                                  fd.append("datos", JSON.stringify(datos));
                                  fd.append("tipo", 'Captaciones');
                                  var getUrl = window.location;
                                  var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                                  var phpfile = baseUrl + '/php/bajar_shapes_redes.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 = "Captaciones_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 captaciones 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 == 'psingularaa') {
        store.state.tramo_seleccionado.id_psig_aa = store.state.psingular_seleccionado.id_psingular;
        store.state.tramo_seleccionado.z_tapa_aa = store.state.psingular_seleccionado.z_tapa;
        store.state.modal_visible = 'Modal_modificacion_datos_tramo';
      }
      if (store.state.modo_seleccion == 'psingularab') {
        store.state.tramo_seleccionado.id_psig_ab = store.state.psingular_seleccionado.id_psingular;
        store.state.tramo_seleccionado.z_tapa_ab = store.state.psingular_seleccionado.z_tapa;
        store.state.modal_visible = 'Modal_modificacion_datos_tramo';
      }
      if (store.state.modo_seleccion == 'colector') {
        this.datos_colector = store.state.colector_seleccionado;
      }
      if (store.state.modo_seleccion == 'calle_tramo') {
        store.state.tramo_seleccionado.calle = store.state.calle_seleccionada;
        store.state.modal_visible = 'Modal_modificacion_datos_tramo';
      }
      if (store.state.modo_seleccion == 'calle_psingular') {
        store.state.psingular_seleccionado.calle = store.state.calle_seleccionada;
        store.state.modal_visible = 'Modal_modificacion_datos_psingular';
      }
      if (store.state.modo_seleccion == 'calle_captacion') {
        store.state.captacion_seleccionada.calle = store.state.calle_seleccionada;
        store.state.modal_visible = 'Modal_modificacion_datos_captacion';
      }
      if (store.state.modo_seleccion == 'tramo_captacion') {
        store.state.captacion_seleccionada.id_tramo = store.state.tramo_seleccionado.id_tramo;
        store.state.modal_visible = 'Modal_modificacion_datos_captacion';
      }this.ver_datos
      if (store.state.modo_seleccion == 'tramo_conex_captacion') {
        store.state.conex_capta_seleccionada.id_tramo = store.state.tramo_seleccionado.id_tramo;
        store.state.modal_visible = 'Modal_modificacion_datos_conex_captacion';
      }
      if (store.state.modo_seleccion == 'conexion_captacion') {
        store.state.captacion_seleccionada.id_conex_capt = store.state.conex_capta_seleccionada.id_conex_capt;
        store.state.modal_visible = 'Modal_modificacion_datos_captacion';
      }
      store.state.modo_seleccion = 'todo'
      this.modo_seleccion = false;
    },
    barra_superior_descarto_seleccion() {
      store.state.modo_seleccion = 'todo'
      if (store.state.tipo_elemento_seleccionado == 'TRAMO')
      {
      store.state.modal_visible = 'Modal_modificacion_datos_tramo';
      }
      else if (store.state.tipo_elemento_seleccionado == 'PSINGULAR')
      {
        store.state.modal_visible = 'Modal_modificacion_datos_psingular'; 
      }
      else if (store.state.tipo_elemento_seleccionado == 'CAPTACION')
      {
        store.state.modal_visible = 'Modal_modificacion_datos_captacion'; 
      }
      else if (store.state.tipo_elemento_seleccionado == 'CONEX_CAPTA')
      {
        store.state.modal_visible = 'Modal_modificacion_datos_conex_captacion'; 
      }
      this.modo_seleccion = false;
    },
    ver_datos_y_media_tramo() {
      this.ver_datos = false;
      this.ver_detalle = false;
      this.ver_historico = false;
      var padre = this;
      store.state.tramo_seleccionado.fotos_con_fecha = [];
      if (store.state.tramo_seleccionado.fotos != '') {
        let array_fotos = JSON.parse(store.state.tramo_seleccionado.fotos);
        var fotos_en_servidor = obtengo_fotos(array_fotos);
        fotos_en_servidor.then(function (valor) {
          for (i = 0; i < valor.length; i++) {
            store.state.tramo_seleccionado.fotos_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      store.state.tramo_seleccionado.audios_con_fecha = [];
      if (store.state.tramo_seleccionado.audios != '') {
        let array_audios = JSON.parse(store.state.tramo_seleccionado.audios);
        var audios_en_servidor = obtengo_audios(array_audios);
        audios_en_servidor.then(function (valor) {fotos_con_fecha
          for (i = 0; i < valor.length; i++) {
            store.state.tramo_seleccionado.audios_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      this.lista_planos = [];
      store.state.modal_visible = 'Ver_Datos_y_Media_Tramo'
    },
    ver_datos_y_media_psingular() {
      this.ver_datos = false;
      this.ver_detalle = false;
      this.ver_historico = false;
      var padre = this;
      store.state.psingular_seleccionado.fotos_con_fecha = [];
      if (store.state.psingular_seleccionado.fotos != '') {
        let array_fotos = JSON.parse(store.state.psingular_seleccionado.fotos);
        var fotos_en_servidor = obtengo_fotos(array_fotos);
        fotos_en_servidor.then(function (valor) {
          for (i = 0; i < valor.length; i++) {
            store.state.psingular_seleccionado.fotos_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      store.state.psingular_seleccionado.audios_con_fecha = [];
      if (store.state.psingular_seleccionado.audios != '') {
        let array_audios = JSON.parse(store.state.psingular_seleccionado.audios);
        var audios_en_servidor = obtengo_audios(array_audios);
        audios_en_servidor.then(function (valor) {
          for (i = 0; i < valor.length; i++) {
            store.state.psingular_seleccionado.audios_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      this.lista_planos = [];
      store.state.modal_visible = 'Ver_Datos_y_Media_Psingular'
    },
    ver_datos_y_media_captacion() {
      this.ver_datos = false;
      this.ver_detalle = false;
      this.ver_historico = false;
      var padre = this;
      store.state.captacion_seleccionada.fotos_con_fecha = [];
      if (store.state.captacion_seleccionada.fotos != '') {
        let array_fotos = JSON.parse(store.state.captacion_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.captacion_seleccionada.fotos_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      store.state.captacion_seleccionada.audios_con_fecha = [];
      if (store.state.captacion_seleccionada.audios != '') {
        let array_audios = JSON.parse(store.state.captacion_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.captacion_seleccionada.audios_con_fecha.push(valor[i]);
          }
          padre.ver_datos = false;
          padre.ver_historico = false;
        });
      }
      this.lista_planos = [];
      store.state.modal_visible = 'Ver_Datos_y_Media_Captacion'
    },
    ver_datos_conex_captacion() {
      this.ver_datos = false;
      this.ver_detalle = false;
      this.ver_historico = false;
      store.state.modal_visible = 'Ver_Datos_Conex_Captacion'
    },
    modifico_servicio(e) {
      store.state.control_cambios = true;
      var servicios = JSON.parse(store.state.conexion_seleccionada.servicios);
      var tgms = JSON.parse(store.state.conexion_seleccionada.tgms);
      var oses = JSON.parse(store.state.conexion_seleccionada.oses);
      var puertas = JSON.parse(store.state.conexion_seleccionada.puertas);
      var nuevo_servicio = [];
      var nuevo_tgms = [];
      var nuevo_oses = [];
      var nuevo_puertas = [];
      var tgms_servicio = this.datos_servicios[e].tgms;
      var oses_servicio = this.datos_servicios[e].oses;
      var puertas_servicio = this.datos_servicios[e].puertas;
      tgms_servicio = tgms_servicio.split(";");
      oses_servicio = oses_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 < 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_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.puertas = JSON.stringify(nuevo_puertas);
    },
    seleccionar_ps_arriba_tramo() {
      store.state.modo_seleccion = 'psingularaa'
      store.state.control_cambios = true;
      this.modo_seleccion = true;
      store.state.modal_visible = '';
    },
    seleccionar_ps_abajo_tramo() {
      store.state.modo_seleccion = 'psingularab'
      store.state.control_cambios = true;
      this.modo_seleccion = true;
      store.state.modal_visible = '';
    },
    seleccionar_colector() {
      store.state.modo_seleccion = 'colector'
      store.state.control_cambios = true;
      this.modo_seleccion = true;
      store.state.modal_visible = '';
    },
    seleccionar_calle_tramo() {
      store.state.modo_seleccion = 'calle_tramo'
      store.state.control_cambios = true;
      this.modo_seleccion = true;
      store.state.modal_visible = '';
    },
    seleccionar_calle_psingular() {
      store.state.modo_seleccion = 'calle_psingular'
      store.state.control_cambios = true;
      this.modo_seleccion = true;
      store.state.modal_visible = '';
    },
    seleccionar_calle_captacion() {
      store.state.modo_seleccion = 'calle_captacion'
      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 = store.state.colectores_en_mapa[i].options.customData.zarriba;
          let zabajo = 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);
          }
          else {
            this.$buefy.toast.open('No es posible calcular el zampeado del colector en conexión');
          }
        }
      }
    },
    calcular_longitud_tramo(e) {
      let longitud_calculada = dl_geometria.dl_largo_en_metros_de_geograficas(store.state.tramo_seleccionado.geometria);
      store.state.tramo_seleccionado.longitud = longitud_calculada.toFixed(2);
    },
    calcular_pendiente_tramo(e) {
      let pendiente_calculada = 100 * (Math.abs(store.state.tramo_seleccionado.zarriba - store.state.tramo_seleccionado.zabajo) / store.state.tramo_seleccionado.longitud);
      store.state.tramo_seleccionado.pendiente = pendiente_calculada.toFixed(2);
    },
    calcular_salto_tramo() {
      let menor_zampeado = 1000;
      for (let j = 0; j < store.state.tramos_en_mapa.length; j++) {
        if (store.state.tramos_en_mapa[j].options.customData.id_psig_aa == store.state.tramo_seleccionado.id_psig_ab) {
          if (store.state.tramos_en_mapa[j].options.customData.zarriba < menor_zampeado)
          {
            menor_zampeado = store.state.tramos_en_mapa[j].options.customData.zarriba;
          }
        }
      }
      let nuevo_salto = 0;
      (menor_zampeado != 1000 && menor_zampeado != 0.00 && store.state.tramo_seleccionado.zabajo != 0.00)? nuevo_salto = Math.abs(store.state.tramo_seleccionado.zabajo - menor_zampeado): nuevo_salto = 0.00;
      nuevo_salto = nuevo_salto.toFixed(2);
      store.state.tramo_seleccionado.salto = nuevo_salto;
    },    
    calcular_zcol_captacion() {
      let zampres = 0.00;
      let id_tramo = store.state.captacion_seleccionada.id_tramo;
      if (id_tramo != 0)
      {
        let tramo = false;
        for (i = 0; i < store.state.tramos_en_mapa.length; i++) {
          if (id_tramo == store.state.tramos_en_mapa[i].options.customData.id_tramo)
          {
            tramo = store.state.tramos_en_mapa[i];
          }
        }
        let conex_capta = false;
        for (i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
          if (store.state.captacion_seleccionada.id_captacion == store.state.conex_capta_en_mapa[i].options.customData.id_captacion)
          {
            conex_capta = store.state.conex_capta_en_mapa[i];
          }
        }
        if (tramo != false && conex_capta != false)
          { 
          zampres = app.calcular_z_en_col(conex_capta.options.customData.lat2,conex_capta.options.customData.lon1, tramo); 
          store.state.captacion_seleccionada.z_col = zampres;
          }
          else {
            this.$buefy.toast.open('No es posible calcular el zampeado del colector en captación');
          }
        } 
    },
    calcular_salto_psingular() {
      let id_psingular = store.state.psingular_seleccionado.id_psingular;
      let salto = app.calculo_salto_en_psingular(id_psingular);
        if (salto >= 0 && salto < 20)
          {
          salto = String(salto);
          store.state.psingular_seleccionado.salto = Number(salto).toFixed(2);
          }
          else 
          {
            this.$buefy.toast.open('No es posible calcular el salto del punto singular');
            store.state.psingular_seleccionado.salto = 0;
          }
    },
    ver_plano(e) {
      plano = this.lista_planos[e].nombre;
      store.state.plano = "/COLECTORES/archivos/planos/" + plano + ".jpg";
      store.state.modal_visible = 'Fotos_Pantalla_Completa2';
    },
    ver_planos(e) {
      this.isZoomed = false;
      var padre = this;
      var plano = '';
      if (store.state.tipo_elemento_seleccionado == 'TRAMO'){
        geometria = "ST_GEOMFROMTEXT('LINESTRING(";
          for (let i = 0; i < store.state.tramo_seleccionado.geometria.length; i++) {
            geometria += store.state.tramo_seleccionado.geometria[i].lng + " " + store.state.tramo_seleccionado.geometria[i].lat + ",";
          }
          geometria = geometria.slice(0, -1);
          geometria += ")')"
      }
      if (store.state.tipo_elemento_seleccionado == 'PSINGULAR')
      { geometria = "ST_GEOMFROMTEXT('POINT(" + store.state.psingular_seleccionado.lon1 + " " + store.state.psingular_seleccionado.lat1 + ")')";}
      if (store.state.tipo_elemento_seleccionado == 'CAPTACION')
      { geometria = "ST_GEOMFROMTEXT('POINT(" + store.state.captacion_seleccionada.lon1 + " " + store.state.captacion_seleccionada.lat1 + ")')";}
      sql = "SELECT SHAPE,id,iddan,nombre,tipo,anoproy,descripcion FROM adm_planos WHERE activo = 1 AND ST_CONTAINS(SHAPE," + geometria + ")";
          let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Cargando plano...' });
          const cargando_algo = this.$buefy.loading.open({ containter: null });
          var fd = new FormData();
          fd.append("sql", sql);
          var getUrl = window.location;
          var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
          var phpfile = baseUrl + '/php/obtengo_plano.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.responseType = 'json';
          xhr.onload = function () {
              mensaje_espera.close();
              cargando_algo.close();
              let data = this.response;
              padre.lista_planos = data;
          };
          xhr.send(fd);
    },
    guardo_datos_tramo() {
      this.$buefy.toast.open("Guardando datos de tramo");
      let mensaje = '';
      if (store.state.tramo_seleccionado.zarriba < store.state.tramo_seleccionado.zabajo) { mensaje += " La cota de zampeado aguas arriba es menor que la de aguas abajo. " }
      if (store.state.tramo_seleccionado.zarriba >= store.state.tramo_seleccionado.z_tapa_aa) { mensaje += " La cota de zampeado aguas arriba es mayor o igual que la cota de tapa de la cámara. " }
      if (store.state.tramo_seleccionado.zabajo >= store.state.tramo_seleccionado.z_tapa_ab) { mensaje += " La cota de zampeado aguas abajo es mayor o igual que la cota de tapa de la cámara. " }
      if (mensaje != '') {
        mensaje = "Cuidado!!! - " + mensaje;
        this.$buefy.toast.open(mensaje);
      }
      var padre = this;
      let cambio_salto_aa = false;
      for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
        if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) 
        {
          if (store.state.tramos_en_mapa[i].options.customData.zarriba != store.state.tramo_seleccionado.zarriba)
          {            cambio_salto_aa = true;          }
        }
      }  
      
      let cambio_salto_ab = false;
      for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
        if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) 
        {
          if (store.state.tramos_en_mapa[i].options.customData.zabajo != store.state.tramo_seleccionado.zabajo)
          {             cambio_salto_ab = true;          }
        }
      }       
      var tipodetramo = "-";
      for (let i = 0; i < store.state.adm_tipos.length; i++) {
        if (store.state.adm_tipos[i]["id"] == store.state.tramo_seleccionado.tipotra) {
          tipodetramo = store.state.adm_tipos[i]["codigo"];
        }
      }
      var tipodeseccion = "-";
      for (let i = 0; i < store.state.adm_clases.length; i++) {
        if (store.state.adm_clases[i]["id"] == store.state.tramo_seleccionado.tiposec ) {
          tipodeseccion = store.state.adm_clases[i]["codigo"];
        }
      }
      var tipdim3dim4 = '';
      if (store.state.tramo_seleccionado.dim3 > 0 || store.state.tramo_seleccionado.dim4 > 0)
      {
       tipdim3dim4 = "</b><br><b>Dim3: " +  store.state.tramo_seleccionado.dim3 + "</b><br><b>Dim4: " +  store.state.tramo_seleccionado.dim4;
      }
      for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
        if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
          store.state.tramos_en_mapa[i].options.customData.tiposec = store.state.tramo_seleccionado.tiposec;
          store.state.tramos_en_mapa[i].options.customData.tipotra = store.state.tramo_seleccionado.tipotra;
          store.state.tramos_en_mapa[i].options.customData.id_psig_aa = store.state.tramo_seleccionado.id_psig_aa;
          store.state.tramos_en_mapa[i].options.customData.id_psig_ab = store.state.tramo_seleccionado.id_psig_ab;
          store.state.tramos_en_mapa[i].options.customData.dim1 = store.state.tramo_seleccionado.dim1;
          store.state.tramos_en_mapa[i].options.customData.dim2 = store.state.tramo_seleccionado.dim2;
          store.state.tramos_en_mapa[i].options.customData.dim3 = store.state.tramo_seleccionado.dim3;
          store.state.tramos_en_mapa[i].options.customData.dim4 = store.state.tramo_seleccionado.dim4;
          store.state.tramos_en_mapa[i].options.customData.pendiente = store.state.tramo_seleccionado.pendiente;
          store.state.tramos_en_mapa[i].options.customData.salto = store.state.tramo_seleccionado.salto;
          store.state.tramos_en_mapa[i].options.customData.zarriba = store.state.tramo_seleccionado.zarriba;
          store.state.tramos_en_mapa[i].options.customData.zabajo = store.state.tramo_seleccionado.zabajo;
          store.state.tramos_en_mapa[i].options.customData.z_tapa_aa = store.state.tramo_seleccionado.z_tapa_aa;
          store.state.tramos_en_mapa[i].options.customData.z_tapa_ab = store.state.tramo_seleccionado.z_tapa_ab;
          store.state.tramos_en_mapa[i].options.customData.prof_aa = store.state.tramo_seleccionado.prof_aa;
          store.state.tramos_en_mapa[i].options.customData.prof_ab = store.state.tramo_seleccionado.prof_ab;
          store.state.tramos_en_mapa[i].options.customData.material = store.state.tramo_seleccionado.material;
          store.state.tramos_en_mapa[i].options.customData.longitud = store.state.tramo_seleccionado.longitud;
          store.state.tramos_en_mapa[i].options.customData.etapa = store.state.tramo_seleccionado.etapa;
          store.state.tramos_en_mapa[i].options.customData.accion = store.state.tramo_seleccionado.accion;
          store.state.tramos_en_mapa[i].options.customData.ccz = store.state.tramo_seleccionado.ccz;
          store.state.tramos_en_mapa[i].options.customData.cuenca = store.state.tramo_seleccionado.cuenca;
          store.state.tramos_en_mapa[i].options.customData.historial = store.state.tramo_seleccionado.historial;
          store.state.tramos_en_mapa[i].options.customData.documentos = store.state.tramo_seleccionado.documentos;
          store.state.tramos_en_mapa[i].options.customData.videos = store.state.tramo_seleccionado.videos;
          store.state.tramos_en_mapa[i].options.customData.hidraulica = store.state.tramo_seleccionado.hidraulica;
          store.state.tramos_en_mapa[i].options.customData.economica = store.state.tramo_seleccionado.economica;
          store.state.tramos_en_mapa[i].options.customData.calle = store.state.tramo_seleccionado.calle;
          store.state.tramos_en_mapa[i].options.customData.via = store.state.tramo_seleccionado.via;
          store.state.tramos_en_mapa[i].options.customData.proyecto = store.state.tramo_seleccionado.proyecto;
          store.state.tramos_en_mapa[i].options.customData.contrato = store.state.tramo_seleccionado.contrato;
          store.state.tramos_en_mapa[i].options.customData.comentarios = store.state.tramo_seleccionado.comentarios;
          store.state.tramos_en_mapa[i].options.customData.plano = store.state.tramo_seleccionado.plano;
          store.state.tramos_en_mapa[i].options.customData.provisorio = store.state.tramo_seleccionado.provisorio;
          store.state.tramos_en_mapa[i].options.customData.dato1 = store.state.tramo_seleccionado.dato1;
          store.state.tramos_en_mapa[i].options.customData.dato2 = store.state.tramo_seleccionado.dato2;
          store.state.tramos_en_mapa[i].options.customData.dato3 = store.state.tramo_seleccionado.dato3;
          store.state.tramos_en_mapa[i].options.customData.dato4 = store.state.tramo_seleccionado.dato4;
          store.state.tramos_en_mapa[i].options.customData.habilitado = store.state.tramo_seleccionado.habilitado;
          store.state.tramos_en_mapa[i].options.customData.publicado = store.state.tramo_seleccionado.publicado;
          store.state.tramos_en_mapa[i].options.customData.fueraservicio = store.state.tramo_seleccionado.fueraservicio;
          let nuevopopup = "<div style='background:white;padding:6px 11px 11px 6px'><b>Id:" + store.state.tramo_seleccionado.id_tramo  + "</b><br><b>Sec: " +  tipodeseccion + "</b><br><b>Ancho: " + store.state.tramo_seleccionado.dim1 + "</b><br><b>Alto: " + store.state.tramo_seleccionado.dim2 + "</b><br><b>ZAa: " + store.state.tramo_seleccionado.zarriba.substring(0,5) + "</b><br><b>ZAb: " + store.state.tramo_seleccionado.zabajo.substring(0,5)  + "</b><br><b>Long: " + store.state.tramo_seleccionado.longitud.substring(0,5) +  "</b><br><b>Pend: " + store.state.tramo_seleccionado.pendiente.substring(0,5)  + tipdim3dim4 +  "</b></div>" 
          store.state.tramos_en_mapa[i].setTooltipContent(nuevopopup);
          if (store.state.tramo_seleccionado.etapa == 'A Construir')
          {
            var dasharrayvalue = '10,10';
            var dashoffsetvalue = '0';
            var opacityvalue = 0.9;
          }
          else
          {
            var dasharrayvalue = null;
            var dashoffsetvalue = null;
            var opacityvalue = 1;
          }
          store.state.tramos_en_mapa[i].setStyle({dashArray: dasharrayvalue, dashOffset:dashoffsetvalue, opacity: opacityvalue});
        }
      }

      let salto_psingular_aa = 0;
      let sql_ps_1 = '';
      if (cambio_salto_aa == true)
      {
        salto_psingular_aa = app.calculo_salto_en_psingular(store.state.tramo_seleccionado.id_psig_aa);
        sql_ps_1 = "UPDATE cat_psingulares SET salto = " + salto_psingular_aa + " WHERE elem_red = " + store.state.tramo_seleccionado.id_psig_aa;
        for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
          if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.tramo_seleccionado.id_psig_aa)
           {
            store.state.psingulares_en_mapa[i].options.customData.salto = salto_psingular_aa;
           }
          }
      }

      let salto_psingular_ab = 0;
      let sql_ps_2 = '';
      if (cambio_salto_ab == true)
      {
        salto_psingular_ab = app.calculo_salto_en_psingular(store.state.tramo_seleccionado.id_psig_ab);
        sql_ps_2 = "UPDATE cat_psingulares SET salto = " + salto_psingular_ab + " WHERE elem_red = " + store.state.tramo_seleccionado.id_psig_ab;
        for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
          if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.tramo_seleccionado.id_psig_ab)
           {
            store.state.psingulares_en_mapa[i].options.customData.salto = salto_psingular_ab;
           }
          }
      }

      if (store.state.control_cambios) {
        app.chequeo_conexion();
        if (store.state.hayconexion == true) {
          let historias = JSON.parse(store.state.tramo_seleccionado.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);
          store.state.tramo_seleccionado.dato3 = store.state.datos_login.revisar;
          let sql = "UPDATE cat_tramos SET tiposec = " + store.state.tramo_seleccionado.tiposec + ", tipotra = " + store.state.tramo_seleccionado.tipotra;
          sql += ", id_psig_aa = " + store.state.tramo_seleccionado.id_psig_aa + ", id_psig_ab = " + store.state.tramo_seleccionado.id_psig_ab;
          sql += ", dim1 = " + store.state.tramo_seleccionado.dim1 + ", dim2 = " + store.state.tramo_seleccionado.dim2;
          sql += ", dim3 = " + store.state.tramo_seleccionado.dim3 + ", dim4 = " + store.state.tramo_seleccionado.dim4;
          sql += ", zarriba = " + store.state.tramo_seleccionado.zarriba + ", zabajo = " + store.state.tramo_seleccionado.zabajo;
          sql += ", z_tapa_aa = " + store.state.tramo_seleccionado.z_tapa_aa + ", z_tapa_ab = " + store.state.tramo_seleccionado.z_tapa_ab;
          sql += ", prof_aa = " + store.state.tramo_seleccionado.prof_aa + ", prof_ab = " + store.state.tramo_seleccionado.prof_ab;
          sql += ", material = '" + store.state.tramo_seleccionado.material + "', longitud = " + store.state.tramo_seleccionado.longitud;
          sql += ", salto = " + store.state.tramo_seleccionado.salto;
          sql += ", etapa = '" + store.state.tramo_seleccionado.etapa + "', accion = '" + store.state.tramo_seleccionado.accion;
          sql += "', ccz = '" + store.state.tramo_seleccionado.ccz + "', cuenca = '" + store.state.tramo_seleccionado.cuenca;
          sql += "', proyecto = '" + store.state.tramo_seleccionado.proyecto + "', contrato = '" + store.state.tramo_seleccionado.contrato;
          sql += "', historial = '" + historia + "', documentos = '" + store.state.tramo_seleccionado.documentos;
          sql += "', videos = '" + store.state.tramo_seleccionado.videos + "', hidraulica = '" + store.state.tramo_seleccionado.hidraulica;
          sql += "', economica = '" + store.state.tramo_seleccionado.economica + "', calle = '" + store.state.tramo_seleccionado.calle;
          sql += "', via = " + store.state.tramo_seleccionado.via + ", comentarios = '" + store.state.tramo_seleccionado.comentarios;
          sql += "', pendiente = " + store.state.tramo_seleccionado.pendiente;
          sql += ", plano = '" + store.state.tramo_seleccionado.plano + "', provisorio = " + store.state.tramo_seleccionado.provisorio;
          sql += ", dato1 = '" + store.state.tramo_seleccionado.dato1 + "', dato2 = '" + store.state.tramo_seleccionado.dato2;
          sql += "', dato3 = " + store.state.tramo_seleccionado.dato3 + ", dato4 = " + store.state.tramo_seleccionado.dato4;
          sql += ", habilitado = '" + store.state.tramo_seleccionado.habilitado + "', publicado = '" + store.state.tramo_seleccionado.publicado + "', fueraservicio = '" + store.state.tramo_seleccionado.fueraservicio + "'";
          sql += " WHERE elemred = " + store.state.tramo_seleccionado.id_tramo;
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("sql_ps1", sql_ps_1);
          fd.append("sql_ps2", sql_ps_2);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.tramo_seleccionado.id_tramo);
          fd.append("tipo", 'TRAMO');
          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_datos_tramo.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            store.state.tramo_seleccionado.historial = historia;
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            store.state.modal_visible = 'Modificar_Tramo';
          };
          xhr.send(fd);
        }
        else {
          this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente');
        }
      } else
      {
        this.$buefy.toast.open('No hay cambios que guardar');
      }
      store.state.control_cambios = false;
    },
    guardo_datos_psingular() {
      let mensaje = '';
      if (store.state.psingular_seleccionado.z_ab > store.state.psingular_seleccionado.z_tapa) { mensaje += " La cota de zampeado es mayor que la cota de tapa. " }
      if (mensaje != '') {
        mensaje = "Cuidado!!! - " + mensaje;
        this.$buefy.toast.open(mensaje);
      }
      var padre = this;
      if (store.state.control_cambios) {
        app.chequeo_conexion();
        if (store.state.hayconexion == true) {

          let cambio_z_tapa = false;
          let historias = JSON.parse(store.state.psingular_seleccionado.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);
          for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
            if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
              (store.state.psingulares_en_mapa[i].options.customData.z_tapa == store.state.psingular_seleccionado.z_tapa)?cambio_z_tapa = false: cambio_z_tapa = true;
              store.state.psingulares_en_mapa[i].options.customData.z_tapa = store.state.psingular_seleccionado.z_tapa;
              store.state.psingulares_en_mapa[i].options.customData.z_ab = store.state.psingular_seleccionado.z_ab;
              store.state.psingulares_en_mapa[i].options.customData.tipo = store.state.psingular_seleccionado.tipo;
              store.state.psingulares_en_mapa[i].options.customData.salto = store.state.psingular_seleccionado.salto;
              store.state.psingulares_en_mapa[i].options.customData.calle = store.state.psingular_seleccionado.calle;
              store.state.psingulares_en_mapa[i].options.customData.via = store.state.psingular_seleccionado.via;
              store.state.psingulares_en_mapa[i].options.customData.contrato = store.state.psingular_seleccionado.contrato;
              store.state.psingulares_en_mapa[i].options.customData.proyecto = store.state.psingular_seleccionado.proyecto;
              store.state.psingulares_en_mapa[i].options.customData.accion = store.state.psingular_seleccionado.accion;
              store.state.psingulares_en_mapa[i].options.customData.etapa = store.state.psingular_seleccionado.etapa;
              store.state.psingulares_en_mapa[i].options.customData.ccz = store.state.psingular_seleccionado.ccz;
              store.state.psingulares_en_mapa[i].options.customData.historial = historia;
              store.state.psingulares_en_mapa[i].options.customData.documentos = store.state.psingular_seleccionado.documentos;
              store.state.psingulares_en_mapa[i].options.customData.economica = store.state.psingular_seleccionado.economica;
              store.state.psingulares_en_mapa[i].options.customData.hidraulica = store.state.psingular_seleccionado.hidraulica;
              store.state.psingulares_en_mapa[i].options.customData.comentarios = store.state.psingular_seleccionado.comentarios;
              store.state.psingulares_en_mapa[i].options.customData.profundidad = store.state.psingular_seleccionado.profundidad;
              store.state.psingulares_en_mapa[i].options.customData.inspeccion = store.state.psingular_seleccionado.inspeccion;
              store.state.psingulares_en_mapa[i].options.customData.plano = store.state.psingular_seleccionado.plano;
              store.state.psingulares_en_mapa[i].options.customData.provisorio = store.state.psingular_seleccionado.provisorio;
              store.state.psingulares_en_mapa[i].options.customData.dato1 = store.state.psingular_seleccionado.dato1;
              store.state.psingulares_en_mapa[i].options.customData.dato2 = store.state.psingular_seleccionado.dato2;
              store.state.psingulares_en_mapa[i].options.customData.dato3 = store.state.psingular_seleccionado.dato3;
              store.state.psingulares_en_mapa[i].options.customData.dato4 = store.state.psingular_seleccionado.dato4;
              store.state.psingulares_en_mapa[i].options.customData.habilitado = store.state.psingular_seleccionado.habilitado;
              store.state.psingulares_en_mapa[i].options.customData.publicado = store.state.psingular_seleccionado.publicado;
              store.state.psingulares_en_mapa[i].options.customData.fueraservicio = store.state.psingular_seleccionado.fueraservicio;
              let objeto_psingular = store.state.psingulares_en_mapa[i];
              let nuevopopup =  "<div style='background:white;padding:6px 11px 11px 6px'><b>PSINGULAR:</b><br><b>Id:" + objeto_psingular.options.customData.id_psingular + "</b><br><b>Z Tapa: " + objeto_psingular.options.customData.z_tapa + "m</b><br><b>Z ab: " + objeto_psingular.options.customData.z_ab + "</b><br><b>Prof: " + objeto_psingular.options.customData.profundidad + "</b></div>";
              objeto_psingular.setTooltipContent(nuevopopup);
              if (store.state.psingular_seleccionado.etapa == 'A Construir')
              {
                var opacityvalue = 0.7;
                var colorfondo = 'grey';
              }
              else
              {
                var opacityvalue = 1;
                var colorfondo = 'white';
              }
              store.state.psingulares_en_mapa[i].setStyle({opacity:opacityvalue,fillColor:colorfondo});
  
            }
          }
          let sql_tapa1 = '';
          let sql_tapa2 = '';
          if (cambio_z_tapa == true)
          {
            sql_tapa1 = "UPDATE cat_tramos SET z_tapa_aa = " + store.state.psingular_seleccionado.z_tapa + " WHERE id_psig_aa = " + store.state.psingular_seleccionado.id_psingular;
            sql_tapa2 = "UPDATE cat_tramos SET z_tapa_ab = " + store.state.psingular_seleccionado.z_tapa + " WHERE id_psig_ab = " + store.state.psingular_seleccionado.id_psingular;
           }

           for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_psig_aa == store.state.psingular_seleccionado.id_psingular) {
                    store.state.tramos_en_mapa[i].options.customData.z_tapa_aa = store.state.psingular_seleccionado.z_tapa;
            }
            if (store.state.tramos_en_mapa[i].options.customData.id_psig_ab == store.state.psingular_seleccionado.id_psingular) {
              store.state.tramos_en_mapa[i].options.customData.z_tapa_ab = store.state.psingular_seleccionado.z_tapa;
            }
          }
          store.state.psingular_seleccionado.dato3 = store.state.datos_login.revisar;
          let sql = "UPDATE cat_psingulares SET tipo = " + store.state.psingular_seleccionado.tipo; 
          sql += ", z_tapa = " + store.state.psingular_seleccionado.z_tapa + ", z_ab = " + store.state.psingular_seleccionado.z_ab;
          sql += ", salto = " + store.state.psingular_seleccionado.salto + ", calle = '" + store.state.psingular_seleccionado.calle;
          sql += "', via = " + store.state.psingular_seleccionado.via + ", contrato = " + store.state.psingular_seleccionado.contrato;
          sql += ", proyecto = " + store.state.psingular_seleccionado.proyecto + ", accion = '" + store.state.psingular_seleccionado.accion;
          sql += "', etapa = '" + store.state.psingular_seleccionado.etapa + "', ccz = '" + store.state.psingular_seleccionado.ccz;
          sql += "', historial = '" + historia + "', documentos = '" + store.state.psingular_seleccionado.documentos;
          sql += "', economica = '" + store.state.psingular_seleccionado.economica + "', hidraulica = '" + store.state.psingular_seleccionado.hidraulica;
          sql += "', comentarios = '" + store.state.psingular_seleccionado.comentarios + "', profundidad = " + store.state.psingular_seleccionado.profundidad;
          sql += ", inspeccion = " + store.state.psingular_seleccionado.inspeccion;
          sql += ", plano = '" + store.state.psingular_seleccionado.plano + "', provisorio = " + store.state.psingular_seleccionado.provisorio;
          sql += ", dato1 = '" + store.state.psingular_seleccionado.dato1 + "', dato2 = '" + store.state.psingular_seleccionado.dato2;
          sql += "', dato3 = " + store.state.psingular_seleccionado.dato3 + ", dato4 = " + store.state.psingular_seleccionado.dato4;
          sql += ", habilitado = '" + store.state.psingular_seleccionado.habilitado + "', publicado = '" + store.state.psingular_seleccionado.publicado + "', fueraservicio = '" + store.state.psingular_seleccionado.fueraservicio + "'";
          sql += " WHERE elem_red = " + store.state.psingular_seleccionado.id_psingular;
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("sql_tapa1", sql_tapa1);
          fd.append("sql_tapa2", sql_tapa2);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.psingular_seleccionado.id_psingular);
          fd.append("tipo", 'PSINGULAR');
          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_datos_psingular.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            store.state.modal_visible = 'Modificar_Psingular';
          };
          xhr.send(fd);
        }
        else {
          this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente');
        }
      }
      store.state.control_cambios = false;
    },
    guardo_datos_captacion() {
      let mensaje = '';
      if (store.state.captacion_seleccionada.z_col > store.state.captacion_seleccionada.z_tapa) { mensaje += " La cota de zampeado es mayor que la cota de tapa. " }
      if (mensaje != '') {
        mensaje = "Cuidado!!! - " + mensaje;
        this.$buefy.toast.open(mensaje);
      }
      var padre = this;
      if (store.state.control_cambios) {
        app.chequeo_conexion();
        if (store.state.hayconexion == true) {
          let historias = JSON.parse(store.state.captacion_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);
          for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
            if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
              store.state.captaciones_en_mapa[i].options.customData.tipo = store.state.captacion_seleccionada.tipo;
              store.state.captaciones_en_mapa[i].options.customData.clase = store.state.captacion_seleccionada.clase;
              store.state.captaciones_en_mapa[i].options.customData.z_tapa = store.state.captacion_seleccionada.z_tapa;
              store.state.captaciones_en_mapa[i].options.customData.z_col = store.state.captacion_seleccionada.z_col;
              store.state.captaciones_en_mapa[i].options.customData.id_tramo = store.state.captacion_seleccionada.id_tramo;
              store.state.captaciones_en_mapa[i].options.customData.id_conex_capt = store.state.captacion_seleccionada.id_conex_capt;
              store.state.captaciones_en_mapa[i].options.customData.dim = store.state.captacion_seleccionada.dim;
              store.state.captaciones_en_mapa[i].options.customData.comentarios = store.state.captacion_seleccionada.comentarios;
              store.state.captaciones_en_mapa[i].options.customData.cant_bocas = store.state.captacion_seleccionada.cant_bocas;
              store.state.captaciones_en_mapa[i].options.customData.calle = store.state.captacion_seleccionada.calle;
              store.state.captaciones_en_mapa[i].options.customData.via = store.state.captacion_seleccionada.via;
              store.state.captaciones_en_mapa[i].options.customData.contrato = store.state.captacion_seleccionada.contrato;
              store.state.captaciones_en_mapa[i].options.customData.proyecto = store.state.captacion_seleccionada.proyecto;
              store.state.captaciones_en_mapa[i].options.customData.accion = store.state.captacion_seleccionada.accion;
              store.state.captaciones_en_mapa[i].options.customData.etapa = store.state.captacion_seleccionada.etapa;
              store.state.captaciones_en_mapa[i].options.customData.ccz = store.state.captacion_seleccionada.ccz;
              store.state.captaciones_en_mapa[i].options.customData.economica = store.state.captacion_seleccionada.economica;
              store.state.captaciones_en_mapa[i].options.customData.hidraulica = store.state.captacion_seleccionada.hidraulica;
              store.state.captaciones_en_mapa[i].options.customData.documentos = store.state.captacion_seleccionada.documentos;
              store.state.captaciones_en_mapa[i].options.customData.historial = historia;
              store.state.captaciones_en_mapa[i].options.customData.plano = store.state.captacion_seleccionada.plano;
              store.state.captaciones_en_mapa[i].options.customData.provisorio = store.state.captacion_seleccionada.provisorio;
              store.state.captaciones_en_mapa[i].options.customData.dato1 = store.state.captacion_seleccionada.dato1;
              store.state.captaciones_en_mapa[i].options.customData.dato2 = store.state.captacion_seleccionada.dato2;
              store.state.captaciones_en_mapa[i].options.customData.dato3 = store.state.captacion_seleccionada.dato3;
              store.state.captaciones_en_mapa[i].options.customData.dato4 = store.state.captacion_seleccionada.dato4;
              store.state.captaciones_en_mapa[i].options.customData.habilitado = store.state.captacion_seleccionada.habilitado;
              store.state.captaciones_en_mapa[i].options.customData.publicado = store.state.captacion_seleccionada.publicado;
              store.state.captaciones_en_mapa[i].options.customData.fueraservicio = store.state.captacion_seleccionada.fueraservicio;
              let objeto_captacion = store.state.captaciones_en_mapa[i];
              let nuevopopup = "<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>CAPTACION: <br>Id:" + objeto_captacion.options.customData.id_captacion + "</b><br><b>Tramo: " + objeto_captacion.options.customData.id_tramo + "</b></div>"; 
              objeto_captacion.setTooltipContent(nuevopopup);
              if (store.state.captacion_seleccionada.etapa == 'A Construir')
										{
											var opacityvalue = 0.7;
											var colorfondo = 'grey';
										}
										else
										{
											var opacityvalue = 1;
											var colorfondo = 'cyan';
										}
                    store.state.captaciones_en_mapa[i].setStyle({opacity:opacityvalue,fillColor:colorfondo});
            }
          }
          store.state.captacion_seleccionada.dato3 = store.state.datos_login.revisar;
          let sql = "UPDATE cat_captaciones SET tipo = " + store.state.captacion_seleccionada.tipo + ", clase = " + store.state.captacion_seleccionada.clase;
          sql += ", z_tapa = " + store.state.captacion_seleccionada.z_tapa + ", z_col = " + store.state.captacion_seleccionada.z_col;
          sql += ", id_tramo = " + store.state.captacion_seleccionada.id_tramo + ", id_conex_capt = " + store.state.captacion_seleccionada.id_conex_capt;
          sql += ", dim = " + store.state.captacion_seleccionada.dim + ", comentarios = '" + store.state.captacion_seleccionada.comentarios;          
          sql += "', cant_bocas = '" + store.state.captacion_seleccionada.cant_bocas + "', calle = '" + store.state.captacion_seleccionada.calle;
          sql += "', via = " + store.state.captacion_seleccionada.via + ", contrato = " + store.state.captacion_seleccionada.contrato;
          sql += ", proyecto = " + store.state.captacion_seleccionada.proyecto + ", accion = '" + store.state.captacion_seleccionada.accion;
          sql += "', etapa = '" + store.state.captacion_seleccionada.etapa + "', ccz = '" + store.state.captacion_seleccionada.ccz;
          sql += "', historial = '" + historia + "', documentos = '" + store.state.captacion_seleccionada.documentos;
          sql += "', economica = '" + store.state.captacion_seleccionada.economica + "', hidraulica = '" + store.state.captacion_seleccionada.hidraulica;
          sql += "', plano = '" + store.state.captacion_seleccionada.plano + "', provisorio = " + store.state.captacion_seleccionada.provisorio;
          sql += ", dato1 = '" + store.state.captacion_seleccionada.dato1 + "', dato2 = '" + store.state.captacion_seleccionada.dato2;
          sql += "', dato3 = " + store.state.captacion_seleccionada.dato3 + ", dato4 = " + store.state.captacion_seleccionada.dato4;
          sql += ", habilitado = '" + store.state.captacion_seleccionada.habilitado + "', publicado = '" + store.state.captacion_seleccionada.publicado + "', fueraservicio = '" + store.state.captacion_seleccionada.fueraservicio + "'";
          sql += " WHERE elem_red = " + store.state.captacion_seleccionada.id_captacion;
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.captacion_seleccionada.id_captacion);
          fd.append("tipo", 'CAPTACION');
          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_datos_captacion.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            store.state.modal_visible = 'Modificar_Captacion';
          };
          xhr.send(fd);
        }
        else {
          this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente');
        }
      }
      store.state.control_cambios = false;
    },
    guardo_datos_conex_captacion() {
      var padre = this;
      if (store.state.control_cambios) {
        app.chequeo_conexion();
        if (store.state.hayconexion == true) {
          let historias = JSON.parse(store.state.conex_capta_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);
          for (var i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
            if (store.state.conex_capta_en_mapa[i].options.customData.id == store.state.conex_capta_seleccionada.id)
             {
              store.state.conex_capta_en_mapa[i].options.customData.tipo = store.state.conex_capta_seleccionada.tipo;
              store.state.conex_capta_en_mapa[i].options.customData.id_captacion = store.state.conex_capta_seleccionada.id_captacion;
              store.state.conex_capta_en_mapa[i].options.customData.id_tramo = store.state.conex_capta_seleccionada.id_tramo;
              store.state.conex_capta_en_mapa[i].options.customData.longitud = store.state.conex_capta_seleccionada.longitud;
              store.state.conex_capta_en_mapa[i].options.customData.material = store.state.conex_capta_seleccionada.material;
              store.state.conex_capta_en_mapa[i].options.customData.seccion = store.state.conex_capta_seleccionada.seccion;
              store.state.conex_capta_en_mapa[i].options.customData.profundidad = store.state.conex_capta_seleccionada.profundidad;
              store.state.conex_capta_en_mapa[i].options.customData.comentarios = store.state.conex_capta_seleccionada.comentarios;
              store.state.conex_capta_en_mapa[i].options.customData.contrato = store.state.conex_capta_seleccionada.contrato;
              store.state.conex_capta_en_mapa[i].options.customData.proyecto = store.state.conex_capta_seleccionada.proyecto;
              store.state.conex_capta_en_mapa[i].options.customData.etapa = store.state.conex_capta_seleccionada.etapa;
              store.state.conex_capta_en_mapa[i].options.customData.historial = historia;
              store.state.conex_capta_en_mapa[i].options.customData.documentos = store.state.conex_capta_seleccionada.documentos;
              store.state.conex_capta_en_mapa[i].options.customData.economica = store.state.conex_capta_seleccionada.economica;
              store.state.conex_capta_en_mapa[i].options.customData.hidraulica = store.state.conex_capta_seleccionada.hidraulica;
              store.state.conex_capta_en_mapa[i].options.customData.plano = store.state.conex_capta_seleccionada.plano;
              store.state.conex_capta_en_mapa[i].options.customData.provisorio = store.state.conex_capta_seleccionada.provisorio;
              store.state.conex_capta_en_mapa[i].options.customData.dato1 = store.state.conex_capta_seleccionada.dato1;
              store.state.conex_capta_en_mapa[i].options.customData.dato2 = store.state.conex_capta_seleccionada.dato2;
              store.state.conex_capta_en_mapa[i].options.customData.dato3 = store.state.conex_capta_seleccionada.dato3;
              store.state.conex_capta_en_mapa[i].options.customData.dato4 = store.state.conex_capta_seleccionada.dato4;
              store.state.conex_capta_en_mapa[i].options.customData.habilitado = store.state.conex_capta_seleccionada.habilitado;
              store.state.conex_capta_en_mapa[i].options.customData.publicado = store.state.conex_capta_seleccionada.publicado;
              store.state.conex_capta_en_mapa[i].options.customData.fueraservicio = store.state.conex_capta_seleccionada.fueraservicio;
              if (store.state.conex_capta_seleccionada.etapa == 'A Construir')
              {
                var dasharrayvalue = '10,10';
                var dashoffsetvalue = '0';
              }
              else
              {
                var dasharrayvalue = null;
                var dashoffsetvalue = null;
              }
              store.state.conex_capta_en_mapa[i].setStyle({dashArray: dasharrayvalue, dashOffset:dashoffsetvalue});
             }
            }
          store.state.conex_capta_seleccionada.dato3 = store.state.datos_login.revisar;
          let sql = "UPDATE cat_conex_capt SET tipo = " + store.state.conex_capta_seleccionada.tipo + ", id_captacion = " + store.state.conex_capta_seleccionada.id_captacion;
          sql += ", id_tramo = " + store.state.conex_capta_seleccionada.id_tramo + ", longitud = " + store.state.conex_capta_seleccionada.longitud;
          sql += ", material = '" + store.state.conex_capta_seleccionada.material + "', seccion = '" + store.state.conex_capta_seleccionada.seccion;
          sql += "', profundidad = " + store.state.conex_capta_seleccionada.profundidad + ", comentarios = '" + store.state.conex_capta_seleccionada.comentarios;          
          sql += "', contrato = " + store.state.conex_capta_seleccionada.contrato;
          sql += ", proyecto = " + store.state.conex_capta_seleccionada.proyecto + ", accion = '" + store.state.conex_capta_seleccionada.accion;
          sql += "', etapa = '" + store.state.conex_capta_seleccionada.etapa;
          sql += "', historial = '" + historia + "', documentos = '" + store.state.conex_capta_seleccionada.documentos;
          sql += "', economica = '" + store.state.conex_capta_seleccionada.economica + "', hidraulica = '" + store.state.conex_capta_seleccionada.hidraulica;
          sql += "', plano = '" + store.state.conex_capta_seleccionada.plano + "', provisorio = " + store.state.conex_capta_seleccionada.provisorio;
          sql += ", dato1 = '" + store.state.conex_capta_seleccionada.dato1 + "', dato2 = '" + store.state.conex_capta_seleccionada.dato2;
          sql += "', dato3 = " + store.state.conex_capta_seleccionada.dato3 + ", dato4 = " + store.state.conex_capta_seleccionada.dato4;
          sql += ", habilitado = '" + store.state.conex_capta_seleccionada.habilitado + "', publicado = '" + store.state.conex_capta_seleccionada.publicado + "', fueraservicio = '" + store.state.conex_capta_seleccionada.fueraservicio + "'";
          sql += " WHERE id = " + store.state.conex_capta_seleccionada.id_conex_capt;
          var fd = new FormData();
          fd.append("sql", sql);
          fd.append("historia", JSON.stringify(historia_array));
          fd.append("id", store.state.conex_capta_seleccionada.id_conex_capt);
          fd.append("tipo", 'CONEX_CAPTA');
          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_datos_conex_captacion.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            padre.$buefy.toast.open('Se actualizaron los datos correctamente');
            store.state.modal_visible = 'Modificar_Conex_Captacion';
          };
          xhr.send(fd);
        }
        else {
          this.$buefy.toast.open('No es posible actualizar los datos por falta de conexión. Intente nuevamente');
        }
      }
      store.state.control_cambios = false;
    },
    validar_elemento(e) {
      var padre = this;
        app.chequeo_conexion();
        if (store.state.hayconexion == true) {
          var historia_array = { "descripcion": "SE VALIDA ELEMENTO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
          var sql = '';
          var id_elemento = 0;
          if (e == 1)
          {
            let historias = JSON.parse(store.state.tramo_seleccionado.historial);
            historias.push(historia_array);
            var historia = JSON.stringify(historias);
            id_elemento = store.state.tramo_seleccionado.id_tramo;
            sql = "UPDATE cat_tramos SET dato3 = 0 , historial = '" + historia + "' WHERE elemred = " + store.state.tramo_seleccionado.id_tramo; 
          }
          if (e == 2)
          {
            let historias = JSON.parse(store.state.psingular_seleccionado.historial);
            historias.push(historia_array);
            var historia = JSON.stringify(historias);
            id_elemento =  store.state.psingular_seleccionado.id_psingular;
            sql = "UPDATE cat_psingulares SET dato3 = 0 , historial = '" + historia + "' WHERE elem_red = " + store.state.psingular_seleccionado.id_psingular;
          }
          if (e == 3)
          {
            let historias = JSON.parse(store.state.captacion_seleccionada.historial);
            historias.push(historia_array);
            var historia = JSON.stringify(historias);
            id_elemento = store.state.captacion_seleccionada.id_captacion;
            sql = "UPDATE cat_captaciones SET dato3 = 0 , historial = '" + historia + "' WHERE elem_red = " + store.state.captacion_seleccionada.id_captacion;
          }
          if (e == 4)
          {
            let historias = JSON.parse(store.state.conex_capta_seleccionada.historial);
            historias.push(historia_array);
            var historia = JSON.stringify(historias);
            id_elemento = store.state.conex_capta_seleccionada.id;
            sql = "UPDATE cat_conex_capt SET dato3 = 0 , historial = '" + historia + "' WHERE id = " + store.state.conex_capta_seleccionada.id;
          }
          if (sql != '')
          {
            var fd = new FormData();
            fd.append("sql", sql);
            fd.append("id", id_elemento);
            fd.append("tipo", e);
            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/validar_elemento.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
              var data = JSON.parse(this.response);
              if (data.tipo == 1)
              {
                let historia_array = { "descripcion": "SE VALIDA ELEMENTO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                let historias = JSON.parse(store.state.tramo_seleccionado.historial);
                historias.push(historia_array);
                var historia = JSON.stringify(historias);
                for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                  if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo)
                  {
                    store.state.tramos_en_mapa[i].options.customData.dato3 = 0;
                    store.state.tramo_seleccionado.dato3 = 0;   
                    store.state.tramos_en_mapa[i].options.customData.historial = historia;
                    store.state.tramo_seleccionado.historial = historia; 
                  }
                  }
              }
              if (data.tipo == 2)
              {
                let historia_array = { "descripcion": "SE VALIDA ELEMENTO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                let historias = JSON.parse(store.state.psingular_seleccionado.historial);
                historias.push(historia_array);
                var historia = JSON.stringify(historias);
                for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                  if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular)
                  {
                    store.state.psingulares_en_mapa[i].options.customData.dato3 = 0;
                    store.state.psingular_seleccionado.dato3 = 0;   
                    store.state.psingulares_en_mapa[i].options.customData.historial = historia;
                    store.state.psingular_seleccionado.historial = historia;
                  }
                }
              }
              if (data.tipo == 3)
              {
                let historia_array = { "descripcion": "SE VALIDA ELEMENTO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                let historias = JSON.parse(store.state.captacion_seleccionada.historial);
                historias.push(historia_array);
                var historia = JSON.stringify(historias);
              for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                      if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion)
                      {
                        store.state.captaciones_en_mapa[i].options.customData.dato3 = 0;
                        store.state.captacion_seleccionada.dato3 = 0;   
                        store.state.captaciones_en_mapa[i].options.customData.historial = historia;
                        store.state.captacion_seleccionada.historial = historia;          
                      }
                      }   
              }
              if (data.tipo == 4)
              {
                let historia_array = { "descripcion": "SE VALIDA ELEMENTO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
                let historias = JSON.parse(store.state.conex_capta_seleccionada.historial);
                historias.push(historia_array);
                var historia = JSON.stringify(historias);
              for (var i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
                      if (store.state.conex_capta_en_mapa[i].options.customData.id == store.state.conex_capta_seleccionada.id)
                      {
                       store.state.conex_capta_en_mapa[i].options.customData.dato3 = 0;
                        store.state.conex_capta_seleccionada.dato3 = 0;  
                        store.state.conex_capta_en_mapa[i].options.customData.historial = historia;
                        store.state.conex_capta_seleccionada.historial = historia;              
                      }                      
                 }   
              }
              padre.$buefy.toast.open('Se valido elemento');
            };
            xhr.send(fd);
          }
          else 
          {
            this.$buefy.toast.open('No es posible validar elemento por falta de conexión. Intente nuevamente');
          }
        }
    },
    guardo_fotografia(e) {//_______________________________________________________________________________________________
      var padre = this;
      var tipo_elemento = store.state.tipo_elemento_seleccionado;
      var seguir = false;
      var elemento_seleccionado = [];
      var id_seleccionado = 0;
      var nombre_tabla = '';
      switch (tipo_elemento) {
        case 'TRAMO':
          elemento_seleccionado = store.state.tramo_seleccionado;
          id_seleccionado = elemento_seleccionado.id_tramo;
          nombre_id = "elemred";
          nombre_tabla = "cat_tramos";
          seguir = true;
          break;
        case 'PSINGULAR':
          elemento_seleccionado = store.state.psingular_seleccionado;
          id_seleccionado = elemento_seleccionado.id_psingular;
          nombre_id = "elem_red";
          nombre_tabla = "cat_psingulares";
          seguir = true;
          break;
        case 'CAPTACION':
          elemento_seleccionado = store.state.captacion_seleccionada;
          id_seleccionado = elemento_seleccionado.id_captacion;
          nombre_id = "elem_red";
          nombre_tabla = "cat_captaciones";
          seguir = true;
          break;  
      }
      if (seguir) {
        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 = tipo_elemento + "-" + 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) {
          elemento_seleccionado.foto_blob = blob;
          let array_fotos = [];
          (elemento_seleccionado.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(elemento_seleccionado.fotos);
          let nombre_foto = "/COLECTORES/archivos/fotos/" + nom_archivo_foto;
          array_fotos.push(nombre_foto);
          let historias = JSON.parse(elemento_seleccionado.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);
          elemento_seleccionado.historial = historia;
          let sql = "UPDATE " + nombre_tabla + " SET historial = '" + historia + "', fotos = '" + JSON.stringify(array_fotos) + "' WHERE " + nombre_id + "= " + id_seleccionado;

          switch (tipo_elemento) {
            case 'TRAMO':
              for (j = 0; j < store.state.tramos_en_mapa.length; j++) {
                if (store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                  store.state.tramos_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos);
                  store.state.tramos_en_mapa[j].options.customData.historial = historia;
                }
              }
              break;
            case 'PSINGULAR':
              for (j = 0; j < store.state.psingulares_en_mapa.length; j++) {
                if (store.state.psingulares_en_mapa[j].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
                  store.state.psingulares_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos);
                  store.state.psingulares_en_mapa[j].options.customData.historial = historia;
                }
              }
              break;
            case 'CAPTACION':
              for (j = 0; j < store.state.captaciones_en_mapa.length; j++) {
                if (store.state.captaciones_en_mapa[j].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
                  store.state.captaciones_en_mapa[j].options.customData.fotos = JSON.stringify(array_fotos);
                  store.state.captaciones_en_mapa[j].options.customData.historial = historia;
                }
              }
              break;              
          }


          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("tipo", tipo_elemento);
            fd.append("usuario", store.state.datos_login.usuario);
            fd.append("id",id_seleccionado);
            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 fotos_en_servidor = obtengo_fotos(array_fotos);
              fotos_en_servidor.then(function (valor) {
                switch (store.state.tipo_elemento_seleccionado) {
                  case 'TRAMO':
                    store.state.tramo_seleccionado.fotos_con_fecha = [];
                    for (i = 0; i < valor.length; i++) {
                      store.state.tramo_seleccionado.fotos_con_fecha.push(valor[i]);
                    }
                    store.state.tramo_seleccionado.fotos = JSON.stringify(array_fotos);
                    break;
                  case 'PSINGULAR':
                    store.state.psingular_seleccionado.fotos_con_fecha = [];
                    for (i = 0; i < valor.length; i++) {
                      store.state.psingular_seleccionado.fotos_con_fecha.push(valor[i]);
                    }
                    store.state.psingular_seleccionado.fotos = JSON.stringify(array_fotos);
                    break;
                  case 'CAPTACION':
                    store.state.captacion_seleccionada.fotos_con_fecha = [];
                    for (i = 0; i < valor.length; i++) {
                      store.state.captacion_seleccionada.fotos_con_fecha.push(valor[i]);
                    }
                    store.state.captacion_seleccionada.fotos = JSON.stringify(array_fotos);
                    break;
                    
                }
              });
            };
            xhr.send(fd);
          }
        });
      }
    },
    guardo_fotografia_intervencion_captacion(e) {//_______________________________________________________________________________________________
      var padre = this;
        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 = "INT_Capta" + "-" + 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.int_captacion_seleccionada.foto_blob = blob;
          var array_fotos = [];
          (store.state.int_captacion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.int_captacion_seleccionada.fotos);
          let nombre_foto = "/COLECTORES/archivos/fotos/intervenciones/" + nom_archivo_foto;
          array_fotos.push(nombre_foto);
          store.state.int_captacion_seleccionada.fotos = JSON.stringify(array_fotos);
          app.chequeo_conexion();
          if (store.state.hayconexion == true) { // si hay conexion........................................................................
            var fd = new FormData();
            fd.append("id", store.state.int_captacion_seleccionada.id_captacion);
            fd.append("tipo", 'CAPTACION');
            fd.append("foto", nombre_foto);
            fd.append("archivofoto", blob);
            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/subo_foto_intervencion.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
              var data = this.response;
              var fotos_en_servidor = obtengo_fotos(array_fotos);
              fotos_en_servidor.then(function (valor) {
                    store.state.int_captacion_seleccionada.fotos_con_fecha = [];
                    for (i = 0; i < valor.length; i++) {
                      store.state.int_captacion_seleccionada.fotos_con_fecha.push(valor[i]);
                    }
                    store.state.int_captacion_seleccionada.fotos = JSON.stringify(array_fotos);
                  });
                }
            xhr.send(fd);
          }
        });
    },
    eliminar_fotografia(e){
      var padre = this;
      padre.$buefy.dialog.confirm({
          message: 'Eliminar imagen asociada?',
          onConfirm: () => {
                              let array_fotos = [];
                              let seguir = 1;
                              let sql = '';
                              let php_historia = '';
                              let php_id = '';
                              if (store.state.tipo_elemento_seleccionado == 'TRAMO')
                              {
                                  (store.state.tramo_seleccionado.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.tramo_seleccionado.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.tramo_seleccionado.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.tramo_seleccionado.historial = historia;
                                  sql = "UPDATE cat_tramos SET historial = '" + historia + "', fotos = '" + string_fotos + "' WHERE elemred = " + store.state.tramo_seleccionado.id_tramo;
                                  php_historia = JSON.stringify(historia_array);
                                  php_id = store.state.tramo_seleccionado.id_tramo;
                              }  else if (store.state.tipo_elemento_seleccionado == 'PSINGULAR')
                              {
                                (store.state.psingular_seleccionado.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.psingular_seleccionado.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.psingular_seleccionado.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.psingular_seleccionado.historial = historia;
                                sql = "UPDATE cat_psingulares SET historial = '" + historia + "', fotos = '" + string_fotos + "' WHERE elem_red = " + store.state.psingular_seleccionado.id_psingular;
                                php_historia = JSON.stringify(historia_array);
                                php_id = store.state.psingular_seleccionado.id_psingular;
                            }  else if (store.state.tipo_elemento_seleccionado == 'CAPTACION')
                            {
                              (store.state.captacion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.captacion_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.captacion_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.captacion_seleccionada.historial = historia;
                              sql = "UPDATE cat_captaciones SET historial = '" + historia + "', fotos = '" + string_fotos + "' WHERE elem_red = " + store.state.captacion_seleccionada.id_captacion;
                              php_historia = JSON.stringify(historia_array);
                              php_id = store.state.captacion_seleccionada.id_captacion;
                           }  
                           else
                           {
                            seguir = 0;
                           }
                              app.chequeo_conexion();
                              if (store.state.hayconexion == true && seguir == 1) { // si hay conexion........................................................................
                                var fd = new FormData();
                                fd.append("sql",sql);
                                fd.append("id",php_id);
                                fd.append("usuario", store.state.datos_login.usuario);
                                fd.append("historia", php_historia);
                                fd.append("tipo",store.state.tipo_elemento_seleccionado)
                                    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')
                                          {
                                            if (store.state.tipo_elemento_seleccionado == 'TRAMO')
                                            {
                                                for(j=0;j<store.state.tramos_en_mapa.length;j++)
                                                {
                                                  if(store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo)
                                                  {
                                                    store.state.tramos_en_mapa[j].options.customData.fotos = string_fotos;
                                                    store.state.tramo_seleccionado.fotos = string_fotos;
                                                    store.state.tramos_en_mapa[j].options.customData.historial = historia;
                                                    store.state.tramo_seleccionado.historial = historia;
                                                    store.state.tramo_seleccionado.fotos_con_fecha = store.state.tramo_seleccionado.fotos_con_fecha.filter(foto => foto.foto != e);
                                                  }
                                                }
                                            }   
                                            else if (store.state.tipo_elemento_seleccionado == 'PSINGULAR')
                                            {
                                                for(j=0;j<store.state.psingulares_en_mapa.length;j++)
                                                {
                                                      if(store.state.psingulares_en_mapa[j].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular)
                                                      {
                                                        store.state.psingulares_en_mapa[j].options.customData.fotos = string_fotos;
                                                        store.state.psingular_seleccionado.fotos = string_fotos;
                                                        store.state.psingulares_en_mapa[j].options.customData.historial = historia;
                                                        store.state.psingular_seleccionado.historial = historia;
                                                        store.state.psingular_seleccionado.fotos_con_fecha = store.state.psingular_seleccionado.fotos_con_fecha.filter(foto => foto.foto != e);
                                                      }
                                                }
                                            }  else if (store.state.tipo_elemento_seleccionado == 'CAPTACION')
                                            {
                                                for(j=0;j<store.state.captaciones_en_mapa.length;j++)
                                                  {
                                                        if(store.state.captaciones_en_mapa[j].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion)
                                                        {
                                                          store.state.captaciones_en_mapa[j].options.customData.fotos = string_fotos;
                                                          store.state.captacion_seleccionada.fotos = string_fotos;
                                                          store.state.captaciones_en_mapa[j].options.customData.historial = historia;
                                                          store.state.captacion_seleccionada.historial = historia;
                                                          store.state.captacion_seleccionada.fotos_con_fecha = store.state.captacion_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'});
                                  } 
                            } 
        }) 
    },
    eliminar_fotografia_intervencion_captacion(e){
      this.$buefy.dialog.confirm({
          message: 'Eliminar imagen?',
          onConfirm: () => {
                              let array_fotos = [];                          
                              (store.state.int_captacion_seleccionada.fotos == '') ? array_fotos = [] : array_fotos = JSON.parse(store.state.int_captacion_seleccionada.fotos);
                              array_fotos =  array_fotos.filter(foto => foto != e);
                              array_fotos.length == 0 ? string_fotos = '' : string_fotos = JSON.stringify(array_fotos); 
                              store.state.int_captacion_seleccionada.fotos = string_fotos;
                              store.state.int_captacion_seleccionada.fotos_con_fecha = store.state.int_captacion_seleccionada.fotos_con_fecha.filter(foto => foto.foto != e);
                            } 
        }) 
    },
    eliminar_audio_intervencion_captacion(e){
      this.$buefy.dialog.confirm({
          message: 'Eliminar audio?',
          onConfirm: () => {
                              let array_audios = [];                          
                              (store.state.int_captacion_seleccionada.audios == '') ? array_audios = [] : array_audios = JSON.parse(store.state.int_captacion_seleccionada.audios);
                              array_audios =  array_audios.filter(audio => audio != e);
                              array_audios.length == 0 ? string_audios = '' : string_audios = JSON.stringify(array_audios); 
                              store.state.int_captacion_seleccionada.audios = string_audios;
                              store.state.int_captacion_seleccionada.audios_con_fecha = store.state.int_captacion_seleccionada.audios_con_fecha.filter(audio => audio.audio != e);
                            } 
        }) 
    },
    toggleZoom() {
      this.isZoomed = !this.isZoomed;
      if (this.isZoomed && this.$refs.zoomedImage !== undefined) {
        this.zoomOrigin = `${this.$refs.zoomedImage.offsetWidth / 2}px ${
          this.$refs.zoomedImage.offsetHeight / 2
        }px`;
      } else {
        this.zoomOrigin = "0 0"; // Reset the zoom origin to top left corner
      }
    },
    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_colectores: function (bandera, modo, lati, longi) {
      if (typeof legend !== 'undefined') {
        if (legend instanceof L.Control) { map.removeControl(legend) };
      }
      if((lati == 0) || (longi == 0))
      {
        lati = store.state.centro_mapa.latitud;
        longi = store.state.centro_mapa.longitud;
      }  
      var valor = 0;
      var sigue = true;
      var lat = 0;
      var lon = 0;
      var tipo = 'zona';
      if (modo == 'normal') {
        tipo = this.tipo_filtro;
        var psingular = this.filtro1_psingular;
        var captacion = this.filtro1_captacion;
        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;
        switch (tipo) {
          case 'zona':
            app.obtengo_ubicacion();
            lat = store.state.centro_mapa.latitud;
            lon = store.state.centro_mapa.longitud;
            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 > 900000) {
              this.$buefy.toast.open('El valor de servicio ingresado no es correcto');
              sigue = false;
            }
            else
              valor = servicio;
            break;
            case 'psingular':
              if (isNaN(psingular)) {
                this.$buefy.toast.open('El valor de id de punto singular ingresado no es correcto');
                sigue = false;
              }
              else if (psingular < 100000 || psingular > 200000) {
                this.$buefy.toast.open('El valor de id de punto singular ingresado no es correcto');
                sigue = false;
              }
              else
                valor = psingular;
              break;
              case 'captacion':
                if (isNaN(captacion)) {
                  this.$buefy.toast.open('El valor de id de captacion ingresado no es correcto');
                  sigue = false;
                }
                else if (captacion < 200000 || captacion > 300000) {
                  this.$buefy.toast.open('El valor de id de captacion ingresado no es correcto');
                  sigue = false;
                }
                else
                  valor = captacion;
                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;
          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 });
          var fd = new FormData();
          fd.append("factor", store.state.factor);
          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/colectores_zona.php';
          var xhr = new XMLHttpRequest();
          xhr.open('POST', phpfile, true);
          xhr.onload = function () {
            var data = JSON.parse(this.response);
            var lati = data[6][0];
            var long = data[6][1];
            var encontro = data[8];
            if (encontro == false)
            {
              este.$buefy.toast.open('No se encuentra resultado válido para el filtro solicitado. Modifique los datos e intente nuevamente');
              cargando_algo.close();
            }
            else
            {
                  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);
                    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');
        }
      }

    },
    abro_modal_distribuida_tipo_elemento: function () {
      if (store.state.modo_consulta_distribuida == 0)
      {
      store.state.modal_visible = 'Modal_Distribuida_Tipo_Elemento';
      app.limpio_mapa();
      }
      else
      {
      store.state.modal_visible = 'Principal_Cargar_Colectores_Distribuidos';
      }
    },
    cargar_colectores2: function () {
      if (typeof legend !== 'undefined') {
        if (legend instanceof L.Control) { map.removeControl(legend) };
      }
      store.state.modal_visible = '';
      store.state.modo_consulta_distribuida = 1;
      app.chequeo_conexion();
      if (store.state.hayconexion == true)
      {
              if (this.tipo_filtro_distribuido == 'Colectores')
              {      
                        if (store.state.datos_consulta_distribuida_colectores.dim1 == false 
                          && store.state.datos_consulta_distribuida_colectores.dim2 == false 
                          && store.state.datos_consulta_distribuida_colectores.accion == false
                          && store.state.datos_consulta_distribuida_colectores.etapa == false
                          && store.state.datos_consulta_distribuida_colectores.tipo_seccion == false
                          && store.state.datos_consulta_distribuida_colectores.tipo_tramo == false
                          && store.state.datos_consulta_distribuida_colectores.material == false
                          && store.state.datos_consulta_distribuida_colectores.ccz == false
                          && store.state.datos_consulta_distribuida_colectores.avalidar == false
                          && store.state.datos_consulta_distribuida_colectores.habilitado == false
                          && store.state.datos_consulta_distribuida_colectores.publicado == false
                          && store.state.datos_consulta_distribuida_colectores.fueraservicio == 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("tipo", 'Colectores');
                          let consulta = JSON.stringify(store.state.datos_consulta_distribuida_colectores);
                          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/colectores_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_colectores = {dim1:false,dim1_valor:'0.20',dim2:false,dim2_valor:'0.20',avalidar:false,habilitado:false,publicado:false,fueraservicio:false,etapa:false,etapa_valor:'En construccion',accion:false,accion_valor:'Sin asignar',tipo_seccion:false,tipo_seccion_valor:'ART',tipo_tramo:false,tipo_tramo_valor:'PL',material:false,material_valor:'PVC',ccz:false,ccz_valor:'CCZ01',calle:false,calle_valor:'AV 18 DE JULIO',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, 'Colectores');
                              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 > 9990) {
                              este.$buefy.toast.open({ duration: 5000, message: 'Hay un gran número de conexiones como resultado de la consulta. Se despliegan los primeros 10.000 casos' });
                            }
                          };
                          xhr.send(fd);
                        }   
              }  
              if (this.tipo_filtro_distribuido == 'PSingulares')
              {
                if (store.state.datos_consulta_distribuida_psingulares.ccz == false 
                  && store.state.datos_consulta_distribuida_psingulares.calle == false 
                  && store.state.datos_consulta_distribuida_psingulares.etapa == false 
                  && store.state.datos_consulta_distribuida_psingulares.accion == false 
                  && store.state.datos_consulta_distribuida_psingulares.tipo == false 
                  && store.state.datos_consulta_distribuida_psingulares.profundidad == false 
                  && store.state.datos_consulta_distribuida_psingulares.salto == false 
                  && store.state.datos_consulta_distribuida_psingulares.avalidar == false
                  && store.state.datos_consulta_distribuida_psingulares.habilitado == false
                  && store.state.datos_consulta_distribuida_psingulares.publicado == false
                  && store.state.datos_consulta_distribuida_psingulares.fueraservicio == 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("tipo", 'PSingulares');
                  let consulta = JSON.stringify(store.state.datos_consulta_distribuida_psingulares);
                  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/colectores_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_psingulares = {profundidad:false,profundidad_valor:'2.00',salto:false,salto_valor:'0.20',avalidar:false,habilitado:false,publicado:false,fueraservicio:false,etapa:false,etapa_valor:'En construccion',accion:false,accion_valor:'Sin asignar',tipo:false,tipo_valor:'CI',ccz:false,ccz_valor:'CCZ01',calle:false,calle_valor:'AV 18 DE JULIO',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, 'PSingulares');
                      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 > 9990) {
                      este.$buefy.toast.open({ duration: 5000, message: 'Hay un gran número de conexiones como resultado de la consulta. Se despliegan los primeros 10.000 casos' });
                    }
                  };
                  xhr.send(fd);
                }  
              }
              if (this.tipo_filtro_distribuido == 'Captaciones')
              {
                if (store.state.datos_consulta_distribuida_captaciones.ccz == false 
                  && store.state.datos_consulta_distribuida_captaciones.calle == false 
                  && store.state.datos_consulta_distribuida_captaciones.etapa == false 
                  && store.state.datos_consulta_distribuida_captaciones.estado == false 
                  && store.state.datos_consulta_distribuida_captaciones.tipo == false 
                  && store.state.datos_consulta_distribuida_captaciones.dimension == false 
                  && store.state.datos_consulta_distribuida_captaciones.bocas == false 
                  && store.state.datos_consulta_distribuida_captaciones.avalidar == false
                  && store.state.datos_consulta_distribuida_captaciones.habilitado == false
                  && store.state.datos_consulta_distribuida_captaciones.publicado == false
                  && store.state.datos_consulta_distribuida_captaciones.fueraservicio == 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("tipo", 'Captaciones');
                  let consulta = JSON.stringify(store.state.datos_consulta_distribuida_captaciones);
                  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/colectores_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_captaciones = {dimension:false,dimension_valor:'2.00',bocas:false,bocas_valor:'0.20',avalidar:false,habilitado:false,publicado:false,fueraservicio:false,contrato_valor:'Sin contrato',etapa:false,etapa_valor:'En construccion',estado:false,estado_valor:'Sin determinar',accion:false,accion_valor:'Sin asignar',tipo:false,tipo_valor:'BT',ccz:false,ccz_valor:'CCZ01',calle:false,calle_valor:'AV 18 DE JULIO',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,'Captaciones');
                      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 > 9990) {
                      este.$buefy.toast.open({ duration: 5000, message: 'Hay un gran número de conexiones como resultado de la consulta. Se despliegan los primeros 10.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.tramos_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_ubicacion_tramo: function () {
      store.state.portavariables[0] = 0;
      store.state.portavariables[1] = 0;
      store.state.modal_visible = '';
      var padre = this;
      this.cambios_mapa = true;
      this.tipo_cambio_mapa = 'cambio_tramo_existente';
      store.state.modo_seleccion = '';
      for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
        if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
          objeto_tramo = store.state.tramos_en_mapa[i];
        }
      }
      if (objeto_tramo != false) {
        objeto_tramo.removeEventListener('editable:vertex:dragend');
        objeto_tramo.on('editable:vertex:dragend', function (e) {
          let id_vertice1 = e.vertex.latlngs[0].__vertex._leaflet_id;
          let id_vertice2 = e.vertex.latlngs[e.vertex.latlngs.length - 1].__vertex._leaflet_id;
          if (e.vertex.latlng.__vertex._leaflet_id == id_vertice1 || e.vertex.latlng.__vertex._leaflet_id == id_vertice2) {
            padre.$buefy.dialog.confirm({
              message: 'Ajustar ubicacion a punto singular?',
              onConfirm: () => {
                if (e.vertex.latlng.__vertex._leaflet_id == id_vertice1) {
                  var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng);
                  e.vertex.latlngs[0].lat = nuevo_punto['lat'];
                  e.vertex.latlngs[0].lng = nuevo_punto['lon'];
                  for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                      store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
                      let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
                      store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
                      store.state.tramos_en_mapa[i].options.customData.id_psig_aa = nuevo_punto['id'];
                    }
                  }
                }
                else {
                  var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[e.vertex.latlngs.length - 1].lat, e.vertex.latlngs[e.vertex.latlngs.length - 1].lng);
                  largo = e.vertex.latlngs.length - 1;
                  e.vertex.latlngs[largo].lat = nuevo_punto['lat'];
                  e.vertex.latlngs[largo].lng = nuevo_punto['lon'];
                  for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                      store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
                      let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
                      store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
                      store.state.tramos_en_mapa[i].options.customData.id_psig_ab = nuevo_punto['id'];
                    }
                  }
                }
              },
              onCancel: () => {
                if (e.vertex.latlng.__vertex._leaflet_id == id_vertice1) {
                  for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                      store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
                      let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
                      store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
                      store.state.tramos_en_mapa[i].options.customData.id_psig_aa = 0;
                    }
                  }
                }
                else {
                  for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                      store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
                      let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
                      store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
                      store.state.tramos_en_mapa[i].options.customData.id_psig_ab = 0;
                    }
                  }
                }
              }
            });
          }
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
              store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
              let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
              store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
            }
          }
        });
        objeto_tramo.removeEventListener('editable:vertex:clicked');
        objeto_tramo.on('editable:vertex:clicked', function (e) {
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
              store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
              let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
              store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
            }
          }
        });
        objeto_tramo.removeEventListener('editable:vertex:new');
        objeto_tramo.on('editable:vertex:new', function (e) {
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
              store.state.tramos_en_mapa[i].setLatLngs(e.vertex.latlngs);
              let nuelargo = dl_geometria.dl_largo_en_metros_de_geograficas(e.vertex.latlngs);
              store.state.tramos_en_mapa[i].options.customData.longitud = nuelargo;
            }
          }
        });
        objeto_tramo.enableEdit();
      }
    },
    modifico_ubicacion_psingular: function () {
      store.state.modal_visible = '';
      var padre = this;
      this.cambios_mapa = true;
      this.tipo_cambio_mapa = 'cambio_psingular_existente';
      store.state.modo_seleccion = '';
      var objeto_psingular = false;
      var tramos = [];
      store.state.tramos_movidos_por_camara = [];
      for (let i = 0; i < store.state.psingulares_en_mapa.length; i++) {
        if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
          objeto_psingular = store.state.psingulares_en_mapa[i];
        }
      }
      let id_psingular_modificado = store.state.psingular_seleccionado.id_psingular;
      if (id_psingular_modificado > 0)
      {
          for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
            if (id_psingular_modificado == store.state.tramos_en_mapa[i].options.customData.id_psig_aa || id_psingular_modificado == store.state.tramos_en_mapa[i].options.customData.id_psig_ab)
             {
              let geometria_json = JSON.parse(JSON.stringify(store.state.tramos_en_mapa[i].getLatLngs()));
              let elemento = { longitud: store.state.tramos_en_mapa[i].options.customData.longitud, id_tramo: store.state.tramos_en_mapa[i].options.customData.id_tramo, geometria: geometria_json, historial: store.state.tramos_en_mapa[i].options.customData.historial };
              store.state.tramos_movidos_por_camara.push(elemento);
            }
          }
      }
      if (objeto_psingular != false) {
        objeto_psingular.removeEventListener('editable:vertex:dragend');
        objeto_psingular.on('editable:vertex:dragend', function (e) {
          if (e.vertex.latlng == e.vertex.latlngs[0]) {
            let nueva_posicion = e.vertex.latlngs[0];
            for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
              if (store.state.tramos_en_mapa[i].options.customData.id_psig_aa == store.state.psingular_seleccionado.id_psingular || store.state.tramos_en_mapa[i].options.customData.id_psig_ab == store.state.psingular_seleccionado.id_psingular )
              {
                let s = 0;
                var coordenadas_tramo = store.state.tramos_en_mapa[i].getLatLngs();
                let id_psingular_movido = store.state.psingular_seleccionado.id_psingular;
                if (id_psingular_movido == store.state.tramos_en_mapa[i].options.customData.id_psig_aa) {
                  s = 0;
                }
                else {
                  s = coordenadas_tramo.length - 1;
                }
                coordenadas_tramo[s] = nueva_posicion;
                store.state.tramos_en_mapa[i].setLatLngs(coordenadas_tramo);
              }
            }
            for (let i = 0; i < store.state.psingulares_en_mapa.length; i++) {
              if (store.state.psingulares_en_mapa[i].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
                store.state.psingulares_en_mapa[i].setLatLng(e.vertex.latlngs[0]);
                store.state.psingulares_en_mapa[i].options.customData.lat1 = e.vertex.latlngs[0].lat;
                store.state.psingulares_en_mapa[i].options.customData.lon1 = e.vertex.latlngs[0].lng;
              }
            }
          }
        });
        objeto_psingular.enableEdit();
      }
    },
    crear_marca_ayuda: function () { 
      if (store.state.centro_marca_ayuda.x > 551500 && store.state.centro_marca_ayuda.x < 589500 && store.state.centro_marca_ayuda.y > 6132500 && store.state.centro_marca_ayuda.y < 6160500)
      {
        let coordenadas_punto = dl_coordenadas.utm2ll(store.state.centro_marca_ayuda.x,store.state.centro_marca_ayuda.y);
        var latlngs = [coordenadas_punto.lat,coordenadas_punto.lon];
				let marca = L.circle(latlngs, {opacity: 1,color: 'white',fillOpacity: 0,radius:2,customData:{	x:store.state.centro_marca_ayuda.x, y:store.state.centro_marca_ayuda.y}
										}).bindTooltip("<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>Guia coordenadas: <br>x:" + store.state.centro_marca_ayuda.x + "</b><br><b>y: " + store.state.centro_marca_ayuda.y + "</b></div>", 
										{direction: 'left', permanent: false, sticky: true, offset: [10, 0], opacity: 0.75, className: 'leaflet-tooltip-own'}).addTo(map);
                    store.state.marcas_ayuda_en_mapa.push(marca);
                 let marca1 = L.circle(latlngs, {opacity: 1,color: 'grey',fillOpacity: 0,radius:11,customData:{	x:store.state.centro_marca_ayuda.x, y:store.state.centro_marca_ayuda.y}
                  }).bindTooltip("<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>Guia coordenadas: <br>x:" + store.state.centro_marca_ayuda.x + "</b><br><b>y: " + store.state.centro_marca_ayuda.y + "</b></div>", 
                  {direction: 'left', permanent: false, sticky: true, offset: [10, 0], opacity: 0.75, className: 'leaflet-tooltip-own'}).addTo(map);
                  store.state.marcas_ayuda_en_mapa.push(marca1);
                 let  marca2 = L.circle(latlngs, {opacity: 1,color: 'grey',fillOpacity: 0,radius:13,customData:{	x:store.state.centro_marca_ayuda.x, y:store.state.centro_marca_ayuda.y}
                  }).bindTooltip("<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>Guia coordenadas: <br>x:" + store.state.centro_marca_ayuda.x + "</b><br><b>y: " + store.state.centro_marca_ayuda.y + "</b></div>", 
                  {direction: 'left', permanent: false, sticky: true, offset: [10, 0], opacity: 0.75, className: 'leaflet-tooltip-own'}).addTo(map);
                  store.state.marcas_ayuda_en_mapa.push(marca2);
                 let marca3 = L.circle(latlngs, {opacity: 1,color: 'grey',fillOpacity: 0,radius:15,customData:{	x:store.state.centro_marca_ayuda.x, y:store.state.centro_marca_ayuda.y}
                   }).bindTooltip("<div style='background:black;color:white; padding:1px 3px 1px 3px'><b>Guia coordenadas: <br>x:" + store.state.centro_marca_ayuda.x + "</b><br><b>y: " + store.state.centro_marca_ayuda.y + "</b></div>", 
                  {direction: 'left', permanent: false, sticky: true, offset: [10, 0], opacity: 0.75, className: 'leaflet-tooltip-own'}).addTo(map);
                  store.state.marcas_ayuda_en_mapa.push(marca3);
                  map.setView(latlngs, 18, false);
                  store.state.modal_visible = '';
      }
      else
      {
        this.$buefy.toast.open({ duration: 5000, message: 'Las coordenadas indicadas no coorresponden a Montevideo (UTM 21s)' });
      }

    },  
    limpiar_marcas_ayuda: function () { 
      if(typeof store.state.marcas_ayuda_en_mapa !== 'undefined'){
        for(var i=0;i<store.state.marcas_ayuda_en_mapa.length; i++)
        {
        store.state.marcas_ayuda_en_mapa[i].remove(map);
        }
      }
      store.state.marcas_ayuda_en_mapa = [];
      store.state.modal_visible = '';
    }, 
    modifico_ubicacion_captacion: function () {
      store.state.modal_visible = '';
      var padre = this;
      this.cambios_mapa = true;
      this.tipo_cambio_mapa = 'cambio_captacion_existente';
      store.state.modo_seleccion = '';
      var objeto_captacion = false;
      for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
        if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
          objeto_captacion = store.state.captaciones_en_mapa[i];
        }
      }
      if (objeto_captacion != false) {
        objeto_captacion.removeEventListener('editable:vertex:dragend');
        objeto_captacion.on('editable:vertex:dragend', function (e) {
          if (e.vertex.latlng == e.vertex.latlngs[0]) {
            let nueva_posicion = e.vertex.latlngs[0];
            for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
              if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
                store.state.captaciones_en_mapa[i].setLatLng(e.vertex.latlngs[0]);
                store.state.captaciones_en_mapa[i].options.customData.lat1 = e.vertex.latlngs[0].lat;
                store.state.captaciones_en_mapa[i].options.customData.lon1 = e.vertex.latlngs[0].lng;
              }
            }
            if (store.state.captacion_seleccionada.id_conex_capt != 0)
            { 
              for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) { 
                if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.captacion_seleccionada.id_conex_capt)
                 {  
                    let coords = store.state.conex_capta_en_mapa[i].getLatLngs();
                    let nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[coords[1].lat,coords[1].lng]];               
                    store.state.conex_capta_en_mapa[i].setLatLngs(nuevos_puntos);
                 }
              }
            }
          }
        });
        objeto_captacion.enableEdit();
      }
    },
    modifico_ubicacion_conex_captacion: function () {
      map.editTools.options.skipMiddleMarkers = true;
      store.state.id_generico = 0;
      store.state.modal_visible = '';
      var padre = this;
      this.cambios_mapa = true;
      this.tipo_cambio_mapa = 'cambio_conex_captacion_existente';
      store.state.modo_seleccion = '';
      var objeto_conex_captacion = false;
      for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
        if (store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt == store.state.conex_capta_seleccionada.id_conex_capt) {
          objeto_conex_captacion = store.state.conex_capta_en_mapa[i];
        }
      }
      if (objeto_conex_captacion != false) {
        objeto_conex_captacion.removeEventListener('editable:vertex:dragend');
        objeto_conex_captacion.on('editable:vertex:dragend', function (e) {
          if (e.vertex.latlng == e.vertex.latlngs[0]) {
              padre.$buefy.toast.open('Para mover el inicio de la conexión se debe mover la captación');
              e.vertex.latlngs[0].lat = store.state.conex_capta_seleccionada.lat1;
              e.vertex.latlngs[0].lng = store.state.conex_capta_seleccionada.lon1;
              e.vertex.latlng.lat = store.state.conex_capta_seleccionada.lat1;
              e.vertex.latlng.lng = store.state.conex_capta_seleccionada.lon1;
              let nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[e.vertex.latlngs[1].lat,e.vertex.latlngs[1].lng]];               
              this.setLatLngs(nuevos_puntos);
          }
          else
          {
              padre.$buefy.dialog.confirm({
              message: 'Ajustar ubicacion a colector?',
                            onConfirm: () => {
                                              var nuevo_punto = app.obtengo_punto_en_colector_pluvial_unitario_mixto(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
                                              let lat2 = nuevo_punto['lat'];
                                              let lon2 = nuevo_punto['lon'];
                                              store.state.id_generico = nuevo_punto['tramo'];
                                              e.vertex.latlngs[1].lat = lat2;
                                              e.vertex.latlngs[1].lng = lon2;
                                              let nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[lat2,lon2]];               
                                              this.setLatLngs(nuevos_puntos);
                                              },
                            onCancel: () => {
                              let nuevos_puntos = [[e.vertex.latlngs[0].lat,e.vertex.latlngs[0].lng],[e.vertex.latlngs[1].lat,e.vertex.latlngs[1].lng]];               
                              this.setLatLngs(nuevos_puntos);
                            }       
                          });
          }
        });
        objeto_conex_captacion.enableEdit();
      }
    },
    modifico_ubicacion_tramo_division: function () {
      var padre = this;
      this.$buefy.dialog.confirm({
        message: 'Confirma separar tramo en dos nuevos tramos?',
        onConfirm: () => {
          app.chequeo_conexion();
          if (store.state.hayconexion == true) {
            var objeto_tramo = '';
            var coordenadas = [];
            for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
              if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                objeto_tramo = store.state.tramos_en_mapa[i];
              }
            }
            objeto_tramo.setStyle({ color: store.state.color_anterior_tramos });
            store.state.modo_seleccion = 'todo';
            coordenadas = objeto_tramo.getLatLngs();
            let lat_gen = store.state.punto_en_tramo.latlng.lat;
            let lon_gen = store.state.punto_en_tramo.latlng.lng;
            let nue_coord1 = [];
            let nue_coord2 = [];
            let nue_largo = 0;
            let nue_modo = true;
            let menor_distancia = 99999;
            let tramo_de_punto = 0;
            for (let j = 0; j < coordenadas.length - 1; j++) {
              var lat1 = coordenadas[j].lat;
              var lon1 = coordenadas[j].lng;
              var lat2 = coordenadas[j + 1].lat;
              var lon2 = coordenadas[j + 1].lng;
              var pu_intermedio = L.latLng(lat_gen, lon_gen);
              var distg = L.LineUtil.pointToSegmentDistance(L.point(lat_gen, lon_gen), L.point(lat1, lon1), L.point(lat2, lon2));
              if (distg < menor_distancia) {
                menor_distancia = distg;
                tramo_de_punto = j;
              }
            }
            nue_coord1.push(coordenadas[0]);
            for (let j = 1; j <= tramo_de_punto; j++) {
              nue_coord1.push(coordenadas[j]);
            }
            nue_coord1.push(pu_intermedio);
            nue_coord2.push(pu_intermedio);
            for (let j = tramo_de_punto + 1; j < coordenadas.length - 1; j++) {
              nue_coord2.push(coordenadas[j]);
            }
            nue_coord2.push(coordenadas[coordenadas.length - 1]);
            var lat_nuevo = pu_intermedio.lat;
            var lon_nuevo = pu_intermedio.lng;
            var largo_nuevo1 = dl_geometria.dl_largo_en_metros_de_geograficas(nue_coord1);
            var largo_nuevo2 = dl_geometria.dl_largo_en_metros_de_geograficas(nue_coord2);
            let zres = 0;
            let fac1 = largo_nuevo1 / (largo_nuevo1 + largo_nuevo2);
            let fac2 = store.state.tramos_en_mapa[i].options.customData.zarriba - store.state.tramos_en_mapa[i].options.customData.zabajo;
            zres = Number(store.state.tramos_en_mapa[i].options.customData.zabajo) + Number(fac2 * fac1);
            zres = String(zres);
            let historias = JSON.parse(store.state.tramo_seleccionado.historial);
            let historia_array = { "descripcion": "SE DIVIDE TRAMO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            let historia = JSON.stringify(historias);
            let sql = "UPDATE cat_tramos SET historial = '" + historia + "' , activo = 0 WHERE elemred = " + store.state.tramo_seleccionado.id_tramo;
            let nueva_geometria1 = "GEOMFROMTEXT('LINESTRING(";
            for (let i = 0; i < nue_coord1.length; i++) {
              nueva_geometria1 += nue_coord1[i].lng + " " + nue_coord1[i].lat + ",";
            }
            nueva_geometria1 = nueva_geometria1.slice(0, -1) + ")')";
            let nueva_geometria2 = "GEOMFROMTEXT('LINESTRING(";
            for (let i = 0; i < nue_coord2.length; i++) {
              nueva_geometria2 += nue_coord2[i].lng + " " + nue_coord2[i].lat + ",";
            }
            nueva_geometria2 = nueva_geometria2.slice(0, -1) + ")')";
            var fd = new FormData();
            fd.append("sql", sql);
            fd.append("historia", JSON.stringify(historia_array));
            fd.append("id_tramo_viejo", store.state.tramo_seleccionado.id_tramo);
            fd.append("tipo", "TRAMO");
            fd.append("nueva_geom1", nueva_geometria1);
            fd.append("nueva_geom2", nueva_geometria2);
            fd.append("largo1", largo_nuevo1);
            fd.append("largo2", largo_nuevo2);
            fd.append("znuevo", zres);
            fd.append("lat_media", lat_nuevo);
            fd.append("lon_media", lon_nuevo);
            fd.append("usuario", store.state.datos_login.usuario);            
            fd.append("revisar", store.state.datos_login.revisar); 
         var getUrl = window.location;
            var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
            var phpfile = baseUrl + '/php/divido_tramo.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
              padre.cargar_colectores(true, 'movimientos', 0, 0);
              padre.$buefy.toast.open('Se actualizaron los datos correctamente');
              store.state.modal_visible = '';
            };
            xhr.send(fd);
          }
        },
        onCancel: () => {

        }
      });
    },
    modifico_ubicacion_tramo_sentido: function () {
      app.chequeo_conexion();
      var objeto_tramo = '';
      var padre = this;
      if (store.state.hayconexion == true) {
        for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
          if (store.state.tramos_en_mapa[i].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
            objeto_tramo = store.state.tramos_en_mapa[i];
            var coordenadas = objeto_tramo.getLatLngs();
            var nuevas_coordenadas = coordenadas.reverse();
            store.state.tramo_seleccionado.geometria = JSON.parse(JSON.stringify(nuevas_coordenadas));
            objeto_tramo.setLatLngs(nuevas_coordenadas);
            var lat2 = coordenadas[0].lat;
            var lon2 = coordenadas[0].lng;
            var lat1 = coordenadas[coordenadas.length - 1].lat;
            var lon1 = coordenadas[coordenadas.length - 1].lng;
            j = i;
          }
        }
        let historias = JSON.parse(store.state.tramo_seleccionado.historial);
        let historia_array = { "descripcion": "SE MODIFICO SENTIDO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
        historias.push(historia_array);
        let historia = JSON.stringify(historias);
        let sql = "UPDATE cat_tramos t1, cat_tramos t2 SET t1.SHAPE = GEOMFROMTEXT('LINESTRING(";
        for (let i = 0; i < nuevas_coordenadas.length; i++) {
          sql += nuevas_coordenadas[i].lng + " " + nuevas_coordenadas[i].lat + ",";
        }
        sql = sql.slice(0, -1);
        sql += ")'), t1.historial = '" + historia + "', t1.id_psig_aa = t2.id_psig_ab, t1.id_psig_ab = t2.id_psig_aa ";
        sql += ", t1.z_tapa_aa = t2.z_tapa_ab , t1.z_tapa_ab = t2.z_tapa_aa , t1.zabajo = t2.zarriba ,  t1.zarriba = t2.zabajo ,  t1.prof_aa = t2.prof_ab , t1.prof_ab = t2.prof_aa ,";
        sql += " t1.dato3 = " + store.state.datos_login.revisar + " WHERE t1.elemred = " + store.state.tramo_seleccionado.id_tramo + " AND t2.elemred = " + store.state.tramo_seleccionado.id_tramo;
        var fd = new FormData();
        fd.append("sql", sql);
        fd.append("historia", JSON.stringify(historia_array));
        fd.append("id", store.state.tramo_seleccionado.id_tramo);
        fd.append("tipo_elemento", "TRAMO");
        fd.append("descripcion","Cambio sentido de tramo");
        fd.append("tipo","GEOMETRIA MODIFICADA");
        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 () {
            let idant = store.state.tramo_seleccionado.id_psig_aa;
            store.state.tramo_seleccionado.id_psig_aa = store.state.tramo_seleccionado.id_psig_ab;
            store.state.tramo_seleccionado.id_psig_ab = idant;
            objeto_tramo.options.customData.id_psig_aa = store.state.tramo_seleccionado.id_psig_aa;
            objeto_tramo.options.customData.id_psig_ab = store.state.tramo_seleccionado.id_psig_ab;
            objeto_tramo.options.customData.historial = historia;
            store.state.tramo_seleccionado.historial = historia;
            let ztapaant = store.state.tramo_seleccionado.z_tapa_aa;
            store.state.tramo_seleccionado.z_tapa_aa= store.state.tramo_seleccionado.z_tapa_ab;
            store.state.tramo_seleccionado.z_tapa_ab= ztapaant;
            objeto_tramo.options.customData.z_tapa_aa = store.state.tramo_seleccionado.z_tapa_aa;
            objeto_tramo.options.customData.z_tapa_ab = store.state.tramo_seleccionado.z_tapa_ab;
            let zant = store.state.tramo_seleccionado.zarriba;
            store.state.tramo_seleccionado.zarriba= store.state.tramo_seleccionado.zabajo;
            store.state.tramo_seleccionado.zabajo= zant;
            objeto_tramo.options.customData.zarriba = store.state.tramo_seleccionado.zarriba;
            objeto_tramo.options.customData.zabajo = store.state.tramo_seleccionado.zabajo;
            let profant = store.state.tramo_seleccionado.prof_aa;
            store.state.tramo_seleccionado.prof_aa= store.state.tramo_seleccionado.prof_ab;
            store.state.tramo_seleccionado.prof_ab= profant;
            objeto_tramo.options.customData.prof_aa = store.state.tramo_seleccionado.prof_aa;
            objeto_tramo.options.customData.prof_ab = store.state.tramo_seleccionado.prof_ab;
            let nuevopopup = "<div style='background:white;padding:6px 11px 11px 6px'><b>TRAMO:</b><br><b>Id:" + store.state.tramo_seleccionado.id_tramo + "</b><br><b>Long: " + store.state.tramo_seleccionado.longitud + "</b><br><b>Pend: " + store.state.tramo_seleccionado.pendiente + "</b><br><b>Dim1: " + store.state.tramo_seleccionado.dim1 + "</b><br><b>ZAa: " + store.state.tramo_seleccionado.zarriba + "</b><br><b>ZAb: " + store.state.tramo_seleccionado.zabajo + "</b></div>"
            objeto_tramo.setTooltipContent(nuevopopup);
          padre.$buefy.toast.open('Se modifico sentido de tramo correctamente');
          store.state.modal_visible = '';
        };
        xhr.send(fd);
      }
      store.state.modal_visible = '';
    },
    eliminar_tramo: function () {
      app.chequeo_conexion();
      var padre = this;
      if (store.state.hayconexion == true) {
        let historias = JSON.parse(store.state.tramo_seleccionado.historial);
        let historia_array = { "descripcion": "SE ELIMINO TRAMO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
        historias.push(historia_array);
        let nueva_historia = JSON.stringify(historias);
        let sql = "UPDATE cat_tramos SET activo = 0, historial = '" + nueva_historia + "' , dato3 = " + store.state.datos_login.revisar + " WHERE elemred = " + store.state.tramo_seleccionado.id_tramo;
        var fd = new FormData();
        fd.append("sql", sql);
        fd.append("historia", JSON.stringify(historia_array));
        fd.append("id", store.state.tramo_seleccionado.id_tramo);
        fd.append("tipo_elemento", "TRAMO");
        fd.append("descripcion","Se elimino tramo");
        fd.append("tipo","TRAMO ELIMINADO");
        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('Se elimino tramo seleccionado correctamente');
            for (let j = 0; j < store.state.tramos_en_mapa.length; j++) {
              if (store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                store.state.tramos_en_mapa[j].remove(map);
                store.state.tramos_en_mapa.splice([j], 1);
                break;
              }
            }
          store.state.tramo_seleccionado = {geometria:[],id_tramo:0,lon1:0,lat1:0,lon2:0,lat2:0,tiposec:0,tipotra:0,id_psig_aa:0,id_psig_ab:0,dim1:0,dim2:0,dim3:0,dim4:0,pendiente:0,contrato:0,proyecto:0,material:'',zarriba:0,zabajo:0,z_tapa_aa:0,z_tapa_ab:0,prof_aa:0,prof_ab:0,longitud:0,estado:'',salto:0, etapa:'',accion:'',historial:'',documentos:'',fotos:'',audios:'',videos:'',alta_fuente:'',alta_fecha:'',calle:'',via:0,hidraulica:'',economica:'',activo:1,comentarios:'',ccz:'',cuenca:'',plano:'',provisorio:0,dato1:'',dato2:'',dato3:0,dato4:2000,habilitado:'',publicado:'',fueraservicio:'',foto_blob:'', fotos_con_fecha: [], audios_con_fecha: []};
          store.state.modal_visible = '';
        };
        xhr.send(fd);
      }
      store.state.modal_visible = '';
    },
    modifico_datos_tramo: function () {
      store.state.control_cambios = false;
      store.state.modal_visible = 'Modal_modificacion_datos_tramo';
    },
    modifico_datos_psingular: function () {
      store.state.control_cambios = false;
      store.state.modal_visible = 'Modal_modificacion_datos_psingular';
    },
    modifico_datos_captacion: function () {
      store.state.control_cambios = false;
      store.state.modal_visible = 'Modal_modificacion_datos_captacion';
    },
    modifico_datos_conex_captacion: function () {
      store.state.control_cambios = false;
      store.state.modal_visible = 'Modal_modificacion_datos_conex_captacion';
    },
    eliminar_psingular: function () {
      app.chequeo_conexion();
      var objeto_tramo = '';
      var padre = this;
      if (store.state.hayconexion == true) {
        let id_psingular = store.state.psingular_seleccionado.id_psingular;
        let sql_tramos = '';
        for (let i = 0; i < store.state.tramos_en_mapa.length; i++) {
          let id_ps_aa = store.state.tramos_en_mapa[i].options.customData.id_psig_aa;
          let id_ps_ab = store.state.tramos_en_mapa[i].options.customData.id_psig_ab;
          if (id_ps_aa == id_psingular) {
            let historias = JSON.parse(store.state.tramos_en_mapa[i].options.customData.historial);
            let historia_array = { "descripcion": "SE ELIMINO PSINGULAR ASOCIADO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            let historia = JSON.stringify(historias);
            sql_tramos += "UPDATE cat_tramos SET id_psig_aa = 0, historial = '" + historia + "' WHERE elemred = " + store.state.tramos_en_mapa[i].options.customData.id_tramo;
            sql_tramos += ";";
            store.state.tramos_en_mapa[i].options.customData.id_psig_aa = 0;
          }
          else if (id_ps_ab == id_psingular) {
            let historias = JSON.parse(store.state.tramos_en_mapa[i].options.customData.historial);
            let historia_array = { "descripcion": "SE ELIMINO PSINGULAR ASOCIADO", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            let historia = JSON.stringify(historias);
            sql_tramos += "UPDATE cat_tramos SET id_psig_ab = 0, historial = '" + historia + "' WHERE elemred = " + store.state.tramos_en_mapa[i].options.customData.id_tramo;
            sql_tramos += ";";
            store.state.tramos_en_mapa[i].options.customData.id_psig_ab = 0;
          }
        }
        let historias = JSON.parse(store.state.psingular_seleccionado.historial);
        let historia_array = { "descripcion": "SE ELIMINO PSINGULAR", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
        historias.push(historia_array);
        let historia = JSON.stringify(historias);
        let sql = "UPDATE cat_psingulares SET activo = 0 , historial = '" + historia + "' , dato3 = " + store.state.datos_login.revisar + " WHERE elem_red = " + store.state.psingular_seleccionado.id_psingular;
        var fd = new FormData();
        sql = sql_tramos + sql;
        fd.append("sql", sql);
        fd.append("historia", JSON.stringify(historia_array));
        fd.append("id", store.state.psingular_seleccionado.id_psingular);
        fd.append("tipo_elemento", "PSINGULAR");
        fd.append("descripcion","Se elimino punto singular");
        fd.append("tipo","PSINGULAR ELIMINADO");
        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('Se elimino psingular seleccionado correctamente');
          for (let j = 0; j < store.state.psingulares_en_mapa.length; j++) {
            if (store.state.psingulares_en_mapa[j].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
              store.state.psingulares_en_mapa[j].remove(map);
              store.state.psingulares_en_mapa.splice([j], 1);
              break;
            }
          }
        store.state.psingular_seleccionado =   {id_psingular:0,lon1:0,lat1:0,x:0,y:0,tipo:0,tramos:'',z_tapa:0,inspeccion:0,profundidad:0,salto:0,z_ab:0,alta_fuente:'',alta_fecha:'',calle:'',via:0,contrato:0,estado:'',etapa:'',proyecto:0,accion:'',historial:'',fotos:'',audios:'',documentos:'',comentarios:'',hidraulica:'',economica:'',activo:1,ccz:'',cuenca:'',plano:'',provisorio:0,dato1:'',dato2:'',dato3:0,dato4:0,habilitado:'',publicado:'',fueraservicio:'',foto_blob:'', fotos_con_fecha: [], audios_con_fecha: []};
        store.state.modal_visible = '';
        };
        xhr.send(fd);
      }
      store.state.modal_visible = '';
    },
    eliminar_captacion: function () {
      app.chequeo_conexion();
      var padre = this;
      if (store.state.hayconexion == true) {
        let sql2 = '';
        for (let i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
          if (store.state.conex_capta_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
            let historias = JSON.parse(store.state.conex_capta_en_mapa[i].options.customData.historial);
            let historia_array = { "descripcion": "SE ELIMINO CAPTACION ASOCIADA", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
            historias.push(historia_array);
            let historia = JSON.stringify(historias);
            sql2 = "UPDATE cat_conex_capt SET activo = 0, historial = '" + historia + "' WHERE id = " + store.state.conex_capta_en_mapa[i].options.customData.id_conex_capt;
            store.state.conex_capta_seleccionada = {id_conex_capta:0,lon1:0,lat1:0,lon2:0,lat2:0,id_captacion:0,id_conex_capt:0,id_tramo:0,longitud:0,rotacion:0,tipo:'',historial:'',proyecto:0,contrato:0,profundidad:0,comentarios:'',hidraulica:'',economica:'',accion:'',etapa:'',estado:'',alta_fuente:'',alta_fecha:'',material:'',seccion:'',activo:1,plano:'',provisorio:0,dato1:'',dato2:'',dato3:0,dato4:0,habilitado:'',publicado:'',fueraservicio:''};
            store.state.conex_capta_en_mapa[i].remove(map);
            store.state.conex_capta_en_mapa.splice([i], 1);
          }
        }
        let historias = JSON.parse(store.state.captacion_seleccionada.historial);
        let historia_array = { "descripcion": "SE ELIMINO CAPTACION", "fecha": app.obtengo_fecha(new Date()), "usuario": store.state.datos_login.usuario };
        historias.push(historia_array);
        let historia = JSON.stringify(historias);
        let sql = "UPDATE cat_captaciones SET activo = 0, historial = '" + historia + "' , dato3 = " + store.state.datos_login.revisar + " WHERE elem_red = " + store.state.captacion_seleccionada.id_captacion;
        var fd = new FormData();
        fd.append("sql", sql);
        fd.append("sql2", sql2);
        fd.append("historia", JSON.stringify(historia_array));
        fd.append("id",  store.state.captacion_seleccionada.id_captacion);
        fd.append("tipo_elemento", "CAPTACION");
        fd.append("descripcion","Se elimino captacion");
        fd.append("tipo","CAPTACION ELIMINADA");
        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('Se elimino captacion seleccionado correctamente');
          for (let i = 0; i < store.state.captaciones_en_mapa.length; i++) {
            if (store.state.captaciones_en_mapa[i].options.customData.id_captacion == store.state.captacion_seleccionada.id_captacion) {
                  store.state.captaciones_en_mapa[i].remove(map);
                  store.state.captaciones_en_mapa.splice([i], 1);
            }
          }
          store.state.captacion_seleccionada = {id_captacion:0,lon1:0,lat1:0,id_tramo:0,id_conex_capt:0,tipo:0,clase:0,dim:0,cant_bocas:0,alta_fuente:'',alta_fecha:'',rotacion:0,z_col:0,z_tapa:0,calle:'',via:0,contrato:0,etapa:'',estado:'',proyecto:0,accion:'',historial:'',fotos:'',audios:'',documentos:'',comentarios:'',hidraulica:'',economica:'',activo:1,ccz:'',cuenca:'',plano:'',provisorio:0,dato1:'',dato2:'',dato3:0,dato4:0,habilitado:'',publicado:'',fueraservicio:'',foto_blob:'', fotos_con_fecha: [], audios_con_fecha: []};
          store.state.modal_visible = '';
        };
        xhr.send(fd);
      }
      store.state.modal_visible = '';
    },
    iniciar_grabacion_audio() {
      var padre = this;
      var tipo_elemento = store.state.tipo_elemento_seleccionado;
      var seguir = false;
      var elemento_seleccionado = [];
      var id_seleccionado = 0;
      var nombre_tabla = '';
      switch (tipo_elemento) {
        case 'TRAMO':
          elemento_seleccionado = store.state.tramo_seleccionado;
          id_seleccionado = elemento_seleccionado.id_tramo;
          nombre_id = "elemred";
          nombre_tabla = "cat_tramos";
          seguir = true;
          break;
        case 'PSINGULAR':
          elemento_seleccionado = store.state.psingular_seleccionado;
          id_seleccionado = elemento_seleccionado.id_psingular;
          nombre_id = "elem_red";
          nombre_tabla = "cat_psingulares";
          seguir = true;
          break;
        case 'CAPTACION':
          elemento_seleccionado = store.state.captacion_seleccionada;
          id_seleccionado = elemento_seleccionado.id_captacion;
          nombre_id = "elem_red";
          nombre_tabla = "cat_captaciones";
          seguir = true;
          break;          
      }
      if (seguir) {
        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 = tipo_elemento + "-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos + '.ogg';
              let array_audios = [];
              (elemento_seleccionado.audios == '') ? array_audios = [] : array_audios = JSON.parse(elemento_seleccionado.audios);
              let nombre_audio = "/COLECTORES/archivos/audios/" + nom_archivo_audio;
              array_audios.push(nombre_audio);
              let historias = JSON.parse(elemento_seleccionado.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);
              elemento_seleccionado.historial = historia;
              let sql = "UPDATE " + nombre_tabla + " SET historial = '" + historia + "', audios = '" + JSON.stringify(array_audios) + "' WHERE " + nombre_id + "= " + id_seleccionado;
              switch (tipo_elemento) {
                case 'TRAMO':
                  for (j = 0; j < store.state.tramos_en_mapa.length; j++) {
                    if (store.state.tramos_en_mapa[j].options.customData.id_tramo == store.state.tramo_seleccionado.id_tramo) {
                      store.state.tramos_en_mapa[j].options.customData.audios = JSON.stringify(array_audios);
                      store.state.tramos_en_mapa[j].options.customData.historial = historia;
                    }
                  }
                  break;
                case 'TRAMO':
                  for (j = 0; j < store.state.psingulares_en_mapa.length; j++) {
                    if (store.state.psingulares_en_mapa[j].options.customData.id_psingular == store.state.psingular_seleccionado.id_psingular) {
                      store.state.psingulares_en_mapa[j].options.customData.audios = JSON.stringify(array_audios);
                      store.state.psingulares_en_mapa[j].options.customData.historial = historia;
                    }
                  }
                  break;
                case 'TRAMO':
                  for (j = 0; j < store.state.captaciones_en_mapa.length; j++) {
                    if (store.state.captaciones_en_mapa[j].options.customData.id_psingular == store.state.captacion_seleccionada.id_captacion) {
                      store.state.captaciones_en_mapa[j].options.customData.audios = JSON.stringify(array_audios);
                      store.state.captaciones_en_mapa[j].options.customData.historial = historia;
                    }
                  }
                  break;
              }
              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("tipo_elemento",tipo_elemento);
                fd.append("id",id_seleccionado);
                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) {
                    switch (store.state.tipo_elemento_seleccionado) {
                      case 'TRAMO':
                        store.state.tramo_seleccionado.audios_con_fecha = [];
                        for (i = 0; i < valor.length; i++) {
                          store.state.tramo_seleccionado.audios_con_fecha.push(valor[i]);
                        }
                        store.state.tramo_seleccionado.audios = JSON.stringify(array_audios);
                        break;
                      case 'PSINGULAR':
                        store.state.psingular_seleccionado.audios_con_fecha = [];
                        for (i = 0; i < valor.length; i++) {
                          store.state.psingular_seleccionado.audios_con_fecha.push(valor[i]);
                        }
                        store.state.psingular_seleccionado.audios = JSON.stringify(array_audios);
                        break;
                      case 'CAPTACION':
                        store.state.captacion_seleccionada.audios_con_fecha = [];
                        for (i = 0; i < valor.length; i++) {
                          store.state.captacion_seleccionada.audios_con_fecha.push(valor[i]);
                        }
                        store.state.captacion_seleccionada.audios = JSON.stringify(array_audios);
                        break;                        
                    }
                  });
                };
                xhr.send(fd);
              }
            }
          };
          recorder.start();
        }).catch("no se puede grabar audio");
      }
    },
    iniciar_grabacion_audio2() {
      var padre = this;
        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 = "INT_Captacion-" + ano + mes + dia + "-" + horas + "-" + minutos + "-" + segundos + '.ogg';
              let array_audios = [];
              (store.state.int_captacion_seleccionada.audios == '') ? array_audios = [] : array_audios = JSON.parse(store.state.int_captacion_seleccionada.audios);
              let nombre_audio = "/COLECTORES/archivos/audios/intervenciones/" + nom_archivo_audio;
              array_audios.push(nombre_audio);       
              app.chequeo_conexion();
              if (store.state.hayconexion == true) {// si hay conexion........................................................................
                var fd = new FormData();
                fd.append("audio", nombre_audio);
                fd.append("archivoaudio", blob);
                fd.append("usuario",store.state.datos_login.usuario);
                fd.append("tipo",'CAPTACION');
                fd.append("id",store.state.int_captacion_seleccionada.id_captacion);
                var getUrl = window.location;
                var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
                var phpfile = baseUrl + '/php/subo_audio_intervencion.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.int_captacion_seleccionada.audios_con_fecha = [];
                        for (i = 0; i < valor.length; i++) {
                          store.state.int_captacion_seleccionada.audios_con_fecha.push(valor[i]);
                        }
                        store.state.int_captacion_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;
    },
    finalizar_grabacion_audio2() {
      this.mic_estado = false;
      recorder.stop();
      this.modal_grabar_audio2 = false;
      store.state.modal_visible = 'modal_editar_intervencion_captacion';
    },
    abro_modal_grabar_audio2() {
      store.state.modal_visible = '';
      this.modal_grabar_audio2 = true;
    },
    nuevo_tramo() {
      map.editTools.options.skipMiddleMarkers = true;
      var padre = this;
      var lat1 = -34.5566;
      var lon1 = -56.8533;
      var lat2 = -34.5555;
      var lon2 = -56.8522;
      store.state.portavariables[0] = 0;
      store.state.portavariables[1] = 0;
      if (store.state.tramos_en_mapa.length < 2) {
        this.$buefy.toast.open('Cargando red de zona....');
        this.cargar_colectores(true, 'movimientos', 0, 0);
      }
      store.state.modal_visible = '';
      this.cambios_mapa = true;
      store.state.modo_seleccion = 'nada';
      this.tipo_cambio_mapa = 'nuevo_tramo';
      map.editTools.stopDrawing();
      map.editTools.commitDrawing();
      var nuevo_tramo = map.editTools.startPolyline();
      let cant_vertices = 0;
      nuevo_tramo.on('editable:vertex:new', function (e) {
        cant_vertices++;
        if (cant_vertices == 1) {
          padre.$buefy.dialog.confirm({
            message: 'Ajustar ubicacion a punto singular?',
            onConfirm: () => {
              var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng);
              lat1 = nuevo_punto['lat'];
              lon1 = nuevo_punto['lon'];
              store.state.portavariables[0] = nuevo_punto['id'];
              e.vertex.latlngs[0].lat = lat1;
              e.vertex.latlngs[0].lng = lon1;
            },
            onCancel: () => {
              store.state.portavariables[0] = 0;
            }
          })
        }
        if (cant_vertices == 2) {
          padre.$buefy.dialog.confirm({
            message: 'Ajustar ubicacion a punto singular?',
            onConfirm: () => {
              var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
              lat2 = nuevo_punto['lat'];
              lon2 = nuevo_punto['lon'];
              store.state.portavariables[1] = nuevo_punto['id'];
              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]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.stopDrawing();
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              lat2 = e.vertex.latlngs[1].lat;
              lon2 = e.vertex.latlngs[1].lng;
            },
            onCancel: () => {
              store.state.portavariables[1] = 0;
              var nuevos_puntos = [[e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng], [e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.stopDrawing();
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              lat2 = e.vertex.latlngs[1].lat;
              lon2 = e.vertex.latlngs[1].lng;
            }
          })
        }
      });
      nuevo_tramo.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 punto singular?',
            onConfirm: () => {
              var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng);
              lat2 = nuevo_punto['lat'];
              lon2 = nuevo_punto['lon'];
              store.state.portavariables[1] = nuevo_punto['id'];
              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]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              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]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              lat2 = e.vertex.latlngs[1].lat;
              lon2 = e.vertex.latlngs[1].lng;
              store.state.portavariables[1] = 0;
            }
          })
        }
        else if (e.vertex.latlngs[0].lat != lat1 || e.vertex.latlngs[0].lng != lon1) {
          padre.$buefy.dialog.confirm({
            message: 'Ajustar ubicacion a punto singular?',
            onConfirm: () => {
              var nuevo_punto = app.obtengo_punto_en_psingular(e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng);
              lat1 = nuevo_punto['lat'];
              lon1 = nuevo_punto['lon'];
              store.state.portavariables[0] = nuevo_punto['id'];
              e.vertex.latlngs[0].lat = lat1;
              e.vertex.latlngs[0].lng = lon1;
              var nuevos_puntos = [[e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng], [e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              lat2 = e.vertex.latlngs[0].lat;
              lon2 = e.vertex.latlngs[0].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]];
              nuevo_tramo.setLatLngs(nuevos_puntos);
              map.editTools.commitDrawing();
              store.state.nuevo_tramo = nuevo_tramo;
              lat1 = e.vertex.latlngs[0].lat;
              lon1 = e.vertex.latlngs[0].lng;
              store.state.portavariables[0] = 0;
            }
          })
        }
        else {
          var nuevos_puntos = [[e.vertex.latlngs[0].lat, e.vertex.latlngs[0].lng], [e.vertex.latlngs[1].lat, e.vertex.latlngs[1].lng]];
          nuevo_tramo.setLatLngs(nuevos_puntos);
          map.editTools.commitDrawing();
          store.state.nuevo_tramo = nuevo_tramo;
          lat1 = e.vertex.latlngs[0].lat;
          lon1 = e.vertex.latlngs[0].lng;
          lat2 = e.vertex.latlngs[1].lat;
          lon2 = e.vertex.latlngs[1].lng;
        }
      });
    },
    nuevo_psingular() {
      store.state.portavariables[0] = 0;
      store.state.portavariables[1] = 0;
      var padre = this;
      if (store.state.tramos_en_mapa.length < 2) {
        this.$buefy.toast.open('Cargando red de zona....');
        this.cargar_colectores(false, 'movimientos', 0, 0);
      }
      store.state.modal_visible = '';
      this.cambios_mapa = true;
      store.state.modo_seleccion = 'nada';
      this.tipo_cambio_mapa = 'nuevo_psingular';
      map.editTools.stopDrawing();
      map.editTools.commitDrawing();
      var nuevo_psingular = map.editTools.startCircle();
      store.state.nuevo_psingular = nuevo_psingular;
    },
    nueva_captacion() {
      store.state.portavariables[0] = 0;
      store.state.portavariables[1] = 0;
      var padre = this;
      if (store.state.tramos_en_mapa.length < 2) {
        this.$buefy.toast.open('Cargando red de zona....');
        this.cargar_colectores(false, 'movimientos', 0, 0);
      }
      store.state.modal_visible = '';
      this.cambios_mapa = true;
      store.state.modo_seleccion = 'nada';
      this.tipo_cambio_mapa = 'nueva_captacion';
      map.editTools.stopDrawing();
      map.editTools.commitDrawing();
      var nueva_captacion = map.editTools.startCircle();
      store.state.nueva_captacion = nueva_captacion;
    },
    seleccione_calle1(calle1_seleccionada) {
      this.calle2 = [];
      store.state.datos_consulta_distribuida.calle_valor = calle1_seleccionada;
      store.state.datos_consulta_distribuida_colectores.calle_valor = calle1_seleccionada;
      store.state.datos_consulta_distribuida_psingulares.calle_valor = calle1_seleccionada;
      store.state.datos_consulta_distribuida_captaciones.calle_valor = calle1_seleccionada;
      let calles_cruzan = store.state.calles_cruzan;
      let lista_calles_cruzan = [];
      let id = 0;
      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)
            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)
            id++;
          }
        }
      }
    },
    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.adm_tipos
          store.state.centro.latitud = lat;
          store.state.centro.longitud = lon;
        }
      }
    },
    seleccionar_proyecto(tipo){
      let latcentro = 0;
      let loncentro = 0;
      if(tipo == 1){
        store.state.modal_anterior = "Modal_modificacion_datos_tramo";
        latcentro = store.state.tramo_seleccionado.lat1;
        loncentro = store.state.tramo_seleccionado.lon1;
      }
      else if(tipo == 2)
      {
        store.state.modal_anterior = "Modal_modificacion_datos_psingular";
        latcentro = store.state.psingular_seleccionado.lat1;
        loncentro = store.state.psingular_seleccionado.lon1;
      }
      else if(tipo == 3)
      { 
        store.state.modal_anterior = "Modal_modificacion_datos_captacion";
        latcentro = store.state.captacion_seleccionada.lat1;
        loncentro = store.state.captacion_seleccionada.lon1;
      }
      else if(tipo == 4)
      {
        store.state.modal_anterior = "Modal_modificacion_datos_conex_captacion";
        latcentro = store.state.conex_capta_seleccionada.lat1;
        loncentro = store.state.conex_capta_seleccionada.lon1;
      } 
      else
      {
         store.state.modal_anterior = "";    
      }
        var fd = new FormData();
        fd.append("lat", latcentro);
        fd.append("lon", loncentro);
        var getUrl = window.location;
        var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
        var phpfile = baseUrl + '/php/cargo_datos_proyectos.php';
        var xhr = new XMLHttpRequest();
        xhr.open('POST', phpfile, true);
        xhr.onload = function () {
         var data = JSON.parse(this.response);
         store.state.adm_proyectos = data;
         store.state.modal_visible = 'modal_seleccionar_proyecto';
       };
       xhr.send(fd);
    },
    asignar_proyecto(clave){
      store.state.control_cambios = true;
       let id_proyecto = store.state.adm_proyectos[clave].id;
      let valor =store.state.modal_anterior;
      switch (valor){
        case "Modal_modificacion_datos_tramo": 
        store.state.tramo_seleccionado.proyecto = id_proyecto;
        break;
        case "Modal_modificacion_datos_psingular": 
        store.state.psingular_seleccionado.proyecto = id_proyecto;
        break;
        case "Modal_modificacion_datos_captacion":
        store.state.captacion_seleccionada.proyecto = id_proyecto;
        break;
        case "Modal_modificacion_datos_conex_captacion": 
        latcentro = store.state.conex_capta_seleccionada.proyecto = id_proyecto;
         break;
        default: store.state.modal_anterior = ""    
      }
      this.volver_modal_anterior();
    },

    aplicar_estilos() {
      var tipo_tematico = this.tipo_estilo;
      if (typeof legend !== 'undefined') {
        if (legend instanceof L.Control) { map.removeControl(legend); }
      }
      var color = '#B2E57A';
      switch (tipo_tematico) {
        case 'Tipo':
                  for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                    let tipo = String(store.state.tramos_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].id == tipo)
                      {
                        color = store.state.adm_tipos[j].color;
                      }
                    }
                    store.state.tramos_en_mapa[i].setStyle({ color: color });
                  }
                  for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                    store.state.psingulares_en_mapa[i].options.color = '#636BE3';
                    tipo = String(store.state.psingulares_en_mapa[i].options.customData.tipo).trim();
                    color = '#FFFF00';
                    for(var j = 0; j < store.state.adm_tipos.length; j++)
                    {
                      if (store.state.adm_tipos[j].id == tipo)
                      {
                        color = store.state.adm_tipos[j].color;
                      }
                    }
                    store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                  }
                  for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                    store.state.captaciones_en_mapa[i].options.color = '#636BE3';
                    tipo = String(store.state.captaciones_en_mapa[i].options.customData.tipo).trim();
                    color = '#FFFF00';
                    for(var j = 0; j < store.state.adm_tipos.length; j++)
                    {
                      if (store.state.adm_tipos[j].id == tipo)
                      {
                        color = store.state.adm_tipos[j].color;
                      }
                    }
                    store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: 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>';
                      }
                    }
                    html_tabla += '<h4>Captaciones</h4>';
                    for(var j = 0; j < store.state.adm_tipos.length; j++)
                    {
                      if (store.state.adm_tipos[j].elemento == 'cat_captaciones')
                      {
                        html_tabla += '<span style="color: ' + store.state.adm_tipos[j].color + ';font-size:40px">&#8226;</span><span>'  + store.state.adm_tipos[j].codigo + '</span><br>';
                      }
                    }
                    html_tabla += '<h4>PSingulares</h4>';
                    for(var j = 0; j < store.state.adm_tipos.length; j++)
                    {
                      if (store.state.adm_tipos[j].elemento == 'cat_psingulares')
                      {
                        html_tabla += '<span style="color: ' + store.state.adm_tipos[j].color + ';font-size:40px">&#8226;</span><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;
          case 'Etapa':
                  color = '#B2E57A';
                  for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                    store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                    let tipo = String(store.state.tramos_en_mapa[i].options.customData.etapa).trim();
                    switch (tipo) {
                      case 'Construido sin Recepcion': color = '#145CF7'; break;
                      case 'Construido con Recepcion': color = '#ba7d64'; break;
                      case 'A Construir': color = '#FA8107'; break;
                      case 'En construccion': color = '#F72914'; break;
                      case 'Construido en Desuso': color = '#D5BFAB'; break;
                      case 'Construido Habilitado': color = '#000000'; break;
                      case 'Sin asignar': color = '#B2E57A'; break;
                      default: color = '#B2E57A'; break;
                    }
                    store.state.tramos_en_mapa[i].setStyle({ color: color });
                  }
                  for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                    store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                    tipo = String(store.state.captaciones_en_mapa[i].options.customData.etapa).trim();
                    store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                  }
                  for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                    store.state.psingulares_en_mapa[i].options.color = '#B2E57A';
                    tipo = String(store.state.psingulares_en_mapa[i].options.customData.etapa).trim();
                    store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                  }
                  for (var i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
                    store.state.conex_capta_en_mapa[i].options.color = '#B2E57A';
                    tipo = String(store.state.conex_capta_en_mapa[i].options.customData.etapa).trim();
                    store.state.conex_capta_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: #FA8107"></i><span>A Construir</span><br>';
                    html_tabla += '<i style="background: #F72914"></i><span>En Construccion</span><br>';
                    html_tabla += '<i style="background: #145CF7"></i><span>Construido sin Recepcion</span><br>';
                    html_tabla += '<i style="background: #ba7d64"></i><span>Construido con Recepcion</span><br>';
                    html_tabla += '<i style="background: #000000"></i><span>Construido Habilitado</span><br>';
                    html_tabla += '<i style="background: #D5BFAB"></i><span>Construido en Desuso</span><br>';
                    html_tabla += '<i style="background: #B2E57A"></i><span>Sin asignar</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 'Estados':
                  color = '#B2E57A';
                  for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                    store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                    var id_captacion = store.state.captaciones_en_mapa[i].options.customData.id_captacion;
                    tipo = String(store.state.captaciones_en_mapa[i].options.customData.estado).trim();
                    switch (tipo) {
                      case 'Operativa': color = '#2ECC71'; break; //verde claro
                      case 'Operativa a Limpiar': color = '#F0B27A'; break; //marron claro
                      case 'Operativa a Reparar': color = '#D2B4DE'; break; //magenta claro
                      case 'Operativa a Reparar y Limpiar': color = '#C0392B'; break; //teracota
                      case 'No Operativa': color = '#FF0033'; break;//rojo fuerte
                      case 'No Operativa por Limpieza': color = '#FF6633'; break;//naranja fuerte
                      case 'No Operativa por Rotura': color = '#0000FF'; break; //azul
                      case 'No Operativa por Limpieza y Rotura': color = '#8E24AA'; break;//violeta
                      case 'Sin acceso': color = '#FFEE58'; break;//amarilla
                      case 'No encontrada': color = '#757575'; break;//gris
                      case 'Sin determinar': color = '#CFD8DC'; break;//gris claro
                      default: color = '#CFD8DC'; break;
                    }
                    store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                    for (var s = 0; s < store.state.conex_capta_en_mapa.length; s++) {
                      if (store.state.conex_capta_en_mapa[s].options.customData.id_captacion == id_captacion)
                          {
                            store.state.conex_capta_en_mapa[s].setStyle({color: color});
                            break;
                          }   
                    }
                  }
                  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: #2ECC71"></i><span>Operativa</span><br>';
                    html_tabla += '<i style="background: #F0B27A"></i><span>Operativa a Limpiar</span><br>';
                    html_tabla += '<i style="background: #D2B4DE"></i><span>Operativa a Reparar</span><br>';
                    html_tabla += '<i style="background: #C0392B"></i><span>Operativa a Reparar y Limpiar</span><br>';
                    html_tabla += '<i style="background: #FF0033"></i><span>No Operativa</span><br>';
                    html_tabla += '<i style="background: #FF6633"></i><span>No Operativa por Limpieza</span><br>';
                    html_tabla += '<i style="background: #0000FF"></i><span>No Operativa por Rotura</span><br>';              
                    html_tabla += '<i style="background: #8E24AA"></i><span>No Operativa por Limpieza y Rotura</span><br>'; 
                    html_tabla += '<i style="background: #FFEE58"></i><span>Sin acceso</span><br>'; 
                    html_tabla += '<i style="background: #757575"></i><span>No encontrada</span><br>';  
                    html_tabla += '<i style="background: #CFD8DC"></i><span>Sin determinar</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 'Revisar':
                        color = '#B2E57A';
                        for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                          store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                          let tipo = String(store.state.tramos_en_mapa[i].options.customData.dato3).trim();
                          switch (tipo) {
                            case '0': color = '#145CF7'; break;
                            case '1': color = '#FA8107'; break;
                            default: color = '#B2E57A'; break;
                          }
                          store.state.tramos_en_mapa[i].setStyle({ color: color });
                        }
                        for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                          store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                          tipo = String(store.state.captaciones_en_mapa[i].options.customData.dato3).trim();
                          switch (tipo) {
                            case '0': color = '#145CF7'; break;
                            case '1': color = '#FA8107'; break;
                            default: color = '#B2E57A'; break;
                          }
                          store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                          store.state.psingulares_en_mapa[i].options.color = '#B2E57A';
                          tipo = String(store.state.psingulares_en_mapa[i].options.customData.dato3).trim();
                          switch (tipo) {
                            case '0': color = '#145CF7'; break;
                            case '1': color = '#FA8107'; break;
                            default: color = '#B2E57A'; break;
                          }
                          store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        for (var i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
                          store.state.conex_capta_en_mapa[i].options.color = '#B2E57A';
                          tipo = String(store.state.conex_capta_en_mapa[i].options.customData.dato3).trim();
                          switch (tipo) {
                            case '0': color = '#145CF7'; break;
                            case '1': color = '#FA8107'; break;
                            default: color = '#B2E57A'; break;
                          }
                          store.state.conex_capta_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: #145CF7"></i><span>No revisar</span><br>';
                          html_tabla += '<i style="background: #FA8107"></i><span>Si revisar</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 'Fotos':
                        color = '#B2E57A';
                        for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                          store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                          let tipo = store.state.tramos_en_mapa[i].options.customData.fotos.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.tramos_en_mapa[i].setStyle({ color: color });
                        }
                        for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                          store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                          tipo = store.state.captaciones_en_mapa[i].options.customData.fotos.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                          store.state.psingulares_en_mapa[i].options.color = '#B2E57A';
                          tipo = store.state.psingulares_en_mapa[i].options.customData.fotos.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        legend = L.control({ position: 'topleft' });
                        legend.onAdd = function (map) {
                          var div = L.DomUtil.create('div', 'legend');
                          var html_tabla = '';
                          html_tabla += '<h4>Fotos<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: #FA8107"></i><span>Con foto</span><br>';
                          html_tabla += '<i style="background: #145CF7"></i><span>Sin foto</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 'Planos':
                        color = '#B2E57A';
                        for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                          store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                          let tipo = store.state.tramos_en_mapa[i].options.customData.plano.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.tramos_en_mapa[i].setStyle({ color: color });
                        }
                        for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                          store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                          tipo = store.state.captaciones_en_mapa[i].options.customData.plano.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                          store.state.psingulares_en_mapa[i].options.color = '#B2E57A';
                          tipo = store.state.psingulares_en_mapa[i].options.customData.plano.trim();
                          switch (tipo) {
                            case '': color = '#145CF7'; break;
                            default: color = '#FA8107'; break;
                          }
                          store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                        }
                        legend = L.control({ position: 'topleft' });
                        legend.onAdd = function (map) {
                          var div = L.DomUtil.create('div', 'legend');
                          var html_tabla = '';
                          html_tabla += '<h4>Planos<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: #FA8107"></i><span>Con plano</span><br>';
                          html_tabla += '<i style="background: #145CF7"></i><span>Sin plano</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 'Provisorios':
                      color = '#B2E57A';
                      for (var i = 0; i < store.state.tramos_en_mapa.length; i++) {
                        store.state.tramos_en_mapa[i].options.color = '#B2E57A';
                        let tipo = String(store.state.tramos_en_mapa[i].options.customData.provisorio).trim();
                        switch (tipo) {
                          case '0': color = '#145CF7'; break;
                          case '1': color = '#FA8107'; break;
                          default: color = '#B2E57A'; break;
                        }
                        store.state.tramos_en_mapa[i].setStyle({ color: color });
                      }
                      for (var i = 0; i < store.state.captaciones_en_mapa.length; i++) {
                        store.state.captaciones_en_mapa[i].options.color = '#B2E57A';
                        tipo = String(store.state.captaciones_en_mapa[i].options.customData.provisorio).trim();
                        switch (tipo) {
                          case '0': color = '#145CF7'; break;
                          case '1': color = '#FA8107'; break;
                          default: color = '#B2E57A'; break;
                        }
                        store.state.captaciones_en_mapa[i].setStyle({color: color, fillColor: color});
                      }
                      for (var i = 0; i < store.state.psingulares_en_mapa.length; i++) {
                        store.state.psingulares_en_mapa[i].options.color = '#B2E57A';
                        tipo = String(store.state.psingulares_en_mapa[i].options.customData.provisorio).trim();
                        switch (tipo) {
                          case '0': color = '#145CF7'; break;
                          case '1': color = '#FA8107'; break;
                          default: color = '#B2E57A'; break;
                        }
                        store.state.psingulares_en_mapa[i].setStyle({color: color, fillColor: color});
                      }
                      for (var i = 0; i < store.state.conex_capta_en_mapa.length; i++) {
                        store.state.conex_capta_en_mapa[i].options.color = '#B2E57A';
                        tipo = String(store.state.conex_capta_en_mapa[i].options.customData.provisorio).trim();
                        switch (tipo) {
                          case '0': color = '#145CF7'; break;
                          case '1': color = '#FA8107'; break;
                          default: color = '#B2E57A'; break;
                        }
                        store.state.conex_capta_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: #145CF7"></i><span>No revisar</span><br>';
                        html_tabla += '<i style="background: #FA8107"></i><span>Si revisar</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 = '';
    },
    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'});
          }
     }
    },
    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.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();
                 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>Tramo sin PS</span><br>';
                       html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>PS sin Tramo</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>Sin dato PS</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>Sin dato Zamp</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #ff6600"></i><span>Sin dato ZTapa</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #ffff00"></i><span>Sin Seccion</span><br>';
                         html_tabla += '<i class="puntolegenda" style="background: #33cc33"></i><span>Sin Tipo</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>PS sin Tramo</span><br>';
                        html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>PS sin Tipo</span><br>';
                        html_tabla += '<i class="puntolegenda" style="background: #ff6600"></i><span>PS sin Z Tapa</span><br>';
                        html_tabla += '<i class="puntolegenda" style="background: #ffff00"></i><span>PS sin Zab</span><br>';
                        html_tabla += '<i class="puntolegenda" style="background: #33cc33"></i><span>PS sin Profundidad</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>Captacion sin Tramo</span><br>';
                      html_tabla += '<i class="puntolegenda" style="background: #3333cc"></i><span>Captacion sin Tipo</span><br>';
                      html_tabla += '<i class="puntolegenda" style="background: #ff6600"></i><span>Captacion sin Clase</span><br>';
                      html_tabla += '<i class="puntolegenda" style="background: #ffff00"></i><span>Captacion sin Z Tapa</span><br>';
                      html_tabla += '<i class="puntolegenda" style="background: #33cc33"></i><span>Captacion sin Z Col</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'});
          }
     }
    },
    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_colectores(true, 'movimientos', lat, lon);
    },
    cargar_intervenciones_captacion() {
      app.chequeo_conexion();
      if (store.state.hayconexion == true) { // si hay conexion........................................................................
        let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Cargando intervenciones......' });
        const cargando_algo = this.$buefy.loading.open({ containter: null });
        var este = this;
        var fd = new FormData();
        fd.append("id",store.state.captacion_seleccionada.id_captacion);
        fd.append("sql",'ignorar');
        fd.append("tipo",'ignorar');
        fd.append("usuario",store.state.datos_login.usuario);
        fd.append("revisar",'ignorar');
        var getUrl = window.location;
        var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
        var phpfile = baseUrl + '/php/cargo_intervenciones_captacion.php';
        var xhr = new XMLHttpRequest();
        xhr.open('POST', phpfile, true);
        xhr.onload = function () {
          var data = JSON.parse(this.response);
            store.state.intervenciones_captacion = data[0];
            store.state.modal_visible = 'modal_intervenciones_captaciones_lista';
            mensaje_espera.close();
            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' });
      }

    },
    editar_intervencion_captacion(bandera) {
            if (bandera < 0)
      {
        store.state.int_captacion_seleccionada.id_intervencion = 0;
        store.state.int_captacion_seleccionada.id_captacion = store.state.captacion_seleccionada.id_captacion;
        store.state.int_captacion_seleccionada.usuario = store.state.datos_login.usuario;
        store.state.int_captacion_seleccionada.fecha = '';
        store.state.int_captacion_seleccionada.estado_ini = 'Operativa';
        store.state.int_captacion_seleccionada.estado_fin = 'Operativa';
        store.state.int_captacion_seleccionada.tipo = 'Inspeccion';
        store.state.int_captacion_seleccionada.accion = 'Sin intervencion adicional';
        store.state.int_captacion_seleccionada.observaciones = '';
        store.state.int_captacion_seleccionada.fotos = '';
        store.state.int_captacion_seleccionada.audios = '';
        store.state.int_captacion_seleccionada.activo = 1;
        store.state.int_captacion_seleccionada.foto_blob = '';
        store.state.int_captacion_seleccionada.fotos_con_fecha = '';
        store.state.int_captacion_seleccionada.audios_con_fecha = '';
        store.state.modal_visible = 'modal_editar_intervencion_captacion';
      }
      else
      {
        store.state.int_captacion_seleccionada.id_intervencion = store.state.intervenciones_captacion[bandera].id_intervencion;
        store.state.int_captacion_seleccionada.id_captacion = store.state.captacion_seleccionada.id_captacion;
        store.state.int_captacion_seleccionada.usuario = store.state.datos_login.usuario;
        store.state.int_captacion_seleccionada.fecha = store.state.intervenciones_captacion[bandera].fecha;
        store.state.int_captacion_seleccionada.estado_ini = store.state.intervenciones_captacion[bandera].estado_ini;
        store.state.int_captacion_seleccionada.estado_fin = store.state.intervenciones_captacion[bandera].estado_fin;
        store.state.int_captacion_seleccionada.tipo = store.state.intervenciones_captacion[bandera].tipo;
        store.state.int_captacion_seleccionada.accion = store.state.intervenciones_captacion[bandera].accion;
        store.state.int_captacion_seleccionada.observaciones = store.state.intervenciones_captacion[bandera].observaciones;
        store.state.int_captacion_seleccionada.fotos = store.state.intervenciones_captacion[bandera].fotos;
        store.state.int_captacion_seleccionada.audios = store.state.intervenciones_captacion[bandera].audios;
        store.state.int_captacion_seleccionada.activo = 1;
        store.state.int_captacion_seleccionada.foto_blob = '';
        store.state.int_captacion_seleccionada.fotos_con_fecha = [];
        if (store.state.int_captacion_seleccionada.fotos != '') {
          let array_fotos = JSON.parse(store.state.int_captacion_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.int_captacion_seleccionada.fotos_con_fecha.push(valor[i]);
            }
          });
        }
        store.state.int_captacion_seleccionada.audios_con_fecha = [];
        if (store.state.int_captacion_seleccionada.audios != '') {
          let array_audios = JSON.parse(store.state.int_captacion_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.int_captacion_seleccionada.audios_con_fecha.push(valor[i]);
            }
          });
        }
        store.state.modal_visible = 'modal_editar_intervencion_captacion'; 
      }
    },
    guardar_datos_intervencion_captacion(){
      var tipo = '';
      var sql = '';
      if (store.state.int_captacion_seleccionada.id_intervencion == 0)
      {
        sql = "INSERT INTO int_captaciones (id_captacion, fecha, usuario, estado_ini, estado_fin, tipo, accion, observaciones, fotos, audios, activo) VALUES (";
        sql += store.state.int_captacion_seleccionada.id_captacion + ",'" + store.state.int_captacion_seleccionada.fecha + "','";
        sql += store.state.int_captacion_seleccionada.usuario + "','" + store.state.int_captacion_seleccionada.estado_ini + "','";
        sql += store.state.int_captacion_seleccionada.estado_fin + "','" + store.state.int_captacion_seleccionada.tipo + "','";
        sql += store.state.int_captacion_seleccionada.accion + "','" + store.state.int_captacion_seleccionada.observaciones + "','";
        sql += store.state.int_captacion_seleccionada.fotos + "','" + store.state.int_captacion_seleccionada.audios + "',1)";
        tipo = 'NUEVA INTERVENCION EN CAPTACION';
      }
      else
      {
        sql = "UPDATE int_captaciones SET fecha = '" + store.state.int_captacion_seleccionada.fecha;
        sql += "', usuario = '" + store.state.int_captacion_seleccionada.usuario;
        sql += "', estado_ini = '" + store.state.int_captacion_seleccionada.estado_ini;
        sql += "', estado_fin = '" + store.state.int_captacion_seleccionada.estado_fin;
        sql += "', tipo = '" + store.state.int_captacion_seleccionada.tipo;
        sql += "', accion = '" + store.state.int_captacion_seleccionada.accion;
        sql += "', observaciones = '" + store.state.int_captacion_seleccionada.observaciones;
        sql += "', fotos = '" + store.state.int_captacion_seleccionada.fotos;
        sql += "', audios = '" + store.state.int_captacion_seleccionada.audios;
        sql += "' WHERE id_intervencion = " + store.state.int_captacion_seleccionada.id_intervencion;
        tipo = 'MODIFICACION EN INTERVENCION EN CAPTACION';
      }
      app.chequeo_conexion();
      if (store.state.hayconexion == true) { // si hay conexion........................................................................
        let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Cargando intervenciones......' });
        const cargando_algo = this.$buefy.loading.open({ containter: null });
        var este = this;
        var fd = new FormData();
        fd.append("id",store.state.captacion_seleccionada.id_captacion);
        fd.append("sql",sql);
        fd.append("tipo",tipo);
        fd.append("usuario",store.state.datos_login.usuario);
        fd.append("revisar",store.state.datos_login.revisar);
        var getUrl = window.location;
        var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
        var phpfile = baseUrl + '/php/cargo_intervenciones_captacion.php';
        var xhr = new XMLHttpRequest();
        xhr.open('POST', phpfile, true);
        xhr.onload = function () {
          var data = JSON.parse(this.response);
            store.state.intervenciones_captacion = data[0];
            store.state.modal_visible = 'modal_intervenciones_captaciones_lista';
            if(data[1] != '')
            {
              store.state.captacion_seleccionada.estado = data[1];
              store.state.captacion_seleccionada.accion = data[2];
              store.state.captacion_seleccionada.dato3 = store.state.datos_login.revisar;
              for(j=0;j<store.state.captaciones_en_mapa.length;j++)
              {
                    if(store.state.captaciones_en_mapa[j].options.customData.id_captacion == store.state.int_captacion_seleccionada.id_captacion)
                    {
                      store.state.captaciones_en_mapa[j].options.customData.estado = data[1];
                      store.state.captaciones_en_mapa[j].options.customData.accion = data[2];
                      store.state.captaciones_en_mapa[j].options.customData.dato3 = store.state.datos_login.revisar;
                    }
              }
            }
            mensaje_espera.close();
            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' });
      }
    },
    borrar_intervencion_captacion(e){
      this.$buefy.dialog.confirm({
        message: 'Seguro de eliminar intervención?',
        type: 'is-warning',
        onConfirm: () => {

          var tipo = '';
          var sql = '';
            sql = "UPDATE int_captaciones SET activo = 0";
            sql += " WHERE id_intervencion = " + store.state.intervenciones_captacion[e].id_intervencion;
            tipo = 'ELIMINACION DE INTERVENCION EN CAPTACION';
          app.chequeo_conexion();
          if (store.state.hayconexion == true) { // si hay conexion........................................................................
            let mensaje_espera = this.$buefy.toast.open({ indefinite: true, message: 'Cargando intervenciones......' });
            const cargando_algo = this.$buefy.loading.open({ containter: null });
            var este = this;
            var fd = new FormData();
            fd.append("id", store.state.intervenciones_captacion[e].id_captacion);
            fd.append("sql",sql);
            fd.append("tipo",tipo);
            fd.append("usuario",store.state.datos_login.usuario);
            fd.append("revisar",'ignorar');
            var getUrl = window.location;
            var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
            var phpfile = baseUrl + '/php/cargo_intervenciones_captacion.php';
            var xhr = new XMLHttpRequest();
            xhr.open('POST', phpfile, true);
            xhr.onload = function () {
              var data = JSON.parse(this.response);
                store.state.intervenciones_captacion = data;
                store.state.modal_visible = 'modal_intervenciones_captaciones_lista';
                mensaje_espera.close();
                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' });
          }
        }
      }); 
    },
    volver_datos_intervencion_captacion(){
      let haycambios = false;
      if (store.state.int_captacion_seleccionada.id_intervencion > 0)
      {
      let intervencion_sin_mod = store.state.intervenciones_captacion.filter(function(element){return element.id_intervencion == store.state.int_captacion_seleccionada.id_intervencion});
        if (intervencion_sin_mod.length > 0)
           {
            intervencion_sin_mod[0].fecha != store.state.int_captacion_seleccionada.fecha ? haycambios = true : undefined;
            intervencion_sin_mod[0].estado_ini != store.state.int_captacion_seleccionada.estado_ini ? haycambios = true : undefined;
            intervencion_sin_mod[0].estado_fin != store.state.int_captacion_seleccionada.estado_fin ? haycambios = true : undefined;
            intervencion_sin_mod[0].tipo != store.state.int_captacion_seleccionada.tipo ? haycambios = true : undefined;
            intervencion_sin_mod[0].accion != store.state.int_captacion_seleccionada.accion ? haycambios = true : undefined;
            intervencion_sin_mod[0].observaciones != store.state.int_captacion_seleccionada.observaciones ? haycambios = true : undefined;
            intervencion_sin_mod[0].fotos != store.state.int_captacion_seleccionada.fotos ? haycambios = true : undefined;
            intervencion_sin_mod[0].audios != store.state.int_captacion_seleccionada.audios ? haycambios = true : undefined;
           }
      } 
      else
      {
        haycambios = true;
      }           
      if (haycambios == true){
      this.$buefy.dialog.confirm({
        message: 'Hay cambios para salvar. Seguro quiere descartarlos?',
        type: 'is-warning',
        onConfirm: () => {
             store.state.modal_visible = 'modal_intervenciones_captaciones_lista';
                          }
      });
      }
      else
      {
        store.state.modal_visible = 'modal_intervenciones_captaciones_lista';
      }
    }




  },
  mounted: function () {
    app.obtengo_ubicacion();
    app.chequeo_conexion();
    //CARGO MAPA LEAFLET DE PAGINA//////////////////////////////////////////////////////     

                map = new L.Map('map', {
                  editable: true,
                  editOptions: { skipMiddleMarkers: false },
                  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 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('zoomend', function () {
                  let escala = map.getZoom();
                  if (escala < 14 && store.state.modo_consulta_distribuida == 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______________________________________________________________________________________________________________________
  

  // Crear un nuevo Worker
  const worker = new Worker('/COLECTORES/componentes/catastro/worker.js');

  // Manejar los mensajes del Worker
  worker.onmessage = function (e) {
    const { type, data } = e.data;
if (type == 'datos_calles')
{
    store.state.calles = data[0];
    store.state.calles_cruzan = data[1];
}
if (type == 'datos_administrativos')
{
    store.state.adm_tipos = data[0];
    store.state.adm_clases = data[1];
 //   store.state.adm_contratos = data[2];
 //   store.state.adm_proyectos = data[3];
}

};
  // Iniciar las tareas en el Worker

  var getUrl = window.location;
  var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
  var phpfile1 = baseUrl + '/php/cargo_calles_intersecciones.php';
  var phpfile2 = baseUrl + '/php/cargo_datos_administrativos.php';

  if (store.state.calles.length < 10 ){worker.postMessage({ type: 'obtener_calles', ruta: phpfile1 });}
  if (store.state.adm_tipos.length < 10){worker.postMessage({ type: 'obtener_datos_administrativos' , ruta: phpfile2 });}

  }

})




