diff --git a/src/views/cost/index.vue b/src/views/cost/index.vue
index 35aae8d9..f1289b2b 100644
--- a/src/views/cost/index.vue
+++ b/src/views/cost/index.vue
@@ -1,423 +1,430 @@
 <template>
-	<div class="home-page">
-		<div class="date-tabs">
-			<!-- @tab-click="handleClick" -->
-			<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
-				<el-tab-pane
-					:label="'\u2002\u2002日\u2002\u2002'"
-					name="日"></el-tab-pane>
-				<el-tab-pane
-					:label="'\u2002\u2002周\u2002\u2002'"
-					name="周"></el-tab-pane>
-				<el-tab-pane
-					:label="'\u2002\u2002月\u2002\u2002'"
-					name="月"></el-tab-pane>
-				<el-tab-pane
-					:label="'\u2002\u2002年\u2002\u2002'"
-					name="年"></el-tab-pane>
-			</el-tabs>
-			<div class="detail">
+	<div class="app-container">
+		<!-- 顶部日期&筛选栏 -->
+		<el-row :gutter="20" class="top-bar">
+			<el-col :span="8">
 				<el-date-picker
-					v-model="timeday"
-					align="right"
-					type="date"
-					format="yyyy-MM-dd"
-					valueFormat="yyyy-MM-dd"
-					:clearable="false"
-					@change="timedayChange"
-					placeholder="选择日期"
-					:picker-options="pickerOptions"></el-date-picker>
-			</div>
-		</div>
-		<el-row class="main-top" :gutter="16">
-			<el-col :span="24" style="position: relative">
-				<div class="title">
-					<svg-icon icon-class="home-produce" />
-					<span class="title-inner">生产总成本</span>
-				</div>
-				<el-row class="box">
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.priceS }}万元</div>
-						<div class="unit-style">总计成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.matPriceS }}万元</div>
-						<div class="unit-style">原料成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.energyPriceS }}万元</div>
-						<div class="unit-style">能源成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.otherPriceS }}万元</div>
-						<div class="unit-style">其他成本</div>
-					</el-col>
-					<!-- <el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.ratioS }}</div>
-						<div class="unit-style">综合良品率/%</div>
-					</el-col> -->
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.areaPriceS }}元</div>
-						<div class="unit-style">综合每平米成本</div>
-					</el-col>
-				</el-row>
+					v-model="dateRange"
+					type="daterange"
+					range-separator="~"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+					value-format="yyyy-MM-dd" />
+				<el-button type="primary" style="margin-left: 10px">查询</el-button>
 			</el-col>
-			<el-col :span="24" style="position: relative">
-				<div class="title">
-					<svg-icon icon-class="home-produce" />
-					<span class="title-inner">原片成本</span>
-				</div>
-				<el-row class="box">
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.priceO }}万元</div>
-						<div class="unit-style">原片总成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.matPriceO }}万元</div>
-						<div class="unit-style">原料成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.energyPriceO }}万元</div>
-						<div class="unit-style">能源成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.otherPriceO }}万元</div>
-						<div class="unit-style">其他成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.ratioO }}</div>
-						<div class="unit-style">原片良品率/%</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.areaPriceO }}元</div>
-						<div class="unit-style">原片每平米成本</div>
-					</el-col>
-				</el-row>
-			</el-col>
-			<el-col :span="24" style="position: relative">
-				<div class="title">
-					<svg-icon icon-class="home-produce" />
-					<span class="title-inner">深加工成本</span>
-				</div>
-				<el-row class="box">
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.priceD }}万元</div>
-						<div class="unit-style">深加工总成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.energyPriceD }}万元</div>
-						<div class="unit-style">能源成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.otherPriceD }}万元</div>
-						<div class="unit-style">其他成本</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.ratioD }}</div>
-						<div class="unit-style">深加工良品率/%</div>
-					</el-col>
-					<el-col :span="4" class="num-box shadow">
-						<div class="num-style">{{ homeData.areaPriceD }}元</div>
-						<div class="unit-style">深加工每平米成本</div>
-					</el-col>
-				</el-row>
+			<el-col :span="16">
+				<el-tag type="info" @click="changeTime('yesterday')">昨日</el-tag>
+				<el-tag type="info" @click="changeTime('week')">本周</el-tag>
+				<el-tag type="info" @click="changeTime('month')">本月</el-tag>
+				<el-tag type="info" @click="changeTime('year')">本年</el-tag>
 			</el-col>
 		</el-row>
