table数据

wangqi

2021-04-14 6d4e23a29f40b4739aa46436e5b703ecde4b39aa

 src/components/panel/topicSearch/GasWasteSearch.vue

@@ -1,8 +1,6 @@
<template>
  <div class="sewers-search" v-if="gdVisible">
    <div class="search-title">
      废气
    </div>
    <div class="panel-title">{{title}}</div>
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item label="区域：" size="mini" class="search-panel-item">
@@ -15,7 +13,7 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称" size="mini">
        <el-form-item label="企业名称：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseVal"  @change="enterpriseType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseTypeOptions"
@@ -25,7 +23,7 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级单位" size="mini">
        <el-form-item label="二级单位：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseSubunitsTypeOptions"
@@ -35,7 +33,7 @@
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级单位" size="mini">
        <el-form-item label="三级单位：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseSubunitsTypeOptions"
@@ -50,12 +48,14 @@
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio>
        </el-radio-group>
        <!--              <el-form-item >-->
        <el-input v-model="form.keyword" size="mini"
                  placeholder="在此输入关键字搜索">
          <!--                  <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
          <!--                  <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
          <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i>
        </el-input>
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
            <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
            <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
            <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> -->
          </el-input>
          <el-button class="el-icon-search" @click="handleSearch"></el-button>
        </div>
        <!--              </el-form-item>-->
        <!--              <el-form-item>-->
        <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
@@ -63,7 +63,7 @@
        <!--              </el-form-item>-->
      </el-form>
    </div>
    <el-scrollbar style="height:300px">
    <el-scrollbar style="height:264px">
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
@@ -72,46 +72,7 @@
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>

    </el-scrollbar>
    <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
    <el-card class="footer-page" v-if="total > 10">
@@ -136,17 +97,18 @@
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'
// import WfsHelper from '@components/helpers/WfsHelper'
// import AjaxUtils from '@utils/AjaxUtils'
import mapApi from '@/api/mapApi'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
// import WfsHelper from '@components/helpers/WfsHelper'
export default {
  name: 'SewersSearch',
  name: 'GasWasteSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      // labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      inareaTypeOptions: [],
      enterpriseTypeOptions: [],
@@ -199,11 +161,13 @@
        dataType: this.form.dataType
      }
      console.log(param)
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName(this.form.query.layerName)
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // var wfsHelper = new WfsHelper()
      // wfsHelper.addTypeName(this.form.query.layerName)
      // wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      // const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      const res = await mapApi.getWasteGas()
      console.log(res)
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
@@ -220,80 +184,5 @@
</script>

<style lang="less" scoped>
.levelOfRisk-type{
  display: inline-block;
  position: relative;
  padding-right: 5px;
  color:#f5f5f5;
  i{
    display: block;
    width: 15px;
    height: 10px;
    position: absolute;
    top:50%;
    right: -15px;
    margin-top: -5px;
  }
}
.el-radio.is-checked .levelOfRisk-type{color:#409EFF}
.levelOfRisk{padding-left:20px}
.levelOfRisk .el-radio{padding-bottom:6px}
.environmental-risk-list{
  border:1px solid @color;
  margin-right: 10px;
  margin-bottom: 15px;
  position: relative;
  padding-left:50px;
  padding-top:3px;
  padding-bottom:3px;
  color: #f5f5f5;
  .state{
    width: 30px;
    height: 30px;
    position: absolute;
    top:50%;
    left:10px;
    margin-top: -15px;
    border-radius: 50%;
    box-shadow: 0 0 3px #000;
    background: #0B3B6D;
  }
}
/******************以下公共部分**********/
.sewers-search{
  position: relative;
  overflow: hidden;
  .search-panel{
    background-color: transparent;
    border: 1px solid @background-color-split;
    padding: 10px;

    /deep/ input {
      border-radius: 0;
      background-color: @background-color-split ;
      border: solid 1px @color ;
      color: @color-gray;
      font-size: 0.01rem;
      .el-select .el-input.is-focus .el-input__inner{
        border-color: @color;
      }
    }
    /deep/ input:focus{
      border-color: @color;
    }
  }
  .search-btn{

  }
  //location-btn{
  //
  //}
  .location-btn:hover,.el-input__icon:hover{
    color: @color;
    cursor: pointer;
  }
  .el-radio {
    margin-right: 8px!important;
  }
}
</style>