zhgkpt-datav/app/src/views/Risk/components/Investigation.vue

<template >
    <div class="maintenance-supervision">
      <div class="maintenance-supervision_header">
        <button-group @change="change">
          <button-group-item >
            消防设施
          </button-group-item>
          <button-group-item >
            生命通道
          </button-group-item>
          <button-group-item >
            用电用气
          </button-group-item>
          <button-group-item >
            消防管理
          </button-group-item>
        </button-group>
      </div>
      <div >
        <div class="row header">
          <span class="time">排查指标</span>
          <span class="person">正常数</span>
          <span class="result">异常数</span>
        </div>
        <ul class="item">
            <li class="row" >
              <span class="time">整体情况</span>
              <span class="person">{{ totalNumber.zcs  }}</span>
              <span class="result">{{ totalNumber.ycs  }}</span>
            </li>
        </ul>
        <VueSeamlessScroll
          :data="list[checked]"
          :class-option="classOption"
          class="warp"
          v-if="reload"
        >
          <ul class="item">
            <li class="row" v-for="(item, index) in list[checked]" :key="index">
                <span class="time">{{ item.yhxmxl }}</span>
                <span class="person">{{ item.zcs }}</span>
                <span class="result" >{{ item.ycs }}</span
                >
              </li>
            </ul>
          </VueSeamlessScroll>
      </div>
    </div>
  </template>
  <script>
  import VueSeamlessScroll from "vue-seamless-scroll";
  import { pctj } from '@/api/risk'
  
  export default {
    name: 'MaintenanceSupervision',
    props: {
      qx: String
    },
    data() {
      return {
        list: [
          [],
          [],
          [],
          []
        ],
        checked: 0,
        reload: true
      }
    },
    components: {
      VueSeamlessScroll
    },
    computed: {
      classOption() {
        return {
          singleHeight: 36
        };
      },
      totalNumber() {
        const data = this.list[this.checked]
        return data.reduce((item, cur) => {
          return {
            zcs: item.zcs + cur.zcs,
            ycs: item.ycs + cur.ycs
          }
        }, {zcs: 0, ycs: 0})
      }
    },
    watch: {
      qx:{
        handler(){
          this.loadData()
        },
        immediate: true
      }
    },
    methods: {
      change(idx) {
        this.reload = false
        this.checked = idx
        setTimeout(() => {
          this.reload = true
        }, 200)
      },
      loadData() {
        this.reload = false
        pctj({
          pageNum: 1,
          pageSize: 100,
          qx: (this.qx === "重庆市" ? "" : this.qx)
        }).then(res => {
          const temp = res.data.rows
          this.list = [
            temp.filter(item => item.yhxmdl === '消防设施'),
            temp.filter(item => item.yhxmdl === '生命通道'),
            temp.filter(item => item.yhxmdl === '用电用气'),
            temp.filter(item => item.yhxmdl === '消防管理')
          ]
            this.reload = true
        })
      }
    }
  }
  </script>
  
  <style scoped lang='less'>
  .maintenance-supervision {
    padding: 10px 10px 0px 10px;
    .maintenance-supervision_header {
      border-bottom: 1px solid #154956;
      padding-bottom: 2px;
    }
    .warp {
    height: 258px;
    margin: 0 auto;
    overflow: hidden;
      .item {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        cursor: pointer;
      }
    }
  
  .header {
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    margin-top: 15px;
    margin-bottom: 6px;
    span {
      color: #98DFE9 !important;
    }
    border: none !important;
  }
  
  .row,
  li,
  a {
    display: block;
    height: 36px;
    line-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-size: 12px;
    color: #D2F3F8;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px dashed #516B7A;
    .time,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      // 超出隐藏
      display: inline-block;
      overflow: hidden ;
      text-overflow: ellipsis ;
      white-space:nowrap;
    }

    .result {
      color: #FF4F4F;
    }
  }
  }
  </style>