-		<el-row class="main-bottom" :gutter="16" v-if="false">
-			<el-col :span="9">
-				<div class="chart-wrapper">
-					<line-chart :chart-data="lineChartData" />
-				</div>
-			</el-col>
-			<el-col :span="7">
-				<div class="chart-wrapper">
-					<pie-chart />
-				</div>
+
+		<!-- 成本概览卡片 -->
+		<el-row :gutter="20" class="card-row">
+			<el-col :span="8">
+				<el-card class="cost-card">
+					<div class="card-title">总制造成本（元/平米）</div>
+					<div class="card-content">
+						<div>
+							目标
+							<span class="target-val">16</span>
+						</div>
+						<div>
+							实际
+							<span class="actual-val">12.8</span>
+						</div>
+						<el-progress :stroke-width="13" :percentage="80" color="#42b983" />
+					</div>
+				</el-card>
 			</el-col>
 			<el-col :span="8">
-				<div class="chart-wrapper">
-					<bar-chart />
-				</div>
+				<el-card class="cost-card">
+					<div class="card-title">原片成本（元/平米）</div>
+					<div class="card-content">
+						<div>
+							目标
+							<span class="target-val">16</span>
+						</div>
+						<div>
+							实际
+							<span class="actual-val">12.8</span>
+						</div>
+						<el-progress :stroke-width="13" :percentage="99" color="#42b983" />
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :span="8">
+				<el-card class="cost-card">
+					<div class="card-title">加工成本（元/平米）</div>
+					<div class="card-content">
+						<div>
+							目标
+							<span class="target-val">16</span>
+						</div>
+						<div>
+							实际
+							<span class="actual-val">12.8</span>
+						</div>
+						<el-progress :stroke-width="13" :percentage="99" color="#42b983" />
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+
+		<!-- 成本构成区域 -->
+		<el-row :gutter="20" class="composition-row">
+			<!-- 饼图 -->
+			<el-col :span="6">
+				<el-card class="composition-card">
+					<div class="card-title">成本构成</div>
+					<div id="costPie" class="chart" style="height: 350px"></div>
+				</el-card>
+			</el-col>
+			<!-- 原片/加工成本子项 -->
+			<el-col :span="18">
+				<el-card class="composition-card">
+					<div class="card-title">成本构成</div>
+
+					<!-- 原片成本子项 -->
+					<div class="sub-cost-group">
+						<div class="sub-cost-title">原片成本</div>
+						<div class="sub-cost">
+							<div
+								v-for="(item, idx) in rawSubCosts"
+								:key="idx"
+								class="sub-cost-div">
+								<div class="sub-cost-name">
+									{{ item.name }}
+									<div class="sub-cost-val">{{ item.val }}</div>
+								</div>
+								<div style="text-align: center">
+									<el-progress
+										type="circle"
+										:percentage="89"
+										:width="60"
+										:stroke-width="10"
+										:show-text="false"
+										color="#e74c3c" />
+								</div>
+								<div class="sub-cost-name">
+									目标
+									<span class="red-text">{{ item.target }}</span>
+								</div>
+								<div class="sub-cost-name">
+									完成率
+									<span class="red-text">89%</span>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<el-divider></el-divider>
+					<!-- 加工成本子项 -->
+					<div class="sub-cost-group" style="margin-top: 20px">
+						<div class="sub-cost-title">加工成本</div>
+						<div class="sub-cost">
+							<div
+								v-for="(item, idx) in processSubCosts"
+								:key="idx"
+								class="sub-cost-div">
+								<div class="sub-cost-name">
+									{{ item.name }}
+									<div class="sub-cost-val">{{ item.val }}</div>
+								</div>
+								<div style="text-align: center">
+									<el-progress
+										type="circle"
+										:percentage="89"
+										:width="60"
+										:stroke-width="10"
+										:show-text="false"
+										color="#e74c3c" />
+								</div>
+								<div class="sub-cost-name">
+									目标
+									<span class="red-text">{{ item.target }}</span>
+								</div>
+								<div class="sub-cost-name">
+									完成率
+									<span class="red-text">89%</span>
+								</div>
+							</div>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+
+		<!-- 趋势图区域 -->
+		<el-row :gutter="20" class="trend-row">
+			<!-- 总制造成本趋势 -->
+			<el-col :span="8">
+				<el-card class="trend-card">
+					<div class="card-title">总制造成本趋势</div>
+					<div id="totalTrend" class="chart" style="height: 300px"></div>
+				</el-card>
+			</el-col>
+			<!-- 原片/加工成本趋势 -->
+			<el-col :span="8">
+				<el-card class="trend-card">
+					<div class="card-title">原片/加工成本趋势</div>
+					<el-tabs v-model="costTab" type="card" style="margin-bottom: 10px">
+						<el-tab-pane label="原片成本" name="raw"></el-tab-pane>
+						<el-tab-pane label="加工成本" name="process"></el-tab-pane>
+					</el-tabs>
+					<div id="rawProcessTrend" class="chart" style="height: 300px"></div>
+				</el-card>
+			</el-col>
+			<!-- 单项成本趋势 -->
+			<el-col :span="8">
+				<el-card class="trend-card">
+					<div class="card-title">单项成本趋势</div>
+					<el-tabs v-model="itemTab" type="card" style="margin-bottom: 10px">
+						<el-tab-pane label="人工成本" name="labor"></el-tab-pane>
+						<el-tab-pane label="原料成本" name="material"></el-tab-pane>
+						<el-tab-pane label="制造费用" name="expense"></el-tab-pane>
+						<el-tab-pane label="玻璃热耗" name="heat"></el-tab-pane>
+						<el-tab-pane label="原片成品率" name="yield"></el-tab-pane>
+					</el-tabs>
+					<div id="itemTrend" class="chart" style="height: 300px"></div>
+				</el-card>
 			</el-col>
 		</el-row>
