WI/Web.V1.0.git

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

			<body>
			<div class="w-full h-full bg-[#f2f4f8]" id="workOrder">
			<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}}<span class="text-[13px] ">
			{{' '+item.unit}}</span></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>

			<div id="inspectionChart" class="w-full h-[280px]"></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>
			<div class="header-right flex-l">
			<span class="header-title">月度受理量排行</span>
			<Decoration3 class="dv-dec-3" />
			</div>
			</div>
			<div class="pond-section">
			<div id="salesRankChart" class="w-full h-[280px]"></div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart = ref(null);
			const inspectionChart = ref(null);
			const salesRankRef = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			dataList: [
			{
			title: '管线总长',
			value: 755,
			config: {
			number: [755],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '米',
			},
			{
			title: '压力表数',
			value: 3288,
			config: {
			number: [3288],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '流量计数',
			value: 14222,
			config: {
			number: [14222],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '户表数',
			value: 41022,
			config: {
			number: [41022],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '水质仪数',
			value: 176888,
			config: {
			number: [176888],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '阀门数',
			value: 820,
			config: {
			number: [820],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			],
			});
			const getOverViewList = () => {
			const iconList = [
			'biaodan',
			'putong',
			'zhongduancanshuchaxun',
			'shidu',
			'fuwenbenkuang',
			'fuwenben',
			'jiliandongxuanzeqi',
			'jinridaiban',
			'gongju',
			];
			state.dataList.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.parent.addEventListener('resize', () => {
			inspectionChart.value.resize();
			salesRankRef.value.resize();
			});
			initInspectionChart()
			drawSalesRanking();
			});
			//初始化巡检图表
			const initInspectionChart = () => {
			var chartDom = document.getElementById('inspectionChart');
			var myInspectChart = echarts.init(chartDom);
			inspectionChart.value = myInspectChart;
			var option = {
			legend: {},
			tooltip: {},
			grid: {
			left: '2%', // 调整左边距
			right: '5%', // 调整右边距
			bottom: '6%',
			containLabel: true, // 确保标签和轴标题被包含在容器内
			},
			dataset: {
			source: [
			['product', '循环完成率', '维保完成率'],
			['1月', 43.3, 85.8],
			['2月', 83.1, 73.4],
			['3月', 86.4, 65.2],
			['4月', 72.4, 53.9],
			['5月', 77.0, 39.1],
			['6月', 68.2, 56.2],
			['7月', 72.1, 64.5],
			['8月', 76.5, 70.8],
			['9月', 74.1, 72.4],
			['10月', 75.3, 71.7],
			['11月', 70.9, 74.2],
			['12月', 66.8, 75.2],
			]
			},
			xAxis: { type: 'category', name: '月份', nameGap: 10, },
			yAxis: {
			name: '单位: %'
			},
			series: [{ type: 'bar' }, { type: 'bar' }]
			};
			option && myInspectChart.setOption(option);
			<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/datav.umd.js"></script>
			<script src="/ai_html/views/demo/js/index.full.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/echarts.min.js"></script>
			<link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
			<link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
			<script src="/ai_html/views/demo/js/customInstruction.js"></script>
			<link href="/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;
			}
			// 绘制横向柱状图排行榜
			const drawSalesRanking = () => {
			var chartDom = document.getElementById('salesRankChart');
			var salesRankingElement = echarts.init(chartDom);
			salesRankRef.value = salesRankingElement
			const option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow',
			},
			},
			grid: {
			left: '2%', // 调整左边距
			right: '5%', // 调整右边距
			top: '2%', // 调整下边距
			bottom: '15%',
			containLabel: true, // 确保标签和轴标题被包含在容器内
			},
			xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01],
			axisLine: {
			show: false, // 不显示横坐标轴线
			},
			axisTick: {
			show: false, // 不显示刻度线
			},
			splitLine: {
			show: false, // 不显示x轴网格线
			},
			},
			yAxis: {
			type: 'category',
			data: ['闵行区', '浦东区', '徐汇区'], // 示例数据
			axisLine: {
			show: false, // 不显示横坐标轴线
			},
			axisTick: {
			show: false, // 不显示刻度线
			},
			splitLine: {
			show: false, // 不显示y轴网格线
			},
			axisLabel: {
			rich: {
			iconStyle: {
			fontSize: 20, // 设置图标的字体大小为20
			},
			nameStyle: {
			// 定义名字的样式
			fontSize: 12, // 设置名字的字体大小为12，或者您希望的任何大小
			},
			},
			formatter: function (value, index) {
			// 根据index或value来决定显示哪个排名的图标
			const rankIcons = {
			2: '{iconStyle\|🥇}',
			1: '{iconStyle\|🥈}',
			0: '{iconStyle\|🥉}',
			};
			return `${rankIcons[index]} {nameStyle\|${value}}`;
			},
			},
			},
			series: [

			.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="workOrder">
			<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 cursor-pointer" @click="handleDataItemClick(item)">
			{{item.value}}<span class="text-[13px]"> {{' '+item.unit}}</span>
			</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="myiconfont 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 id="inspectionChart" class="w-full h-[280px]" v-resize="chartContainerResize"></div>
			</div>
			<div class="chart-item">
			<div class="screen-top-header flex-l">
			<div class="header-left flex-c">
			<i class="myiconfont 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="pond-section" v-resize="chartContainerResize">
			<div id="salesRankChart" class="w-full h-[280px]"></div>
			</div>
			</div>
			</div>
			</div>
			<el-dialog
			v-model="state.isShowChartVisible"
			:title="state.inspectionInfo.title"
			width="50%"
			class="px-[unset] py-[unset]"
			:before-close="handleCloseChartVisible"
			>
			<div id="inspectionTrends" class="w-full h-[500px]"></div>
			</el-dialog>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive, nextTick } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart = ref(null);
			const inspectionChart = ref(null);
			const salesRankRef = ref(null);
			const inspectionTrendsChart = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			dataList: [
			{
			name: '受理量',
			type: 'bar',
			data: [9, 10, 21], // 示例数据
			barWidth: '30%', // 调整柱子宽度
			itemStyle: {
			borderRadius: [0, 5, 5, 0], // 只有右侧圆角
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
			// 设置渐变色，方向也要调整为横向
			{ offset: 0, color: '#bdd1f6' },
			{ offset: 1, color: '#4282ff' },
			]),
			title: '管线总长',
			value: 755,
			config: {
			number: [755],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			label: {
			show: true, // 显示标签
			position: 'right', // 标签位置在顶部
			formatter: '{c}万', // 自定义显示的内容，{c}是指当前数据点的值
			unit: '米',
			},
			{
			title: '压力表数',
			value: 3288,
			config: {
			number: [3288],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '流量计数',
			value: 14222,
			config: {
			number: [14222],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '户表数',
			value: 41022,
			config: {
			number: [41022],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '水质仪数',
			value: 176888,
			config: {
			number: [176888],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			{
			title: '阀门数',
			value: 820,
			config: {
			number: [820],
			toFixed: 0,
			content: '{nt}',
			textAlign: 'left',
			style: {
			fontSize: 24,
			},
			},
			unit: '个',
			},
			],
			isShowChartVisible: false,
			inspectionInfo: {
			id: null,
			title: null,
			value: null,
			},
			});
			const getOverViewList = () => {
			const iconList = [
			'biaodan',
			'putong',
			'zhongduancanshuchaxun',
			'shidu',
			'fuwenbenkuang',
			'fuwenben',
			'jiliandongxuanzeqi',
			'jinridaiban',
			'gongju',
			];
			state.dataList.forEach((annual, index) => {
			annual.Icon = iconList[index];
			annual.BgColor = randomHexColor();
			});
			};
			salesRankingElement.setOption(option);
			};
			//随机生成颜色
			const randomHexColor = () => {
			return `#${Math.floor(Math.random() * 16777215)
			.toString(16)
			.padEnd(6, '0')}`;
			};
			onMounted(() => {
			initInspectionChart();
			drawSalesRanking();
			});
			//初始化巡检图表
			const initInspectionChart = () => {
			var chartDom = document.getElementById('inspectionChart');
			var myInspectChart = echarts.init(chartDom);
			inspectionChart.value = myInspectChart;
			var option = {
			legend: {},
			tooltip: {},
			grid: {
			left: '2%', // 调整左边距
			right: '5%', // 调整右边距
			bottom: '6%',
			containLabel: true, // 确保标签和轴标题被包含在容器内
			},
			dataset: {
			source: [
			['product', '循环完成率', '维保完成率'],
			['1月', 43.3, 85.8],
			['2月', 83.1, 73.4],
			['3月', 86.4, 65.2],
			['4月', 72.4, 53.9],
			['5月', 77.0, 39.1],
			['6月', 68.2, 56.2],
			['7月', 72.1, 64.5],
			['8月', 76.5, 70.8],
			['9月', 74.1, 72.4],
			['10月', 75.3, 71.7],
			['11月', 70.9, 74.2],
			['12月', 66.8, 75.2],
			],
			},
			xAxis: { type: 'category', name: '月份', nameGap: 10 },
			yAxis: {
			name: '单位: %',
			},
			series: [{ type: 'bar' }, { type: 'bar' }],
			};
			option && myInspectChart.setOption(option);
			};
			//初始化弹窗echart
			const initInspectionTrendsEchart = () => {
			var chartDom = document.getElementById('inspectionTrends');
			var businessTrendsChart = echarts.init(chartDom);
			inspectionTrendsChart.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 drawSalesRanking = () => {
			var chartDom = document.getElementById('salesRankChart');
			var salesRankingElement = echarts.init(chartDom);
			salesRankRef.value = salesRankingElement;
			const option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow',
			},
			},
			grid: {
			left: '2%', // 调整左边距
			right: '5%', // 调整右边距
			top: '2%', // 调整下边距
			bottom: '15%',
			containLabel: true, // 确保标签和轴标题被包含在容器内
			},
			xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01],
			axisLine: {
			show: false, // 不显示横坐标轴线
			},
			axisTick: {
			show: false, // 不显示刻度线
			},
			splitLine: {
			show: false, // 不显示x轴网格线
			},
			},
			yAxis: {
			type: 'category',
			data: ['闵行区', '浦东区', '徐汇区'], // 示例数据
			axisLine: {
			show: false, // 不显示横坐标轴线
			},
			axisTick: {
			show: false, // 不显示刻度线
			},
			splitLine: {
			show: false, // 不显示y轴网格线
			},
			axisLabel: {
			rich: {
			iconStyle: {
			fontSize: 20, // 设置图标的字体大小为20
			},
			nameStyle: {
			// 定义名字的样式
			fontSize: 12, // 设置名字的字体大小为12，或者您希望的任何大小
			},
			},
			formatter: function (value, index) {
			// 根据index或value来决定显示哪个排名的图标
			const rankIcons = {
			2: '{iconStyle\|🥇}',
			1: '{iconStyle\|🥈}',
			0: '{iconStyle\|🥉}',
			};
			return `${rankIcons[index]} {nameStyle\|${value}}`;
			},
			},
			},
			series: [
			{
			name: '受理量',
			type: 'bar',
			data: [9, 10, 21], // 示例数据
			barWidth: '30%', // 调整柱子宽度
			itemStyle: {
			borderRadius: [0, 5, 5, 0], // 只有右侧圆角
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
			// 设置渐变色，方向也要调整为横向
			{ offset: 0, color: '#bdd1f6' },
			{ offset: 1, color: '#4282ff' },
			]),
			},
			label: {
			show: true, // 显示标签
			position: 'right', // 标签位置在顶部
			formatter: '{c}万', // 自定义显示的内容，{c}是指当前数据点的值
			},
			},
			],
			};
			salesRankingElement.setOption(option);
			};
			//点击数据项弹窗
			const handleDataItemClick = (item) => {
			state.inspectionInfo = item;
			nextTick(() => {
			initInspectionTrendsEchart();
			});

			return { state };
			},
			});
			state.isShowChartVisible = true;
			};
			const chartContainerResize = ({ width, height }) => {
			inspectionChart.value.resize();
			salesRankRef.value.resize();
			};
			//关闭弹窗
			const handleCloseChartVisible = () => {
			state.isShowChartVisible = false;
			};
			return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
			},
			});

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

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