WI/Web.V1.0.git

			@@ -10,30 +10,35 @@
			<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>
			<script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.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" />
			<style>
			.el-dialog__header {
			margin-right: 0;
			padding: 8px 10px;
			background: #528abe;
			}

			.el-dialog__title {
			color: #fff;
			font-size: 14px;
			}

			.el-dialog__close {
			color: #fff !important;
			}
			</style>
			</head>

			<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">
			<div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
			<div class="ml-[10px]">
			<span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
			<p>{{ item.Name }}</p>
			</div>
			</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>
			<p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
			</div>
			</div>
			<div class="top-center-chart">
			@@ -71,18 +76,28 @@
			<Decoration3 class="dv-dec-3" />
			</div>
			</div>
			<div class="pond-section">
			<div class="pond-section" v-resize="chartContainerResize">
			<div id="pond" class="w-full h-[270px]"></div>
			</div>
			</div>
			</div>
			</div>
			<el-dialog
			v-model="state.isShowChartVisible"
			:title="state.volumeInfo.title"
			width="50%"
			class="px-[unset] py-[unset]"
			:before-close="handleCloseChartVisible"
			>
			<div id="businessTrends" class="w-full h-[500px]" v-resize="chartContainerResize"></div>
			</el-dialog>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const { createApp, onMounted, ref, reactive, nextTick } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart = ref(null);
			const demoBusinessTrendsChart = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			@@ -136,85 +151,36 @@
			Unit: '万元',
			},
			],

			dataList: [
			{
			id: 1,
			title: '今日累计销量',
			value: 755,
			config: {
			number: [755],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			id: 2,
			title: '本周累计销量',
			value: 3288,
			config: {
			number: [3288],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			id: 3,
			title: '本月累计销量',
			value: 14222,
			config: {
			number: [14222],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			id: 4,
			title: '季度累计销量',
			value: 41022,
			config: {
			number: [41022],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			id: 5,
			title: '年度累计销量',
			value: 176888,
			config: {
			number: [176888],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			{
			id: 6,
			title: '今日目标销量',
			value: 820,
			config: {
			number: [820],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			},
			],
			completeObj: {
			@@ -260,6 +226,12 @@
			unit: '辆',
			},
			intervalInstance: 0,
			isShowChartVisible: false,
			volumeInfo: {
			id: null,
			title: null,
			value: null,
			},
			});
			const getOverViewList = () => {
			const iconList = [
			@@ -286,75 +258,147 @@
			};
			onMounted(() => {
			// getOverViewList();
			window.addEventListener('resize', () => {
			demoOverViewChart.value.resize();
			});
			initOverViewEchart();
			});
			//初始化今日业绩完成度echart
			const initOverViewEchart = () => {
			var chartDom = document.getElementById('pond');
			var myChart = echarts.init(chartDom);
			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%' },
			];
			demoOverViewChart.value = myChart;
			var option = {
			tooltip: {
			trigger: 'item',
			},
			title: {
			// text: '76%',//主标题文本
			subtext: '76%', //副标题文本
			left: 'center',
			legend: {
			orient: 'vertical',
			left: '54%',
			y: 'center',

			top: '42%',
			textStyle: {
			fontSize: 38,
			color: '#454c5c',
			align: 'center',
			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(' ');
			},
			subtextStyle: {
			fontFamily: '微软雅黑',
			fontSize: 16,
			color: '#6c7a89',
			},
			},
			grid: {
			left: '25',
			},
			series: [
			{
			name: 'Access From',
			name: '今日业绩完成度',
			type: 'pie',
			radius: ['40%', '70%'],
			radius: ['40%', '60%'],
			center: ['30%', '50%'],
			avoidLabelOverlap: false,
			label: {
			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' },
			],
			data: dataCake,
			},
			],
			};

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

			return { state };
			//初始化弹窗echart
			const initBusinessTrendsEchart = () => {
			var chartDom = document.getElementById('businessTrends');
			var businessTrendsChart = echarts.init(chartDom);
			demoBusinessTrendsChart.value = businessTrendsChart;
			const option = {
			tooltip: {
			trigger: 'axis',
			},
			grid: {
			left: '3%', // 调整左边距
			right: '5%', // 调整右边距
			bottom: '3%', // 调整底部边距
			top: '5%', // 调整顶部边距
			containLabel: true, // 确保标签和轴标题被包含在容器内
			},
			xAxis: {
			name: '时间',
			type: 'category',
			minInterval: 3600 * 4 * 1000, //12
			data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45'],
			},
			yAxis: {
			type: 'value',
			axisLabel: {
			formatter: '{value}',
			},
			},
			dataZoom: {
			type: 'inside',
			},
			series: [
			{
			name: '销售额',
			type: 'line',
			data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 示例数据，模拟起伏更大
			smooth: true, // 折线平滑
			lineStyle: {
			width: 2,
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
			{ offset: 0, color: '#62c1fe' },
			{ offset: 0.5, color: '#ad90f7' },
			{ offset: 1, color: '#e875f2' },
			]),
			},
			symbolSize: (value, params) => {
			// 获取数据系列的长度
			const seriesLength = option.series[0].data.length;
			// 中间节点放大
			if (params.dataIndex === Math.floor(seriesLength / 2)) {
			return 8; // 中间节点的大小
			}
			return 8; // 其他节点的大小
			},
			},
			],
			};
			option && businessTrendsChart.setOption(option);
			};
			//点击数据项弹窗
			const handleDataItemClick = (item) => {
			state.volumeInfo = item;
			nextTick(() => {
			initBusinessTrendsEchart();
			});
			state.isShowChartVisible = true;
			};
			//关闭弹窗
			const handleCloseChartVisible = () => {
			state.isShowChartVisible = false;
			};
			const chartContainerResize = ({ width, height }) => {
			demoOverViewChart.value.resize();
			demoBusinessTrendsChart.value.resize();
			};
			return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
			},
			});

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