From df07fa2662110d6069071e11915e2f6cea2f400b Mon Sep 17 00:00:00 2001
From: yaowanxin <3588231647@qq.com>
Date: 星期四, 18 九月 2025 13:49:55 +0800
Subject: [PATCH] Merge branch 'dev' into ywx
---
src/views/reportAnalysis/dataDashboard/index.vue | 1478 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,478 insertions(+), 0 deletions(-)
diff --git a/src/views/reportAnalysis/dataDashboard/index.vue b/src/views/reportAnalysis/dataDashboard/index.vue
new file mode 100644
index 0000000..6fe840b
--- /dev/null
+++ b/src/views/reportAnalysis/dataDashboard/index.vue
@@ -0,0 +1,1478 @@
+<template>
+ <div class="data-dashboard">
+ <!-- 鍏ㄥ睆鎸夐挳 - 绉诲姩鍒板乏涓婅 -->
+ <button class="fullscreen-btn" @click="toggleFullscreen" :title="isFullscreen ? '閫�鍑哄叏灞�' : '鍏ㄥ睆鏄剧ず'">
+ <svg v-if="!isFullscreen" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>
+ </svg>
+ <svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+ </svg>
+ </button>
+
+ <!-- 椤堕儴鏍囬鏍� -->
+ <div class="dashboard-header">
+ </div>
+
+ <!-- 涓昏鍐呭鍖哄煙 -->
+ <div class="dashboard-content">
+ <!-- 宸︿晶鍖哄煙 -->
+ <div class="left-panel">
+ <!-- 瀹㈡埛淇℃伅缁熻鍒嗘瀽 -->
+ <div class="panel-header">
+ <span class="panel-title">瀹㈡埛淇℃伅缁熻鍒嗘瀽</span>
+ </div>
+ <div class="panel-item-customers">
+ <div class="panel-title-second">
+ <div class="panel-title-icon"></div>
+ <div class="total-customers">
+ <span class="label">鎬诲悎鍚岄噾棰�(鍏�)</span>
+ <span class="value">{{sum}}</span>
+ </div>
+<!-- <div class="jiantou"></div>-->
+ </div>
+ <!-- 楗煎浘鍖哄煙 -->
+ <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 82%;margin-top: 20px">
+ <div style="width: 240px; height: 240px; background-image: url('/src/assets/BI/zonghetongbingtubiankuang@2x.png'); background-size: contain; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center;">
+ <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"
+ :series="materialPieSeries"
+ :tooltip="pieTooltip"
+ :options="{backgroundColor: 'transparent'}"
+ style="margin-left: 5px;"></Echarts>
+ </div>
+ <ul class="contract-list" style="margin: 0; padding: 0; display: flex; flex-direction: column;justify-content: space-around; height: 100%; overflow-y: auto; scroll-behavior: smooth;" ref="refContractList">
+ <li v-for="item in materialPieSeries[0].data" :key="item.name" style="list-style: none; margin-bottom: 12px;">
+ <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="font-weight: 700;font-size: 16px;color: #85B1E4;">锟{item.value}}</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <!-- 璐ㄩ噺缁熻 -->
+ <div class="panel-header">
+ <span class="panel-title">璐ㄩ噺缁熻</span>
+ </div>
+ <div class="main-panel">
+ <div class="panel-item-customers">
+ <div class="quality-cards">
+ <div class="quality-cardSec">
+ <div class="quality-card one"></div>
+ <div class="quality-cardTitle">
+ <div>鍘熸潗鏂欏凡妫�娴嬫暟</div>
+ <div>{{qualityStatisticsObject.supplierNum}}浠�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card two"></div>
+ <div class="quality-cardTitle">
+ <div>杩囩▼妫�楠屾暟閲�</div>
+ <div>{{qualityStatisticsObject.processNum}}浠�</div>
+ </div>
+ </div>
+ <div class="quality-cardSec">
+ <div class="quality-card three"></div>
+ <div class="quality-cardTitle">
+ <div>鍑哄巶宸叉鏁伴噺</div>
+ <div>{{qualityStatisticsObject.factoryNum}}浠�</div>
+ </div>
+ </div>
+ </div>
+ <Echarts ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend"
+ :series="barSeries1"
+ :tooltip="tooltip"
+ :xAxis="xAxis1"
+ :yAxis="yAxis1"
+ :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
+ style="height: 260px"></Echarts>
+ </div>
+ </div>
+ </div>
+
+ <!-- 涓棿鍖哄煙 -->
+ <div class="center-panel">
+ <!-- 椤堕儴缁熻鍗＄墖 -->
+ <div class="stats-cards">
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">鍛樺伐鎬绘暟</span>
+ <span class="card-value">{{totalStaff}}</span>
+ </div>
+ </div>
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">瀹㈡埛鎬绘暟</span>
+ <span class="card-value">{{totalCustomers}}</span>
+ </div>
+ </div>
+ <div class="stat-card">
+ <img src="@/assets/BI/icon@2x.png" alt="鍥炬爣" class="card-icon" />
+ <div class="card-content">
+ <span class="card-label">渚涘簲鍟嗘�绘暟</span>
+ <span class="card-value">{{totalSuppliers}}</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- 璁惧缁熻 -->
+ <div class="equipment-stats">
+ <div class="equipment-header">
+ <img src="@/assets/BI/shujutongjiicon@2x.png" alt="鍥炬爣" class="equipment-icon" />
+ <span class="equipment-title">璁惧缁熻</span>
+ </div>
+ <div class="equipment-items">
+ <div class="equipment-item">
+ <span class="equipment-value">{{equipmentNum}}</span>
+ <span class="equipment-label">璁惧鎬绘暟</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{equipmentRepair}}</span>
+ <span class="equipment-label">寰呯淮淇澶�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{equipmentMaintain}}</span>
+ <span class="equipment-label">寰呬繚鍏昏澶�</span>
+ </div>
+ <div class="equipment-item">
+ <span class="equipment-value">{{totalMeasuring}}</span>
+ <span class="equipment-label">璁￠噺鍣ㄥ叿鎬绘暟</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- 浜嬩欢鍚嶇О -->
+ <div class="event-info">
+ <div class="event-header">
+ <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />
+ <span class="event-title">浜嬩欢鍚嶇О</span>
+ </div>
+ <div class="event-content">
+ <ul class="todo-list" v-if="todoList.length > 0" ref="refTodoList">
+ <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="financial-header">
+ <span class="financial-title">璐㈠姟鍒嗘瀽</span>
+ </div>
+ <div class="main-panel">
+ <div class="panel-item-customers">
+ <div class="event-header">
+ <img src="@/assets/BI/shijianmingxiicon@2x.png" alt="鍥炬爣" class="event-icon" />
+ <span class="event-title">缁忚惀鎴愭灉鍒嗘瀽</span>
+ </div>
+ <Echarts ref="chart"
+ :chartStyle="chartStyle"
+ :grid="grid"
+ :legend="barLegend1"
+ :series="barSeries11"
+ :tooltip="tooltip"
+ :xAxis="xAxis3"
+ :yAxis="yAxis3"
+ :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
+ style="height: 300px"></Echarts>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鍙充晶鍖哄煙 -->
+ <div class="right-panel">
+ <!-- 搴旀敹搴斾粯缁熻 -->
+ <div class="panel-header">
+ <span class="panel-title">搴旀敹搴斾粯缁熻</span>
+ </div>
+ <div class="panel-item-customers">
+ <div style="display: flex;justify-content: space-between;margin-bottom: 20px;">
+ <div class="section-title">搴旀敹搴斾粯缁熻</div>
+ <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable" class="custom-radio-group">
+ <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"
+ :legend="barLegend2"
+ :series="barSeries"
+ :tooltip="tooltip"
+ :xAxis="xAxis"
+ :yAxis="yAxis"
+ :options="{backgroundColor: 'transparent', textStyle: {color: '#B8C8E0'}}"
+ style="height: 260px"></Echarts>
+ </div>
+
+ <!-- 鍥炴涓庡紑绁ㄥ垎鏋� -->
+ <div class="panel-header">
+ <span class="panel-title">鍥炴涓庡紑绁ㄥ垎鏋�</span>
+ </div>
+ <div class="panel-item-customers" style="padding-top: 60px;">
+ <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
+ :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" :options="{backgroundColor: 'transparent', textStyle: {color: '#FFFFFF'}}" style="height: 270px;"></Echarts>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import autofit from 'autofit.js'
+import Echarts from "@/components/Echarts/echarts.vue";
+import {
+ analysisCustomerContractAmounts, getAmountHalfYear,
+ homeTodos,
+ qualityStatistics,
+ statisticsReceivablePayable
+} from "@/api/viewIndex.js";
+import {staffOnJobListPage} from "@/api/personnelManagement/employeeRecord.js";
+import {listCustomer} from "@/api/basicData/customerFile.js";
+import {listSupplier} from "@/api/basicData/supplierManageFile.js";
+import {getLedgerPage} from "@/api/equipmentManagement/ledger.js";
+import {getRepairPage} from "@/api/equipmentManagement/repair.js";
+import {getUpkeepPage} from "@/api/equipmentManagement/upkeep.js";
+import {measuringInstrumentListPage} from "@/api/equipmentManagement/measurementEquipment.js";
+import {listPageAnalysis} from "@/api/financialManagement/expenseManagement.js";
+
+// 鍏ㄥ睆鐩稿叧鐘舵��
+const isFullscreen = ref(false);
+
+// 鍝嶅簲寮忔暟鎹�
+const currentTime = ref('')
+const currentDate = ref('')
+const timer = ref(null)
+const charts = ref([])
+
+// 鍥捐〃寮曠敤
+const customerPieChartRef = ref(null)
+const salesBarChartRef = ref(null)
+const dataBarChartRef = ref(null)
+const financialAreaChartRef = ref(null)
+const realtimeLineChartRef = ref(null)
+const refContractList = ref(null)
+const refTodoList = ref(null)
+const timerScroll = ref(null)
+
+const chartStylePie = {
+ width: '140%',
+ height: '140%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const materialPieSeries = ref([
+ {
+ type: 'pie',
+ radius: ['0%', '90%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 0
+ },
+ label: {
+ show: false
+ },
+ data: []
+ }
+])
+const pieLegend = reactive({
+ show: false,
+})
+const sum = ref(0)
+const totalStaff = ref(0)
+const totalCustomers = ref(0)
+const totalSuppliers = ref(0)
+const yny = ref(0)
+const chain = ref(0)
+const equipmentNum = ref(0)
+const equipmentRepair = ref(0)
+const equipmentMaintain = ref(0)
+const totalMeasuring = ref(0)
+const pieTooltip = reactive({
+ trigger: 'item',
+ formatter: function (params) {
+ // 鍔ㄦ�佺敓鎴愭彁绀轰俊鎭紝鍩轰簬鏁版嵁椤圭殑 name 灞炴��
+ const description = params.name === '鏈湀鍥炴閲戦' ? '鏈湀鍥炴閲戦' : '搴旀敹娆鹃噾棰�';
+ return `<div style="color: #B8C8E0">${description} ${params.value}鍏� ${params.percent}%</div>`;
+ },
+ position: 'right'
+})
+
+const qualityStatisticsObject = ref({
+ supplierNum: 0,
+ processNum: 0,
+ factoryNum: 0,
+})
+const chartStyle = {
+ width: '100%',
+ height: '150%' // 璁剧疆鍥捐〃瀹瑰櫒鐨勯珮搴�
+}
+const barSeries = ref([
+ {
+ name: '搴斾粯閲戦',
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#00A4ED' },
+ { offset: 1, color: '#4EE4FF' }
+ ])
+ }
+ },
+ {
+ name: '搴旀敹閲戦',
+ type: 'bar',
+ data: [],
+ label: {
+ show: true,
+ },
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#537EF5' },
+ { offset: 1, color: '#9061F8' }
+ ])
+ }
+ }
+])
+const radio1 = ref(1)
+const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
+const grid = {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+}
+const lineLegend = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ 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 barLegend2 = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['搴斾粯閲戦', '搴旀敹閲戦']
+}
+const barLegend = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['鍘熸潗鏂欎笉鍚堟牸鏁�', '杩囩▼涓嶅悎鏍兼暟', '鍑哄巶涓嶅悎鏍兼暟']
+}
+const barLegend1 = {
+ show: true,
+ textStyle: { color: '#B8C8E0' },
+ data: ['鎬绘敹鍏�', '鎬绘敮鍑�', '鍑�鏀跺叆']
+}
+const barSeries11 = ref([
+ {
+ name: '鎬绘敹鍏�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#00A4ED' },
+ { offset: 0, color: '#4EE4FF' }
+ ]
+ }
+ },
+ data: []
+ },
+ {
+ name: '鎬绘敮鍑�',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#3378FF' },
+ { offset: 0, color: '#4E8AFF' }
+ ]
+ }
+ },
+ data: []
+ },
+ {
+ name: '鍑�鏀跺叆',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#537EF5' },
+ { offset: 0, color: '#9061F8' }
+ ]
+ }
+ },
+ data: []
+ },
+])
+const barSeries1 = ref([
+ {
+ name: '鍘熸潗鏂欎笉鍚堟牸鏁�',
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#00A4ED' },
+ { offset: 0, color: '#4EE4FF' }
+ ]
+ }
+ },
+ data: []
+ },
+ {
+ name: '杩囩▼涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#3378FF' },
+ { offset: 0, color: '#4E8AFF' }
+ ]
+ }
+ },
+ data: []
+ },
+ {
+ name: '鍑哄巶涓嶅悎鏍兼暟',
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 1, color: '#537EF5' },
+ { offset: 0, color: '#9061F8' }
+ ]
+ }
+ },
+ data: []
+ },
+])
+const tooltip = {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ },
+ formatter: function (params) {
+ let result = params[0].axisValueLabel + '<br/>';
+ params.forEach(item => {
+ result += `<div style="color: #B8C8E0">${item.marker} ${item.seriesName}: ${item.value}</div>`;
+ });
+ return result;
+ }
+}
+const xAxis = [{
+ type: 'value',
+}]
+const yAxis = [{
+ type: 'category',
+ data: ['搴旀敹搴斾粯缁熻']
+}]
+const xAxis1 = ref([{
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: []
+}])
+const yAxis1 = [{
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' }
+}]
+const xAxis3 = ref([{
+ type: 'category',
+ axisTick: { show: false },
+ axisLabel: { color: '#B8C8E0' },
+ data: []
+}])
+const yAxis3 = [{
+ type: 'value',
+ axisLabel: { color: '#B8C8E0' }
+}]
+
+// 寰呭姙浜嬮」
+const todoList = ref([])
+
+// 绐楀彛澶у皬鍙樺寲澶勭悊
+const handleResize = () => {
+ charts.value.forEach(chart => {
+ if (chart && chart.resize) {
+ chart.resize()
+ }
+ })
+}
+
+// 閿�姣佸浘琛ㄥ疄渚�
+const disposeCharts = () => {
+ charts.value.forEach(chart => {
+ if (chart && chart.dispose) {
+ chart.dispose()
+ }
+ })
+ charts.value = []
+}
+// 鍚堝悓閲戦
+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 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 accountStatisticsInfo = () => {
+ listPageAnalysis().then((res) => {
+ xAxis3.value[0].data = res.data.days
+ barSeries11.value[0].data = res.data.totalIncome
+ barSeries11.value[1].data = res.data.totalExpense
+ barSeries11.value[2].data = res.data.netIncome
+ })
+}
+const getNum = () => {
+ const params = {
+ pageNum: -1,
+ pageSize: -1,
+ }
+ staffOnJobListPage({...params, staffState: 1}).then(res => {
+ totalStaff.value = res.data.total
+ })
+ listCustomer(params).then((res) => {
+ totalCustomers.value = res.total;
+ });
+ listSupplier(params).then((res) => {
+ totalSuppliers.value = res.data.total
+ });
+}
+const getLedgerNum = () => {
+ const params = {
+ pageNum: -1,
+ pageSize: -1,
+ }
+ getLedgerPage(params).then((res) => {
+ equipmentNum.value = res.data.total
+ });
+ getRepairPage(params).then((res) => {
+ equipmentRepair.value = res.data.total
+ });
+ getUpkeepPage(params).then((res) => {
+ equipmentMaintain.value = res.data.total
+ });
+ measuringInstrumentListPage(params).then((res) => {
+ totalMeasuring.value = res.data.total
+ });
+}
+// 寰呭姙浜嬮」
+const todoInfoS = () => {
+ homeTodos().then((res) => {
+ todoList.value = res.data
+ // 鍦ㄨ幏鍙栧埌寰呭姙浜嬮」鏁版嵁鍚庯紝鍒濆鍖栨粴鍔ㄥ姛鑳�
+ nextTick(() => {
+ initTodoListScroll()
+ })
+ })
+}
+// 搴斾粯搴旀敹缁熻
+const statisticsReceivable = (type) => {
+ statisticsReceivablePayable({type: radio1.value}).then((res) => {
+ // 璁剧疆搴斾粯閲戦鏁版嵁
+ barSeries.value[0].data = [
+ { value: res.data.payableMoney }
+ ]
+ // 璁剧疆搴旀敹閲戦鏁版嵁
+ barSeries.value[1].data = [
+ { value: res.data.receivableMoney }
+ ]
+ })
+}
+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'
+ },
+ }
+ ]
+}
+
+// 鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
+const autoSwitchTimer = ref(null)
+// 鍒濆鍖栧緟鍔炰簨椤瑰垪琛ㄦ粴鍔ㄥ姛鑳�
+const initTodoListScroll = () => {
+ const todoList = refTodoList.value
+ // 寮哄埗鍚敤婊氬姩锛屼笉妫�鏌ヤ换浣曟潯浠�
+ if (todoList) {
+ // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
+ const scrollItems = Array.from(todoList.querySelectorAll('li'))
+ if (scrollItems.length > 0) {
+ // 纭繚鏈夎冻澶熺殑椤圭洰鐢ㄤ簬婊氬姩
+ // 濡傛灉椤圭洰澶皯锛屽澶嶅埗鍑犳浠ョ‘淇濇粴鍔ㄦ晥鏋�
+ if (scrollItems.length < 4) {
+ const originalItems = [...scrollItems]
+ for (let i = 0; i < 4; i++) {
+ originalItems.forEach(item => {
+ const clone = item.cloneNode(true)
+ todoList.appendChild(clone)
+ })
+ }
+ // 閲嶆柊鑾峰彇鎵�鏈夐」鐩�
+ scrollItems.push(...Array.from(todoList.querySelectorAll('li')).slice(scrollItems.length));
+ }
+ const itemHeight = scrollItems[0]?.offsetHeight || 0
+ const containerHeight = todoList.clientHeight
+ const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
+
+ // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % scrollItems.length].cloneNode(true)
+ todoList.appendChild(clone)
+ }
+
+ let scrollPosition = 0
+ const scrollSpeed = 1.5 // 澧炲姞婊氬姩閫熷害锛屼娇婊氬姩鏇村姞鏄庢樉
+ const pauseTime = 3000 // 婊氬姩鏆傚仠鏃堕棿
+ let isPaused = false
+ let lastTimestamp = 0
+
+ // 杩炵画婊氬姩鍔ㄧ敾鍑芥暟
+ function scrollAnimation(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp
+ const deltaTime = timestamp - lastTimestamp
+ lastTimestamp = timestamp
+
+ if (!isPaused) {
+ scrollPosition += scrollSpeed * (deltaTime / 16) // 鏍囧噯鍖栦负60fps鐨勯�熷害
+
+ // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
+ const maxScroll = Math.max(todoList.scrollHeight - containerHeight - cloneCount * itemHeight, itemHeight * scrollItems.length)
+ if (scrollPosition >= maxScroll) {
+ scrollPosition = 0
+ todoList.scrollTop = 0
+ } else {
+ todoList.scrollTop = scrollPosition
+ }
+ }
+
+ todoList._animationFrame = requestAnimationFrame(scrollAnimation)
+ }
+
+ // 鍚姩婊氬姩鍔ㄧ敾
+ todoList._animationFrame = requestAnimationFrame(scrollAnimation)
+
+ // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused
+ }, pauseTime)
+
+ // 娓呯悊瀹氭椂鍣�
+ todoList._pauseTimer = pauseTimer
+ }
+ }
+}
+const getRandomColor = () => {
+ // 鐢熸垚娴呰壊锛歊銆丟銆丅 鍒嗛噺閮藉湪 150-255 涔嬮棿
+ const r = Math.floor(Math.random() * 106) + 150; // 150-255
+ const g = Math.floor(Math.random() * 106) + 150; // 150-255
+ const b = Math.floor(Math.random() * 106) + 150; // 150-255
+ // 灏� RGB 杞崲涓哄崄鍏繘鍒堕鑹�
+ return '#' + r.toString(16).padStart(2, '0') + g.toString(16).padStart(2, '0') + b.toString(16).padStart(2, '0');
+}
+
+// 鏇存柊鏃堕棿
+const updateTime = () => {
+ const now = new Date()
+ currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
+ currentDate.value = now.toLocaleDateString('zh-CN', {
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ weekday: 'long'
+ })
+}
+
+// 鍒濆鍖栨椂闂�
+const initTime = () => {
+ updateTime()
+ timer.value = setInterval(updateTime, 1000)
+}
+// 鍏ㄥ睆鍔熻兘瀹炵幇 - 閽堝data-dashboard鍏冪礌
+const toggleFullscreen = () => {
+ const element = document.querySelector('.data-dashboard')
+
+ if (!element) return
+
+ if (!isFullscreen.value) {
+ if (element.requestFullscreen) {
+ element.requestFullscreen()
+ } else if (element.webkitRequestFullscreen) {
+ element.webkitRequestFullscreen()
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen()
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen()
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen()
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen()
+ }
+ }
+}
+
+// 鐩戝惉鍏ㄥ睆鍙樺寲浜嬩欢
+const handleFullscreenChange = () => {
+ const fullscreenElement = document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.msFullscreenElement
+ isFullscreen.value = fullscreenElement && fullscreenElement.classList.contains('data-dashboard')
+}
+
+// 鐢熷懡鍛ㄦ湡閽╁瓙
+onMounted(() => {
+ initTime()
+ // 浣跨敤nextTick纭繚DOM瀹屽叏娓叉煋鍚庡啀鍒濆鍖栧浘琛�
+ nextTick(() => {
+ // 鍒濆鍖朼utofit鑷�傚簲
+ autofit.init({ dh: 1440, dw: 2560, el: '.data-dashboard', resize: true }, false)
+
+ // 娣诲姞鑷姩婊氬姩鍔ㄧ敾鏁堟灉 - 瀹㈡埛淇℃伅鍒楄〃
+ const contractList = refContractList.value
+ if (contractList && contractList.scrollHeight > contractList.clientHeight) {
+ // 鍒涘缓涓�涓厠闅嗛」锛岀敤浜庡疄鐜版棤缂濇粴鍔�
+ const scrollItems = Array.from(contractList.querySelectorAll('li'))
+ const itemHeight = scrollItems[0]?.offsetHeight || 0
+ const containerHeight = contractList.clientHeight
+ const cloneCount = Math.ceil(containerHeight / itemHeight) + 2
+
+ // 鍏嬮殕鍓嶅嚑涓」鐩苟娣诲姞鍒板垪琛ㄦ湯灏撅紝瀹炵幇鏃犵紳婊氬姩
+ for (let i = 0; i < cloneCount; i++) {
+ const clone = scrollItems[i % scrollItems.length].cloneNode(true)
+ contractList.appendChild(clone)
+ }
+
+ let scrollPosition = 0
+ const scrollSpeed = 1.5 // 澧炲姞婊氬姩閫熷害锛屼娇婊氬姩鏇村姞鏄庢樉
+ const pauseTime = 3000 // 婊氬姩鏆傚仠鏃堕棿
+ let isPaused = false
+ let lastTimestamp = 0
+
+ // 杩炵画婊氬姩鍔ㄧ敾鍑芥暟
+ function scrollAnimation(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp
+ const deltaTime = timestamp - lastTimestamp
+ lastTimestamp = timestamp
+
+ if (!isPaused) {
+ scrollPosition += scrollSpeed * (deltaTime / 16) // 鏍囧噯鍖栦负60fps鐨勯�熷害
+
+ // 褰撴粴鍔ㄨ秴杩囧師濮嬪唴瀹归暱搴︽椂锛岄噸缃綅缃疄鐜版棤缂濇粴鍔�
+ if (scrollPosition >= contractList.scrollHeight - containerHeight - cloneCount * itemHeight) {
+ scrollPosition = 0
+ contractList.scrollTop = 0
+ } else {
+ contractList.scrollTop = scrollPosition
+ }
+ }
+
+ timerScroll.value = requestAnimationFrame(scrollAnimation)
+ }
+
+ // 鍚姩婊氬姩鍔ㄧ敾
+ timerScroll.value = requestAnimationFrame(scrollAnimation)
+
+ // 璁剧疆婊氬姩-鏆傚仠-婊氬姩鐨勫惊鐜晥鏋�
+ const pauseTimer = setInterval(() => {
+ isPaused = !isPaused
+ }, pauseTime)
+
+ // 娓呯悊瀹氭椂鍣�
+ contractList._pauseTimer = pauseTimer
+ }
+
+ // 寰呭姙浜嬮」鍒楄〃婊氬姩鍔熻兘宸茬Щ鑷硉odoInfoS鍑芥暟涓紝鍦ㄨ幏鍙栨暟鎹悗鍒濆鍖�
+ })
+
+ window.addEventListener('resize', handleResize)
+ analysisCustomer()
+ qualityStatisticsInfo()
+ accountStatisticsInfo()
+ getNum()
+ getLedgerNum()
+ todoInfoS()
+ statisticsReceivable()
+ getAmountHalfYearNum()
+
+ // 璁剧疆鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣紝姣�10绉掑垏鎹竴娆�
+ autoSwitchTimer.value = setInterval(() => {
+ // 寰幆鍒囨崲锛�1(鍛�) -> 2(鏈�) -> 3(瀛ｅ害) -> 1(鍛�)
+ radio1.value = radio1.value === 3 ? 1 : radio1.value + 1
+ statisticsReceivable()
+ }, 10000) // 10绉掑垏鎹竴娆�
+})
+
+onBeforeUnmount(() => {
+ if (timer.value) {
+ clearInterval(timer.value)
+ }
+ if (timerScroll.value) {
+ cancelAnimationFrame(timerScroll.value)
+ }
+ // 娓呯悊婊氬姩鍒楄〃鐨勬殏鍋滃畾鏃跺櫒
+ const contractList = refContractList.value
+ if (contractList && contractList._pauseTimer) {
+ clearInterval(contractList._pauseTimer)
+ }
+
+ // 娓呯悊寰呭姙浜嬮」鍒楄〃鐨勫姩鐢诲拰瀹氭椂鍣�
+ const todoList = refTodoList.value
+ if (todoList) {
+ if (todoList._animationFrame) {
+ cancelAnimationFrame(todoList._animationFrame)
+ todoList._animationFrame = null
+ }
+ if (todoList._pauseTimer) {
+ clearInterval(todoList._pauseTimer)
+ todoList._pauseTimer = null
+ }
+ }
+
+ // 娓呯悊鑷姩杞崲鍛ㄣ�佹湀銆佸搴︾殑瀹氭椂鍣�
+ if (autoSwitchTimer.value) {
+ clearInterval(autoSwitchTimer.value)
+ autoSwitchTimer.value = null
+ }
+
+ window.removeEventListener('resize', handleResize)
+ window.removeEventListener('fullscreenchange', handleFullscreenChange)
+ window.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+ window.removeEventListener('MSFullscreenChange', handleFullscreenChange)
+ // 绉婚櫎鎴戜滑娣诲姞鐨刟utofit鍔ㄦ�佽皟鏁寸洃鍚櫒
+ if (window._autofitUpdateHandler) {
+ window.removeEventListener('resize', window._autofitUpdateHandler)
+ delete window._autofitUpdateHandler
+ }
+ disposeCharts()
+ // 鍏抽棴autofit
+ autofit.off()
+})
+</script>
+
+<style scoped>
+.data-dashboard {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background-image: url("@/assets/BI/backImage@2x.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+/* 鍏ㄥ睆鐘舵�佺殑鏍峰紡 */
+.data-dashboard:fullscreen {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
+}
+
+/* Webkit娴忚鍣ㄥ墠缂� */
+.data-dashboard:-webkit-full-screen {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
+}
+
+/* MS娴忚鍣ㄥ墠缂� */
+.data-dashboard:-ms-fullscreen {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: inherit;
+ z-index: 9999;
+}
+
+
+.dashboard-header {
+ position: relative;
+ z-index: 1;
+ height: 170px;
+ background-image: url("@/assets/BI/biaoti.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.fullscreen-btn {
+ position: absolute;
+ top: 10px;
+ left: 20px;
+ width: 40px;
+ height: 40px;
+ background: rgba(0, 20, 60, 0.8);
+ border: 1px solid rgba(0, 212, 255, 0.3);
+ border-radius: 6px;
+ color: #00d4ff;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.3s;
+ z-index: 10000;
+}
+
+.fullscreen-btn:hover {
+ background: rgba(0, 30, 90, 0.9);
+ border-color: rgba(0, 212, 255, 0.5);
+}
+
+.dashboard-content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ gap: 30px;
+ padding: 0 30px;
+ height: calc(100% - 120px);
+ overflow: hidden;
+}
+
+/* 纭繚鍚勯潰鏉胯兘澶熸纭樉绀� */
+.left-panel, .center-panel, .right-panel {
+ overflow: hidden;
+}
+
+.left-panel,
+.right-panel {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ width: 520px;
+}
+
+.center-panel {
+ flex: 1.5;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+.panel-item-customers {
+ border: 1px solid #1A58B0;
+ padding: 18px;
+ width: 100%;
+ height: 540px;
+}
+.panel-title-second {
+ height: 60px;
+ display: flex;
+ gap: 12px;
+ margin-bottom: 20px;
+ align-items: center;
+}
+.quality-cards {
+ display: flex;
+ gap: 12px;
+ width: 100%;
+ height: 94px;
+ justify-content: space-between;
+ align-items: center;
+}
+.quality-cardSec {
+ display: flex;
+}
+.quality-cardTitle {
+ font-weight: 400;
+ font-size: 14px;
+ color: #FFFFFF;
+ display: flex;
+ align-items: flex-start;
+ flex-direction: column;
+}
+.quality-card {
+ width: 80px;
+ height: 60px;
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.quality-card.one {
+ background-image: url("@/assets/BI/yuancailiaoyijianicon@2x.png");
+}
+.quality-card.two {
+ background-image: url("@/assets/BI/guochengyijianicon@2x.png");
+}
+.quality-card.three {
+ background-image: url("@/assets/BI/chuchangyijianicon@2x.png");
+
+}
+.panel-title-icon {
+ width: 60px;
+ height: 60px;
+ background-image: url("@/assets/BI/hetongicon.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.panel-header {
+ background-image: url("@/assets/BI/kehuhetongback@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+
+.panel-title {
+ width: 100%;
+ font-weight: 500;
+ font-size: 16px;
+ color: #D9ECFF;
+ padding-left: 46px;
+ line-height: 36px;
+}
+.total-customers {
+ background-image: url("@/assets/BI/hetongjineback@2x.png");
+ background-size: cover;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 90%;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ gap: 20px;
+}
+
+.total-customers .label {
+ font-weight: 500;
+ font-size: 16px;
+ color: #FFFFFF;
+}
+
+.total-customers .value {
+ font-weight: 500;
+ font-size: 40px;
+ background: linear-gradient(360deg, #008BFD 0%, #FFFFFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.contract-list {
+ margin-top: 16px;
+ font-size: 14px;
+ color: #666;
+ list-style: none;
+ padding: 0;
+ height: 82%;
+ overflow-y: auto;
+ width: 460px;
+ /* 闅愯棌婊氬姩鏉′絾淇濈暀婊氬姩鍔熻兘 */
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE鍜孍dge */
+}
+
+/* Chrome銆丼afari鍜孫pera */
+.contract-list::-webkit-scrollbar {
+ display: none;
+}
+.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;
+}
+.stats-cards {
+ display: flex;
+ gap: 30px;
+}
+
+.stat-card {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ background-image: url("@/assets/BI/border@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ height: 142px;
+}
+
+.card-icon {
+ width: 100px;
+ height: 100px;
+ margin: 20px 20px 0 10px;
+}
+
+.card-content {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.card-value {
+ font-weight: 500;
+ font-size: 40px;
+ background: linear-gradient(360deg, #008BFD 0%, #FFFFFF 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+}
+
+.card-label {
+ font-weight: 400;
+ font-size: 19px;
+ color: rgba(208,231,255,0.7);
+}
+
+.equipment-stats {
+ border: 1px solid #1A58B0;
+ padding: 18px;
+ height: 240px;
+}
+.equipment-header {
+ font-weight: 500;
+ font-size: 21px;
+ display: flex;
+ border-bottom: 1px solid;
+ border-image: linear-gradient( 270deg, rgba(0,126,255,0) 0%, rgba(0,126,255,0.4549) 35%, #007EFF 78%, #007EFF 100%) 1;
+ padding-bottom: 2px;
+}
+.equipment-title {
+ font-weight: 500;
+ font-size: 21px;
+ background: linear-gradient(360deg, #056DFF 0%, #43E8FC 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ line-height: 50px;
+}
+.equipment-icon {
+ width: 50px;
+ height: 50px;
+}
+.equipment-items {
+ display: flex;
+ justify-content: space-around;
+ gap: 30px;
+}
+
+.equipment-item {
+ text-align: center;
+}
+
+.equipment-value {
+ display: block;
+ font-weight: 500;
+ font-size: 40px;
+ color: #FFFFFF;
+ width: 120px;
+ height: 110px;
+ line-height: 110px;
+ background-image: url("@/assets/BI/shujutongji@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ margin-bottom: 8px;
+}
+
+.equipment-label {
+ font-weight: 500;
+ font-size: 21px;
+ color: #FFFFFE;
+}
+
+.event-info {
+ background-image: url("@/assets/BI/shijianmingchengbeijing@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+ padding: 20px;
+ height: 186px;
+}
+.event-header {
+ display: flex;
+ align-items: center;
+}
+.event-icon {
+ width: 40px;
+ height: 40px;
+}
+.event-title {
+ font-weight: 500;
+ font-size: 24px;
+ color: #FFFFFE;
+ line-height: 30px;
+}
+.todo-list {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ height: 120px; /* 鎸夌敤鎴疯姹傝皟鏁撮珮搴� */
+ overflow: hidden;
+ font-size: 15px;
+}
+.todo-list li {
+ border-radius: 8px;
+ margin-bottom: 12px;
+ padding: 12px 40px;
+ height: 74px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.todo-title {
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFE;
+ 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: 20px;
+ color: #FFFFFE;
+}
+.todo-time {
+ font-weight: 400;
+ font-size: 20px;
+ color: #FFFFFE;
+}
+.financial-header {
+ background-image: url("@/assets/BI/caiwufenxiback@2x.png");
+ background-size: 100% 100%;
+ background-position: center;
+ background-repeat: no-repeat;
+}
+.financial-title {
+ width: 100%;
+ font-weight: 500;
+ font-size: 16px;
+ color: #D9ECFF;
+ padding-left: 46px;
+ line-height: 36px;
+}
+
+/* 鑷畾涔夊崟閫夋寜閽粍鏍峰紡 */
+.custom-radio-group :deep(.el-radio-button__inner) {
+ background-color: transparent;
+ color: white;
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.custom-radio-group :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+ background-color: rgba(255, 255, 255, 0.2);
+ color: white;
+ border-color: rgba(255, 255, 255, 0.5);
+ box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.5);
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3