|
|
@@ -1,433 +1,193 @@
|
|
|
<template>
|
|
|
- <!--青岛鑫动力-->
|
|
|
- <div>
|
|
|
- <basic-container>
|
|
|
- <div class="echattsBox">
|
|
|
- <div style="display: flex;justify-content: flex-end;">
|
|
|
- <div>
|
|
|
- <el-date-picker
|
|
|
- v-model="annual4"
|
|
|
- type="year"
|
|
|
- size="small"
|
|
|
- placeholder="选择年"
|
|
|
- value-format="yyyy"
|
|
|
- style="margin-right:10px;margin-bottom: -20px"
|
|
|
- @change="commoDity3Datafun"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <dic-select
|
|
|
- v-model="customerName"
|
|
|
- placeholder="租户"
|
|
|
- key="id"
|
|
|
- label="customerName"
|
|
|
- url="/blade-system/tenant/getFundingCustomerList "
|
|
|
- :filterable="true"
|
|
|
- :clearable="false"
|
|
|
- dataName="customerName"
|
|
|
- @selectChange="dicChange('customerName', $event)"
|
|
|
- ></dic-select>
|
|
|
- </div>
|
|
|
+ <div class="page-content">
|
|
|
+
|
|
|
+ <!-- 1. 顶部筛选区 (蓝色边框) -->
|
|
|
+ <div class="filter-box">
|
|
|
+ <el-form :inline="true" :model="query" size="medium" class="filter-form">
|
|
|
+ <el-form-item>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="query.yearMonth"
|
|
|
+ type="month"
|
|
|
+ style="width: 200px"
|
|
|
+ @change="yearMonthChange"
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ placeholder="月份">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-select v-model="query.region" placeholder="区域" style="width: 200px">
|
|
|
+ <el-option label="华东大区" value="east"></el-option>
|
|
|
+ <el-option label="华北大区" value="north"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- <div style="margin: 20px 0;">
|
|
|
- <div style="display: flex;align-items: center;justify-content: space-around">
|
|
|
- <div style="width: 100%;">
|
|
|
- <div class="bottomFlex" style="justify-content: space-around">
|
|
|
- <div>
|
|
|
- <div style="color: #81B337">
|
|
|
- <span>订单金额:</span>
|
|
|
- <span class="weightnum">¥{{ overviewForm.totalMoney || "0.00" }}元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div style="color: #6BBCD1">
|
|
|
- <span>配额:</span>
|
|
|
- <span class="weightnum">¥{{ overviewForm.fundingAmount || "0.00" }}元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div style="color: #808bbd">
|
|
|
- <span>保证金:</span>
|
|
|
- <span class="weightnum">¥{{ overviewForm.bondAmount || "0.00" }}元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div style="color: #b3373f">
|
|
|
- <span>还款:</span>
|
|
|
- <span class="weightnum">¥{{ overviewForm.repayment || "0.00" }}元</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="color: #8dab14">
|
|
|
- <span>允许提货金额:</span>
|
|
|
- <span>¥{{ overviewForm.amount || "0.00" }}元</span>
|
|
|
- </div>
|
|
|
- <div style="color: #f09d68">
|
|
|
- <span>资金占用:</span>
|
|
|
- <span>¥{{ overviewForm.interest || "0.00" }}元</span>
|
|
|
+
|
|
|
+ <!-- 2. 卡片列表区 -->
|
|
|
+ <!-- gutter="20" 控制左右间距 -->
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col
|
|
|
+ v-for="(item, index) in baseList"
|
|
|
+ :key="index"
|
|
|
+ :xs="24" :sm="12" :md="12" :lg="6" :xl="6"
|
|
|
+ >
|
|
|
+ <!-- 卡片主体 -->
|
|
|
+ <div class="data-card">
|
|
|
+ <div class="card-header">
|
|
|
+ {{ item.company }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="data-box">
|
|
|
+ <div class="label">门店数量</div>
|
|
|
+ <div class="value">
|
|
|
+ <span class="num">{{ item.storeCount }}</span>
|
|
|
+ <span class="unit">家</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-box">
|
|
|
+ <div class="label">轮胎月销</div>
|
|
|
+ <div class="value">
|
|
|
+ <span class="num">{{ item.sales }}</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="card-footer">
|
|
|
+ <div class="info">当前库存轮胎：{{ item.inventory }}条</div>
|
|
|
+ <div class="info">销售总额(月)：{{ !item.amount ? 0 : item.amount }}元</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="height:78vh" id="commoDity3"></div>
|
|
|
- </div>
|
|
|
- </basic-container>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import dicSelect from "@/components/dicSelect/main";
|
|
|
-import indexCard from "@/views/wel/components/card.vue";
|
|
|
-import { columnarRz, realTimeOverview } from "@/api/overviewAllocation/index";
|
|
|
-import { getYearDate } from "@/util/date";
|
|
|
-import { getParamservice } from "@/api/tirePartsMall/purchasingManagement/warehouseEntryOrder";
|
|
|
-import "@/assets/icon/homeicon/iconfont.css";
|
|
|
+import { capitalSummary } from "@/api/erp/allocation";
|
|
|
+
|
|
|
export default {
|
|
|
- components: { indexCard, dicSelect },
|
|
|
- props: {
|
|
|
- sysType: Number
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tenantId: "883868",
|
|
|
- customerName: "黄岛鑫动力",
|
|
|
- annual4: "", // echatts 时间筛选
|
|
|
- amountList2: [], // 金额
|
|
|
- numberList2: [], // 数量
|
|
|
- amountList3: [], // 金额
|
|
|
- numberList3: [], // 数量
|
|
|
- primaryFundingAmount3: [],
|
|
|
- search: {
|
|
|
- dateList: [],
|
|
|
- sort: 1
|
|
|
- }, // 表格 筛选
|
|
|
- dingdanzhuangtai: [], // 订单状态
|
|
|
- orderStatusList: [], // 支付状态
|
|
|
- saberUserInfo: {}, // 当前登录人数据
|
|
|
- overviewForm: {},
|
|
|
- inShow: false
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.annual4 = getYearDate().toString(); // 获取当前时间
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.commoDity3Datafun();
|
|
|
- realTimeOverview({ year: Number(this.annual4), tenantId: this.tenantId }).then(res => {
|
|
|
- this.overviewForm = res.data.data;
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- dicChange(name, row) {
|
|
|
- if (name == "customerName") {
|
|
|
- this.tenantId = row.customerCode;
|
|
|
- this.commoDity3Datafun();
|
|
|
- }
|
|
|
- },
|
|
|
- // 排序切换
|
|
|
- sortfun() {
|
|
|
- if (this.search.sort == 1) {
|
|
|
- this.search.sort = 2;
|
|
|
- } else {
|
|
|
- this.search.sort = 1;
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击跳转
|
|
|
- Jumpfun(row) {
|
|
|
- if (row.type == "FHGD") {
|
|
|
- this.$router.push({
|
|
|
- path: "/tirePartsMall/salesManagement/outboundWorkOrder/index",
|
|
|
- query: { id: row.id }
|
|
|
- });
|
|
|
- } else if (row.type == "XS") {
|
|
|
- this.$router.push({
|
|
|
- path: "/tirePartsMall/salesManagement/saleOrder/index",
|
|
|
- query: { jumpId: row.id }
|
|
|
- });
|
|
|
- } else if (row.type == "FHRW") {
|
|
|
- this.$router.push({
|
|
|
- path: "/tirePartsMall/salesManagement/outboundTask/index"
|
|
|
- });
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ yearMonth: '',
|
|
|
+ region: ""
|
|
|
+ },
|
|
|
+ baseList: Array(8).fill({
|
|
|
+ company: "青岛鑫动力轮胎有限公司",
|
|
|
+ storeCount: 486,
|
|
|
+ sales: 1235,
|
|
|
+ inventory: 2800,
|
|
|
+ amount: 324
|
|
|
+ })
|
|
|
+ };
|
|
|
},
|
|
|
- // 获取echarts 表的数据
|
|
|
- commoDity3Datafun() {
|
|
|
- columnarRz({
|
|
|
- year: Number(this.annual4),
|
|
|
- tenantId: this.tenantId
|
|
|
- }).then(res => {
|
|
|
- this.amountList3 = res.data.data.amount;
|
|
|
- this.numberList3 = res.data.data.number;
|
|
|
- this.primaryFundingAmount3 = res.data.data.primaryFundingAmount;
|
|
|
- this.commoDity3();
|
|
|
- realTimeOverview({ year: Number(this.annual4), tenantId: this.tenantId }).then(res => {
|
|
|
- this.overviewForm = res.data.data;
|
|
|
- });
|
|
|
- });
|
|
|
+ created() {
|
|
|
+ let nowDate = new Date()
|
|
|
+ this.query.yearMonth = nowDate.getFullYear() + '-' + (nowDate.getMonth() + 1)
|
|
|
+ this.getBaseData();
|
|
|
},
|
|
|
- commoDity3() {
|
|
|
- // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
|
|
|
- let myChart = this.$echarts.init(document.getElementById("commoDity3"));
|
|
|
- // 绘制图表
|
|
|
- myChart.setOption({
|
|
|
- color: ["#5266bc", "#EE6666", "#98c46d"],
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "cross",
|
|
|
- label: {
|
|
|
- precision: "0" // 设备y轴指示线保留整数 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。
|
|
|
- },
|
|
|
- crossStyle: {
|
|
|
- color: "#999"
|
|
|
- }
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ yearMonthChange(val) {
|
|
|
+ console.info("val---", val);
|
|
|
+ this.getBaseData();
|
|
|
},
|
|
|
- toolbox: {},
|
|
|
- legend: {
|
|
|
- data: ["订单数量", "订单金额", "配额"]
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|
|
- axisPointer: {
|
|
|
- type: "shadow"
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- left: "10%",
|
|
|
- right: "10%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "订单数量(条)",
|
|
|
- position: "left",
|
|
|
- min: 0,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#5266bc" //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}"
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "订单金额(元)",
|
|
|
- position: "right",
|
|
|
- min: 0,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#EE6666" //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}"
|
|
|
- // textStyle: {
|
|
|
- // color: "#000",//Y轴内容文字颜色
|
|
|
- // },
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "配额(元)",
|
|
|
- position: "right",
|
|
|
- offset: 80,
|
|
|
- min: 0,
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: "#98c46d" //y轴线的颜色（若只设置了y轴线的颜色，未设置y轴文字的颜色，则y轴文字会默认跟设置的y轴线颜色一致）
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}"
|
|
|
- // textStyle: {
|
|
|
- // color: "#000",//Y轴内容文字颜色
|
|
|
- // },
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: "订单数量",
|
|
|
- type: "bar",
|
|
|
- yAxisIndex: 0,
|
|
|
- tooltip: {
|
|
|
- valueFormatter: function(value) {
|
|
|
- return value + " 条";
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.numberList3
|
|
|
- },
|
|
|
- {
|
|
|
- name: "订单金额",
|
|
|
- type: "bar",
|
|
|
- yAxisIndex: 1,
|
|
|
- tooltip: {
|
|
|
- valueFormatter: function(value) {
|
|
|
- return value + " 元";
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.amountList3
|
|
|
- },
|
|
|
- {
|
|
|
- name: "配额",
|
|
|
- type: "bar",
|
|
|
- yAxisIndex: 2,
|
|
|
- tooltip: {
|
|
|
- valueFormatter: function(value) {
|
|
|
- return value + " 元";
|
|
|
- }
|
|
|
- },
|
|
|
- data: this.primaryFundingAmount3
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
+ getBaseData() {
|
|
|
+ capitalSummary(this.query).then(res => {
|
|
|
+ this.baseList = res.data.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.xindongpowerBox {
|
|
|
- box-sizing: border-box;
|
|
|
+.page-content {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f7fa; /* 确保有背景色，不然看不出白色卡片的间隔 */
|
|
|
+ min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
-.statisticsFlex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .statisticsBox {
|
|
|
- flex: 1;
|
|
|
+.filter-box {
|
|
|
background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 10px 30px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-right: 20px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .position {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 20px;
|
|
|
+ border: 1px solid #409EFF;
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+ margin-bottom: 30px; /* 筛选框和下方卡片的间距 */
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-right: 40px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .statisticsTop {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+/* --- 卡片样式核心 --- */
|
|
|
+.data-card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px 20px;
|
|
|
|
|
|
- .statisticsTop_ioc {
|
|
|
- //background: red;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
+ /* 【这里是关键】控制卡片换行后的上下间距 */
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .statisticsTop_text {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 300;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
|
- .statisticsTop_amount {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
+ /* 鼠标悬停效果 */
|
|
|
+ &:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12);
|
|
|
}
|
|
|
|
|
|
- .statisticsBottom {
|
|
|
- color: #1e9fff;
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
+ .card-header {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 25px;
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-.quickJumpBox {
|
|
|
- margin-top: 10px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .card-content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .data-box {
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
+ .value {
|
|
|
+ color: #409EFF;
|
|
|
|
|
|
- &-icon {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- margin: 1.5vh 1vw 0vh 1vw;
|
|
|
+ .num {
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ }
|
|
|
|
|
|
- span {
|
|
|
- margin-top: 0.2vh;
|
|
|
- }
|
|
|
+ .unit {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.echattsBox {
|
|
|
- background: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- padding-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.tradingIcon {
|
|
|
- font-size: 24px;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-
|
|
|
-.imgbox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.card-head {
|
|
|
- margin-top: 5px;
|
|
|
- height: 28px;
|
|
|
- font-size: 12px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
|
|
|
-.index-icon {
|
|
|
- margin: 0 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.bottomBox {
|
|
|
- padding: 3px 6px;
|
|
|
- border-radius: 12px;
|
|
|
- color: #fff;
|
|
|
- font-size: 10px;
|
|
|
-}
|
|
|
+ .card-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 10px;
|
|
|
|
|
|
-.iconDivBox {
|
|
|
- padding: 8px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.bottomFlex {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .info {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
liyuan