右侧固废管理查询定位图标

chenzeping

2021-04-15 277cd91b56c9cdc0df84f7f73987ee52cd2974c3

右侧固废管理查询定位图标

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -29,7 +29,8 @@
    <el-scrollbar style="height:286.22px">
      <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index"
           @click="setBounced(item)">
        <i class="state"></i>
        <!--        <i class="state"></i>-->
        <img src="../../../../public/assets/images/map/solidwaste/gf_green2.png" alt="" class="state">
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>{{ item.Name }}</span></p>
@@ -52,6 +53,33 @@
  data () {
    return {
      judgeVisible: true,
      form: {
        keyword: '固废面板数据查询',
        // 数据的传递
        transferData: 1
      },
      levelOfRisk: [
        {
          name: '全部',
          value: 1
        },
        {
          name: '正常',
          value: 2
        },
        {
          name: '预警',
          value: 3
        }
      ],
      // 数据搜索之后，存储数据的
      searchDataDisplay: [],
      instance: null,
      intervals: [],
      layer: window.map,
      L: window.L,
      times: 5,
      colors: ['#98FB98', '#ff0000'],
      solidWasteTypeOptions: [{
        value: '1',
        label: '区域',
@@ -116,34 +144,7 @@
          label: '长度(m)',
          key: 'length'
        }]
      }],
      form: {
        keyword: '固废面板数据查询',
        // 数据的传递
        transferData: 1
      },
      levelOfRisk: [
        {
          name: '全部',
          value: 1
        },
        {
          name: '正常',
          value: 2
        },
        {
          name: '预警',
          value: 3
        }
      ],
      // 数据搜索之后，存储数据的
      searchDataDisplay: [],
      instance: null,
      intervals: [],
      layer: window.map,
      L: window.L,
      times: 5,
      colors: ['#98FB98', '#ff0000']
      }]
    }
  },
  methods: {
@@ -152,6 +153,7 @@
      // console.log(this.form.keyword)
      const result = await mapApi.getSolidWaste(data)
      this.searchDataDisplay = result.Result.DataInfo
      console.log(this.searchDataDisplay)
    },
    // 不同类型图片封装
    differentTypes (judgeValue) {

 src/components/table/components/SolidWaste.vue

@@ -20,7 +20,8 @@
              :disabled="!isShowIcon"
              popper-class="popovers">
            <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
            <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
            <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference"
               @click="doIcon($index)"></i>
            <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
          </el-popover>
        </template>
@@ -29,9 +30,9 @@
      </el-table-column>
      <el-table-column prop="UserName" label="企业名称" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else >{{scope.row.UserName}}</div>
          <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{ scope.row.UserName }}</div>
          <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{ scope.row.UserName }}</div>
          <div v-else>{{ scope.row.UserName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="WasteWaters" label="外排废水量（m³）" width="100px"></el-table-column>
@@ -46,7 +47,7 @@
      <el-table-column label="排放口检测统计状态">
        <el-table-column prop="normal" label="正常" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=2" >{{row.normal}}</u>
            <u v-if="$index!=2">{{ row.normal }}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
@@ -55,7 +56,7 @@
                        title="监测点明细表"
            >
              <refinery></refinery>
              <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
              <u slot="reference" style="color: #00ffff">{{ row.normal }}</u>
              <!--                       <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>-->
              <!--                       <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>-->
              <!--                   <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>-->
@@ -67,7 +68,7 @@
        <el-table-column prop="StopProduction" label="停产" width="60px"></el-table-column>
        <el-table-column prop="deficiency" label="缺失" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=1" >{{row.deficiency}}</u>
            <u v-if="$index!=1">{{ row.deficiency }}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
@@ -76,7 +77,7 @@
                        popper-class="popovers"
            >
              <MissingAlarm></MissingAlarm>
              <u slot="reference" style="color: #00ffff">{{row.deficiency}}</u>
              <u slot="reference" style="color: #00ffff">{{ row.deficiency }}</u>
            </el-popover>
          </template>
        </el-table-column>
@@ -92,6 +93,7 @@
import ChemicalWastewater from './componented/ChemicalWastewater'
import Refinery from '@components/table/components/componented/refinery'
import MissingAlarm from '@components/table/components/componented/MissingAlarm'

export default {
  name: 'SolidWaste',
  components: {
@@ -155,11 +157,16 @@
    }
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
    tableHeaderColor ({
      row,
      column,
      owIndex,
      columnIndex
    }) {
      // return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
    rowClass () {
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
@@ -183,17 +190,19 @@
}
</script>

<style scoped>
.popovers{
<style lang="less" scoped>
.popovers {
  width: auto !important;
  background-color: gray !important;
}
.popovers.el-popover{
  padding:0;

.popovers.el-popover {
  padding: 0;
}

.active {
  /*color: red;*/
  transform:rotate(90deg);
  transform: rotate(90deg);
}

</style>