-		<div
-			class="main-footer"
-			style="
-				color: #c7c7c7;
-				user-select: none;
-				font-size: 14px;
-				letter-spacing: 1px;
-				height: 30px;
-				display: grid;
-				place-content: center;
-			">
-			&copy; 中建材智能自动化研究院有限公司
-		</div>
 	</div>
 </template>
 
 <script>
-import moment from 'moment';
-import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
-import LineChart from '../dashboard/LineChart';
-import PieChart from '../dashboard/PieChart';
-import BarChart from '../dashboard/BarChart';
-import PanelGroup from '../dashboard/PanelGroup';
-import { getData } from '@/api/cost/allCost';
-import { getUserProfile } from '@/api/system/user';
-
-const lineChartData = {
-	newVisitis: {
-		expectedData: [100, 120, 161, 134, 105, 160, 165],
-		actualData: [120, 82, 91, 154, 162, 140, 145],
-	},
-	messages: {
-		expectedData: [200, 192, 120, 144, 160, 130, 140],
-		actualData: [180, 160, 151, 106, 145, 150, 130],
-	},
-	purchases: {
-		expectedData: [80, 100, 121, 104, 105, 90, 100],
-		actualData: [120, 90, 100, 138, 142, 130, 130],
-	},
-	shoppings: {
-		expectedData: [130, 140, 141, 142, 145, 150, 160],
-		actualData: [120, 82, 91, 154, 162, 140, 130],
-	},
-};
+import * as echarts from 'echarts';
 
 export default {
-	name: 'Home',
-	mixins: [tableHeightMixin],
-	components: {
-		LineChart,
-		PieChart,
-		PanelGroup,
-		BarChart,
-	},
-	computed: {
-		gradientBackground() {
-			return {
-				'background-image':
-					'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
-				'background-size': '100px 100px', // 调整条纹的大小
-			};
-		},
-	},
+	name: 'CostDashboard',
 	data() {
 		return {
-			activeName: '日',
-			user: '',
-			lineChartData: lineChartData.newVisitis,
-			homeData: {},
-			timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
-			startTime:
-				moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
-				' 00:00:00',
-			endTime:
-				moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
-				' 00:00:00',
-
-			pickerOptions: {
-				disabledDate(time) {
-					return time.getTime() + 3600 * 1000 * 24 > Date.now();
-				},
-				shortcuts: [
-					{
-						text: '今天',
-						onClick(picker) {
-							picker.$emit('pick', new Date());
-						},
-					},
-					{
-						text: '昨天',
-						onClick(picker) {
-							const date = new Date();
-							date.setTime(date.getTime() - 3600 * 1000 * 24);
-							picker.$emit('pick', date);
-						},
-					},
-					{
-						text: '一周前',
-						onClick(picker) {
-							const date = new Date();
-							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-							picker.$emit('pick', date);
-						},
-					},
-				],
-			},
+			dateRange: ['2023-05-06', '2023-05-06'],
+			costTab: 'raw',
+			itemTab: 'labor',
+			// 原片成本子项
+			rawSubCosts: [
+				{ name: '人工成本', val: 4.56, target: 4.32 },
+				{ name: '原料成本', val: 4.56, target: 4.32 },
+				{ name: '原片制造费用', val: 4.56, target: 4.32 },
+				{ name: '玻璃热耗', val: 4.56, target: 4.32 },
+				{ name: '原片成品率', val: 4.56, target: 4.32 },
+			],
+			// 加工成本子项
+			processSubCosts: [
+				{ name: '人工成本', val: 4.56, target: 4.32 },
+				{ name: '加工动力成本', val: 4.56, target: 4.32 },
+				{ name: '加工制造费用', val: 4.56, target: 4.32 },
+				{ name: '加工投入产出率', val: 4.56, target: 4.32 },
+			],
+			// 趋势图模拟数据
+			trendX: ['00:00', '01:00', '02:00'],
+			trendY: [20, 40, 50],
+			targetY: 12.54,
 		};
 	},
-	created() {
-	},
-	beforeDestroy() {
+	mounted() {
+		this.initCostPie();
+		this.initTotalTrend();
+		this.initRawProcessTrend();
+		this.initItemTrend();
 	},
 	methods: {
-		getData() {
-			let listQuery = {
-				//分页
-				pageSize: 10,
-				pageNo: 1,
-				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
-				startTime: this.timeday + ' 00:00:00',
-			};
-			getData(listQuery).then((response) => {
-				this.homeData = response.data;
-				for (let i in this.homeData) {
-					this.homeData[i] = Number(this.homeData[i]).toFixed(2);
-				}
+		// 切换时间范围（示例）
+		changeTime(type) {
+			// 实际项目中需根据type请求对应数据
+			console.log('切换时间:', type);
+		},
+		// 初始化成本构成饼图
+		initCostPie() {
+			const pieChart = echarts.init(document.getElementById('costPie'));
+			pieChart.setOption({
+				tooltip: { trigger: 'item' },
+				legend: {
+					orient: 'horizontal', // 水平排列
+					bottom: 0, // 放在底部
+					icon: 'circle',
+					left: 'center',
+					formatter: function (name) {
+						return name;
+					},
+				},
+				series: [
+					{
+						type: 'pie',
+						data: [
+							{ name: '原料成本(4.2元)', value: 29.9 },
+							{ name: '动力成本(2.1元)', value: 24 },
+							{ name: '人工成本(1.5元)', value: 24 },
+							{ name: '辅料成本(0.5元)', value: 21.2 },
+							{ name: '制造费用(0.5元)', value: 21.2 },
+						],
+						label: { show: false },
+						labelLine: { show: false },
+						bottom: 10,
+					},
+				],
 			});
+			window.addEventListener('resize', () => pieChart.resize());
 		},
-		timedayChange() {
-			let listQuery = {
-				//分页
-				pageSize: 10,
-				pageNo: 1,
-				statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
-				startTime: this.timeday + ' 00:00:00',
-			};
-				getData(listQuery).then((response) => {
-					this.homeData = response.data;
-					for (let i in this.homeData) {
-						this.homeData[i] = Number(this.homeData[i]).toFixed(2);
-					}
-				});
+		// 初始化总制造成本趋势图
+		initTotalTrend() {
+			const totalChart = echarts.init(document.getElementById('totalTrend'));
+			totalChart.setOption({
+				grid: { top: 20, bottom: 30, left: 30, right: 10 },
+				xAxis: { type: 'category', data: this.trendX },
+				yAxis: { type: 'value', min: -20, max: 60 },
+				series: [
+					{
+						name: '实际值',
+						type: 'line',
+						data: this.trendY,
+						lineStyle: { color: '#409eff' },
+					},
+					{
+						name: '目标值',
+						type: 'line',
+						data: [this.targetY, this.targetY, this.targetY],
+						lineStyle: { type: 'dashed', color: '#e6a23c' },
+					},
+				],
+			});
+			window.addEventListener('resize', () => totalChart.resize());
 		},
-		goDetail() {
-			this.$router.push({ path: 'indexDetail' });
+		// 初始化原片/加工成本趋势图
+		initRawProcessTrend() {
+			const rpChart = echarts.init(document.getElementById('rawProcessTrend'));
+			rpChart.setOption({
+				grid: { top: 10, bottom: 20, left: 20, right: 10 },
+				xAxis: { type: 'category', data: this.trendX },
+				yAxis: { type: 'value', min: -20, max: 60 },
+				series: [
+					{
+						name: '实际值',
+						type: 'line',
+						data: this.trendY,
+						lineStyle: { color: '#409eff' },
+					},
+					{
+						name: '目标值',
+						type: 'line',
+						data: [this.targetY, this.targetY, this.targetY],
+						lineStyle: { type: 'dashed', color: '#e6a23c' },
+					},
+				],
+			});
+			window.addEventListener('resize', () => rpChart.resize());
+		},
+		// 初始化单项成本趋势图
+		initItemTrend() {
+			const itemChart = echarts.init(document.getElementById('itemTrend'));
+			itemChart.setOption({
+				grid: { top: 10, bottom: 20, left: 20, right: 10 },
+				xAxis: { type: 'category', data: this.trendX },
+				yAxis: { type: 'value', min: -20, max: 60 },
+				series: [
+					{
+						name: '实际值',
+						type: 'line',
+						data: this.trendY,
+						lineStyle: { color: '#409eff' },
+					},
+					{
+						name: '目标值',
+						type: 'line',
+						data: [this.targetY, this.targetY, this.targetY],
+						lineStyle: { type: 'dashed', color: '#e6a23c' },
+					},
+				],
+			});
+			window.addEventListener('resize', () => itemChart.resize());
 		},
 	},
 };
 </script>
 
-<style lang="scss" scoped>
-.home-page::before {
-	background-image: url('~@/assets/img/home-bg.png');
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center;
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	transform: rotate(180deg);
-}
-.date-tabs {
-	padding-left: 40px;
-	padding-top: 20px;
-	position: relative;
+<style scoped>
+.top-bar {
 	margin-bottom: 20px;
 }
-:deep(.date-tabs) {
-	.el-tabs__header {
-		margin-bottom: 8px;
-		display: inline-block;
-		transform: translateY(-12px);
-	}
-
-	.el-tabs__content {
-		overflow: visible;
-	}
-
-	.el-tabs__item {
-		font-size: 18px;
-		color: #fff;
-		padding-left: 0 !important;
-		padding-right: 0 !important;
-		line-height: 36px !important;
-		height: 36px;
-	}
-	.el-tabs__item.is-active {
-		color: #0b58ff;
-	}
+.card-row,
+.composition-row {
+	margin-bottom: 20px;
 }
-.detail {
-	display: inline-block;
-	position: absolute;
-	left: 260px;
-	top: 10px;
+.cost-card .card-title {
+	font-size: 22px;
+	font-weight: bold;
+	margin-bottom: 15px;
 }
-:deep(.detail) {
-	.el-input__inner {
-		background-color: transparent;
-		color: white;
-	}
-}
-// .current-date {
-// 	color: #fff;
-// 	font-size: 18px;
-// 	position: absolute;
-// 	left: 260px;
-// 	top: 14px;
-// }
-.current-time {
-	color: #fff;
+.cost-card .card-content {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: 10px;
+	align-items: center;
 	font-size: 18px;
-	position: absolute;
-	right: 38px;
-	top: 14px;
 }
-.main-top {
-	width: 100%;
-	padding: 0 20px 0 40px;
-	.title {
-		position: absolute;
-		left: 34px;
-		top: 20px;
-		width: 180px;
-		font-size: 32px;
-		z-index: 10;
-		.title-inner {
-			position: absolute;
-			left: 42px;
-			top: 5px;
-			font-size: calc(100vw * 20 / 1920);
-		}
-	}
-	.box {
-		background-color: #fff;
-		border-radius: 24px;
-		height: 192px;
-		padding: 40px 24px 32px 24px;
-		margin-bottom: 20px;
-		box-shadow: 0 8px 8px 0 gray;
-		.num-box {
-			height: 120px;
-			padding-top: 26px;
-			text-align: center;
-			.num-style {
-				color: #000;
-				font-size: calc(100vw * 40 / 1920);
-			}
-			.unit-style {
-				color: rgba(0, 0, 0, 0.7);
-				font-size: calc(100vw * 18 / 1920);
-			}
-		}
-		.shadow {
-			background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
-		}
-	}
+.target-val {
+	color: #666;
+	margin-left: 5px;
+	font-size: 20px;
 }
-.main-bottom {
-	width: 100%;
-	margin-top: 20px;
-	.chart-wrapper {
-		margin-left: 10px;
-		height: 425px;
-		background: #fff;
-		border-radius: 5px;
-		box-shadow: 0 3px 3px 0 gray;
-	}
-}
-</style>
-<style lang="scss">
-.home-page {
-	.el-progress-bar__inner {
-		background-image: url('~@/assets/img/home-progress-bg.png');
-		background-size: cover;
-	}
+.actual-val {
+	color: #42b983;
+	margin-left: 5px;
+	font-size: 20px;
+}
+.composition-card {
+	height: 480px;
+}
+.composition-card .card-title {
+	font-size: 18px;
+	font-weight: bold;
+	margin-bottom: 15px;
+}
+.sub-cost {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	gap: 10px;
+	align-items: center;
+}
+.sub-cost-group .sub-cost-title {
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+.sub-cost-group .sub-cost-div {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 10px;
+	align-items: center;
+	border: 1px solid rgb(220, 220, 220, 0.5);
+	padding: 10px;
+}
+.sub-cost-name {
+	text-align: center;
+	margin-top: 5px;
+	font-size: 14px;
+}
+.sub-cost-val {
+	font-size: 16px;
+	font-weight: bold;
+}
+.completion {
+	text-align: center;
+	font-size: 12px;
+	color: #666;
+}
+.red-text {
+	color: #e74c3c;
+}
+.trend-card {
+  height: 450px;
+}
+.trend-card .card-title {
+	font-size: 16px;
+	font-weight: bold;
+	margin-bottom: 10px;
 }
 </style>
diff --git a/src/views/group/Schedule/add-or-updata.vue b/src/views/group/Schedule/add-or-updata.vue
index dd4f8991..da9fbd2d 100644
--- a/src/views/group/Schedule/add-or-updata.vue
+++ b/src/views/group/Schedule/add-or-updata.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2025-10-13 15:07:24
  * @LastEditors: zwq
- * @LastEditTime: 2025-12-01 14:40:46
+ * @LastEditTime: 2025-12-03 15:48:26
  * @Description:
 -->
 <template>
@@ -826,10 +826,14 @@ export default {
 				});
 				checkPlan(data).then((RES) => {
 					createStepFour(this.dataForm.id).then((res) => {
-						this.$modal.msgSuccess('创建计划成功');
-						this.stepNum = 1;
-						this.$emit('setSN', this.stepNum);
-						this.$emit('refreshDataList');
+						if (res.code === 200 || res.code === 0) {
+							this.$modal.msgSuccess('创建计划成功');
+							this.stepNum = 1;
+							this.$emit('setSN', this.stepNum);
+							this.$emit('refreshDataList');
+						} else {
+							this.$message(res.msg);
+						}
 					});
 				});
 				return;
diff --git a/src/views/group/holidaySetting/add-or-updata.vue b/src/views/group/holidaySetting/add-or-updata.vue
index 2339a38d..63598163 100644
--- a/src/views/group/holidaySetting/add-or-updata.vue
+++ b/src/views/group/holidaySetting/add-or-updata.vue
@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: zwq
- * @LastEditTime: 2025-11-27 14:06:11
+ * @LastEditTime: 2025-12-11 10:47:50
  * @Description:
 -->
 <template>
@@ -66,7 +66,7 @@
 							type="date"
 							placeholder="选择日期"
 							format="yyyy-MM-dd"
-							value-format="--MM-dd"
+							value-format="yyyy-MM-dd"
 							@blur="$forceUpdate()"
 							:picker-options="pickerOptions"></el-date-picker>
 					</el-form-item>
@@ -81,7 +81,7 @@
 							v-model="dataForm.dateDayArr"
 							type="daterange"
 							format="yyyy-MM-dd"
-							value-format="--MM-dd"
+							value-format="yyyy-MM-dd"
 							range-separator="至"
 							start-placeholder="开始日期"
 							end-placeholder="结束日期"
@@ -341,45 +341,70 @@ export default {
 				this.$refs['dataForm'].resetFields();
 				if (this.dataForm.id) {
 					getHoliday(this.dataForm.id).then((res) => {
+						//设置年份，不重复的直接用返回的年份，重复的直接用当年年份
+						let year = new Date().getFullYear();
+						if (res.data.calendarType == 1 && !res.data.repeat) {
+							year = res.data.noRepeatYear;
+						} else if (res.data.calendarType == 2 && !res.data.repeat) {
+							year = res.data.noRepeatYearChinese;
+						}
+
 						this.dataForm = res.data;
 						if (
 							this.dataForm.dateType == 1 &&
 							this.dataForm.calendarType == 1
 						) {
-							this.dataForm.dateDay = this.dataForm.oneDay;
+							this.dataForm.dateDay =
+								year + '-' + this.dataForm.oneDay.slice(-5);
 						} else if (
 							this.dataForm.dateType == 2 &&
 							this.dataForm.calendarType == 1
 						) {
+							let num = this.compareMonthDay(
+								this.dataForm.startDay.slice(-5),
+								this.dataForm.endDay.slice(-5)
+							);
 							this.dataForm.dateDayArr = [
-								this.dataForm.startDay,
-								this.dataForm.endDay,
+								year + '-' + this.dataForm.startDay.slice(-5),
+								(num > 0 ? year : year + 1) +
+									'-' +
+									this.dataForm.endDay.slice(-5),
 							];
 						} else if (
 							this.dataForm.dateType == 1 &&
 							this.dataForm.calendarType == 2
 						) {
 							this.dataForm.dateDayChinese =
-								'L' +
-								new Date().getFullYear() +
-								this.dataForm.oneDayChinese.slice(-6);
+								'L' + year + this.dataForm.oneDayChinese.slice(-6);
 						} else if (
 							this.dataForm.dateType == 2 &&
 							this.dataForm.calendarType == 2
 						) {
+							let num = this.compareMonthDay(
+								this.dataForm.startDayChinese.slice(-6),
+								this.dataForm.endDayChinese.slice(-6)
+							);
 							this.dataForm.dateDayArrChinese = [
+								'L' + year + this.dataForm.startDayChinese.slice(-6),
 								'L' +
-									new Date().getFullYear() +
-									this.dataForm.startDayChinese.slice(-6),
-								'L' +
-									new Date().getFullYear() +
-									this.dataForm.endDayChinese.slice(-6),
+									(num > 0 ? year : year + 1) +
+									+this.dataForm.endDayChinese.slice(-6),
 							];
 						}
 					});
 				}
 			});
 		},
+		//用于比较日期大小，判断年份是否要加1
+		compareMonthDay(dateStr1, dateStr2) {
+			const [month1, day1] = dateStr1.split('-').map(Number);
+			const [month2, day2] = dateStr2.split('-').map(Number);
+
+			if (month1 !== month2) {
+				return month2 - month1;
+			}
+			return day2 - day1;
+		},
 		editHoliday() {
 			this.detail = false;
 		},
@@ -442,13 +467,16 @@ export default {
 					return false;
 				}
 				if (this.dataForm.dateType == 1 && this.dataForm.calendarType == 1) {
-					this.dataForm.oneDay = this.dataForm.dateDay;
+					const [year, month, day] = this.dataForm.dateDay.split('-');
+					this.dataForm.oneDay = `--${month}-${day}`;
 				} else if (
 					this.dataForm.dateType == 2 &&
 					this.dataForm.calendarType == 1
 				) {
-					this.dataForm.startDay = this.dataForm.dateDayArr[0];
-					this.dataForm.endDay = this.dataForm.dateDayArr[1];
+					const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
+					this.dataForm.startDay = `--${month}-${day}`;
+					const [year1, month1, day1] = this.dataForm.dateDayArr[1].split('-');
+					this.dataForm.endDay = `--${month1}-${day1}`;
 				} else if (
 					this.dataForm.dateType == 1 &&
 					this.dataForm.calendarType == 2
@@ -464,10 +492,35 @@ export default {
 					this.dataForm.endDayChinese =
 						'--' + this.dataForm.dateDayArrChinese[1].slice(-5);
 				}
-				if (this.dataForm.calendarType == 1 && !this.dataForm.repeat) {
-					this.dataForm.noRepeatYear = new Date().getFullYear();
-				} else if (this.dataForm.calendarType == 2 && !this.dataForm.repeat) {
-					this.dataForm.noRepeatYearChinese = new Date().getFullYear();
+				//是否每年重复，不重复的话需要传  年份
+				if (
+					this.dataForm.dateType == 1 &&
+					this.dataForm.calendarType == 1 &&
+					!this.dataForm.repeat
+				) {
+					const [year, month, day] = this.dataForm.dateDay.split('-');
+					this.dataForm.noRepeatYear = year;
+				} else if (
+					this.dataForm.dateType == 2 &&
+					this.dataForm.calendarType == 1 &&
+					!this.dataForm.repeat
+				) {
+					const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
+					this.dataForm.noRepeatYear = year;
+				} else if (
+					this.dataForm.dateType == 1 &&
+					this.dataForm.calendarType == 2 &&
+					!this.dataForm.repeat
+				) {
+					this.dataForm.noRepeatYearChinese =
+						this.dataForm.dateDayChinese.slice(1, 5);
+				} else if (
+					this.dataForm.dateType == 2 &&
+					this.dataForm.calendarType == 2 &&
+					!this.dataForm.repeat
+				) {
+					this.dataForm.noRepeatYearChinese =
+						this.dataForm.dateDayArrChinese[0].slice(1, 5);
 				}
 				// 修改的提交
 				if (this.dataForm.id) {
@@ -475,8 +528,45 @@ export default {
 						this.dataForm.inherited = false;
 					}
 					updateHoliday(this.dataForm).then((res) => {
+						if (res.code === 0 || res.code === 200) {
+							if (!res.data.updateFlag) {
+								this.$modal.msgSuccess('修改成功');
+								this.$emit('refreshPage');
+							} else {
+								this.$confirm(
+									'新增节假日影响已有排班计划，是否立即更新？',
+									'更新排班',
+									{
+										confirmButtonText: '立即更新',
+										cancelButtonText: '暂不更新',
+										type: 'warning',
+									}
+								)
+									.then(() => {
+										updateSchedule({ logId: res.data.logId }).then((res1) => {
+											this.$modal.msgSuccess('更新成功');
+										});
+										this.$emit('refreshPage');
+									})
+									.catch(() => {
+										this.$message({
+											type: 'info',
+											message: '已取消',
+										});
+										this.$emit('refreshPage');
+									});
+							}
+						} else {
+							this.$modal.msg(res.msg);
+						}
+					});
+					return;
+				}
+				// 添加的提交
+				createHoliday(this.dataForm).then((res) => {
+					if (res.code === 0 || res.code === 200) {
 						if (!res.data.updateFlag) {
-							this.$modal.msgSuccess('修改成功');
+							this.$modal.msgSuccess('新增成功');
 							this.$emit('refreshPage');
 						} else {
 							this.$confirm(
@@ -502,37 +592,8 @@ export default {
 									this.$emit('refreshPage');
 								});
 						}
-					});
-					return;
-				}
-				// 添加的提交
-				createHoliday(this.dataForm).then((res) => {
-					if (!res.data.updateFlag) {
-						this.$modal.msgSuccess('新增成功');
-						this.$emit('refreshPage');
 					} else {
-						this.$confirm(
-							'新增节假日影响已有排班计划，是否立即更新？',
-							'更新排班',
-							{
-								confirmButtonText: '立即更新',
-								cancelButtonText: '暂不更新',
-								type: 'warning',
-							}
-						)
-							.then(() => {
-								updateSchedule({ logId: res.data.logId }).then((res1) => {
-									this.$modal.msgSuccess('更新成功');
-								});
-								this.$emit('refreshPage');
-							})
-							.catch(() => {
-								this.$message({
-									type: 'info',
-									message: '已取消',
-								});
-								this.$emit('refreshPage');
-							});
+						this.$modal.msg(res.msg);
 					}
 				});
 			});
diff --git a/src/views/group/holidaySetting/components/JDatePicker.vue b/src/views/group/holidaySetting/components/JDatePicker.vue
index 52fd7b23..b62da959 100644
--- a/src/views/group/holidaySetting/components/JDatePicker.vue
+++ b/src/views/group/holidaySetting/components/JDatePicker.vue
@@ -210,7 +210,7 @@
 </template>
 <script>
   import moment from 'moment';
-  import JDatePickerScript from './jDatePicker.js'
+  import JDatePickerScript from './JDatePicker.js'
 
   export default {
     props: {