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 | 1270 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 746 insertions(+), 524 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index afd379b..ec6cf64 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,583 +1,805 @@
<template>
- <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>
- <div style="display: flex;align-items: center;gap: 8px">
- <el-icon color="#5053B5" size="22"><Clock /></el-icon>
- <span>褰撳墠鏃堕棿锛歿{ currentTime }}</span>
- </div>
- </div>
- </div>
- <div class="data-cards">
- <div class="data-card total">
- <div class="data-title">鎬绘姤璀︽暟</div>
- <div class="data-value">{{ alarmStats.total }}</div>
- <div class="data-desc">宸插鐞� {{ alarmStats.handled }} | 鏈鐞� {{ alarmStats.pending }}</div>
- </div>
- <div class="data-card pending">
- <div class="data-title">鏈鐞嗘姤璀�</div>
- <div class="data-value">{{ alarmStats.pending }}</div>
- <div class="data-desc">涓ラ噸 {{ alarmStats.severePending }} | 涓瓑 {{ alarmStats.moderatePending }} | 杞诲井 {{ alarmStats.minorPending }}</div>
- </div>
- <div class="data-card today">
- <div class="data-title">浠婃棩鎶ヨ</div>
- <div class="data-value">{{ alarmStats.today }}</div>
- <div class="data-desc">鍚屾瘮 {{ alarmStats.today鍚屾瘮 }}% | 鐜瘮 {{ alarmStats.today鐜瘮 }}%</div>
- </div>
- </div>
- </div>
- <!-- 鍙筹細寰呭鐞嗘姤璀﹀垪琛� -->
- <div class="alarm-panel">
- <div class="section-title">寰呭鐞嗘姤璀�</div>
- <ul class="alarm-list" v-if="pendingAlarms.length > 0">
- <li v-for="item in pendingAlarms" :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.equipmentName }} - {{ item.parameter }}</div>
- <el-tag :type="getAlarmLevelType(item.alarmLevel)">{{ item.alarmLevel }}</el-tag>
- </div>
- <div style="display: flex;justify-content: space-between;align-items: center;">
- <div class="alarm-value">鎶ヨ鍊�: {{ item.alarmValue }} | 闃堝��: {{ item.threshold }}</div>
- <div class="alarm-time">{{ item.alarmTime }}</div>
- </div>
- </div>
- </li>
- </ul>
- <div v-else style="text-align: center; color: #909399; padding: 20px;">
- 鏆傛棤寰呭鐞嗘姤璀�
- </div>
- </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>
- </div>
+ <div class="dashboard">
+ <!-- 椤堕儴妯悜涓ゆ爮 -->
+ <div class="dashboard-top">
+ <!-- 宸︼細浼佷笟淇℃伅+涓夊ぇ鏁版嵁鍗＄墖锛堜笂涓嬫帓鍒楋級 -->
+ <div class="top-left">
+ <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">
+ <el-icon color="#5053B5" size="22"><Clock /></el-icon>
+ <span>鐧婚檰鏃ユ湡锛歿{userStore.currentLoginTime}}</span>
+ </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="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>-->
+ <!-- <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 alarmStats = reactive({
- total: 425,
- handled: 398,
- pending: 27,
- severePending: 8,
- moderatePending: 12,
- minorPending: 7,
- today: 35,
- today鍚屾瘮: '+12.5',
- today鐜瘮: '-8.3'
-});
+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 pendingAlarms = ref([
- {
- id: 1,
- equipmentName: '鍙嶅簲閲淎',
- parameter: '娓╁害',
- alarmValue: '185掳C',
- threshold: '鈮�180掳C',
- alarmLevel: '涓ラ噸',
- alarmTime: '2025-12-16 14:30:23'
- },
- {
- id: 2,
- equipmentName: '绂诲績鏈築',
- parameter: '鎸姩',
- alarmValue: '0.8mm/s',
- threshold: '鈮�0.5mm/s',
- alarmLevel: '涓瓑',
- alarmTime: '2025-12-16 14:28:15'
- },
- {
- id: 3,
- equipmentName: '鍙嶅簲閲淒',
- parameter: 'pH鍊�',
- alarmValue: '4.2',
- threshold: '5.0-7.0',
- alarmLevel: '涓瓑',
- alarmTime: '2025-12-16 14:22:18'
- },
- {
- id: 4,
- equipmentName: '骞茬嚗鏈篍',
- parameter: '婀垮害',
- alarmValue: '15%',
- threshold: '鈮�10%',
- alarmLevel: '杞诲井',
- alarmTime: '2025-12-16 14:18:55'
- }
-]);
-
-// 鍥捐〃鏍峰紡
+const pieLegend = reactive({
+ show: false,
+})
+const barSeries = ref([
+ {
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ }
+ },
+])
+const barSeries1 = ref([
+ {
+ name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
+ {
+ name: '杩囩▼涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
+ {
+ name: '鍑哄巶涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
+ },
+])
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: ['涓ラ噸', '涓瓑', '杞诲井']
-};
-
-const tooltipLine = {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
-};
-
-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([
- {
- name: '涓ラ噸',
- type: 'line',
- data: [8, 12, 9, 15, 11, 13, 10],
- itemStyle: {
- color: '#f56c6c'
- },
- lineStyle: {
- width: 2
- },
- showSymbol: true
- },
- {
- name: '涓瓑',
- type: 'line',
- data: [22, 25, 20, 28, 24, 26, 23],
- itemStyle: {
- color: '#e6a23c'
- },
- lineStyle: {
- width: 2
- },
- showSymbol: true
- },
- {
- name: '杞诲井',
- type: 'line',
- data: [35, 38, 32, 40, 36, 39, 34],
- 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%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false
- },
- data: [
- {
- name: '涓ラ噸',
- value: 78,
- rate: 18.35,
- itemStyle: { color: '#f56c6c' }
- },
- {
- name: '涓瓑',
- value: 178,
- rate: 41.88,
- itemStyle: { color: '#e6a23c' }
- },
- {
- name: '杞诲井',
- value: 169,
- rate: 39.76,
- itemStyle: { color: '#67c23a' }
- }
- ]
- }
-]);
-
-// 璁惧鎶ヨ缁熻 - 鏌辩姸鍥�
-const barColors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399'];
-
+ show: true,
+ data: ['寮�绁�', '鍥炴']
+}
const tooltip = {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
-};
+ trigger: 'axis',
+ axisPointer: {
+ 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}%`;
+ },
+ position: 'right'
+})
+const materialPieSeries = ref([
+ {
+ type: 'pie',
+ radius: ['66%', '90%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ 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 equipmentXAxis = ref({
- type: 'category',
- data: ['鍙嶅簲閲�', '绂诲績鏈�', '杈撻�佹车', '骞茬嚗鏈�', '鍘嬬缉鏈�']
-});
+// 寰呭姙浜嬮」
+const todoList = ref([])
+const radio1 = ref(1)
-const equipmentBarSeries = ref([
- {
- name: '鎶ヨ鏁伴噺',
- type: 'bar',
- data: [125, 85, 78, 65, 72],
- itemStyle: {
- color: function(params) {
- return barColors[params.dataIndex % barColors.length];
- }
- },
- label: {
- show: true,
- position: 'top'
- }
- }
-]);
+// 鍥捐〃寮曠敤
+const barChart = ref(null)
+const lineChart = ref(null)
+const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
-// 鎶ヨ澶勭悊鏃舵晥鍒嗘瀽 - 鏌辩姸鍥�
-const handlingTimeXAxis = ref({
- type: 'category',
- data: ['0-30鍒嗛挓', '30-60鍒嗛挓', '1-2灏忔椂', '2灏忔椂浠ヤ笂']
-});
-
-const handlingTimeSeries = ref([
- {
- name: '澶勭悊鏁伴噺',
- type: 'bar',
- data: [280, 75, 45, 25],
- itemStyle: {
- color: function(params) {
- return barColors[params.dataIndex % barColors.length];
- }
- },
- label: {
- show: true,
- position: 'top'
- }
- }
-]);
-
-// 鑾峰彇鎶ヨ绾у埆鏍峰紡
-const getAlarmLevelType = (level) => {
- switch(level) {
- case '涓ラ噸': return 'danger';
- case '涓瓑': return 'warning';
- case '杞诲井': return 'info';
- default: return 'info';
- }
-};
+// 闅忔満棰滆壊鐢熸垚鍑芥暟
+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>
.dashboard {
- background: #f5f7fa;
- min-height: 100vh;
- padding: 20px;
- box-sizing: border-box;
+ background: #f5f7fa;
+ min-height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
}
-
.dashboard-top {
- display: flex;
- gap: 20px;
- margin-bottom: 20px;
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+}
+.company-info {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 20px;
+ min-width: 0;
+ 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;
+}
+.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;
+ position: relative;
+ padding-right: 15px;
}
-.system-info {
- display: flex;
- flex-direction: column;
- gap: 8px;
- padding: 20px;
- min-width: 0;
- background-color: #EFF2FB;
- border-radius: 12px;
- height: 138px;
+.company-card::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #C9C5C5;
+ border-radius: 2px;
}
-
-.system-card {
- display: flex;
- flex-direction: column;
- gap: 10px;
- position: relative;
- padding-right: 15px;
+.company-name {
+ font-weight: 400;
+ font-size: 16px;
+ color: #161A9A;
}
-
-.system-name {
- font-weight: 600;
- font-size: 18px;
- color: #161A9A;
+.company-meta {
+ font-weight: 400;
+ font-size: 12px;
+ color: #818185;
}
-
-.system-meta {
- font-weight: 400;
- font-size: 12px;
- color: #818185;
-}
-
.data-cards {
- display: flex;
- gap: 16px;
- justify-content: flex-start;
- background: #ffffff;
- border-radius: 12px;
- padding: 20px;
+ display: flex;
+ gap: 16px;
+ justify-content: flex-start;
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 20px;
}
-
-.data-card {
- background: #fff;
- border-radius: 12px;
- padding: 16px;
- 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.total {
- background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
- color: #fff;
-}
-
-.data-card.pending {
- background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
- color: #fff;
-}
-
-.data-card.today {
- background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
- color: #fff;
-}
-
.data-title {
- font-weight: 600;
- font-size: 16px;
- margin-bottom: 12px;
+ font-weight: 700;
+ font-size: 26px;
+ color: #FFFFFF;
}
-
-.data-value {
- font-size: 32px;
- font-weight: bold;
- margin-bottom: 8px;
+.data-num {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 20px;
}
-
+.data-card {
+ background: #fff;
+ border-radius: 12px;
+ padding: 14px 10px 10px 10px;
+ min-width: 160px;
+ box-shadow: 0 2px 8px #eee;
+ display: flex;
+ flex-direction: column;
+ width: 32%;
+ height: 140px;
+}
+.data-card.sales {
+ background-image: url("../assets/images/xioashoushuju.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.data-card.purchase {
+ background-image: url("../assets/images/caigou.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.data-card.inventory {
+ background-image: url("../assets/images/kucun.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
.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%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ width: 50%;
}
-
-.alarm-panel {
- background: #fff;
- border-radius: 12px;
- padding: 20px;
- width: 40%;
+.todo-panel {
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ width: 50%;
}
-
-.alarm-list {
- list-style: none;
- padding: 0;
- margin: 0;
- font-size: 14px;
- overflow-y: auto;
- height: 260px;
+.todo-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ font-size: 15px;
+ overflow-y: auto;
+ height: 260px;
}
-
-.alarm-list li {
- border-radius: 8px;
- margin-bottom: 12px;
- padding: 12px 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- background: #f8f9fa;
- border-left: 4px solid #409eff;
- transition: all 0.3s ease;
+.todo-list li {
+ border-radius: 8px;
+ margin-bottom: 12px;
+ padding: 8px 20px;
+ height: 74px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: rgba(225,227,250,0.62);
}
-
-.alarm-list li:hover {
- background: #e9ecef;
- transform: translateX(4px);
+.todo-title {
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
+ position: relative;
}
-
-.alarm-title {
- font-weight: 600;
- font-size: 14px;
- color: #303133;
+.todo-title::before {
+ content: ''; /* 蹇呴渶锛岃〃绀鸿繖閲屾湁涓�涓唴瀹� */
+ position: absolute;
+ left: -10px; /* 瀹氫綅鍒板乏渚� */
+ top: 50%; /* 鍨傜洿灞呬腑 */
+ transform: translateY(-50%); /* 寰皟鍨傜洿灞呬腑 */
+ width: 6px; /* 鍦嗙殑鐩村緞 */
+ height: 6px; /* 鍦嗙殑鐩村緞 */
+ background: #498CEB;
+ border-radius: 50%; /* 璁╁叾鍙樻垚鍦嗗舰 */
}
-
-.alarm-value {
- font-size: 12px;
- color: #606266;
+.todo-division {
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
}
-
-.alarm-time {
- font-size: 12px;
- color: #909399;
+.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;
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
}
-
.main-panel {
- background: #fff;
- border-radius: 12px;
- padding: 20px;
- flex: 1;
- min-width: 0;
- display: flex;
- flex-direction: column;
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
}
-
.section-title {
- position: relative;
- font-size: 18px;
- color: #333;
- padding-left: 10px;
- margin-bottom: 20px;
- font-weight: 700;
+ position: relative;
+ font-size: 18px;
+ color: #333;
+ padding-left: 10px;
+ margin-bottom: 10px;
+ font-weight: 700;
}
.section-title::before {
- position: absolute;
- left: 0;
- top: 4px;
- content: '';
- width: 4px;
- height: 18px;
- background-color: #409eff;
- border-radius: 2px;
+ position: absolute;
+ left: 0;
+ top: 4px;
+ content: '';
+ width: 4px;
+ height: 18px;
+ background-color: #002FA7;
+ border-radius: 2px;
}
-
-.level-list {
- margin: 0;
- padding: 0;
- list-style: none;
- height: 200px;
- overflow-y: auto;
- width: 100%;
+.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;
+ position: relative;
+ width: 230px;
}
-</style>
\ No newline at end of file
+.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