一些修改
This commit is contained in:
		@@ -101,98 +101,15 @@
 | 
			
		||||
				</el-card>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
		<el-row :gutter="20">
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-card shadow="hover">
 | 
			
		||||
					<schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
 | 
			
		||||
				</el-card>
 | 
			
		||||
			</el-col>
 | 
			
		||||
			<el-col :span="12">
 | 
			
		||||
				<el-card shadow="hover">
 | 
			
		||||
					<schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
 | 
			
		||||
				</el-card>
 | 
			
		||||
			</el-col>
 | 
			
		||||
		</el-row>
 | 
			
		||||
	</div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts" name="dashboard">
 | 
			
		||||
import Schart from 'vue-schart';
 | 
			
		||||
import { ref, reactive } from 'vue';
 | 
			
		||||
import imgurl from '../assets/img/img.jpg';
 | 
			
		||||
 | 
			
		||||
const name = localStorage.getItem('ms_username');
 | 
			
		||||
const role: string = name === 'admin' ? '超级管理员' : '普通用户';
 | 
			
		||||
 | 
			
		||||
const options = {
 | 
			
		||||
	type: 'bar',
 | 
			
		||||
	title: {
 | 
			
		||||
		text: '最近一周各品类销售图'
 | 
			
		||||
	},
 | 
			
		||||
	xRorate: 25,
 | 
			
		||||
	labels: ['周一', '周二', '周三', '周四', '周五'],
 | 
			
		||||
	datasets: [
 | 
			
		||||
		{
 | 
			
		||||
			label: '家电',
 | 
			
		||||
			data: [234, 278, 270, 190, 230]
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			label: '百货',
 | 
			
		||||
			data: [164, 178, 190, 135, 160]
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			label: '食品',
 | 
			
		||||
			data: [144, 198, 150, 235, 120]
 | 
			
		||||
		}
 | 
			
		||||
	]
 | 
			
		||||
};
 | 
			
		||||
const options2 = {
 | 
			
		||||
	type: 'line',
 | 
			
		||||
	title: {
 | 
			
		||||
		text: '最近几个月各品类销售趋势图'
 | 
			
		||||
	},
 | 
			
		||||
	labels: ['6月', '7月', '8月', '9月', '10月'],
 | 
			
		||||
	datasets: [
 | 
			
		||||
		{
 | 
			
		||||
			label: '家电',
 | 
			
		||||
			data: [234, 278, 270, 190, 230]
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			label: '百货',
 | 
			
		||||
			data: [164, 178, 150, 135, 160]
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			label: '食品',
 | 
			
		||||
			data: [74, 118, 200, 235, 90]
 | 
			
		||||
		}
 | 
			
		||||
	]
 | 
			
		||||
};
 | 
			
		||||
const todoList = reactive([
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要修复100个bug',
 | 
			
		||||
		status: false
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要修复100个bug',
 | 
			
		||||
		status: false
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要写100行代码加几个bug吧',
 | 
			
		||||
		status: false
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要修复100个bug',
 | 
			
		||||
		status: false
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要修复100个bug',
 | 
			
		||||
		status: true
 | 
			
		||||
	},
 | 
			
		||||
	{
 | 
			
		||||
		title: '今天要写100行代码加几个bug吧',
 | 
			
		||||
		status: true
 | 
			
		||||
	}
 | 
			
		||||
]);
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
@@ -293,9 +210,4 @@ const todoList = reactive([
 | 
			
		||||
	text-decoration: line-through;
 | 
			
		||||
	color: #999;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.schart {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
	height: 300px;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										3
									
								
								frontend/src/vite-env.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										3
									
								
								frontend/src/vite-env.d.ts
									
									
									
									
										vendored
									
									
								
							@@ -6,5 +6,4 @@ declare module '*.vue' {
 | 
			
		||||
  export default component
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
declare module 'vue-schart';
 | 
			
		||||
declare module 'vue-cropperjs';
 | 
			
		||||
declare module 'vue-cropperjs';
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user