iot-front-ui/src/components/business/asset/asset.vue

<template>
  <div style="padding-bottom: 15px">
    <div class="page-query-core">
      <Query
        :show="['company', 'time']"
        :query-data.sync="queryData"
        :reset="reset"
        :search="search"
        style="
          background: #fff;
          height: 60px;
          padding: 10px;
          border-radius: 5px;
          margin-bottom: 10px;
        "
      ></Query>
      <card :title="'核心指标'">
        <CoreData :data-list="coreData"></CoreData>
      </card>
    </div>

    <div style="margin-top: 15px">
      <a-row>
        <a-col :span="18">
          <div class="left ioc-card-content">
            <card :title="'资产分析'">
              <div class="dashboardPortrait-select">
                <a-checkable-tag
                  v-model="tagCheck.invest"
                  color="white"
                  class="dashboardPortrait-select-tag"
                  @change="handleTagSelect('invest')"
                >
                  <span class="dashboardPortrait-select-text">投资分析</span>
                </a-checkable-tag>
                <a-checkable-tag
                  v-model="tagCheck.year"
                  color="white"
                  class="dashboardPortrait-select-tag"
                  @change="handleTagSelect('year')"
                >
                  <span class="dashboardPortrait-select-text">资产年限</span>
                </a-checkable-tag>
              </div>

              <div class="dashboardPortrait-body" style="padding-bottom: 35px">
                <InvestDistributeChart
                  ref="investChart"
                  v-if="tagCheck.invest"
                  :height="450"
                />
                <InvestYearChart
                  ref="investChart"
                  v-if="tagCheck.year"
                  :height="450"
                />
              </div>
            </card>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="right ioc-card-content">
            <card :title="'资产占比排名'">
              <div style="padding: 0 12px">
                <AssetRankChart
                  ref="AssetRankChart"
                  :query-data="queryData"
                  :height="250"
                />
              </div>
            </card>
          </div>
          <div class="right ioc-card-content" :style="{ marginTop: '10px' }" style="height: 290px">
            <card :title="'报废与维修'">
              <div style="margin-left: 15px;color:#B2B2B2">
                共报废
                <span style="color: #4f4f4f">{{ scrapNum }}</span>
                件资产
              </div>
              <AssetMoneyRepairChart
                ref="AssetMoneyRepairChart"
                :total.sync="scrapNum"
                :query-data="queryData"
                :height="225"
              />
            </card>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import query from "@/components/common/query.vue";
import card from "@/components/common/card.vue";

import InvestDistributeChart from "@/components/dashboard/portrait/money/investDistributeChart.vue";
import InvestYearChart from "@/components/dashboard/portrait/money/investYearChart.vue";
import AssetRankChart from "@/components/business/asset/charts/assetRankChart.vue";
import AssetMoneyRepairChart from "@/components/business/asset/charts/assetMoneyRepairChart.vue";
import apiOperationMoney from "@/api/operation/apiOperationMoney";

export default {
  components: {
    query,
    card,
    InvestDistributeChart,
    InvestYearChart,
    AssetRankChart,
    AssetMoneyRepairChart,
  },
  data() {
    const listData = [];
    for (let i = 0; i < 100; i++) {
      listData.push({
        index: i + 1,
        name: "物理饭",
        department: "技术开发部门",
        time: "2023.02.03 00:00:00",
      });
    }
    return {
      queryData: {
        companyId: "0",
        timeRange: this.$util.dateUtil.getNearlyMonthRange(),
      },
      tagCheck: {
        invest: false,
        year: false,
      },
      scrapNum: 0,
      columns: [
        { title: "序号", dataIndex: "index", key: "1", width: 48 },
        { title: "姓名", dataIndex: "name", key: "2", width: 60 },
        { title: "部门", dataIndex: "department", key: "3", width: 80 },
        { title: "最后进入时间", dataIndex: "time", key: "4", width: 90 },
      ],
      listData: listData,
      coreData: [
        {
          title: "资产总额(亿元)",
          num: "",
          historyDesc: "同比",
          historyNum: "",
        },
        {
          title: "资产总数(项)",
          num: "0",
          historyDesc: "同比",
          historyNum: 0,
        },
        {
          title: "资产占比最高",
          num: "",
          historyDesc: "占比",
          historyNum: 0,
        },
        {
          title: "重点投资领域",
          num: "",
          historyDesc: "投资总额占比",
          historyNum: 0,
        },
        {
          type: 1,
          showStar: true,
          title: "值得关注",
          content: "",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.handleTagSelect("invest");
    });
  },
  methods: {
    init() {
      this.$store.loadingStore().loadingWithApi(this.getCoreData(), 2000);
    },
    handleTagSelect(item) {
      for (const key in this.tagCheck) {
        this.tagCheck[key] = false;
      }
      this.currCheck = item;
      this.tagCheck[item] = true;
    },
    reset() {},
    search(data) {
      this.$util.asyncPromise(
        this.getCoreData(),
        this.$refs.AssetMoneyRepairChart.getData(),
        this.$refs.investChart.getData(),
        this.$refs.AssetRankChart.getData()
      );
    },
    getCoreData() {
      return apiOperationMoney.getCoreData(this.queryData).then((res) => {
        this.coreData[0].num = res.list[0].value;
        this.coreData[0].historyNum = res.list[0].compare;
        this.coreData[1].num = res.list[1].value;
        this.coreData[1].historyNum = res.list[1].compare;
        this.coreData[2].num = res.list[2].value;
        this.coreData[2].historyNum = res.list[2].compare;
        this.coreData[3].num = res.list[3].value;
        this.coreData[3].historyNum = res.list[3].compare;
        this.coreData[4].content = res.worthAttention;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  margin-right: 6px;
  padding-bottom: 20px;
}
.right {
  margin-left: 6px;
}
.dashboardPortrait-select {
  padding: 8px 15px;
  .dashboardPortrait-select-tag {
    border: 1px solid #f0f1f2;
    border-radius: 12px;
    padding: 1px 12px;
    margin-right: 16px;
    cursor: pointer;
  }
  .ant-tag-checkable-checked {
    .dashboardPortrait-select-text {
      color: white;
    }
  }
  .dashboardPortrait-select-text {
    color: #b3b3b3;
  }
  .dashboardPortrait-body {
    padding: 8px 12px;
    height: 500px;
    background-color: #ffffff;
  }
}
</style>