WI/Web.V1.0.git

			@@ -1,118 +1,212 @@
			<!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>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			</head>

			<body>
			<div class="w-full h-full bg-[#f2f4f8]" id="unionPay">
			<div class="w-full h-[40px] space-x-2 bg-[rgb(242,244,248)] flex justify-between items-center px-[10px]">
			<div class="data-item" v-for="(item, index) in state.dataList" :key="index">
			<div class="data-item-top flex-l">
			<i class="iconfont" :class="'icon-'+[state.iconFontArr[index]]"></i>
			<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>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
			<link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<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');
			}

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

			<body>
			<div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px] space-y-1" id="unionPay">
			<div class="bg-[#fff]">
			<div class="item_title">
			<div class="leader_left"></div>
			<span>银联缴费类型占比</span>
			<div class="leader_right"></div>
			</div>
			<div class="w-full h-full flex justify-start items-center mt-4">
			<div class="w-[50%] h-[70px]" v-for=" (item, index) in state.dataList" :key="index">
			<div class="h-[50%] pl-[10px] flex justify-start flex-wrap items-center">
			<i class="iconfont text-[#1c86ff] text-[20px]" :class="'icon-'+[state.iconFontArr[index]]"></i>
			<span class="w-[80%] h-[30px] leading-7"> {{ item.number }} <span
			class="text-[#a4aec5] text-[13px] ">个</span> </span>

			</div>
			<div class="data-item-bottom flex-c">
			<span class="data-item-title"> {{ item.text }} </span>
			<span class="data-item-unit">(辆)</span>
			<div class="h-[50%] flex items-center">
			<span class="text-[#707c97] text-[13px] ml-[10px]"> {{ item.text }} </span>

			</div>
			</div>
			</div>
			<div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
			<div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div>
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			createApp({
			setup() {
			const state = reactive({
			dataList: [

			<div class=" bg-[rgb(242,244,248)]">
			<div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div>
			</div>
			<el-table :data="state.leaderBoardList" class="">
			<el-table-column prop="Amount" label="用户号" width="180" align="left"></el-table-column>
			<el-table-column prop="Name" label="表号" width="180" align="center"></el-table-column>
			<el-table-column prop="CompanyName" label="抄表员" align="center"></el-table-column>
			<el-table-column prop="NewRecord" label="抄表时间" align="center"></el-table-column>
			</el-table>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const App = createApp({
			setup() {
			const myChartRef = ref(null);
			const state = reactive({
			dataList: [
			{
			number: 1232233,
			text: '年度已抄数',
			},
			{
			number: 0,
			text: '昨日已抄数',
			},
			{
			number: 23442,
			text: '月度已抄数',
			},
			{
			number: 152234,
			text: '今日已抄数',
			},
			],
			leaderBoardList: [
			{
			Name: 'Z2342N678',
			Amount: '10000',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			},
			{
			Name: 'Z2142B678',
			Amount: '4354363',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			},
			{
			Name: 'Z2322N678',
			Amount: '435233',
			NewRecord: '2024-01-01',
			CompanyName: '李四',
			},
			{
			Name: 'Z2342N678',
			Amount: '54545',
			NewRecord: '2024-01-01',
			CompanyName: '王二',
			},
			{
			Name: 'Z1342C678',
			Amount: '577887',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			},
			{
			Name: 'Z7342N678',
			Amount: '5478786',
			NewRecord: '2024-01-01',
			CompanyName: '张三',
			}],
			iconFontArr: ['putong', 'zhongduancanshuchaxun', 'biaodan', 'yunxiazai_o'],
			});
			const initUnionPayEChart = () => {
			const chartDom = document.getElementById('UnionPayChart');
			const myChart = echarts.init(chartDom);
			myChartRef.value = myChart;
			var option = {
			// title: {
			// text: '银联缴费类型占比',
			// textStyle: {
			// fontSize: 13,
			// },
			// x: 'center',
			// // y: 'center',
			// },
			dataset: {
			source: [
			['score', 'amount', 'product'],
			[89.3, 58212, '票据打印冲正'],
			[57.1, 78254, '票据打印'],
			[74.4, 41032, '变更委托冲正'],
			[50.1, 12755, '变更委托'],
			[89.7, 20145, '取消委托'],
			[68.1, 79146, '委托'],
			[19.6, 91852, '缴费冲正'],
			[10.6, 101852, '缴费'],
			[32.7, 20112, '查询'],
			],
			},
			grid: { containLabel: true },
			xAxis: {
			// name: 'amount'
			},
			yAxis: { type: 'category' },
			// visualMap: {
			// orient: 'horizontal',
			// left: 'center',
			// min: 10,
			// max: 100,
			// text: ['High Score', 'Low Score'],
			// // Map the score column to color
			// dimension: 0,
			// inRange: {
			// color: ['#65B581', '#FFCE34', '#FD665F']
			// }
			// },
			series: [
			{
			number: 3250,
			text: '今日销量',
			},
			{
			number: 11122,
			text: '本周销量',
			},
			{
			number: 36788,
			text: '本月销量',
			},
			{
			number: 152234,
			text: '本季度销量',
			type: 'bar',
			encode: {
			// Map the "amount" column to X axis.
			x: 'amount',
			// Map the "product" column to Y axis
			y: 'product',
			},
			},
			],
			iconFontArr: ['diagnose', 'monitoring', 'cloudupload', 'clouddownload'],
			});
			const initUnionPayEChart = () => {
			const chartDom = document.getElementById('UnionPayChart');
			const myChart = echarts.init(chartDom);
			var option = {
			title: {
			text: '银联缴费类型占比',
			textStyle: {
			fontSize: 13,
			},
			},
			dataset: {
			source: [
			['score', 'amount', 'product'],
			[89.3, 58212, '票据打印冲正'],
			[57.1, 78254, '票据打印'],
			[74.4, 41032, '变更委托冲正'],
			[50.1, 12755, '变更委托'],
			[89.7, 20145, '取消委托'],
			[68.1, 79146, '委托'],
			[19.6, 91852, '缴费冲正'],
			[10.6, 101852, '缴费'],
			[32.7, 20112, '查询'],
			],
			},
			grid: { containLabel: true },
			xAxis: {
			// name: 'amount'
			},
			yAxis: { type: 'category' },
			// visualMap: {
			// orient: 'horizontal',
			// left: 'center',
			// min: 10,
			// max: 100,
			// text: ['High Score', 'Low Score'],
			// // Map the score column to color
			// dimension: 0,
			// inRange: {
			// color: ['#65B581', '#FFCE34', '#FD665F']
			// }
			// },
			series: [
			{
			type: 'bar',
			encode: {
			// Map the "amount" column to X axis.
			x: 'amount',
			// Map the "product" column to Y axis
			y: 'product',
			},
			},
			],
			};
			option && myChart.setOption(option);
			};
			onMounted(() => {
			initUnionPayEChart();
			option && myChart.setOption(option);
			};
			onMounted(() => {
			window.addEventListener('resize', () => {
			myChartRef.value.resize();
			});
			},
			}).mount('#unionPay');
			</script>
			</html>
			initUnionPayEChart();
			});
			return { state }
			},
			})
			App.use(ElementPlus);
			App.mount('#unionPay');
			</script>

			</html>