fj-dc-ui/.svn/pristine/d3/d39746e0e20cdc494b5c03073b92ed04fb49b0be.svn-base

<template>
  <div style="z-index: 25; width:auto;">
    <div class="biank" id="gjtiao" style="display:block;">
      <form class="form-inline" role="form" style="padding: 0px;    background-color: rgba(255,255,255,.7);border-radius:5px;">
        <!-- <el-switch v-for="(item,index) in options" :key="index" v-model="value1" @change="selectChange" :active-value="item.active_value"
          :inactive-value="item.inactive_value" active-color="#13ce66" active-text="水文站" inactive-color="#cccccc">
        </el-switch> &nbsp;&nbsp; -->
        <label style="font-size:16px;margin-top:5px;color: white;" for="">图层控制：</label>
        <el-switch v-model="value1" @change="selectChange" mini active-value="point_shuihui-1-processLineShow_shuihuiTable"
          inactive-value="point_shuihui-0-processLineShow_shuihuiTable" active-color="#13ce66" inactive-color="#cccccc"
          active-text="水毁工程">
        </el-switch> &nbsp;&nbsp;
        <el-switch v-model="value2" @change="selectChange" active-value="point_people-1-processLineShow_peopleTable"
          inactive-value="point_people-0-processLineShow_peopleTable" active-color="#13ce66" inactive-color="#cccccc"
          active-text="人员">
        </el-switch> &nbsp;&nbsp;
        <el-switch v-model="value3" @change="selectChange" active-value="point_shuiku-1-processLineShow_shuikuTable"
          inactive-value="point_shuiku-0-processLineShow_shuikuTable" active-color="#13ce66" inactive-color="#cccccc"
          active-text="小水库">
        </el-switch> &nbsp;&nbsp;
        <el-switch v-model="value4" @change="selectChange" active-value="point_contry_water-1-processLineShow_countrywaterTable"
          inactive-value="point_contry_water-0-processLineShow_countrywaterTable" active-color="#13ce66" inactive-color="#cccccc"
          active-text="农村饮用水">
        </el-switch> &nbsp;&nbsp;
        <!-- <el-switch v-model="value5" @change="selectChange" active-value="SS_1" inactive-value="SS_0" active-color="#13ce66" inactive-color="#cccccc"
          active-text="墒情站">
        </el-switch> &nbsp;&nbsp;
          <el-switch v-model="value6" @change="selectChange" active-value="DP_1" inactive-value="DP_0" active-color="#13ce66" inactive-color="#cccccc"
          active-text="泵站">
        </el-switch> &nbsp;&nbsp;
          <el-switch v-model="value7" @change="selectChange" active-value="OTHER_1" inactive-value="OTHER_0" active-color="#13ce66" inactive-color="#cccccc"
          active-text="其它站">
        </el-switch> &nbsp;&nbsp; -->
      </form>
    </div>
    <div class="gonju">&nbsp;&nbsp;</div>
  </div>
</template>

<script>
  export default {
    name: "ControlPanel",
    data() {
      return {
        value1: "point_shuihui-0",
        value2: "point_people-1-processLineShow_peopleTable",
        value3: "point_shuiku-0",
        value4: "point_contry_water-0",
        value5: "SS_1",
        value6: "DP_1",
        value7: "OTHER_1",

        map: null,
        options: [{
          "text": "水文站",
          "active_value": "zz_1",
          "inactive_value": "zz_0",
          "value": false
        }, {
          "text": "水文站",
          "active_value": "zz_1",
          "inactive_value": "zz_0",
          "value": false
        }, {
          "text": "水文站",
          "active_value": "zz_1",
          "inactive_value": "zz_0",
          "value": false
        }, {
          "text": "水文站",
          "active_value": "zz_1",
          "inactive_value": "zz_0",
          "value": false
        }, {
          "text": "其它站",
          "active_value": "OTHER_1",
          "inactive_value": "OTHER_0",
          "value": false
        }]
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
        let cVue = this;
        cVue.map = this.$store.state.map;
      })
    },
    methods: {
      selectChange: function (value) {
        console.log(value.split("-"))
        var arr = value.split("-");
        this.$emit('layerVisbleEvent', arr);
        // this.$bus.$emit("event_layer_visible", arr);
        return
        //

        var layer = this.$store.state.map.findLayerById("layer_" + arr[0]);
        var layer_label = this.$store.state.map.findLayerById("layer_label" + arr[0]);
        //
        if (layer != null) {
          layer.visible = (parseInt(arr[1]) ? true : false);
          layer_label.visible = (parseInt(arr[1]) ? true : false);
        }
      }
    }
  }

</script>
<style>
  #gjtiao {
    display: none;
    float: left;
    position: absolute;
    bottom: 15px;
    margin-left: 15px;

  }

  #gjtiao .form-inline {
    background-color: rgba(146, 137, 137, 0.4) !important;
  }

  #gjtiao .form-inline .el-switch__label--right {
    color: aliceblue !important;
  }

  #gjtiao .el-switch__core {
    width: 35px !important;
    height: 15px !important;
  }

  #gjtiao .el-switch__core:after {
    height: 12px !important;
  }

</style>