From a0fbdbd9898d6dfd0da41b9df79454fcaac0890b Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期六, 10 一月 2026 15:33:30 +0800
Subject: [PATCH] 代码调整12
---
src/views/index.vue | 1153 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 642 insertions(+), 511 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index dfd56e3..ec6cf64 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -2,449 +2,489 @@
<div class="dashboard">
<!-- 椤堕儴妯悜涓ゆ爮 -->
<div class="dashboard-top">
- <!-- 宸︼細绯荤粺姒傝+鏁版嵁鍗＄墖 -->
+ <!-- 宸︼細浼佷笟淇℃伅+涓夊ぇ鏁版嵁鍗＄墖锛堜笂涓嬫帓鍒楋級 -->
<div class="top-left">
- <div class="system-info">
- <div class="section-title">鎵垮寘鍟嗙鐞嗙郴缁�</div>
- <div style="display: flex; align-items: center; gap: 20px">
- <div class="system-card">
- <div class="system-name">鎵垮寘鍟嗙鐞嗙郴缁�</div>
- <div class="system-meta">璧勮川瀹℃牳 路 鍚堝悓绠＄悊 路 缁╂晥璇勪及</div>
+ <div class="company-info">
+ <div class="section-title">鐧婚檰淇℃伅</div>
+ <div style="display: flex;align-items: center;gap: 20px">
+ <img :src="userStore.avatar" class="avatar" alt=""/>
+ <div class="company-card">
+ <div class="company-name">{{userStore.name}}</div>
+ <div class="company-meta">{{userStore.roleName}}</div>
</div>
- <div style="display: flex; align-items: center; gap: 8px">
+ <div style="display: flex;align-items: center;gap: 8px">
<el-icon color="#5053B5" size="22"><Clock /></el-icon>
- <span>褰撳墠鏃堕棿锛歿{ currentTime }}</span>
+ <span>鐧婚檰鏃ユ湡锛歿{userStore.currentLoginTime}}</span>
</div>
</div>
</div>
- <div class="data-cards">
- <div class="data-card total">
- <div class="data-title">鎬绘壙鍖呭晢鏁�</div>
- <div class="data-value">{{ contractorStats.total }}</div>
- <div class="data-desc">
- 宸插鏍� {{ contractorStats.approved }} | 寰呭鏍�
- {{ contractorStats.pending }}
- </div>
- </div>
- <div class="data-card pending">
- <div class="data-title">寰呭鏍告壙鍖呭晢</div>
- <div class="data-value">{{ contractorStats.pending }}</div>
- <div class="data-desc">
- A绾� {{ contractorStats.aPending }} | B绾�
- {{ contractorStats.bPending }} | C绾�
- {{ contractorStats.cPending }}
- </div>
- </div>
- <div class="data-card today">
- <div class="data-title">鏈湀鏂板</div>
- <div class="data-value">{{ contractorStats.monthly }}</div>
- <div class="data-desc">
- 鍚屾瘮 {{ contractorStats.monthly鍚屾瘮 }}% | 鐜瘮
- {{ contractorStats.monthly鐜瘮 }}%
- </div>
- </div>
- </div>
+ <!-- <div class="data-cards">-->
+ <!-- <div class="data-card sales">-->
+ <!-- <div class="data-title">閿�鍞暟鎹�</div>-->
+ <!-- <div class="data-num">-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">鏈湀閿�鍞/鍏�</div>-->
+ <!-- <div class="data-value">{{businessInfo.monthSaleMoney}}</div>-->
+ <!-- </div>-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">鏈紑绁ㄩ噾棰�/鍏�</div>-->
+ <!-- <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- -->
+ <!-- </div>-->
+ <!-- <div class="data-card purchase">-->
+ <!-- <div class="data-title">閲囪喘鏁版嵁</div>-->
+ <!-- <div class="data-num">-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">鏈湀閲囪喘棰�/鍏�</div>-->
+ <!-- <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div>-->
+ <!-- </div>-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">寰呬粯娆鹃噾棰�/鍏�</div>-->
+ <!-- <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="data-card inventory">-->
+ <!-- <div class="data-title">搴撳瓨鏁版嵁</div>-->
+ <!-- <div class="data-num">-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">褰撳墠搴撳瓨鎬婚噺/浠�</div>-->
+ <!-- <div class="data-value">{{businessInfo.inventoryNum}}</div>-->
+ <!-- </div>-->
+ <!-- <div>-->
+ <!-- <div class="data-desc">浠婃棩鍏ュ簱/浠�</div>-->
+ <!-- <div class="data-value">{{businessInfo.todayInventoryNum}}</div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
</div>
- <!-- 鍙筹細寰呭鐞嗘姤璀﹀垪琛� -->
- <div class="alarm-panel">
- <div class="section-title">寰呭鏍告壙鍖呭晢</div>
- <ul class="alarm-list" v-if="pendingContractors.length > 0">
- <li v-for="item in pendingContractors" :key="item.id">
- <div
- style="
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
- gap: 10px;
- "
- >
- <div
- style="
- display: flex;
- justify-content: space-between;
- align-items: center;
- "
- >
- <div class="alarm-title">{{ item.name }} - {{ item.type }}</div>
- <el-tag :type="getContractorLevelType(item.level)"
- >{{ item.level }}绾�</el-tag
- >
- </div>
- <div
- style="
- display: flex;
- justify-content: space-between;
- align-items: center;
- "
- >
- <div class="alarm-value">
- 鑱旂郴浜�: {{ item.contact }} | 娉ㄥ唽鏃堕棿: {{ item.registerDate }}
- </div>
- <div class="alarm-time">{{ item.applyDate }}</div>
- </div>
- </div>
- </li>
- </ul>
- <div v-else style="text-align: center; color: #909399; padding: 20px">
- 鏆傛棤寰呭鏍告壙鍖呭晢
- </div>
- </div>
- </div>
+ <!-- 鍙筹細寰呭姙浜嬮」 -->
+ <!-- <div class="todo-panel">-->
+ <!-- <div class="section-title">寰呭姙浜嬮」</div>-->
+ <!-- <ul class="todo-list" v-if="todoList.length > 0">-->
+ <!-- <li v-for="item in todoList" :key="item.id">-->
+ <!-- <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">-->
+ <!-- <div style="display: flex;justify-content: space-between;align-items: center;">-->
+ <!-- <div class="todo-title">娴佺▼缂栧彿锛歿{item.approveId}}</div>-->
+ <!-- <div class="todo-division">鐢宠閮ㄩ棬锛歿{item.approveDeptName}}</div>-->
+ <!-- <div class="todo-time">{{item.approveTime}}</div>-->
+ <!-- </div>-->
+ <!-- <div class="todo-division">瀹℃壒浜嬬敱锛歿{item.approveReason}}</div>-->
+ <!-- </div>-->
+ <!-- </li>-->
+ <!-- </ul>-->
+ <!-- <div v-else style="text-align: center">-->
+ <!-- 鏆傛棤鏁版嵁-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- -->
+ <!-- <!– 涓儴妯悜涓ゆ爮 –>-->
+ <!-- <div class="dashboard-row">-->
+ <!-- <div class="main-panel">-->
+ <!-- <div class="section-title">瀹㈡埛鍚堝悓閲戦鍒嗘瀽</div>-->
+ <!-- <div class="contract-summary">-->
+ <!-- <div class="contract-info">-->
+ <!-- <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>-->
+ <!-- <div class="contract-card">-->
+ <!-- <div class="contract-name">鎬诲悎鍚岄噾棰�(鍏�)</div>-->
+ <!-- <div class="contract-meta">-->
+ <!-- <div class="main-amount">{{sum}}</div>-->
+ <!-- <div>鍛ㄥ悓姣�: <span class="up">{{yny}}% </span> 鏃ョ幆姣�: <span class="up">{{chain}}% </span></div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">-->
+ <!-- <div>-->
+ <!-- <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"-->
+ <!-- :series="materialPieSeries"-->
+ <!-- :tooltip="pieTooltip"></Echarts>-->
+ <!-- </div>-->
+ <!-- <ul class="contract-list">-->
+ <!-- <li v-for="item in materialPieSeries[0].data" :key="item.name">-->
+ <!-- <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">-->
+ <!-- <div class="line" :style="{color: item.itemStyle.color}">鈼弡{item.name}}</div>-->
+ <!-- <div style="width: 70px">{{item.rate}}%</div>-->
+ <!-- <div>锟{item.value}}</div>-->
+ <!-- </div>-->
+ <!-- </li>-->
+ <!-- </ul>-->
+ <!-- </div>-->
+ <!-- </div>-->
+ <!-- <div class="main-panel">-->
+ <!-- <div style="display: flex;justify-content: space-between;">-->
+ <!-- <div class="section-title">搴旀敹搴斾粯缁熻</div>-->
+ <!--<!– <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">–>-->
+ <!--<!– <el-radio-button label="鎸夊懆" :value="1" />–>-->
+ <!--<!– <el-radio-button label="鎸夋湀" :value="2" />–>-->
+ <!--<!– <el-radio-button label="鎸夊搴�" :value="3" />–>-->
+ <!--<!– </el-radio-group>–>-->
+ <!-- </div>-->
+ <!-- <Echarts ref="chart"-->
+ <!-- :color="barColors2"-->
+ <!-- :chartStyle="chartStyle"-->
+ <!-- :grid="grid"-->
+ <!-- :series="barSeries"-->
+ <!-- :tooltip="tooltip"-->
+ <!-- :xAxis="xAxis"-->
+ <!-- :yAxis="yAxis"-->
+ <!-- style="height: 260px"></Echarts>-->
+ <!-- </div>-->
+ <!-- </div>-->
- <!-- 涓儴妯悜涓ゆ爮 -->
- <div class="dashboard-row">
- <div class="main-panel">
- <div class="section-title">鎵垮寘鍟嗗闀胯秼鍔�</div>
- <Echarts
- ref="chart"
- :chartStyle="chartStyle"
- :grid="grid"
- :legend="lineLegend"
- :series="lineSeries"
- :tooltip="tooltipLine"
- :xAxis="xAxis"
- :yAxis="yAxis"
- style="height: 300px"
- ></Echarts>
- </div>
- <div class="main-panel">
- <div class="section-title">鎵垮寘鍟嗚祫璐ㄥ垎甯�</div>
- <div
- style="
- display: flex;
- align-items: center;
- gap: 20px;
- justify-content: space-evenly;
- height: 300px;
- "
- >
- <div style="width: 50%">
- <Echarts
- ref="chart"
- :legend="pieLegend"
- :chartStyle="chartStylePie"
- :series="levelPieSeries"
- :tooltip="pieTooltip"
- ></Echarts>
- </div>
- <ul class="level-list" style="width: 50%">
- <li v-for="item in levelPieSeries[0].data" :key="item.name">
- <div
- style="
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- "
- >
- <div class="line" :style="{ color: item.itemStyle.color }">
- 鈼弡{ item.name }}
- </div>
- <div style="width: 60px">{{ item.value }}瀹�</div>
- <div style="width: 60px">{{ item.rate }}%</div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
-
- <!-- 搴曢儴妯悜涓ゆ爮 -->
- <div class="dashboard-row">
- <div class="main-panel">
- <div class="section-title">鎵垮寘鍟嗙被鍨嬪垎甯�</div>
- <Echarts
- ref="chart"
- :color="barColors"
- :chartStyle="chartStyle"
- :grid="grid"
- :series="equipmentBarSeries"
- :tooltip="tooltip"
- :xAxis="equipmentXAxis"
- :yAxis="yAxis"
- style="height: 300px"
- ></Echarts>
- </div>
- <div class="main-panel">
- <div class="section-title">鎵垮寘鍟嗗鏍告椂鏁�</div>
- <Echarts
- ref="chart"
- :color="barColors"
- :chartStyle="chartStyle"
- :grid="grid"
- :series="handlingTimeSeries"
- :tooltip="tooltip"
- :xAxis="handlingTimeXAxis"
- :yAxis="yAxis"
- style="height: 300px"
- ></Echarts>
- </div>
+ <!-- 搴曢儴妯悜涓ゆ爮 -->
+ <!-- <div class="dashboard-row">-->
+ <!-- <div class="main-panel">-->
+ <!-- <div class="section-title">璐ㄩ噺缁熻</div>-->
+ <!-- <div class="quality-cards">-->
+ <!-- <div class="quality-card one">鍘熸潗鏂欏凡妫�娴嬫暟 <span>{{qualityStatisticsObject.supplierNum}}浠�</span></div>-->
+ <!-- <div class="quality-card two">杩囩▼妫�楠屾暟閲� <span>{{qualityStatisticsObject.processNum}}浠�</span></div>-->
+ <!-- <div class="quality-card three">鍑哄巶宸叉鏁伴噺 <span>{{qualityStatisticsObject.factoryNum}}浠�</span></div>-->
+ <!-- </div>-->
+ <!-- <Echarts ref="chart"-->
+ <!-- :chartStyle="chartStyle"-->
+ <!-- :grid="grid"-->
+ <!-- :legend="barLegend"-->
+ <!-- :series="barSeries1"-->
+ <!-- :tooltip="tooltip"-->
+ <!-- :xAxis="xAxis1"-->
+ <!-- :yAxis="yAxis1"-->
+ <!-- style="height: 260px"></Echarts>-->
+ <!-- </div>-->
+ <!-- <div class="main-panel">-->
+ <!-- <div class="section-title">鍥炴涓庡紑绁ㄥ垎鏋�</div>-->
+ <!-- <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"-->
+ <!-- :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>-->
+ <!-- </div>-->
</div>
</div>
</template>
<script setup>
-import { ref, onMounted, reactive, computed } from "vue";
+import { ref, onMounted } from 'vue'
import Echarts from "@/components/Echarts/echarts.vue";
-import { Clock } from "@element-plus/icons-vue";
+import * as echarts from 'echarts';
+import useUserStore from "@/store/modules/user.js";
+import {
+ analysisCustomerContractAmounts, getAmountHalfYear,
+ getBusiness,
+ homeTodos,
+ qualityStatistics,
+ statisticsReceivablePayable
+} from "@/api/viewIndex.js";
-// 褰撳墠鏃堕棿
-const currentTime = computed(() => {
- const now = new Date();
- return now.toLocaleString("zh-CN");
-});
+const userStore = useUserStore()
-// 鎵垮寘鍟嗙粺璁℃暟鎹�
-const contractorStats = reactive({
- total: 156,
- approved: 132,
- pending: 24,
- aPending: 8,
- bPending: 12,
- cPending: 4,
- monthly: 28,
- monthly鍚屾瘮: "+18.5",
- monthly鐜瘮: "+5.2",
-});
+const businessInfo = ref({
+ inventoryNum: 0,
+ monthPurchaseHaveMoney: 0,
+ monthPurchaseMoney: 0,
+ monthSaleHaveMoney: 0,
+ monthSaleMoney: 0,
+ todayInventoryNum: 0,
+})
+const qualityStatisticsObject = ref({
+ supplierNum: 0,
+ processNum: 0,
+ factoryNum: 0,
+})
+const sum = ref(0)
+const yny = ref(0)
+const chain = ref(0)
-// 寰呭鏍告壙鍖呭晢鍒楄〃
-const pendingContractors = ref([
+const pieLegend = reactive({
+ show: false,
+})
+const barSeries = ref([
{
- id: 1,
- name: "寤虹瓚宸ョ▼鏈夐檺鍏徃",
- type: "寤虹瓚鏂藉伐",
- contact: "寮犱笁",
- registerDate: "2025-01-15",
- applyDate: "2025-12-16 14:30:23",
- level: "A",
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ }
+ },
+])
+const barSeries1 = ref([
+ {
+ name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
{
- id: 2,
- name: "鏈虹數瀹夎宸ョ▼鍏徃",
- type: "鏈虹數瀹夎",
- contact: "鏉庡洓",
- registerDate: "2025-03-20",
- applyDate: "2025-12-16 14:28:15",
- level: "B",
+ name: '杩囩▼涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
{
- id: 3,
- name: "瑁呴グ瑁呬慨宸ョ▼鍏徃",
- type: "瑁呴グ瑁呬慨",
- contact: "鐜嬩簲",
- registerDate: "2025-05-10",
- applyDate: "2025-12-16 14:22:18",
- level: "B",
+ name: '鍑哄巶涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
- {
- id: 4,
- name: "缁垮寲宸ョ▼鏈夐檺鍏徃",
- type: "鍥灄缁垮寲",
- contact: "璧靛叚",
- registerDate: "2025-08-05",
- applyDate: "2025-12-16 14:18:55",
- level: "C",
- },
-]);
-
-// 鍥捐〃鏍峰紡
+])
const chartStyle = {
- width: "100%",
- height: "100%",
-};
-
+ width: '100%',
+ height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
const chartStylePie = {
- width: "100%",
- height: "100%",
-};
-
+ width: '140%',
+ height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
const grid = {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
-};
-
-// 鎵垮寘鍟嗗闀胯秼鍔� - 鎶樼嚎鍥�
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+}
+const barLegend = {
+ show: true,
+ data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+}
+const barLegend1 = {
+ show: true,
+ data: ['棰勪粯璐︽', '搴斾粯璐︽', '棰勬敹璐︽', '搴旀敹璐︽']
+}
const lineLegend = {
show: true,
- data: ["A绾�", "B绾�", "C绾�"],
-};
-
-const tooltipLine = {
- trigger: "axis",
+ data: ['寮�绁�', '鍥炴']
+}
+const tooltip = {
+ trigger: 'axis',
axisPointer: {
- type: "cross",
+ type: 'shadow'
+ }
+}
+const xAxis = [{
+ type: 'value',
+}]
+const xAxis1 = ref([{
+ type: 'category',
+ axisTick: { show: false },
+ data: []
+}])
+const yAxis = [{
+ type: 'category',
+ data: [ '搴斾粯璐︽', '搴旀敹璐︽',]
+}]
+const yAxis1 = [{
+ type: 'value'
+}]
+const pieTooltip = reactive({
+ trigger: 'item',
+ formatter: function (params) {
+ // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
+ const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
+ return `${description} ${formatNumber(params.value)}鍏� ${params.percent}%`;
},
-};
-
-const xAxis = ref({
- type: "category",
- data: ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06", "12-07"],
-});
-
-const yAxis = ref({
- type: "value",
- name: "鎵垮寘鍟嗘暟閲�",
-});
-
-const lineSeries = ref([
+ position: 'right'
+})
+const materialPieSeries = ref([
{
- name: "A绾�",
- type: "line",
- data: [15, 18, 20, 22, 25, 28, 30],
- itemStyle: {
- color: "#f56c6c",
- },
- lineStyle: {
- width: 2,
- },
- showSymbol: true,
- },
- {
- name: "B绾�",
- type: "line",
- data: [45, 52, 58, 65, 70, 75, 80],
- itemStyle: {
- color: "#e6a23c",
- },
- lineStyle: {
- width: 2,
- },
- showSymbol: true,
- },
- {
- name: "C绾�",
- type: "line",
- data: [30, 35, 40, 45, 50, 55, 60],
- itemStyle: {
- color: "#67c23a",
- },
- lineStyle: {
- width: 2,
- },
- showSymbol: true,
- },
-]);
-
-// 鎵垮寘鍟嗚祫璐ㄥ垎甯� - 楗煎浘
-const pieLegend = {
- show: false,
-};
-
-const pieTooltip = {
- trigger: "item",
- formatter: "{b}: {c}瀹� ({d}%)",
-};
-
-const levelPieSeries = ref([
- {
- type: "pie",
- radius: ["60%", "80%"],
+ type: 'pie',
+ radius: ['66%', '90%'],
avoidLabelOverlap: false,
itemStyle: {
- borderColor: "#fff",
- borderWidth: 2,
+ borderColor: '#fff',
+ borderWidth: 2
},
label: {
- show: false,
+ show: false
},
- data: [
- {
- name: "A绾�",
- value: 45,
- rate: 28.85,
- itemStyle: { color: "#f56c6c" },
- },
- {
- name: "B绾�",
- value: 70,
- rate: 44.87,
- itemStyle: { color: "#e6a23c" },
- },
- {
- name: "C绾�",
- value: 41,
- rate: 26.28,
- itemStyle: { color: "#67c23a" },
- },
- ],
- },
-]);
-
-// 鎵垮寘鍟嗙被鍨嬪垎甯� - 鏌辩姸鍥�
-const barColors = ["#409eff", "#67c23a", "#e6a23c", "#f56c6c", "#909399"];
-
-const tooltip = {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
-};
-
-const equipmentXAxis = ref({
- type: "category",
- data: ["寤虹瓚鏂藉伐", "鏈虹數瀹夎", "瑁呴グ瑁呬慨", "鍥灄缁垮寲", "鍏朵粬"],
-});
-
-const equipmentBarSeries = ref([
- {
- name: "鎵垮寘鍟嗘暟閲�",
- type: "bar",
- data: [45, 35, 25, 20, 31],
- itemStyle: {
- color: function (params) {
- return barColors[params.dataIndex % barColors.length];
- },
- },
- label: {
- show: true,
- position: "top",
- },
- },
-]);
-
-// 鎵垮寘鍟嗗鏍告椂鏁堝垎鏋� - 鏌辩姸鍥�
-const handlingTimeXAxis = ref({
- type: "category",
- data: ["0-1澶�", "1-3澶�", "3-7澶�", "7澶╀互涓�"],
-});
-
-const handlingTimeSeries = ref([
- {
- name: "瀹℃牳鏁伴噺",
- type: "bar",
- data: [85, 45, 20, 10],
- itemStyle: {
- color: function (params) {
- return barColors[params.dataIndex % barColors.length];
- },
- },
- label: {
- show: true,
- position: "top",
- },
- },
-]);
-
-// 鑾峰彇鎵垮寘鍟嗙骇鍒牱寮�
-const getContractorLevelType = (level) => {
- switch (level) {
- case "A":
- return "danger";
- case "B":
- return "warning";
- case "C":
- return "info";
- default:
- return "info";
+ data: []
}
-};
+])
+const lineSeries = ref([
+ {
+ type: 'line',
+ data: [],
+ label: {
+ show: true
+ },
+ showSymbol: true, // 鏄剧ず鍦嗙偣
+ },
+])
+const tooltipLine = {
+ trigger: 'axis',
+}
+const yAxis2 = ref([
+ {
+ type: 'value',
+ }
+])
+const xAxis2 = ref([
+ {
+ type: 'category',
+ data: [],
+ axisLabel: {
+ interval: 0,
+ formatter: function(value) {
+ return value.replace(/~/g, '\n');
+ },
+ }
+ }
+])
+
+// 寰呭姙浜嬮」
+const todoList = ref([])
+const radio1 = ref(1)
+
+// 鍥捐〃寮曠敤
+const barChart = ref(null)
+const lineChart = ref(null)
+const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
+
+// 闅忔満棰滆壊鐢熸垚鍑芥暟
+const getRandomColor = () => {
+ return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
+}
onMounted(() => {
- // 椤甸潰鍔犺浇瀹屾垚鍚庣殑鍒濆鍖栨搷浣�
-});
+ getBusinessData()
+ analysisCustomer()
+ todoInfoS()
+ statisticsReceivable()
+ qualityStatisticsInfo()
+ getAmountHalfYearNum()
+})
+// 鏁版嵁缁熻
+const getBusinessData = () => {
+ getBusiness().then((res) => {
+ businessInfo.value = {...res.data}
+ })
+}
+// 鍚堝悓閲戦
+const analysisCustomer = () => {
+ analysisCustomerContractAmounts().then((res) => {
+ sum.value = res.data.sum
+ yny.value = res.data.yny
+ chain.value = res.data.chain
+ // 涓烘瘡涓暟鎹」鍒嗛厤闅忔満棰滆壊
+ materialPieSeries.value[0].data = res.data.item.map(item => ({
+ ...item,
+ itemStyle: { color: getRandomColor() }
+ }))
+ })
+}
+// 寰呭姙浜嬮」
+const todoInfoS = () => {
+ homeTodos().then((res) => {
+ todoList.value = res.data
+ })
+}
+// 搴斾粯搴旀敹缁熻
+const statisticsReceivable = (type) => {
+ console.log(type)
+ statisticsReceivablePayable({type: radio1.value}).then((res) => {
+ barSeries.value[0].data = [
+ // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
+ { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
+ // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
+ { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
+ ]
+ })
+}
+// 璐ㄦ缁熻
+const qualityStatisticsInfo = () => {
+ qualityStatistics().then((res) => {
+ res.data.item.forEach(item => {
+ xAxis1.value[0].data.push(item.date)
+ barSeries1.value[0].data.push(item.supplierNum)
+ barSeries1.value[1].data.push(item.processNum)
+ barSeries1.value[2].data.push(item.factoryNum)
+ })
+ qualityStatisticsObject.value.supplierNum = res.data.supplierNum
+ qualityStatisticsObject.value.processNum = res.data.processNum
+ qualityStatisticsObject.value.factoryNum = res.data.factoryNum
+ })
+}
+const getAmountHalfYearNum = async () => {
+ const res = await getAmountHalfYear()
+ console.log(res)
+ const monthName = []
+ const receiptAmount = []
+ const invoiceAmount = []
+ res.data.forEach(item => {
+ monthName.push(item.month)
+ receiptAmount.push(item.receiptAmount)
+ invoiceAmount.push(item.invoiceAmount)
+ })
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ xAxis2.value[0].data = monthName
+ xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
+ lineSeries.value = [
+ {
+ name: '寮�绁�',
+ type: 'line',
+ data: receiptAmount,
+ stack: 'Total',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(131, 207, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(186, 228, 255, 1)'
+ }
+ ])
+ },
+ itemStyle: {
+ color: '#2D99FF',
+ borderColor: '#2D99FF'
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ lineStyle: {
+ width: 0
+ },
+ showSymbol: true,
+ },
+ {
+ name: '鍥炴',
+ type: 'line',
+ data: invoiceAmount,
+ stack: 'Total',
+ lineStyle: {
+ width: 0
+ },
+ itemStyle: {
+ color: '#83CFFF',
+ borderColor: '#83CFFF'
+ },
+ showSymbol: true,
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(54, 153, 255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(89, 169, 254, 1)'
+ }
+ ])
+ },
+ emphasis: {
+ focus: 'series'
+ },
+ }
+ ]
+}
</script>
<style scoped>
@@ -454,25 +494,34 @@
padding: 20px;
box-sizing: border-box;
}
-
.dashboard-top {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
-
-.system-info {
+.company-info {
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px;
min-width: 0;
- background-color: #eff2fb;
+ background-color: #EFF2FB; /* 浣跨敤鎸囧畾鐨勮儗鏅鑹� */
+ background-image: url("../assets/images/denglu.png");
+ background-size: 100% 260%;
+ background-position: center;
+ background-repeat: no-repeat;
border-radius: 12px;
height: 138px;
}
-
-.system-card {
+.avatar {
+ width: 60px;
+ height: 60px;
+ border-radius: 50%;
+ object-fit: contain;
+ background: #fff;
+ border: 1px solid #eee;
+}
+.company-card {
display: flex;
flex-direction: column;
gap: 10px;
@@ -480,18 +529,26 @@
padding-right: 15px;
}
-.system-name {
- font-weight: 600;
- font-size: 18px;
- color: #161a9a;
+.company-card::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #C9C5C5;
+ border-radius: 2px;
}
-
-.system-meta {
+.company-name {
+ font-weight: 400;
+ font-size: 16px;
+ color: #161A9A;
+}
+.company-meta {
font-weight: 400;
font-size: 12px;
color: #818185;
}
-
.data-cards {
display: flex;
gap: 16px;
@@ -500,121 +557,123 @@
border-radius: 12px;
padding: 20px;
}
-
+.data-title {
+ font-weight: 700;
+ font-size: 26px;
+ color: #FFFFFF;
+}
+.data-num {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 20px;
+}
.data-card {
background: #fff;
border-radius: 12px;
- padding: 16px;
+ padding: 14px 10px 10px 10px;
min-width: 160px;
box-shadow: 0 2px 8px #eee;
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
width: 32%;
height: 140px;
- transition: all 0.3s ease;
}
-
-.data-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.data-card.sales {
+ background-image: url("../assets/images/xioashoushuju.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
-
-.data-card.total {
- background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
- color: #fff;
+.data-card.purchase {
+ background-image: url("../assets/images/caigou.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
-
-.data-card.pending {
- background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
- color: #fff;
+.data-card.inventory {
+ background-image: url("../assets/images/kucun.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
}
-
-.data-card.today {
- background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
- color: #fff;
-}
-
-.data-title {
- font-weight: 600;
- font-size: 16px;
- margin-bottom: 12px;
-}
-
-.data-value {
- font-size: 32px;
- font-weight: bold;
- margin-bottom: 8px;
-}
-
.data-desc {
- font-size: 12px;
- opacity: 0.9;
+ font-weight: 500;
+ font-size: 13px;
+ color: #FFFFFF;
}
-
+.data-value {
+ font-size: 18px;
+ font-weight: 500;
+ margin: 10px 0;
+ color: #FFFFFF;
+}
.top-left {
display: flex;
flex-direction: column;
gap: 20px;
- width: 60%;
+ width: 50%;
}
-
-.alarm-panel {
+.todo-panel {
background: #fff;
border-radius: 12px;
padding: 20px;
- width: 40%;
+ width: 50%;
}
-
-.alarm-list {
+.todo-list {
list-style: none;
padding: 0;
margin: 0;
- font-size: 14px;
+ font-size: 15px;
overflow-y: auto;
height: 260px;
}
-
-.alarm-list li {
+.todo-list li {
border-radius: 8px;
margin-bottom: 12px;
- padding: 12px 20px;
+ padding: 8px 20px;
+ height: 74px;
display: flex;
justify-content: space-between;
align-items: center;
- background: #f8f9fa;
- border-left: 4px solid #409eff;
- transition: all 0.3s ease;
+ background: rgba(225,227,250,0.62);
}
-
-.alarm-list li:hover {
- background: #e9ecef;
- transform: translateX(4px);
-}
-
-.alarm-title {
- font-weight: 600;
- font-size: 14px;
- color: #303133;
-}
-
-.alarm-value {
+.todo-title {
+ font-weight: 400;
font-size: 12px;
- color: #606266;
+ color: #000000;
+ position: relative;
}
-
-.alarm-time {
+.todo-title::before {
+ content: ''; /* 蹇呴渶锛岃〃绀鸿繖閲屾湁涓�涓唴瀹� */
+ position: absolute;
+ left: -10px; /* 瀹氫綅鍒板乏渚� */
+ top: 50%; /* 鍨傜洿灞呬腑 */
+ transform: translateY(-50%); /* 寰皟鍨傜洿灞呬腑 */
+ width: 6px; /* 鍦嗙殑鐩村緞 */
+ height: 6px; /* 鍦嗙殑鐩村緞 */
+ background: #498CEB;
+ border-radius: 50%; /* 璁╁叾鍙樻垚鍦嗗舰 */
+}
+.todo-division {
+ font-weight: 400;
font-size: 12px;
- color: #909399;
+ color: #000000;
}
-
+.todo-time {
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
+}
+.todo-meta {
+ color: #888;
+ font-size: 13px;
+}
.dashboard-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
-
.main-panel {
background: #fff;
border-radius: 12px;
@@ -624,13 +683,12 @@
display: flex;
flex-direction: column;
}
-
.section-title {
position: relative;
font-size: 18px;
color: #333;
padding-left: 10px;
- margin-bottom: 20px;
+ margin-bottom: 10px;
font-weight: 700;
}
@@ -638,37 +696,110 @@
position: absolute;
left: 0;
top: 4px;
- content: "";
+ content: '';
width: 4px;
height: 18px;
- background-color: #409eff;
+ background-color: #002FA7;
border-radius: 2px;
}
-
-.level-list {
- margin: 0;
- padding: 0;
- list-style: none;
- height: 200px;
- overflow-y: auto;
+.contract-info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ height: 90px;
+ background: rgba(245,245,245,0.59);
width: 100%;
+ border-radius: 10px;
+ padding: 10px 30px;
}
-
-.level-list li {
- margin-bottom: 15px;
- padding: 10px;
- background: #f8f9fa;
- border-radius: 6px;
- transition: all 0.3s ease;
+.contract-summary {
+ display: flex;
+ align-items: center;
+ gap: 30px;
}
-
-.level-list li:hover {
- background: #e9ecef;
+.contract-card {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
}
-
+.contract-name {
+ font-weight: 400;
+ font-size: 14px;
+ color: #050505;
+}
+.contract-meta {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ gap: 80px;
+}
+.main-amount {
+ font-size: 24px;
+ color: rgba(51,50,50,0.85);
+}
+.up { color: #e57373; }
+.contract-list {
+ margin-top: 16px;
+ font-size: 14px;
+ color: #666;
+ list-style: none;
+ padding: 0;
+ height: 190px;
+ overflow-y: auto;
+ width: 460px;
+}
.line {
position: relative;
- width: 80px;
- font-weight: 500;
+ width: 230px;
+}
+.line::after {
+ content: '';
+ position: absolute;
+ right: 2px;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #C9C5C5;
+ border-radius: 2px;
+}
+.contract-list li {
+ margin-top: 10px;
+}
+.quality-cards {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 12px;
+}
+.quality-card {
+ border-radius: 8px;
+ padding: 15px 10px 10px 50px;
+ font-weight: 400;
+ font-size: 12px;
+ color: rgba(0,0,0,0.67);
+ width: 236px;
+ height: 49px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.quality-card.one {
+ background-image: url("../assets/images/yuancailiao.png");
+}
+.quality-card.two {
+ background-image: url("../assets/images/guocheng.png");
+}
+.quality-card.three {
+ background-image: url("../assets/images/chuchang.png");
+
+}
+.quality-card span {
+ color: #4fc3f7;
+ font-weight: bold;
+ margin-left: 6px;
+}
+.chart {
+ width: 100%;
+ height: 220px;
+ margin-top: 10px;
}
</style>
--
Gitblit v1.9.3