castgroup_bigscreen/src/components/numerical.vue

<!--
 * @LastEditors: gcz
-->
<template>
  <div class="numerical" ref="numericalRef">
    <div class="ntitle">
      <span v-if="$store.state.addr.selectProject.ProjectID && pageName == 'forest'">该项目在</span>
      <span v-if="$store.state.addr.selectProject.ProjectID && pageName == 'treeSpecies'">该项目在</span>
      {{ $store.state.addr.selectAddr }}{{ ntitle }}
    </div>
    <!-- <div class="ntitle">
            <span v-if="$store.state.addr.mapLevel=='province'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='city'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='district'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
            <span v-if="$store.state.addr.mapLevel=='street'">{{$store.state.addr.selectAddr}}{{ntitle}}</span>
    </div>-->
    <!-- <div class="addr">{{$store.state.addr.selectAddr}}</div> -->
    <div class="item-wrap">
      <div class="inner u-flex u-flex-wrap">
        <!-- @mouseenter="showDetails(item)"
        @mouseleave="unShowDetails" -->
        <div class="numerical-item" v-for="(item, index) in data" @click="showDetails(item)" :key="item.name + index">
          <div class="cell name">{{ item.name }}</div>
          <span class="cell number">{{ item.number }}</span>
          <span class="cell unit">{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <div class="detail-wrap" @mouseenter="isShowDetails = true" @mouseleave="isShowDetails = false" v-show="isShowDetails"
      ref="detailRef">
      <el-table :key="hotKey" :data="detailsData" empty-text="该区域暂无数据" style="width: 100%;overflow-y: auto;"
        height="240" @row-click="detailClick">
        <el-table-column :label="item.title" :prop="item.value" v-for="(item, index) in headerList" :key="index"
          align="center">
          <template slot-scope="scope">{{ scope.row[item.value] || '-' }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom-info" v-if="showBottomInfo && pageName == 'forest'">
      截止目前，在{{ $store.state.addr.selectAddr }}内，
      {{ bottomInfo.courseName }}项目有
      {{ bottomInfo.smallClassCount }}个小班，
      累计占地面积{{ bottomInfo.landArea }}亩，
      累计蓄积量{{ bottomInfo.smallClassStock }}平方米，
      其中
      <span v-for="(tree, index) in bottomInfo.treeList" :key="index">
        {{ tree.name }}{{ tree.value }}株<i v-if="index <= bottomInfo.length">,</i><i v-else>。</i>
      </span>
      <!-- xx树累计xxxx株，xx树累计xxxxx株。 -->
    </div>
  </div>
</template>

<script>
import {
  forestFarmDetail,
  treeListDetail,
  baseItemDetail
} from '@/service/index';
export default {
  name: '',
  props: {
    data: {
      type: Array,
      default: null
    },
    ntitle: {
      type: String,
      default: '数据概况'
    },
    pageName: {
      type: String,
      default: ''
    }
  },
  components: {},
  data() {
    return {
      isShowDetails: false,
      headerList: [],
      detailsData: [],
      hotKey: Date.now(),
      showBottomInfo: false,
      bottomInfo: {},
      forestDetailTreeList: [],
    };
  },
  watch: {
    isShowDetails: {
      handler: function (n, o) {
        if (!n) {
          this.showBottomInfo = false;
          this.headerList = []
        }
      },
      // deep: true,
      immediate: true
    }
  },
  created() {
    // console.log('data',this.data);
  },
  mounted() {
    document.addEventListener('click', this.outClick);
  },
  destroyed() {
    document.removeEventListener('click', this.outClick);
  },
  methods: {
    showDetails(item) {
      // console.log('pageName',this.pageName);
      let param = {
        cityId: this.$store.state.addr.selectCity.areaId,
        countyId: this.$store.state.addr.selectDistrict.areaId,
        townId: this.$store.state.addr.selectStreet.areaId
      };

      //排除触发字段
      let excludeArr = ['优势树种'];
      if (excludeArr.includes(item.name)) {
        this.isShowDetails = false;
        return;
      }
      let page = {
        // forest: this.getForestData,
        treeSpecies: this.getTreeSpeciesData,
        economics: this.getEconomicsData
      };
      page[this.pageName] && page[this.pageName](param);
    },
    unShowDetails() {
      this.isShowDetails = false;
    },
    getForestData(param) {
      this.isShowDetails = true;
      forestFarmDetail(param)
        .then((res) => {
          let resData = res.rows;
          this.forestDetailTreeList = resData.map((item) => {
            return item.treeList
          });
          // console.log('this.forestDetailTreeList',this.forestDetailTreeList);
          this.detailsData = resData;
          console.log('forestFarmDetail res', this.detailsData);

          resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
        })
        .catch((err) => {
          console.log('forestFarmDetail err', err);
        });
    },
    getTreeSpeciesData(param) {
      this.isShowDetails = true;
      treeListDetail(param)
        .then((res) => {
          let resData = res.data;
          this.detailsData = resData;
          // console.log('treeListDetail res',this.detailsData);
          resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
        })
        .catch((err) => {
          console.log('treeListDetail err', err);
        });
    },
    getEconomicsData(param) {
      this.isShowDetails = true;
      baseItemDetail(param)
        .then((res) => {
          let resData = res.rows;
          this.detailsData = resData;
          console.log('baseItemDetail res', this.detailsData);
          resData.length > 0 ? this.getHeaderList(resData) : this.headerList = [];
        })
        .catch((err) => {
          console.log('baseItemDetail err', err);
        });
    },
    getHeaderList(data) {
      let data1 = Object.keys(data[0]).map((key) => {
        console.log('pageName', this.pageName);
        let titles = {};
        if (this.pageName == 'forest') {
          titles = {
            courseName: '项目名称',
            smallClassStock: '蓄积量(m³)',
            landArea: '占地面积(亩)',
            smallClassCount: '小班数量'
          };
        } else if (this.pageName == 'treeSpecies') {
          titles = {
            treeName: '树种名称',
            treeStock: '树种蓄积(m³)',
            treeCount: '树种株数(株)'
          };
        } else if (this.pageName == 'economics') {
          titles = {
            baseName: '基地名称',
            baseNumber: '基地数量',
            baseArea: '基地面积(亩)',
            corpNumber: '作物数量',
            corpName: '作物名称',
            outputValue: '预估产值(万元)'
          };
        }

        return { title: titles[key], value: key };
      });

      let newData = JSON.parse(JSON.stringify(data1));
      console.log('this.pageName', this.pageName);
      console.log('newData', newData);
      if (this.pageName == 'economics') {
        newData.splice(1, 1); //删除基地数量
        newData.splice(2, 1); //删除作物数量
      } else if (this.pageName == 'forest') {
        newData.splice(4, 1); //删除treeList
      }

      this.headerList = newData;
      // console.log('this.headerList',this.headerList);
      this.hotKey = Date.now();
    },
    outClick(e) {
      let detailRef = this.$refs.numericalRef;
      if (!detailRef.contains(e.target) && this.isShowDetails) {
        this.isShowDetails = false;
      }
    },
    detailClick(row) {
      this.showBottomInfo = true;
      this.bottomInfo = row;
      console.log('detailClick row', row);

    }
  }
};
</script>

<style lang='scss' scoped>
// @import url('https://fonts.font.im/css?family=Rubik');
.numerical {

  // box-sizing: border-box;
  // margin-bottom: 2vh;
  // border-radius: 10px;
  // padding: 20px 24px;
  // border: 1px solid var(--main-color);
  .item-wrap {
    height: calc(100% - 48px);
    display: flex;
    align-items: center;

    .inner {
      width: 100%;
    }

    .numerical-item {
      padding:15px;
      box-sizing: border-box;
      width: 43%;
      margin: 5px;
      text-align: center;
      box-shadow: inset 0px 0px 31px 1px rgba(0, 250, 253, 0.4);
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid rgba(0, 250, 253, 0.33);

      .name {
        font-size: 14px;
        color: #a6b7bf;
        margin-bottom: 5px;
      }

      .number {
        color: var(--main-color);
        font-size: 24px;
        margin-right: 5px;
        font-family: 'Rubik', sans-serif;
      }

      .unit {
        font-size: 14px;
        color: var(--main-color);
      }
    }
  }

  .detail-wrap {

    position: absolute;
    top: 0;
    // right: -135%;
    // width: 135%;
    right: -480px;
    width: 480px;
    // height: 220px;
    z-index: 99;
    overflow: hidden;
    border-radius: 10px;

    // border: 1px solid rgb(2, 238, 255);
    ::-webkit-scrollbar {
      width: 0.3rem;
      height: 0.625rem;
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba($color: rgba(4, 175, 206, 0.884), $alpha: 0.6);
      border-radius: 2em;
    }

    /deep/ .el-table {
      // background: transparent;
      background: url('../assets/img/hoverbac.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    /deep/ .el-table th {
      background-color: transparent !important;
      color: #fff;
      height: 51px;
      line-height: 51px;
      padding: 0;
    }

    /deep/ .el-table tr {
      background-color: transparent !important;
      color: #00FAFD;

      &:hover {
        cursor: pointer;
        background: rgba(8, 238, 255, .1) !important;
      }
    }

    /deep/ .el-table--enable-row-transition .el-table__body td,
    .el-table .cell {
      background-color: transparent;
    }

    /deep/ .el-table::before {
      //去除底部白线
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }

    /deep/ .el-table td.el-table__cell,
    /deep/ .el-table th.el-table__cell.is-leaf {
      border-bottom: none;
    }
  }

}

.bottom-info {
  position: fixed;
  box-sizing: border-box;
  left: 50%;
  bottom: 35px;
  width: 30vw;
  padding: 24px;
  transform: translateX(-15vw);
  background: url(../assets/img/bottom-info-bg.png) no-repeat;
  background-size: 100% 100%;
  line-height: 24px;
  font-size: 14px;
  color: #FFAA00;
  text-align: left;
}

@media only screen and (max-width: 1280px) {

  //概况
  .numerical {
    .item-wrap {
      .numerical-item {
        padding: 0 0 15px 5px;

        .name {
          font-size: 16px;
        }

        .number {
          font-size: 24px;
        }

        .unit {
          font-size: 16px;
        }
      }
    }
  }
}
</style>