WI/Web.V1.0.git

			@@ -1,27 +1,23 @@
			<!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/datav.umd.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/index.full.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/echarts.min.js"></script>
			<link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
			<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" />
			</head>

			<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/datav.umd.js"></script>
			<script src="/customer_list/ch/ai_html/views/demo/js/index.full.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/echarts.min.js"></script>
			<link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css">
			</link>
			<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
			</link>
			<link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css">
			</link>
			</head>

			<body>
			<div class="w-full h-full bg-[#f2f4f8] " id="overview">
			<!-- <div class="w-full h-[40px] flex items-center">年度缴费情况</div>
			<body>
			<div class="w-full h-full bg-[#f2f4f8]" id="overview">
			<!-- <div class="w-full h-[40px] flex items-center">年度缴费情况</div>
			<div class="h-full">
			<div class="w-[310px] flex flex-wrap justify-between h-[220px]">
			<div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
			@@ -33,326 +29,333 @@
			</div>
			</div>
			</div> -->
			<div class="screen-top-center">
			<div class="top-center-data">
			<div class="data-item" v-for="(item, index) in state.dataList">
			<p class="data-item-title">{{item.title}}</p>
			<p class="data-item-desc">{{item.value}}</p>
			</div>
			</div>
			<div class="top-center-chart">
			<div class="chart-item">
			<div class="screen-top-header flex flex-wrap justify-center items-center">
			<div class="header-left flex-c">
			<i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
			</div>
			<div class="header-right flex-l">
			<span class="header-title">今日地区销量排行</span>
			<Decoration3 class="dv-dec-3" />
			</div>
			<div class="screen-top-center">
			<div class="top-center-data">
			<div class="data-item" v-for="(item, index) in state.dataList">
			<p class="data-item-title">{{item.title}}</p>
			<p class="data-item-desc">{{item.value}}</p>
			</div>
			<div class=" max-w-[600px] h-full ml-[5px]">
			<div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
			<div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>
			</div>
			<div class="top-center-chart">
			<div class="chart-item">
			<div class="screen-top-header flex flex-wrap justify-center items-center">
			<div class="header-left flex-c">
			<i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
			</div>
			<div class="header-right flex-l">
			<span class="header-title">今日地区销量排行</span>
			<Decoration3 class="dv-dec-3" />
			</div>
			</div>
			<div class="max-w-[600px] h-full ml-[5px]">
			<div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
			<div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>

			<el-progress :stroke-width="20" :percentage="item.value/100" class="mb-[15px] w-full"
			:text-inside="true"></el-progress>
			<div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
			<el-progress
			:stroke-width="20"
			:percentage="item.value/100"
			class="mb-[15px] w-full"
			:text-inside="true"
			></el-progress>
			<div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
			</div>
			</div>
			</div>
			</div>
			<div class="chart-item">
			<div class="screen-top-header flex-l">
			<div class="header-left flex-c">
			<i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
			<div class="chart-item">
			<div class="screen-top-header flex-l">
			<div class="header-left flex-c">
			<i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
			</div>
			<div class="header-right flex-l">
			<span class="header-title">今日业绩完成度</span>
			<Decoration3 class="dv-dec-3" />
			</div>
			</div>
			<div class="header-right flex-l">
			<span class="header-title">今日业绩完成度</span>
			<Decoration3 class="dv-dec-3" />
			<div class="pond-section">
			<div id="pond" class="w-full h-[270px]"></div>
			</div>
			</div>
			<div class="pond-section">
			<div id="pond" class="w-full h-[270px]"></div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart=ref(null)
			const App = createApp({
			setup() {
			let state = reactive({
			annualPayment: [
			{
			ID: 1,
			Name: '本年缴费',
			Value: 8009987,
			Unit: '笔',
			},
			{
			ID: 2,
			Name: '缴费金额',
			Value: 7298.3,
			Unit: '万元',
			},
			{
			ID: 3,
			Name: '本月缴费',
			Value: 198,
			Unit: '笔',
			},
			{
			ID: 4,
			Name: '缴费金额',
			Value: 3,
			Unit: '万元',
			},
			{
			ID: 5,
			Name: '本月缴费',
			Value: 22,
			Unit: '笔',
			},
			{
			ID: 6,
			Name: '缴费金额',
			Value: 0.3,
			Unit: '万元',
			},
			{
			ID: 7,
			Name: '今日实时',
			Value: 198,
			Unit: '笔',
			},
			{
			ID: 8,
			Name: '缴费金额',
			Value: 198,
			Unit: '万元',
			},
			],

			dataList: [
			{
			title: '今日累计销量',
			value: 755,
			config: {
			number: [755],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}, {
			title: '本周累计销量',
			value: 3288,
			config: {
			number: [3288],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}, {
			title: '本月累计销量',
			value: 14222,
			config: {
			number: [14222],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}, {
			title: '季度累计销量',
			value: 41022,
			config: {
			number: [41022],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}, {
			title: '年度累计销量',
			value: 176888,
			config: {
			number: [176888],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}, {
			title: '今日目标销量',
			value: 820,
			config: {
			number: [820],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24
			}
			}
			}
			],
			completeObj: {
			data: [45, 56],
			shape: 'round'
			},
			rankList: {
			data: [
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			annualPayment: [
			{
			name: '武汉市',
			value: 1210
			ID: 1,
			Name: '本年缴费',
			Value: 8009987,
			Unit: '笔',
			},
			{
			name: '北京',
			value: 1655
			ID: 2,
			Name: '缴费金额',
			Value: 7298.3,
			Unit: '万元',
			},
			{
			name: '上海',
			value: 1788
			ID: 3,
			Name: '本月缴费',
			Value: 198,
			Unit: '笔',
			},
			{
			name: '深圳',
			value: 2100
			ID: 4,
			Name: '缴费金额',
			Value: 3,
			Unit: '万元',
			},
			{
			name: '广州',
			value: 1577
			ID: 5,
			Name: '本月缴费',
			Value: 22,
			Unit: '笔',
			},
			{
			name: '成都',
			value: 1625
			ID: 6,
			Name: '缴费金额',
			Value: 0.3,
			Unit: '万元',
			},
			{
			name: '厦门',
			value: 857
			ID: 7,
			Name: '今日实时',
			Value: 198,
			Unit: '笔',
			},
			{
			name: '郑州',
			value: 1322
			ID: 8,
			Name: '缴费金额',
			Value: 198,
			Unit: '万元',
			},

			],
			carousel: 'single',
			unit: '辆'
			},
			intervalInstance: 0
			});
			const getOverViewList = () => {
			const iconList = [
			'biaodan',
			'putong',
			'zhongduancanshuchaxun',
			'shidu',
			'fuwenbenkuang',
			'fuwenben',
			'jiliandongxuanzeqi',
			'jinridaiban',
			'gongju',
			];
			state.annualPayment.forEach((annual, index) => {
			annual.Icon = iconList[index];
			annual.BgColor = randomHexColor();
			});
			};
			//随机生成颜色
			const randomHexColor = () => {
			return `#${Math.floor(Math.random() * 16777215)
			.toString(16)
			.padEnd(6, '0')}`;
			};
			onMounted(() => {
			// getOverViewList();
			window.addEventListener('resize', () => {
			demoOverViewChart.value.resize();
			});
			initOverViewEchart()
			});
			const initOverViewEchart = () => {
			var chartDom = document.getElementById('pond');
			var myChart = echarts.init(chartDom);
			demoOverViewChart.value=myChart
			var option = {
			tooltip: {
			trigger: 'item'
			},
			title: {
			// text: '76%',//主标题文本
			subtext: '76%',//副标题文本
			left: 'center',

			top:'42%',
			textStyle: {
			fontSize: 38,
			color: '#454c5c',
			align: 'center'
			},
			subtextStyle: {
			fontFamily: "微软雅黑",
			fontSize: 16,
			color: '#6c7a89',
			},
			},
			series: [

			dataList: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			label: {
			show: false,
			position: 'center'
			title: '今日累计销量',
			value: 755,
			config: {
			number: [755],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			emphasis: {
			},
			{
			title: '本周累计销量',
			value: 3288,
			config: {
			number: [3288],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			title: '本月累计销量',
			value: 14222,
			config: {
			number: [14222],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			title: '季度累计销量',
			value: 41022,
			config: {
			number: [41022],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			title: '年度累计销量',
			value: 176888,
			config: {
			number: [176888],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			title: '今日目标销量',
			value: 820,
			config: {
			number: [820],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			],
			completeObj: {
			data: [45, 56],
			shape: 'round',
			},
			rankList: {
			data: [
			{
			name: '武汉市',
			value: 1210,
			},
			{
			name: '北京',
			value: 1655,
			},
			{
			name: '上海',
			value: 1788,
			},
			{
			name: '深圳',
			value: 2100,
			},
			{
			name: '广州',
			value: 1577,
			},
			{
			name: '成都',
			value: 1625,
			},
			{
			name: '厦门',
			value: 857,
			},
			{
			name: '郑州',
			value: 1322,
			},
			],
			carousel: 'single',
			unit: '辆',
			},
			intervalInstance: 0,
			});
			const getOverViewList = () => {
			const iconList = [
			'biaodan',
			'putong',
			'zhongduancanshuchaxun',
			'shidu',
			'fuwenbenkuang',
			'fuwenben',
			'jiliandongxuanzeqi',
			'jinridaiban',
			'gongju',
			];
			state.annualPayment.forEach((annual, index) => {
			annual.Icon = iconList[index];
			annual.BgColor = randomHexColor();
			});
			};
			//随机生成颜色
			const randomHexColor = () => {
			return `#${Math.floor(Math.random() * 16777215)
			.toString(16)
			.padEnd(6, '0')}`;
			};
			onMounted(() => {
			// getOverViewList();
			window.addEventListener('resize', () => {
			demoOverViewChart.value.resize();
			});
			initOverViewEchart();
			});
			const initOverViewEchart = () => {
			var chartDom = document.getElementById('pond');
			var myChart = echarts.init(chartDom);
			demoOverViewChart.value = myChart;
			var option = {
			tooltip: {
			trigger: 'item',
			},
			title: {
			// text: '76%',//主标题文本
			subtext: '76%', //副标题文本
			left: 'center',

			top: '42%',
			textStyle: {
			fontSize: 38,
			color: '#454c5c',
			align: 'center',
			},
			subtextStyle: {
			fontFamily: '微软雅黑',
			fontSize: 16,
			color: '#6c7a89',
			},
			},
			series: [
			{
			name: 'Access From',
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			label: {
			show: true,
			fontSize: 40,
			fontWeight: 'bold'
			}
			show: false,
			position: 'center',
			},
			emphasis: {
			label: {
			show: true,
			fontSize: 40,
			fontWeight: 'bold',
			},
			},
			labelLine: {
			show: false,
			},
			data: [
			{ value: 1048, name: 'Search Engine' },
			{ value: 735, name: 'Direct' },
			{ value: 580, name: 'Email' },
			{ value: 484, name: 'Union Ads' },
			{ value: 300, name: 'Video Ads' },
			],
			},
			labelLine: {
			show: false
			},
			data: [
			{ value: 1048, name: 'Search Engine' },
			{ value: 735, name: 'Direct' },
			{ value: 580, name: 'Email' },
			{ value: 484, name: 'Union Ads' },
			{ value: 300, name: 'Video Ads' }
			]
			}
			]
			],
			};

			option && myChart.setOption(option);
			};

			option && myChart.setOption(option);
			}
			return { state };
			},
			});

			return { state };
			},
			})

			App.component('Decoration3', Decoration3)
			App.use(ElementPlus);
			App.mount('#overview')
			</script>

			</html>
			App.component('Decoration3', Decoration3);
			App.use(ElementPlus);
			App.mount('#overview');
			</script>
			</html>