ninglu-frontt/src/components/SearchBar/indexEnvi.vue

<template>
  <div class="check-btns">
    <div class="type-check">
      <slot name="type-check">
        <el-button
          :type="btnState == '1' ? 'primary' : 'default'"
          size="mini"
          @click="checkType(1)"
          >{{ txt }}</el-button
        >
        <el-button
          :type="btnState == '2' ? 'primary' : 'default'"
          size="mini"
          @click="checkType(2)"
          >{{ txt1 }}</el-button
        >
        <el-button :type="btnState == '3' ? 'primary' : 'default'" size="mini" @click="checkType(3)"
          >设备分布</el-button
        >

        <!-- 刷新 -->
        <el-button @click="refreshData()" type="warning" size="mini">更新数据</el-button>
        <el-button v-if="userJurisdiction" @click="issueConsole()" type="info" size="mini"
          >调试控制台</el-button
        >
        <el-button
          class="pestAll"
          type="primary"
          v-if="$QueryPermission(242)"
          size="mini"
          @click="gowarning"
          >气象预警</el-button
        >
        <!-- <el-button class="pestAll" type="primary" v-if="loginId == 1" size="mini" @click="$router.push('/external-env-setting')"
          >气象站配置</el-button
        > -->
      </slot>
    </div>
    <div class="search-box" v-if="judge !== '1' && screenShow !== 3">
      <slot name="search-box"></slot>
      <slot name="search-common">
        <template v-if="user_tag == 5">
          <el-select
            class="select01"
            size="mini"
            v-model="sale_user_uid"
            filterable
            clearable
            placeholder="请选择客户"
            @change="isSaleUserSelect()"
          >
            <el-option
              v-for="item in userListOptions"
              :key="item.uid"
              :label="item.username"
              :value="item.uid"
            >
            </el-option>
          </el-select>
        </template>
        <el-select
          v-model="is_online"
          class="select01"
          clearable
          size="mini"
          placeholder="请选择在线状态"
          @change="isOnlineSelect()"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
        <el-input
          style="cursor: pointer"
          placeholder="请输入内容"
          size="mini"
          clearable
          v-model="searchVal"
          suffix-icon="el-icon-search"
          class="input-with-select"
          @change="searchEquipList()"
        >
          <template slot="prepend">设备ID或名称</template>
        </el-input>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user_tag: null, //1超级管理员，2经销商，3农林政府单位，4普通用户，5销售用户ss
      loginId: localStorage.getItem('user_tag'),
      sale_user_uid: '', //销售用户uid
      userListOptions: [], //销售用户列表
      selectItem: '1', //1设备号，2用户名
      searchVal: '',
      f_id: '',
      ename: '',
      is_online: null,
      btnState: this.displayType,
      judge: this.isShow,
      txt: '图表',
      txt1: '列表',
      userJurisdiction: false, // 下发控制的权限判断
      screenShow: null,
      qxwarn: false
    }
  },
  props: {
    displayType: {
      type: String
    },
    isShow: {
      author: String
    }
  },
  created() {
    this.user_tag = localStorage.getItem('user_tag')
  },
  activated() {
    this.getSaleUserList()
    this.is_online = window.location.href.split('is_online=')
      ? window.location.href.split('is_online=')[1]
      : null
    // 当前从首页跳转
    if (this.$parent.$route.query.is_online) {
      this.$emit('fun3', this.is_online)
    }
  },
  methods: {
    //  销售用户列表
    getSaleUserList() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=user.login.get_sale_device_user_list'
      }).then((res) => {
        if (res.data.data.length !== 0) {
          this.userListOptions = res.data.data
        }
      })
    },
    checkType(i) {
      this.btnState = i
      this.screenShow = i
      //console.log(this.screenShow);
      this.$emit('fun', this.btnState)
    },
    refreshData() {
      this.$emit('refreshData', '')
    },
    // 搜索组合数据
    searchEquipList() {
      if (this.selectItem == 1) {
        this.f_id = this.searchVal
      } else if (this.selectItem == 2) {
        this.ename = this.searchVal
      }
      this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
    },
    selClear() {
      if (this.searchVal) {
        this.searchVal = ''
        this.f_id = ''
        this.ename = ''
        this.$emit('fun2', { f_id: this.f_id, ename: this.ename })
      }
    },
    isOnlineSelect() {
      this.$emit('fun3', this.is_online)
    },

    say() {
      this.txt1 = '企鹏'
      this.txt = '合宙'
    },
    // 下发控制
    issueConsole() {
      this.$emit('fun4', true)
    },
    isSaleUserSelect() {
      this.$emit('fun5', this.sale_user_uid)
    },
    gowarning() {
      // this.
      this.$router.push({
        path: `/index/qxzearlywarning/qxzwarninglist`,
        query: {
          typeId: 5
        }
      })
    }
  },
  mounted() {
    this.screenShow = Number(this.displayType)
    // 判断当前账号是否为管理员
    if (localStorage.getItem('cUsername') == '管理员') {
      this.userJurisdiction = true
    } else {
      this.userJurisdiction = false
    }
  }
}
</script>

<style lang="less" scoped>
.check-btns {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  .search-box {
    text-align: right;
    .el-input {
      width: 400px;
      vertical-align: middle;
    }
    .select01 {
      width: 200px;
      vertical-align: middle;
    }
    /deep/.select02 {
      width: 86px;
    }
    .input-with-select {
      width: 310px;
      margin: 0 4px 0 0;
    }
    /deep/.el-input-group__prepend {
      cursor: default;
    }
  }
}
</style>