clsd/admin-ui/src/views/dashboard/yrows.vue

<template>
  <div class="yrows">
    <div v-if="row == '结算单'">
      <div class="yr">
        <div class="rout" style="padding-left: 0px">
          <div class="rint" style="background-color: #faf7fe">
            <div class="icon" style="color: #8642df">&#xe611;</div>
            <div class="rcon">
              <div class="rtt">结算人数（人）</div>
              <div class="rdesc">{{ cdata.peoples || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout">
          <div class="rint" style="background-color: #fffcf7">
            <div class="icon" style="color: #fab22e">&#xe818;</div>
            <div class="rcon">
              <div class="rtt">总金额（元）</div>
              <div class="rdesc">{{ cdata.money || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout">
          <div class="rint" style="background-color: #f7fbff">
            <div class="icon" style="color: #489afd">&#xe645;</div>
            <div class="rcon">
              <div class="rtt">发放业务费（元）</div>
              <div class="rdesc">{{ cdata.realMoney || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fff7f9">
            <div class="icon" style="color: #fa5376">&#xe70f;</div>
            <div class="rcon">
              <div class="rtt">总服务费（元）</div>
              <div class="rdesc">{{ cdata.serviceMoney || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="row == '企业概览'">
      <div class="yr" style="width: 50%">
        <div class="rout">
          <div class="rint" style="background-color: #f7fbff">
            <div class="icon" style="color: #489afd">&#xe60d;</div>
            <div class="rcon">
              <div class="rtt">员工总数</div>
              <div class="rdesc">{{ cdata.users || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fffcf7">
            <div class="icon" style="color: #fab22e">&#xe818;</div>
            <div class="rcon">
              <div class="rtt">项目总数</div>
              <div class="rdesc">{{ cdata.project || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout">
          <div class="rint" style="background-color: #faf7fe">
            <div class="icon" style="color: #8642df">&#xe611;</div>
            <div class="rcon">
              <div class="rtt">关联用户</div>
              <div class="rdesc">{{ cdata.relate || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="yr" style="width: 50%">
        <div class="rout" style="padding-right: 0px">
          <div class="rint" style="background-color: #fff7f9">
            <div class="icon" style="color: #fa5376">&#xe604;</div>
            <div class="rcon">
              <div class="rtt">接包总数</div>
              <div class="rdesc">{{ cdata.packages || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="row == '快捷菜单'">
      <div class="yr" style="width: 20%" v-for="(item, index) in menu" :key="item.id" v-hasPermi="[item.hasPermi]">
        <router-link :to="item.url">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" :style="{ float: 'none', color: item.color }" v-html="item.icon">&#xe60d;</span>
              <div class="ctt">{{ item.name }}</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="yr" style="width: 20%">
        <router-link to="/notification">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" style="float: none; color: #2196f3">&#xe6b0;</span>
              <div class="ctt">通知消息</div>
            </div>
          </div>
        </router-link>
      </div>
      <div class="yr" style="width: 20%">
        <router-link to="/notice">
          <div class="rout">
            <div class="rint" style="text-align: center; cursor: pointer">
              <span class="icon" style="float: none; color: #ff5722">&#xe6d5;</span>
              <div class="ctt">问题反馈</div>
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: String
    },
    cdata: {
      type: Object
    }
  },
  data() {
    return {
      menu: [
        {
          icon: '&#xe818;',
          color: '#fab22e',
          name: '项目管理',
          url: '/project',
          hasPermi: 'work:project:list'
        },
        {
          icon: '&#xe609;',
          color: '#1890ff',
          name: '制单管理',
          url: '/statement/make',
          hasPermi: 'work:statement:make'
        },
        {
          icon: '&#xe627;',
          color: '#9C27B0',
          name: '结算单管理',
          url: '/statement/manage',
          hasPermi: 'work:statement:manage'
        },
        {
          icon: '&#xe625;',
          color: '#3F51B5',
          name: '结算单审核',
          url: '/statement/audit',
          hasPermi: 'work:statement:audit'
        },
        {
          icon: '&#xe645;',
          color: '#FF9800',
          name: '发放业务费',
          url: '/statement/give',
          hasPermi: 'work:statement:give'
        },
        {
          icon: '&#xe623;',
          color: '#607D8B',
          name: '关联用户',
          url: '/relate',
          hasPermi: 'work:relate:list'
        },
        {
          icon: '&#xe60d;',
          color: '#1890ff',
          name: '员工管理',
          url: '/system/user',
          hasPermi: 'system:user:list'
        },
        {
          icon: '&#xe60b;',
          color: '#FFC107',
          name: '角色管理',
          url: '/system/role',
          hasPermi: 'system:role:list'
        },
        {
          icon: '&#xe62c;',
          color: '#9E9E9E',
          name: '操作日志',
          url: '/system/operlog',
          hasPermi: 'monitor:operlog:list'
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.yrows {
  margin-top: 10px;
  .yr {
    float: left;
    width: 25%;
    .rout {
      padding: 6px;
      .rint {
        padding: 10px;
        border-radius: 5px;
        overflow: hidden;
        .icon {
          float: left;
          font-size: 30px;
          background-color: white;
          border-radius: 50%;
          padding: 10px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .rcon {
          float: left;
          padding-left: 12px;
          .rtt {
            color: #8c8c8c;
            font-size: 14px;
          }
          .rdesc {
            font-weight: bold;
            padding-top: 7px;
          }
        }
        .ctt {
          color: #8c8c8c;
          font-size: 14px;
          padding-top: 18px;
        }
      }
    }
  }
}
</style>