右侧固废查询面板及整体样式修改

chenzeping

2021-04-06 c5de910ae8d6691c90130f43a817cab9f2427f1c

右侧固废查询面板及整体样式修改

 src/components/panel/RightSearchPanel.vue

@@ -1,45 +1,45 @@
<template>
  <div class="panel-right" v-show="isShow">
    <div class="panel-tab">
<!--      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
<!--           :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
<!--        <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
      <!--      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
      <!--           :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
      <!--        <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
      <div class="container">
        <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
          <li  style="   ">
<!--            <span>{{item.name}}</span>-->
<!--            <div >-->
                <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
<!--            </div>-->
          </li>
            <li  style="   ">
              <!--            <span>{{item.name}}</span>-->
              <!--            <div >-->
              <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
              <!--            </div>-->
            </li>
          </el-tooltip>
        </ul>
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->
    <!--    <div class="panel-fold-btn" >-->
    <!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
    <!--    </div>-->

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
    <!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
    <!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
    <!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
    <!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
    <!--      </div>-->
    <!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
        <!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>

        <div :class="'search-container map-background'">
            <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
                <component :title="title" :is="gcComp"></component>
            </div>
      <div :class="'search-container map-background'">
        <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
          <component :title="title" :is="gcComp"></component>
        </div>
      </div>
    </div>
  </div>
</template>
@@ -142,33 +142,33 @@
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
    //   if (right === '10px') {
    //     rightControl.animate({
    //       right: '-322px'
    //     })
    //     el.css({
    //       transform: 'rotateY(180deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '320px',
    //       speed: 1000
    //     })
    //   } else {
    //     rightControl.animate({
    //       right: '10px'
    //     })
    //     el.css({
    //       transform: 'rotateY(0deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '290px',
    //       speed: 1000
    //     })
    //   }
      //   if (right === '10px') {
      //     rightControl.animate({
      //       right: '-322px'
      //     })
      //     el.css({
      //       transform: 'rotateY(180deg)',
      //       'transform-origin': '50% 50%',
      //       transition: 'transform 1s linear'
      //     })
      //     el2.animate({
      //       right: '320px',
      //       speed: 1000
      //     })
      //   } else {
      //     rightControl.animate({
      //       right: '10px'
      //     })
      //     el.css({
      //       transform: 'rotateY(0deg)',
      //       'transform-origin': '50% 50%',
      //       transition: 'transform 1s linear'
      //     })
      //     el2.animate({
      //       right: '290px',
      //       speed: 1000
      //     })
      //   }
    }
  },
  mounted () {
@@ -178,17 +178,17 @@

<style lang="less">
.search-title{
    color: rgb(255, 255, 255);
    font-size: 16px;
    margin: 5px;
  color: rgb(255, 255, 255);
  font-size: 16px;
  margin: 5px;
}
.search-container {
    position: relative;
    width: 1.79167rem;
    /*height: 5.6475rem;*/
    min-height: 80vh;
    max-height: 90vh;
    overflow: hidden;
  position: relative;
  width: 1.79167rem;
  /*height: 5.6475rem;*/
  min-height: 80vh;
  max-height: 90vh;
  overflow: hidden;
}
.module-wrap{
  width: 0.15rem;
@@ -365,7 +365,7 @@
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      transition: transform 1s linear;
        /*transition: 3s linear;*/
      /*transition: 3s linear;*/
    }
    .btn-shrink {
      width: 20px;
@@ -416,7 +416,7 @@
  .a{
    transform: translateX(328px);
    transition: transform 3s linear;
    }
  }
  .panel_searchTotal {
    font-size: 12px;
    float: right;
@@ -448,66 +448,69 @@
    display: grid;
    font-size: 18px;
  }
    /*input 点击搜索样式*/
    .rightButtonSearch{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-input{margin-right: 10px}
        .el-icon-search{
            width: 40px;
            border:1px solid @color;
            height: 26px;
            line-height: 26px;
            text-align: center;
            color:#fff;
            border-radius: 2px;
            cursor:pointer;
            background: rgba(0,16,30,.5);
        }
  /*input 点击搜索样式*/
  .rightButtonSearch{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input{margin-right: 10px}
    .el-icon-search{
      width: 40px;
      border:1px solid @color;
      height: 26px;
      text-align: center;
      line-height: 26px;
      color:#fff;
      border-radius: 2px;
      cursor:pointer;
      background: rgba(0,16,30,.5);
    }
    /*单选按钮样式*/
    .levelOfRisk{padding-left:20px}
    .levelOfRisk .el-radio{padding-bottom:6px}
    .el-button {
      padding: 0;
    }
  }
  /*单选按钮样式*/
  .levelOfRisk{padding-left:20px}
  .levelOfRisk .el-radio{padding-bottom:6px}

    .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;
        }
  .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}
  }
  .el-radio.is-checked .levelOfRisk-type{color:#409EFF}

    .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;
        }
  .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;
    }
  }
  //.search-panel {
  //  border: #07325B;
  //  background-color: #07325B !important;
