|
|
@@ -1,4 +1,128 @@
|
|
|
<template>
|
|
|
-11111
|
|
|
+ <el-scrollbar class="hc-main-scrollbar">
|
|
|
+ <div class="hc-main-row">
|
|
|
+ <el-row :gutter="14">
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="purple1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-content">
|
|
|
+ <div class="title">总支出</div>
|
|
|
+ <div class="num-box">
|
|
|
+ <span class="num">1200</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-sub-icon">
|
|
|
+ <img class="img" :src="HeImg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="blue1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-content">
|
|
|
+ <div class="title">总合同额</div>
|
|
|
+ <div class="num-box">
|
|
|
+ <span class="num">560</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-sub-icon">
|
|
|
+ <img class="img" :src="ShouImg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="red1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-content">
|
|
|
+ <div class="title">总回款收入</div>
|
|
|
+ <div class="num-box">
|
|
|
+ <span class="num">90</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-sub-icon">
|
|
|
+ <img class="img" :src="ZhiImg" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <HcGradientCard color="purple1">
|
|
|
+ <div class="hc-card-item-sub">
|
|
|
+ <div class="item-sub-content">
|
|
|
+ <div class="title">总盈亏</div>
|
|
|
+ <div class="num-box">
|
|
|
+ <span class="num">125</span>
|
|
|
+ <span class="text">万</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-sub-icon">
|
|
|
+ <img class="img" :src="Zhi1Img" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </HcGradientCard>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <HcCardItem ui="hac-card-item mt-4" >
|
|
|
+ <template #header>
|
|
|
+ <div class="hac-card-title">统计</div>
|
|
|
+ </template>
|
|
|
+ <div style="position: relative;height:600px;">
|
|
|
+ <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
|
|
|
+ <template #tab-image>
|
|
|
+ <div style="position: relative; height: 100%">
|
|
|
+ <HcTable :column="tableColumn" :datas="tableData"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template #tab-excel>
|
|
|
+ <div style="position: relative; height: 100%">
|
|
|
+ <HcTable :column="tableColumn" :datas="tableData"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </HcTabsSimple>
|
|
|
+ </div>
|
|
|
+ </HcCardItem>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
</template>
|
|
|
-<script setup></script>
|
|
|
+<script setup>
|
|
|
+import QImg from "~src/assets/images/q.png";
|
|
|
+import HeImg from "~src/assets/images/he.png";
|
|
|
+import ShouImg from "~src/assets/images/shou.png";
|
|
|
+import ZhiImg from "~src/assets/images/zhi.png";
|
|
|
+import Zhi1Img from "~src/assets/images/zhi1.png";
|
|
|
+import {ref} from "vue";
|
|
|
+//类型处理
|
|
|
+const tabsKey = ref('image')
|
|
|
+const tabsData = ref([
|
|
|
+ {icon: 'bar-chart-box', label: '列表统计', key: 'image'},
|
|
|
+ {icon: 'image', label: '图形统计', key: 'excel'},
|
|
|
+])
|
|
|
+
|
|
|
+const tabsClick = (key) => {
|
|
|
+ tabsKey.value = key
|
|
|
+}
|
|
|
+const tableColumn = [
|
|
|
+ {key: 'name', name: '名称'},
|
|
|
+ {key: 'text', name: '文本'},
|
|
|
+ {key: 'color', name: '颜色'}
|
|
|
+]
|
|
|
+const tableData = ref([
|
|
|
+ {name: '名称1', text: '文本1', color: 'red'},
|
|
|
+ {name: '名称2', text: '文本2', color: 'blue'},
|
|
|
+ {name: '名称3', text: '文本3', color: '无'}
|
|
|
+])
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "~src/styles/static/project.scss";
|
|
|
+</style>
|
