WI/Web.V1.0.git

			@@ -1,188 +1,190 @@
			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>月度排行榜</title>
			<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 href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			<style type="text/css">
			.item_title {
			height: 38px;
			line-height: 38px;
			width: 100%;
			color: #31abe3;
			text-align: center;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.leader_left {
			width: 58px;
			height: 14px;
			background-image: url('/customer_list/ch/static/images/demo/leader_left.png');
			}
			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>月度排行榜</title>
			<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 href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			<style type="text/css">
			.item_title {
			height: 38px;
			line-height: 38px;
			width: 100%;
			color: #31abe3;
			text-align: center;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.leader_right {
			width: 58px;
			height: 14px;
			background-image: url('/customer_list/ch/static/images/demo/leader_right.png');
			transform: rotate(180deg);
			}
			.leader_left {
			width: 58px;
			height: 14px;
			background-image: url('/customer_list/ch/static/images/demo/leader_left.png');
			}

			.title-inner {
			font-weight: 900;
			letter-spacing: 2px;
			background-color: #31abe3;
			/* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}
			</style>
			</head>
			.leader_right {
			width: 58px;
			height: 14px;
			background-image: url('/customer_list/ch/static/images/demo/leader_right.png');
			transform: rotate(180deg);
			}

			<body>
			<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>
			<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>
			.title-inner {
			font-weight: 900;
			letter-spacing: 2px;
			background-color: #31abe3;
			/* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			}
			</style>
			</head>

			<body>
			<div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="leaderBoard">
			<div class="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 bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
			<div class="w-full bg-white h-[320px]" id="leaderBarChart"></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>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const App = createApp({
			setup() {
			let state = reactive({
			leaderBoardList: [
			{
			Name: '厦门营业所',
			Amount: '10000',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const App = createApp({
			setup() {
			let state = reactive({
			leaderBoardList: [
			{
			Name: '厦门营业所',
			Amount: '10000',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			},
			{
			Name: '二供营业所',
			Amount: '4354363',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			},
			{
			Name: '同安营业所',
			Amount: '435233',
			NewRecord: '2022-01-01',
			CompanyName: '李四',
			},
			{
			Name: '集美营业所',
			Amount: '54545',
			NewRecord: '2023-01-01',
			CompanyName: '王二',
			},
			{
			Name: '翔美营业所',
			Amount: '577887',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			},
			{
			Name: '海沧营业所',
			Amount: '5478786',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			},
			],
			});
			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',
			},
			dataZoom: {
			type: 'inside',
			},
			series: [
			{
			Name: '二供营业所',
			Amount: '4354363',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			},
			{
			Name: '同安营业所',
			Amount: '435233',
			NewRecord: '2022-01-01',
			CompanyName: '李四',
			},
			{
			Name: '集美营业所',
			Amount: '54545',
			NewRecord: '2023-01-01',
			CompanyName: '王二',
			},
			{
			Name: '翔美营业所',
			Amount: '577887',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			},
			{
			Name: '海沧营业所',
			Amount: '5478786',
			NewRecord: '2022-01-01',
			CompanyName: '张三',
			data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
			type: 'line',
			},
			],
			});
			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',
			},
			dataZoom: {
			type: 'inside',
			},
			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)',
			},
			itemStyle: {
			color: '#61a5e8',
			},

			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);
			itemStyle: {
			color: '#61a5e8',
			},
			},
			],
			};
			onMounted(() => {
			initLeaderBoardChart();
			initLeaderBoardBarChart();
			});

			return { state };
			},
			});
			App.use(ElementPlus);
			App.mount('#leaderBoard');
			</script>
			</html>
			option && leaderBarChartDom.setOption(option);
			};
			onMounted(() => {
			initLeaderBoardChart();
			initLeaderBoardBarChart();
			});

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

			</html>