@@ -681,39 +684,39 @@
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
    /******************以下公共部分**********/
    .sewers-search{
        position: relative;
        overflow: hidden;
        .search-panel{
            background-color: transparent;
            border: 1px solid @background-color-split;
            padding: 10px 0;
            // .el-input{width:calc(100% - 40px);position: relative}
            /deep/ input {
                border-radius: 0;
                background-color: @background-color-split ;
                border: solid 1px @color ;
                color: @color-gray;
                font-size: 0.01rem;
                padding:0 15px;
                .el-select .el-input.is-focus .el-input__inner{
                    border-color: @color;
                }
            }
            .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
  /******************以下公共部分**********/
  .query-search{
    position: relative;
    overflow: hidden;
    .search-panel{
      background-color: transparent;
      border: 1px solid @background-color-split;
      padding: 10px 0;
      // .el-input{width:calc(100% - 40px);position: relative}
      /deep/ input {
        border-radius: 0;
        background-color: @background-color-split ;
        border: solid 1px @color ;
        color: @color-gray;
        font-size: 0.01rem;
        padding:0 15px;
        .el-select .el-input.is-focus .el-input__inner{
          border-color: @color;
        }
        .search-btn{

        }
        //location-btn{
        //
        //}
        .location-btn:hover,.el-input__icon:hover{
            color: @color;
            cursor: pointer;
        }
      }
      .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
    }
    .search-btn{

    }
    //location-btn{
    //
    //}
    .location-btn:hover,.el-input__icon:hover{
      color: @color;
      cursor: pointer;
    }
  }
}

</style>

 src/components/panel/topicSearch/DischargeSearch.vue

@@ -1,15 +1,15 @@
<template>
  <div class="sewers-search" v-if="gdVisible">
  <div class="query-search" v-if="gdVisible">
    <div class="search-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">
          <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
            <el-option
                    v-for="item in areaTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                v-for="item in areaTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
@@ -97,13 +97,13 @@
    <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
              small
              @current-change="handlePage"
              :page-size=pageSize
              layout="prev, pager, next"
              :total=total
              :current-page=current
              class="warnPagination"
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>

 src/components/panel/topicSearch/EnvRiskSearch.vue

@@ -1,41 +1,41 @@
<template>
  <div class="sewers-search" v-if="gdVisible">
  <div class="query-search" v-if="gdVisible">
    <div class="search-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">
          <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
            <el-option
                    v-for="item in areaTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                v-for="item in areaTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <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"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                v-for="item in enterpriseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <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"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                v-for="item in enterpriseSubunitsTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="风险级别" size="mini"></el-form-item>
        <el-radio-group v-model="form.type" class="levelOfRisk">
            <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
        </el-radio-group>
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
@@ -48,22 +48,22 @@
      <div class="environmental-risk-list" v-for="(item,index) in 5" :key="index" ><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
            <h3>###炼化部</h3>
            <p>所属部门：<span>炼化部</span></p>
            <p>风险级别：<span>三级</span></p>
          <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">
      <el-pagination
              small
              @current-change="handlePage"
              :page-size=pageSize
              layout="prev, pager, next"
              :total=total
              :current-page=current
              class="warnPagination"
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>

 src/components/panel/topicSearch/GasWasteSearch.vue

@@ -1,5 +1,5 @@
<template>
  <div class="sewers-search" v-if="gdVisible">
  <div class="query-search" v-if="gdVisible">
    <div class="search-title">{{title}}</div>
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
@@ -33,7 +33,7 @@
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="风险级别" size="mini"></el-form-item>-->
        <!--        <el-form-item label="风险级别" size="mini"></el-form-item>-->
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <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>

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,106 +1,106 @@
<template>
        <div class="sewers-search" v-if="gdVisible">
          <div class="search-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">
                <el-select style="width: 100%"  v-model="form.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
                  <el-option
                      v-for="item in pipelineTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="form.pipelineType+'：'" size="mini">
                <el-select style="width: 100%"  v-model="form.dataType"  @change="handleDataType" :popper-class="'select-down'">
                  <el-option
                      v-for="item in dataTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item >-->
              <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-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
              </div>
              <!--              </el-form-item>-->
              <!--              <el-form-item>-->
              <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
              <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
              <!--              </el-form-item>-->
            </el-form>
          </div>
          <el-scrollbar style="height:100%">
            <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
              <div class="B-TMD-table-list-title">
                <div class="B-TMD-table-list-head">
                  <div class="B-TMD-table-list-title-y"
                       :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                    <!--                    <span>运单号：</span>-->
                    <span id="waybillNumber" class=""
                          :title="item.properties.pipename">
  <div class="query-search" v-if="gdVisible">
    <div class="search-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">
          <el-select style="width: 100%"  v-model="form.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
            <el-option
                v-for="item in pipelineTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="form.pipelineType+'：'" size="mini">
          <el-select style="width: 100%"  v-model="form.dataType"  @change="handleDataType" :popper-class="'select-down'">
            <el-option
                v-for="item in dataTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--              <el-form-item >-->
        <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="查询">-->
        <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
        <!--              </el-form-item>-->
      </el-form>
    </div>
    <el-scrollbar style="height:100%">
      <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index">
        <div class="B-TMD-table-list-title">
          <div class="B-TMD-table-list-head">
            <div class="B-TMD-table-list-title-y"
                 :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
              <!--                    <span>运单号：</span>-->
              <span id="waybillNumber" class=""
                    :title="item.properties.pipename">
                                                <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span>
                                            </span>
                  </div>
                  <!--                  <div class="B-TMD-table-list-title-c">-->
                  <!--                    {{ labelList[0] }}：-->
                  <!--                    <span id="plateNumber_p">-->
                  <!--                                                <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>-->
                  <!--                                            </span>-->
                  <!--                  </div>-->
                </div>
                <!--                <div class="B-TMD-table-icons" style="float:right">-->
                <!--                  <ul>-->
                <!--                    <li class="B-TMD-table-list-title-y-adress"-->
                <!--                        @click="handleLocation(item)"></li>-->
                <!--                    <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>-->
                <!--                  </ul>-->
                <!--                </div>-->
              </div>
              <div class="B-TMD-table-list-content">

                <div v-for="itm in labelList" :key="itm.label">
                  <span>{{ itm.label }}：</span>
                  <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
                </div>
                <!--                <div><span>收货企业：</span> <span-->
                <!--                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>-->
                <!--                </div>-->
              </div>
              <!--              <div class="B-TMD-table-list-bottom">-->
              <!--                <div class="B-TMD-table-list-bottom-name">-->
              <!--                  货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>-->
              <!--              </div>-->
            </div>
          </el-scrollbar>
          <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                small
                @current-change="handlePage"
                :page-size=pageSize
                layout="prev, pager, next"
                :total=total
                :current-page=current
                class="warnPagination"
            >
            </el-pagination>
          </el-card>
            <!--                  <div class="B-TMD-table-list-title-c">-->
            <!--                    {{ labelList[0] }}：-->
            <!--                    <span id="plateNumber_p">-->
            <!--                                                <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>-->
            <!--                                            </span>-->
            <!--                  </div>-->
          </div>
          <!--                <div class="B-TMD-table-icons" style="float:right">-->
          <!--                  <ul>-->
          <!--                    <li class="B-TMD-table-list-title-y-adress"-->
          <!--                        @click="handleLocation(item)"></li>-->
          <!--                    <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>-->
          <!--                  </ul>-->
          <!--                </div>-->
        </div>
      <!--        <div class="monitor2" v-if="hbVisible">-->
      <!--          <env-protect-search></env-protect-search>-->
      <!--        </div>-->
      <!--        <div class="monitor2" v-if="pkVisible">-->
      <!--          <discharge-search></discharge-search>-->
      <!--        </div>-->
        <div class="B-TMD-table-list-content">

          <div v-for="itm in labelList" :key="itm.label">
            <span>{{ itm.label }}：</span>
            <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
          </div>
          <!--                <div><span>收货企业：</span> <span-->
          <!--                    id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>-->
          <!--                </div>-->
        </div>
        <!--              <div class="B-TMD-table-list-bottom">-->
        <!--                <div class="B-TMD-table-list-bottom-name">-->
        <!--                  货物名称：<span :title="item.materialName">{{ item.materialName }}</span></div>-->
        <!--              </div>-->
      </div>
    </el-scrollbar>
    <el-card class="footer-page" v-if="total > 10">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
  <!--        <div class="monitor2" v-if="hbVisible">-->
  <!--          <env-protect-search></env-protect-search>-->
  <!--        </div>-->
  <!--        <div class="monitor2" v-if="pkVisible">-->
  <!--          <discharge-search></discharge-search>-->
  <!--        </div>-->
</template>

<script>

 src/components/panel/topicSearch/SoilGroundWaterSearch.vue

@@ -1,129 +1,129 @@
<template>
    <div class="sewers-search" v-if="gdVisible">
        <div class="search-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">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option
                                v-for="item in areaTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--  <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"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <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"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <!--   <el-form-item label="风险级别" size="mini"></el-form-item>
                <el-radio-group v-model="form.type" class="levelOfRisk">
                  <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
                </el-radio-group> -->
                <!--              <el-form-item >-->
                <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-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
                </div>

                <!--              </el-form-item>-->
                <!--              <el-form-item>-->
                <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
                <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
                <!--              </el-form-item>-->
            </el-form>
  <div class="query-search" v-if="gdVisible">
    <div class="search-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">
          <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
            <el-option
                v-for="item in areaTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!--  <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"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <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"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!--   <el-form-item label="风险级别" size="mini"></el-form-item>
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
        </el-radio-group> -->
        <!--              <el-form-item >-->
        <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-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
        </div>
        <el-scrollbar style="height:300px">
            <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>
            <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">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>

        <!--              </el-form-item>-->
        <!--              <el-form-item>-->
        <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
        <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
        <!--              </el-form-item>-->
      </el-form>
    </div>
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
    <el-scrollbar style="height:300px">
      <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>
      <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">
      <el-pagination
          small
          @current-change="handlePage"
          :page-size=pageSize
          layout="prev, pager, next"
          :total=total
          :current-page=current
          class="warnPagination"
      >
      </el-pagination>
    </el-card>
  </div>
  <!--        <div class="monitor2" v-if="hbVisible">-->
  <!--          <env-protect-search></env-protect-search>-->
  <!--        </div>-->
  <!--        <div class="monitor2" v-if="pkVisible">-->
  <!--          <discharge-search></discharge-search>-->
  <!--        </div>-->
</template>

<script>

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -1,5 +1,5 @@
<template>
  <div class="solidwaste-search" v-if="judgeVisible">
  <div class="query-search" v-if="judgeVisible">
    <div class="search-title">
      <span>固废</span>
      <!--      <span>{{ title }}</span>-->
@@ -18,24 +18,17 @@
            </el-option>
          </el-select>
        </el-form-item>
        <!--  <div class="search-radio">
          <el-radio v-model="radio" label="1">全部</el-radio>
          <el-radio v-model="radio" label="2">正常</el-radio>
          <el-radio v-model="radio" label="3">预警</el-radio>
        </div> -->
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <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 v-model="radio" class="levelOfRisk">
          <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>

        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
          <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
          <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
          <el-button class="el-icon-search" @click="handleSearch"></el-button>
        </div>
        <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索">
          <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i>
        </el-input>
      </el-form>
      <el-scrollbar style="height:500px">
      <el-scrollbar style="height:300px">
        <div class="environmental-risk-list">
          <i class="state"></i>
          <div>
@@ -44,57 +37,16 @@
            <p>风险级别：<span>三级</span></p>
          </div>
        </div>
        <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" -->
        <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :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>
            <h3>{{ item.StoragePlaceTypeName }}</h3>
            <p>所属部门：<span>{{ item.CompanyName }}</span></p>
            <p>风险级别：<span>{{ item.StoragePlaceTypeName }}</span></p>
          </div>
        </div>
      </el-scrollbar>
      <!--      <el-card class="box-card"-->
      <!--               v-for="(item,index) in searchDataDisplay"-->
      <!--               :key="index">-->
      <!--        <div>-->
      <!--          {{ item.CompanyName }}-->
      <!--        </div>-->
      <!--      </el-card>-->
    </div>
    <!--      <el-scrollbar style="height:100%">-->
    <!--      </el-scrollbar>-->
  </div>
</template>

@@ -108,9 +60,18 @@
  data () {
    return {
      levelOfRisk: [
        { name: '全部', value: '1' },
        { name: '正常', value: '2' },
        { name: '预警', value: '3' }
        {
          name: '全部',
          value: '1'
        },
        {
          name: '正常',
          value: '2'
        },
        {
          name: '预警',
          value: '3'
        }
      ],
      judgeVisible: true,
      solidWasteTypeOptions: [{
@@ -184,18 +145,14 @@
        // 数据的传递
        transferData: ''
      },
      // 数据搜索之后，存储数据的
      searchDataDisplay: []
    }
  },
  methods: {
    handlePipelineType (val) {
      // console.log(val)
      this.solidWasteTypeOptions.forEach(item => {
        // console.log(item.value)
        if (val === item.value) {
          // console.log('数据选择相同')
          // 接收数据 用于之后接口数据的调用
          // this.form.transferData = item.value
          this.handleSearch(item.value)
        }
      })
@@ -212,42 +169,8 @@
</script>

<style lang="less" scoped>
.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;
  }
}

.el-input {
.el-scrollbar {
  margin: 15px auto;
}


 src/components/panel/topicSearch/WaterWasteSearch.vue

@@ -1,128 +1,128 @@
<template>
    <div class="sewers-search" v-if="judgeVisible">
        <div class="search-title">{{title}}</div>
        <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'：'" size="mini"
                              class="search-panel-item">
                    <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                               :popper-class="'select-down'">
                        <el-option
                                v-for="item in solidWasteTypeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-radio-group v-model="form.type" class="levelOfRisk">
                    <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>
                <div class="rightButtonSearch">
                    <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
                    <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
                </div>
            </el-form>
            <el-scrollbar style="height:300px">
                <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>
                <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>
            <div>
<!--                <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index">-->
<!--                    <div v-if="total > 3">-->
<!--                        {{ item.CompanyName }}-->
<!--                    </div>-->
<!--                </el-card>-->
                <el-card class="footer-page" v-if="total > 10">
                    <el-pagination
                            small
                            @current-change="handlePage"
                            :page-size=pageSize
                            layout="prev, pager, next"
                            :total=total
                            :current-page=current
                            class="warnPagination"
                    >
                    </el-pagination>
                </el-card>
<!--                        <el-pagination-->
<!--                            small-->
<!--                            layout="prev, pager, next"-->
<!--                            :total=total-->
<!--                            :current-page=1-->
<!--                            class="warnPagination"-->
<!--                        >-->
<!--                        </el-pagination>-->
            </div>
<!--                      <el-scrollbar style="height:100%">-->
<!--                      <el-card class="footer-page">-->
<!--                        <ul>-->
<!--                          {{ searchDataDisplay }}-->
<!--                          <li v-for="(item,index) in searchDataDisplay" :key="index">-->
<!--                            {{ item.CompanyName }}-->
<!--                          </li>-->
<!--                        </ul>-->
<!--                      </el-card>-->
<!--                          <el-pagination-->
<!--                              small-->
<!--                              @current-change="handlePage"-->
<!--                              :page-size=pageSize-->
<!--                              layout="prev, pager, next"-->
<!--                              :total=total-->
<!--                              :current-page=current-->
<!--                              class="warnPagination"-->
<!--                          >-->
<!--                          </el-pagination>-->
<!--                      </el-card>-->
<!--                      </el-scrollbar>-->
  <div class="query-search" v-if="judgeVisible">
    <div class="search-title">{{title}}</div>
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'：'" size="mini"
                      class="search-panel-item">
          <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                     :popper-class="'select-down'">
            <el-option
                v-for="item in solidWasteTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <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>
        <div class="rightButtonSearch">
          <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索"></el-input>
          <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom>
        </div>
      </el-form>
      <el-scrollbar style="height:300px">
        <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>
        <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>
      <div>
        <!--                <el-card class="box-card" v-for="(item,index) in searchDataDisplay" :key="index">-->
        <!--                    <div v-if="total > 3">-->
        <!--                        {{ item.CompanyName }}-->
        <!--                    </div>-->
        <!--                </el-card>-->
        <el-card class="footer-page" v-if="total > 10">
          <el-pagination
              small
              @current-change="handlePage"
              :page-size=pageSize
              layout="prev, pager, next"
              :total=total
              :current-page=current
              class="warnPagination"
          >
          </el-pagination>
        </el-card>
        <!--                        <el-pagination-->
        <!--                            small-->
        <!--                            layout="prev, pager, next"-->
        <!--                            :total=total-->
        <!--                            :current-page=1-->
        <!--                            class="warnPagination"-->
        <!--                        >-->
        <!--                        </el-pagination>-->
      </div>
      <!--                      <el-scrollbar style="height:100%">-->
      <!--                      <el-card class="footer-page">-->
      <!--                        <ul>-->
      <!--                          {{ searchDataDisplay }}-->
      <!--                          <li v-for="(item,index) in searchDataDisplay" :key="index">-->
      <!--                            {{ item.CompanyName }}-->
      <!--                          </li>-->
      <!--                        </ul>-->
      <!--                      </el-card>-->
      <!--                          <el-pagination-->
      <!--                              small-->
      <!--                              @current-change="handlePage"-->
      <!--                              :page-size=pageSize-->
      <!--                              layout="prev, pager, next"-->
      <!--                              :total=total-->
      <!--                              :current-page=current-->
      <!--                              class="warnPagination"-->
      <!--                          >-->
      <!--                          </el-pagination>-->
      <!--                      </el-card>-->
      <!--                      </el-scrollbar>-->
    </div>
  </div>
</template>

<script>