WI/Web.V1.0.git

			@@ -1,249 +1,252 @@
			<!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="/ai_html/views/demo/js/tailwind.js"></script>
			<script src="/ai_html/views/demo/js/vue.global.js"></script>
			<script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<script src="/ai_html/views/demo/js/index.full.js"></script>
			<script src="/ai_html/views/demo/js/customInstruction.js"></script>
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<script src="/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;
			}

			<head>
			<meta charset="UTF-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>信用度评分排行</title>
			<script src="/ai_html/views/demo/js/tailwind.js"></script>
			<script src="/ai_html/views/demo/js/vue.global.js"></script>
			<script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
			<script src="/ai_html/views/demo/js/index.full.js"></script>
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
			<script src="/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('/static/images/demo/leader_left.png');
			}

			.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>

			.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="creditRateRank">
			<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" v-for="(item, index) in state.creditRateRankList" :key="index">
			<div class="w-full h-10 flex justify-between items-center px-6 py-6">
			<span>{{item.Name}}</span>
			<span>{{item.Amount}}</span>
			<span>{{item.CompanyName}}</span>
			<span>{{item.NewRecord}}</span>
			<body>
			<div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="creditRateRank">
			<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 h-full" v-for="(item, index) in state.creditRateRankList" :key="index">
			<div class="w-full h-10 flex justify-between items-center px-6 py-6">
			<span>{{item.Name}}</span>
			<span>{{item.Amount}}</span>
			<span>{{item.CompanyName}}</span>
			<span>{{item.NewRecord}}</span>
			</div>
			</div>
			</div>
			</div>
			<div class="w-full h-full bg-white">
			<div class="item_title">
			<div class="leader_left"></div>
			<span>用户评分分布</span>
			<div class="leader_right"></div>
			<div class="w-full h-full bg-white" v-resize="chartContainerResize">
			<div class="item_title">
			<div class="leader_left"></div>
			<span>用户评分分布</span>
			<div class="leader_right"></div>
			</div>
			<div class="w-full h-[250px] mt-[10px]" id="CreditRateRank"></div>
			</div>
			<div class="w-full h-[250px] mt-[10px]" id="CreditRateRank"></div>
			<div class="w-full bg-white h-[320px]" id="CreditRatePieRank" v-resize="chartContainerResize"></div>
			</div>
			<div class="w-full bg-white h-[320px]" id="CreditRatePieRank"></div>
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const creditRateRankRef = ref(null);
			const creditRatePieRankRef = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			creditRateRankList: [
			{
			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 initCreditRateRankChart = () => {
			var chartDom = document.getElementById('CreditRateRank');
			var creditRateRankDom = echarts.init(chartDom);
			creditRateRankRef.value = creditRateRankDom;
			var dataCake = [
			{ value: 2562, name: '优质', percentage: '15.86%' },
			{ value: 6000, name: '良好', percentage: '37.15%' },
			{ value: 2589, name: '一般', percentage: '16.03%' },
			{ value: 4000, name: '较差', percentage: '24.77%' },
			{ value: 1000, name: '恶劣', percentage: '6.19%' },
			];
			var option = {
			title: {
			text: '总评分数',
			subtext: '789897' + '\n人',
			itemGap: 8,
			left: '29.5%',
			top: '40%',
			textAlign: 'center',
			textStyle: {
			fontSize: 18,
			color: '#454c5c',
			align: 'center',
			},
			x: 'center',
			y: 'center',
			subtextStyle: {
			fontFamily: '微软雅黑',
			fontSize: 16,
			color: '#6c7a89',
			},
			},
			tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} 人 ({d}%)', //鼠标放上去展示内容
			},
			legend: {
			orient: 'vertical',
			left: '60%', //图例距离左的距离
			y: 'center', //图例上下居中
			itemGap: 20,
			formatter: function (name) {
			let target, percentage;
			for (let i = 0; i < dataCake.length; i++) {
			if (dataCake[i].name === name) {
			target = dataCake[i].value;
			percentage = dataCake[i].percentage;
			}
			}
			let arr = [name + ' ', ' ' + target + '人 ', ' ' + percentage];
			return arr.join(' ');
			},
			},
			color: ['#e3935d', '#eecb5f', '#61a5e8', '#e16757', '#9570e4'], //五个数据，五个颜色
			series: [
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const creditRateRankRef = ref(null);
			const creditRatePieRankRef = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			creditRateRankList: [
			{
			name: '年龄分布',
			type: 'pie',
			radius: ['40%', '60%'],
			center: ['30%', '50%'],
			avoidLabelOverlap: false,
			data: dataCake,
			// 设置值域的标签
			label: {
			// normal: {
			// position: 'inner', // 设置标签位置，默认在饼状图外可选值：'outer' ¦ 'inner（饼状图上）'
			// formatter: '{b}',
			// },
			show: false,
			position: 'center',
			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 initCreditRateRankChart = () => {
			var chartDom = document.getElementById('CreditRateRank');
			var creditRateRankDom = echarts.init(chartDom);
			creditRateRankRef.value = creditRateRankDom;
			var dataCake = [
			{ value: 2562, name: '优质', percentage: '15.86%' },
			{ value: 6000, name: '良好', percentage: '37.15%' },
			{ value: 2589, name: '一般', percentage: '16.03%' },
			{ value: 4000, name: '较差', percentage: '24.77%' },
			{ value: 1000, name: '恶劣', percentage: '6.19%' },
			];
			var option = {
			title: {
			text: '总评分数',
			subtext: '789897' + '\n人',
			itemGap: 8,
			left: '29.5%',
			top: '40%',
			textAlign: 'center',
			textStyle: {
			fontSize: 18,
			color: '#454c5c',
			align: 'center',
			},
			emphasis: {
			itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			x: 'center',
			y: 'center',
			subtextStyle: {
			fontFamily: '微软雅黑',
			fontSize: 16,
			color: '#6c7a89',
			},
			},
			tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} 人 ({d}%)', //鼠标放上去展示内容
			},
			legend: {
			orient: 'vertical',
			left: '60%', //图例距离左的距离
			y: 'center', //图例上下居中
			itemGap: 20,
			formatter: function (name) {
			let target, percentage;
			for (let i = 0; i < dataCake.length; i++) {
			if (dataCake[i].name === name) {
			target = dataCake[i].value;
			percentage = dataCake[i].percentage;
			}
			}
			let arr = [name + ' ', ' ' + target + '人 ', ' ' + percentage];
			return arr.join(' ');
			},
			},
			color: ['#e3935d', '#eecb5f', '#61a5e8', '#e16757', '#9570e4'], //五个数据，五个颜色
			series: [
			{
			name: '年龄分布',
			type: 'pie',
			radius: ['40%', '60%'],
			center: ['30%', '50%'],
			avoidLabelOverlap: false,
			data: dataCake,
			// 设置值域的标签
			label: {
			// normal: {
			// position: 'inner', // 设置标签位置，默认在饼状图外可选值：'outer' ¦ 'inner（饼状图上）'
			// formatter: '{b}',
			// },
			show: false,
			position: 'center',
			},
			emphasis: {
			itemStyle: {
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			},
			},
			},
			},
			],
			],
			};
			option && creditRateRankDom.setOption(option);
			};
			option && creditRateRankDom.setOption(option);
			};
			const initCreditRateRankBarChart = () => {
			const barXData = state.creditRateRankList.map((item) => item.Name);
			var chartDom = document.getElementById('CreditRatePieRank');
			var creditRatePieRankDom = echarts.init(chartDom);
			creditRatePieRankRef.value = creditRatePieRankDom;
			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: '#eecb5f',
			},
			const initCreditRateRankBarChart = () => {
			const barXData = state.creditRateRankList.map((item) => item.Name);
			var chartDom = document.getElementById('CreditRatePieRank');
			var creditRatePieRankDom = echarts.init(chartDom);
			creditRatePieRankRef.value = creditRatePieRankDom;
			var option = {
			tooltip: {
			trigger: 'axis',
			},
			],
			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: '#eecb5f',
			},
			},
			],
			};
			option && creditRatePieRankDom.setOption(option);
			};
			option && creditRatePieRankDom.setOption(option);
			};
			onMounted(() => {
			window.addEventListener('resize', () => {
			const chartContainerResize = ({ width, height }) => {
			creditRateRankRef.value.resize();
			creditRatePieRankRef.value.resize();
			};
			onMounted(() => {
			// 页面加载完成后初始化图表
			initCreditRateRankChart();
			initCreditRateRankBarChart();
			});
			// 页面加载完成后初始化图表
			initCreditRateRankChart();
			initCreditRateRankBarChart();
			});

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

			</html>
			return { state, chartContainerResize };
			},
			});
			App.use(ElementPlus);
			elementResizeDirective(App);
			App.mount('#creditRateRank');
			</script>
			</html>