From c627e34142b1c9a861dee89177f03bec2b77ca0f Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期六, 10 一月 2026 15:35:57 +0800
Subject: [PATCH] 代码调整12
---
src/views/index.vue | 1105 +++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 759 insertions(+), 346 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index e9453f2..ec6cf64 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,392 +1,805 @@
<template>
- <div class="dashboard-container">
- <!-- 缁熻鍗＄墖 -->
- <el-row :gutter="20">
- <el-col :span="6">
- <el-card class="statistics-card" shadow="hover">
- <div class="card-content">
- <div class="card-title">璁惧鍦ㄧ嚎鐜�</div>
- <div class="card-value">{{ onlineRate }}%</div>
- <div class="card-desc">
- 褰撳墠鍦ㄧ嚎璁惧鏁帮細{{ onlineCount }} / {{ totalDevices }}
+ <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>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="statistics-card" shadow="hover">
- <div class="card-content">
- <div class="card-title">鏁呴殰棰勮鏁�</div>
- <div class="card-value">{{ warningCount }}</div>
- <div class="card-desc">
- 楂橀闄╋細{{ highRiskCount }} | 涓闄╋細{{ mediumRiskCount }} |
- 浣庨闄╋細{{ lowRiskCount }}
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="statistics-card" shadow="hover">
- <div class="card-content">
- <div class="card-title">寰呭鐞嗙淮淇崟</div>
- <div class="card-value">{{ pendingOrders }}</div>
- <div class="card-desc">
- 澶勭悊涓細{{ processingOrders }} | 宸插畬鎴愶細{{ completedOrders }}
- </div>
- </div>
- </el-card>
- </el-col>
- <el-col :span="6">
- <el-card class="statistics-card" shadow="hover">
- <div class="card-content">
- <div class="card-title">閲嶇偣璁惧杩愯鐘舵��</div>
- <div class="card-value">{{ normalDevices }} 姝ｅ父</div>
- <div class="card-desc">
- 寮傚父锛歿{ abnormalDevices }} | 鏁呴殰锛歿{ faultDevices }}
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
-
- <!-- 鍥捐〃鍖哄煙 -->
- <el-row :gutter="20" style="margin-top: 20px">
- <!-- 璁惧鍋ュ悍搴﹁秼鍔垮浘 -->
- <el-col :span="12">
- <el-card shadow="hover">
- <template #header>
- <div class="card-header">
- <span>璁惧鍋ュ悍搴﹁秼鍔垮浘</span>
- </div>
- </template>
- <div ref="healthChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
- <!-- 杩�7鏃ユ晠闅滅被鍨嬬粺璁� -->
- <el-col :span="12">
- <el-card shadow="hover">
- <template #header>
- <div class="card-header">
- <span>杩�7鏃ユ晠闅滅被鍨嬬粺璁�</span>
- </div>
- </template>
- <div ref="faultChartRef" class="chart-container"></div>
- </el-card>
- </el-col>
- </el-row>
-
- <!-- 閲嶇偣璁惧杩愯鐘舵�佸崱鐗� -->
- <el-card shadow="hover" style="margin-top: 20px">
- <template #header>
- <div class="card-header">
- <span>閲嶇偣璁惧杩愯鐘舵��</span>
</div>
- </template>
- <el-table :data="keyDevices" stripe style="width: 100%">
- <el-table-column
- prop="name"
- label="璁惧鍚嶇О"
- width="180"
- ></el-table-column>
- <el-table-column
- prop="model"
- label="鍨嬪彿"
- width="120"
- ></el-table-column>
- <el-table-column prop="ip" label="IP鍦板潃" width="150"></el-table-column>
- <el-table-column prop="status" label="鐘舵��" width="100">
- <template #default="scope">
- <el-tag
- :type="
- scope.row.status === 'online'
- ? 'success'
- : scope.row.status === 'warning'
- ? 'warning'
- : 'danger'
- "
- >
- {{
- scope.row.status === "online"
- ? "鍦ㄧ嚎"
- : scope.row.status === "warning"
- ? "棰勮"
- : "鏁呴殰"
- }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column
- prop="temperature"
- label="娓╁害(鈩�)"
- width="100"
- ></el-table-column>
- <el-table-column
- prop="pressure"
- label="鍘嬪姏(MPa)"
- width="100"
- ></el-table-column>
- <el-table-column
- prop="speed"
- label="杞��(rpm)"
- width="100"
- ></el-table-column>
- <el-table-column prop="health" label="鍋ュ悍搴�" width="120">
- <template #default="scope">
- <el-progress
- :percentage="scope.row.health"
- :stroke-width="10"
- ></el-progress>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
+ <!-- <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, onUnmounted } from "vue";
-import * as echarts from "echarts";
+import { ref, onMounted } from 'vue'
+import Echarts from "@/components/Echarts/echarts.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 onlineRate = ref(85);
-const onlineCount = ref(170);
-const totalDevices = ref(200);
-const warningCount = ref(23);
-const highRiskCount = ref(5);
-const mediumRiskCount = ref(12);
-const lowRiskCount = ref(6);
-const pendingOrders = ref(15);
-const processingOrders = ref(8);
-const completedOrders = ref(45);
-const normalDevices = ref(162);
-const abnormalDevices = ref(18);
-const faultDevices = ref(10);
+const userStore = useUserStore()
-// 閲嶇偣璁惧鍒楄〃
-const keyDevices = ref([
+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 pieLegend = reactive({
+ show: false,
+})
+const barSeries = ref([
{
- name: "绌哄帇鏈篈-001",
- model: "KA-200",
- ip: "192.168.1.101",
- status: "online",
- temperature: 42,
- pressure: 0.8,
- speed: 1450,
- health: 92,
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ }
+ },
+])
+const barSeries1 = ref([
+ {
+ name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
{
- name: "鍐峰嵈濉擝-002",
- model: "CT-300",
- ip: "192.168.1.102",
- status: "warning",
- temperature: 58,
- pressure: 0.6,
- speed: 980,
- health: 75,
+ name: '杩囩▼涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
{
- name: "姘存车C-003",
- model: "WP-150",
- ip: "192.168.1.103",
- status: "online",
- temperature: 38,
- pressure: 1.2,
- speed: 1200,
- health: 88,
+ name: '鍑哄巶涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ data: []
},
+])
+const chartStyle = {
+ width: '100%',
+ height: '100%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const chartStylePie = {
+ width: '140%',
+ height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+}
+const barLegend = {
+ show: true,
+ data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+}
+const barLegend1 = {
+ show: true,
+ data: ['棰勪粯璐︽', '搴斾粯璐︽', '棰勬敹璐︽', '搴旀敹璐︽']
+}
+const lineLegend = {
+ show: true,
+ data: ['寮�绁�', '鍥炴']
+}
+const tooltip = {
+ 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([
{
- name: "鍙戠數鏈篋-004",
- model: "GE-500",
- ip: "192.168.1.104",
- status: "danger",
- temperature: 75,
- pressure: 0.5,
- speed: 1500,
- health: 60,
- },
+ type: 'pie',
+ radius: ['66%', '90%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ label: {
+ show: false
+ },
+ data: []
+ }
+])
+const lineSeries = ref([
{
- name: "鍙樺帇鍣‥-005",
- model: "TR-1000",
- ip: "192.168.1.105",
- status: "online",
- temperature: 45,
- pressure: 0,
- speed: 0,
- health: 95,
+ 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 healthChartRef = ref(null);
-const faultChartRef = ref(null);
-let healthChart = null;
-let faultChart = null;
+const barChart = ref(null)
+const lineChart = ref(null)
+const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
-// 鍋ュ悍搴﹁秼鍔挎暟鎹�
-const healthTrendData = {
- dates: ["12-10", "12-11", "12-12", "12-13", "12-14", "12-15", "12-16"],
- values: [88, 90, 85, 87, 92, 91, 93],
-};
-
-// 鏁呴殰绫诲瀷缁熻鏁版嵁
-const faultTypeData = {
- types: ["娓╁害寮傚父", "鍘嬪姏瓒呮爣", "杞�熷紓甯�", "鎸姩杩囧ぇ", "鍏朵粬"],
- values: [15, 8, 12, 6, 3],
-};
-
-// 鍒濆鍖栧仴搴峰害瓒嬪娍鍥�
-const initHealthChart = () => {
- if (healthChartRef.value) {
- healthChart = echarts.init(healthChartRef.value);
- const option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "cross",
- label: {
- backgroundColor: "#6a7985",
- },
- },
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: healthTrendData.dates,
- },
- yAxis: {
- type: "value",
- min: 70,
- max: 100,
- name: "鍋ュ悍搴�(%)",
- },
- series: [
- {
- name: "鍋ュ悍搴�",
- type: "line",
- stack: "鎬婚噺",
- areaStyle: {},
- emphasis: {
- focus: "series",
- },
- data: healthTrendData.values,
- itemStyle: {
- color: "#67c23a",
- },
- lineStyle: {
- width: 3,
- },
- },
- ],
- };
- healthChart.setOption(option);
- }
-};
-
-// 鍒濆鍖栨晠闅滅被鍨嬬粺璁￠ゼ鍥�
-const initFaultChart = () => {
- if (faultChartRef.value) {
- faultChart = echarts.init(faultChartRef.value);
- const option = {
- tooltip: {
- trigger: "item",
- },
- legend: {
- orient: "vertical",
- left: "left",
- },
- series: [
- {
- name: "鏁呴殰绫诲瀷",
- type: "pie",
- radius: "50%",
- data: faultTypeData.types.map((type, index) => ({
- name: type,
- value: faultTypeData.values[index],
- })),
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
- },
- },
- ],
- };
- faultChart.setOption(option);
- }
-};
-
-// 鐩戝惉绐楀彛澶у皬鍙樺寲锛岃皟鏁村浘琛ㄥぇ灏�
-const handleResize = () => {
- healthChart?.resize();
- faultChart?.resize();
-};
+// 闅忔満棰滆壊鐢熸垚鍑芥暟
+const getRandomColor = () => {
+ return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
+}
onMounted(() => {
- initHealthChart();
- initFaultChart();
- window.addEventListener("resize", handleResize);
-});
-
-onUnmounted(() => {
- window.removeEventListener("resize", handleResize);
- healthChart?.dispose();
- faultChart?.dispose();
-});
+ 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-container {
- padding: 20px;
- background-color: #f5f7fa;
+.dashboard {
+ background: #f5f7fa;
min-height: 100vh;
+ padding: 20px;
+ box-sizing: border-box;
}
-
-.statistics-card {
- height: 180px;
+.dashboard-top {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
}
-
-.card-content {
+.company-info {
display: flex;
flex-direction: column;
- height: 100%;
- justify-content: center;
- align-items: center;
+ 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;
}
-.card-title {
+.company-card::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ width: 1px;
+ background-color: #C9C5C5;
+ border-radius: 2px;
+}
+.company-name {
+ font-weight: 400;
font-size: 16px;
- color: #606266;
- margin-bottom: 10px;
+ color: #161A9A;
}
-
-.card-value {
- font-size: 32px;
- font-weight: bold;
- color: #303133;
- margin-bottom: 8px;
+.company-meta {
+ font-weight: 400;
+ font-size: 12px;
+ color: #818185;
}
-
-.card-desc {
- font-size: 14px;
- color: #909399;
+.data-cards {
+ display: flex;
+ gap: 16px;
+ justify-content: flex-start;
+ background: #ffffff;
+ border-radius: 12px;
+ padding: 20px;
}
-
-.card-header {
+.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: 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-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: 50%;
+}
+.todo-panel {
+ background: #fff;
+ border-radius: 12px;
+ padding: 20px;
+ width: 50%;
+}
+.todo-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ font-size: 15px;
+ overflow-y: auto;
+ height: 260px;
+}
+.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);
+}
+.todo-title {
+ font-weight: 400;
+ font-size: 12px;
+ color: #000000;
+ position: relative;
+}
+.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: #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;
+ 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: 10px;
+ font-weight: 700;
}
-.chart-container {
+.section-title::before {
+ position: absolute;
+ left: 0;
+ top: 4px;
+ content: '';
+ width: 4px;
+ height: 18px;
+ background-color: #002FA7;
+ border-radius: 2px;
+}
+.contract-info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ height: 90px;
+ background: rgba(245,245,245,0.59);
width: 100%;
- height: 350px;
+ border-radius: 10px;
+ padding: 10px 30px;
+}
+.contract-summary {
+ display: flex;
+ align-items: center;
+ gap: 30px;
+}
+.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: 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