epmet-work-pc-chengyang/src/views/modules/visual/heart/index.vue

<template>
  <div>
    <div class="m-sizer">
      <span>时间：</span>
      <el-date-picker
        v-model="monthId"
        type="month"
        :clearable="false"
        prefix-icon="el-icon-caret-bottom"
        placeholder="选择日期"
        value-format="yyyyMM"
      >
      </el-date-picker>
    </div>

    <div class="g-cpt">
      <div class="m-tb">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>公益达人</span>
          </div>

          <div class="tb">
            <cpt-tb
              :highlight-top3="true"
              :col-list="tb3.colList"
              :loading="tb3.loading"
              :header="tb3.header"
              :list="tb3.list"
            ></cpt-tb>
          </div>
        </cpt-card>
      </div>

      <div class="m-tb">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>党员先锋</span>
          </div>

          <div class="tb">
            <cpt-tb
              :highlight-top3="true"
              :col-list="tb2.colList"
              :loading="tb2.loading"
              :header="tb2.header"
              :list="tb2.list"
            ></cpt-tb>
          </div>
        </cpt-card>
      </div>

      <div class="m-tb">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>动力网格</span>
          </div>

          <div class="tb">
            <cpt-tb
              :highlight-top3="true"
              :col-list="tb1.colList"
              :loading="tb1.loading"
              :header="tb1.header"
              :list="tb1.list"
            ></cpt-tb>
          </div>
        </cpt-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import nextTick from "dai-js/tools/nextTick";
import dateFormat from "dai-js/tools/dateFormat";

export default {
  name: "heart",
  data() {
    return {
      agencyId: this.$store.state.user.agencyId,
      areaCode: "",

      monthId: dateFormat(
        new Date(
          new Date().getFullYear(),
          new Date().getMonth() - 1,
          new Date().getDate()
        ),
        "yyyyMM"
      ),

      // 先进网格/支部
      tb1: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "60%",
          },
          {
            align: "center",
            width: "30",
          },
        ],
        header: ["序号", "网格名称", "活力值"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },

      // 先进网格/支部
      tb2: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "20",
          },
        ],
        header: ["序号", "党员姓名", "所属网格", "积分总数"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },

      // 先进网格/支部
      tb3: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "center",
            width: "40%",
          },
          {
            align: "center",
            width: "20",
          },
        ],
        header: ["序号", "居民姓名", "所属网格", "积分总数"],
        list: [],
        srcList: [],
        currentIndex: 0,
      },
    };
  },

  props: {},

  computed: {},

  components: {
    cptCard,
    cptTb,
  },

  watch: {
    monthId() {
      this.getApiData();
    },
  },

  async mounted() {
    this.userId = this.uid;
    await nextTick(100);
    this.getApiData();
  },

  methods: {
    handleSearch() {},

    async getApiData() {
      //await this.getAgencyInfo();
      this.getTb1();
      this.getTb2();
      this.getTb3();
    },

    toUserInfo(uid) {
      this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
    },

    // 获取当前组织信息
    async getAgencyInfo() {
      const { data, code, msg } = await requestPost(
        "/data/report/screen/agency/agencydetail-multic",
        {
          agencyId: this.$store.state.user.agencyId,
        }
      );
      if (msg === "success" && code === 0) {
        this.agencyId = data.agencyId;
        this.areaCode = data.areaCode;
      }
    },

    //加载组织数据
    async getTb1() {
      const { agencyId, areaCode } = this;
      //const url = "/data/report/screen/index/advancedbranchrank";
      const url = "/data/report/screen/index/advancedbranchrank-shibei";
      let params = {
        agencyId,
        areaCode,
        monthId: this.monthId,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb1.loading = false;

      if (code === 0) {
        this.tb1.list = data.map((item) => {
          return [{ type: "index" }, item.name, item.scroe];
        });
        this.tb1.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTb2() {
      const { agencyId, areaCode } = this;
      const url = "/data/report/screen/user/partypointrank";
      let params = {
        orgId: agencyId,
        areaCode,
        monthId: this.monthId,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb2.loading = false;

      if (code === 0) {
        this.tb2.list = data.map((item) => {
          return [
            { type: "index" },
            item.userName,
            item.gridName,
            item.pointTotal,
          ];
        });
        this.tb2.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTb3() {
      const { agencyId, areaCode } = this;
      const url = "/data/report/screen/user/userpointrank/withoutpartymember";
      let params = {
        orgId: agencyId,
        areaCode,
        monthId: this.monthId,
        orgType: "agency",
        topNum: 50,
      };

      const { data, code, msg } = await requestPost(url, params);
      this.tb3.loading = false;

      if (code === 0) {
        this.tb3.list = data.map((item) => {
          return [
            { type: "index" },
            item.userName,
            item.gridName,
            //item.pointTotal,
            item.score,
          ];
        });
        this.tb3.srcList = data;
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/visual/heart.scss" scoped></style>