WI/Web.V1.0.git

			@@ -10,61 +10,147 @@
			<script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<script src="/ai_html/views/demo/js/echarts.min.js"></script>
			<script src="/ai_html/views/demo/js/index.full.js"></script>
			<link href="/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('/static/images/demo/leader_left.png');
			}

			.leader_right {
			width: 58px;
			height: 14px;
			background-image: url('/static/images/demo/leader_right.png');
			transform: rotate(180deg);
			}
			</style>
			</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>
			</div>
			<div class="data-item-bottom flex-c">
			<span class="data-item-title"> {{ item.text }} </span>
			<span class="data-item-unit">(辆)</span>
			<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="h-[50%] flex items-center">
			<span class="text-[#707c97] text-[13px] ml-[10px]"> {{ item.text }} </span>

			</div>
			</div>
			</div>
			</div>
			<div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">

			<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;
			createApp({
			const App = createApp({
			setup() {
			const myChartRef = ref(null);
			const state = reactive({
			dataList: [
			{
			number: 3250,
			text: '今日销量',
			number: 1232233,
			text: '年度已抄数',
			},
			{
			number: 11122,
			text: '本周销量',
			number: 0,
			text: '昨日已抄数',
			},
			{
			number: 36788,
			text: '本月销量',
			number: 23442,
			text: '月度已抄数',
			},
			{
			number: 152234,
			text: '本季度销量',
			text: '今日已抄数',
			},
			],
			iconFontArr: ['diagnose', 'monitoring', 'cloudupload', 'clouddownload'],
			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,
			},
			},
			// title: {
			// text: '银联缴费类型占比',
			// textStyle: {
			// fontSize: 13,
			// },
			// x: 'center',
			// // y: 'center',
			// },
			dataset: {
			source: [
			['score', 'amount', 'product'],
			@@ -111,10 +197,16 @@
			option && myChart.setOption(option);
			};
			onMounted(() => {
			window.addEventListener('resize', () => {
			myChartRef.value.resize();
			});
			initUnionPayEChart();
			});
			return { state }
			},
			}).mount('#unionPay');
			})
			App.use(ElementPlus);
			App.mount('#unionPay');
			</script>

			</html>