WI/Web.V1.0.git

			@@ -8,9 +8,14 @@
			<script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<!-- <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script> -->
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			</link>
			<script src="/customer_list/ch/static/js/echarts.min.js"></script>
			<!-- <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css">
			</link> -->
			<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
			<script src="//unpkg.com/element-plus"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			<style type="text/css">
			.item_title {
			height: 38px;
			@@ -36,6 +41,7 @@
			background-image: url('/customer_list//ch/static/images/demo/leader_right.png');
			transform: rotate(180deg);
			}

			.title-inner{
			font-weight: 900;
			letter-spacing: 2px;
			@@ -48,65 +54,149 @@
			</head>

			<body>
			<div class="w-full h-full bg-[#fff] px-10 py-0" id="leaderBoard">
			<div class="w-full h-full">
			<div class="w-full h-full bg-[#f2f4f8] " id="leaderBoard">
			<div class=" mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
			<div class="bg-white">
			<div class="item_title">
			<div class="leader_left"></div>
			<span>月度缴费金额排行</span>
			<div class="leader_right"></div>
			</div>
			<div class="w-full h-full justify-center" v-for="(item, index) in state.leaderBoardList" :key="index">
			<div class="w-[300px] h-10 flex justify-between items-center mx-[auto] my-0">
			<!-- <div class="w-full h-full justify-center" v-for="(item, index) in state.leaderBoardList" :key="index">
			<div class="w-[300px] h-10 flex justify-between items-center mx-[auto] my-[10px]">
			<span class="title-inner">{{item.Name}}</span>
			<span>{{item.Amount}}</span>
			<span>{{item.CompanyName}}</span>
			<span>{{item.NewRecord}}</span>
			</div> -->
			<!-- </div> -->

			<el-table :data="state.leaderBoardList">
			<el-table-column prop="Name" label="营业所" width="180"></el-table-column>
			<el-table-column prop="Amount" label="测薄号" width="180"></el-table-column>
			<el-table-column prop="NewRecord" label="时间"></el-table-column>
			<el-table-column prop="CompanyName" label="网格员"></el-table-column>
			</el-table>
			</div>

			<div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
			<div class="w-full bg-white h-[320px] " id="leaderBarChart"></div>
			</div>
			</div>



			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			createApp({
			const App = createApp({
			setup() {
			let state = reactive({
			leaderBoardList: [
			{
			Name: '厦门营业所',
			Amount: '10000'
			Amount: '10000',
			NewRecord: '2022-01-01',
			CompanyName: '张三'
			},
			{
			Name: '二供营业所',
			Amount: '4354363'
			Amount: '4354363',
			NewRecord: '2022-01-01',
			CompanyName: '张三'
			},
			{
			Name: '同安营业所',
			Amount: '435233'
			Amount: '435233',
			NewRecord: '2022-01-01',
			CompanyName: '李四'
			},
			{
			Name: '集美营业所',
			Amount: '54545'
			Amount: '54545',
			NewRecord: '2023-01-01',
			CompanyName: '王二'
			},
			{
			Name: '翔美营业所',
			Amount: '577887'
			Amount: '577887',
			NewRecord: '2024-01-01',
			CompanyName: '张三'
			},
			{
			Name: '海沧营业所',
			Amount: '5478786'
			Amount: '5478786',
			NewRecord: '2022-01-01',
			CompanyName: '张三'
			},

			]
			});
			const initLeaderBoard = () => {
			console.log("🚀 ~ leaderBoardList:", state.leaderBoardList)
			const initLeaderBoardChart = () => {
			var chartDom = document.getElementById('leaderChart');
			var leaderChartDom = echarts.init(chartDom);
			var option = {
			title: {
			text: '近12月缴费金额',
			textStyle: {
			fontSize: 13
			}
			},
			xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			},
			yAxis: {
			type: 'value'
			},
			series: [
			{
			data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
			type: 'line'
			}
			]
			};

			option && leaderChartDom.setOption(option);
			}
			const initLeaderBoardBarChart = () => {
			const barXData = state.leaderBoardList.map(item => item.Name)
			var chartDom = document.getElementById('leaderBarChart');
			var leaderBarChartDom = echarts.init(chartDom);
			var option = {

			xAxis: {
			type: 'category',
			data: barXData
			},
			yAxis: {
			name: '评分',
			type: 'value'
			},
			series: [
			{
			data: [120, 200, 150, 80, 70, 110],
			type: 'bar',
			showBackground: true,
			backgroundStyle: {
			color: 'rgba(180, 180, 180, 0.2)'
			}
			}
			]
			}

			option && leaderBarChartDom.setOption(option);
			}
			onMounted(() => {
			initLeaderBoard();
			initLeaderBoardChart();
			initLeaderBoardBarChart()
			});

			return { state };
			},
			}).mount('#leaderBoard');
			})
			App.use(ElementPlus)
			App.mount('#leaderBoard');
			</script>

			</html>