<template>
	<div class="visualizing-demo1">
		<div class="visualizing-container">
			<!-- 头部 -->
			<div class="visualizing-container-head">
				<div class="visualizing-container-head-left">
					<div class="visualizing-container-head-left-text">
						<div class="visualizing-container-head-left-text-box">{{ state.time.txt }}</div>
					</div>
				</div>
				<div class="visualizing-container-head-center">
					<div class="visualizing-container-head-center-box">
						<div class="visualizing-container-head-center-mainTitle">宜宾市12345数据展示</div>
					</div>
				</div>
				<div class="visualizing-container-head-right">
					<div class="visualizing-container-head-right-text">
						<div class="visualizing-container-head-right-text-box">🌤 多云转晴东南风 26~30℃</div>
					</div>
				</div>
			</div>

			<!-- 图表左侧 -->
			<div class="visualizing-container-content-left">
				<div class="visualizing-container-content-left-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-shop"></i>
						<span>受理工单概览</span>
					</div>
					<bv-scroll-table :config="config" class="mt5" style="height: 100%"></bv-scroll-table>
				</div>
				<div class="visualizing-container-content-left-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-promotion"></i>
						<span>问题类型统计</span>
					</div>
					<div ref="questionType" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-left-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-shop"></i>
						<span>部门案件办理情况</span>
					</div>
					<div ref="caseHandlingStatus" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-left-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-promotion"></i>
						<span>问题高发 TOP5</span>
					</div>
					<div ref="problemsTOP5" style="height: 100%"></div>
				</div>
			</div>

			<!-- 图表中间 -->
			<div class="visualizing-container-content-center">
				<!-- 顶部数据-->
				<div class="visualizing-container-content-center-top">
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">今日案件总数</p>
						<p class="visualizing-container-content-center-top-box-value colorful1">
							<bv-count-to :startVal="0" :endVal="18" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">正在办理</p>
						<p class="visualizing-container-content-center-top-box-value colorful2">
							<bv-count-to :startVal="0" :endVal="2" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">已办案件</p>
						<p class="visualizing-container-content-center-top-box-value colorful3">
							<bv-count-to :startVal="0" :endVal="16" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">本年接件量</p>
						<p class="visualizing-container-content-center-top-box-value colorful4">
							<bv-count-to :startVal="0" :endVal="1007" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">本年办结量</p>
						<p class="visualizing-container-content-center-top-box-value colorful5">
							<bv-count-to :startVal="0" :endVal="987" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
					<bv-border-box name="border2" class="visualizing-container-content-center-top-box"
						><p class="visualizing-container-content-center-top-box-title">累计接件量</p>
						<p class="visualizing-container-content-center-top-box-value colorful6">
							<bv-count-to :startVal="0" :endVal="1345123" ref="countTo" separator=""></bv-count-to>
						</p>
					</bv-border-box>
				</div>
				<!-- 地图 -->
				<div class="visualizing-container-content-center-middle">
					<div ref="visualizingDemo1" style="height: 100%"></div>
				</div>
				<!-- 底部折线图-->
				<div class="visualizing-container-content-center-bottom boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-flag"></i>
						<span>办理情况 TOP5</span>
					</div>
					<div ref="handlingStatusTop5" style="height: 100%"></div>
				</div>
			</div>

			<!-- 图表右侧 -->
			<div class="visualizing-container-content-right">
				<div class="visualizing-container-content-right-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-marketing"></i>
						<span>办件状态分析</span>
					</div>
					<div ref="processingStatus" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-right-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-data"></i>
						<span>坐席话务实况</span>
					</div>
					<div ref="seatTraffic" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-right-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-data"></i>
						<span>来源占比分析</span>
					</div>
					<div ref="sourceProportion" style="height: 100%"></div>
				</div>
				<div class="visualizing-container-content-right-flex boxBg">
					<div class="visualizing-container-title">
						<i class="el-icon-s-data"></i>
						<span>投诉热词</span>
					</div>
					<div ref="complaintHotWords" style="height: 100%"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="visualizingLinkDemo1">
import { onMounted, onUnmounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import 'echarts-wordcloud';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { acceptWorkOrderData, complaintHotWordsData, echartsMapData, echartsMapImages, echartsMapList } from './mock/demo1';
import Watermark from '/@/utils/watermark';
import signalR from '/@/utils/signalR';
// 定义变量内容
const visualizingDemo1 = ref(); // 地图
const state = reactive({
	echartsMapList,
	echartsMapData,
  echartsMapImages,
	time: {
		txt: '',
		fun: 0,
	},
	myCharts: [] as EmptyArrayType,
});
// 初始化时间
const initTime = () => {
	state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
	state.time.fun = window.setInterval(() => {
		state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
	}, 1000);
};
// echartsMap 将坐标信息和对应物理量的值合在一起
const convertData = (data: any) => {
	let res = [];
	for (let i = 0; i < data.length; i++) {
		let geoCord:any = state.echartsMapData[data[i].name];
		if (geoCord) {
			res.push({
				name: data[i].name,
				value: geoCord.concat(data[i].value),
			});
		}
	}
	return res;
};
// 初始化 echartsMap（地图上的点）
const initEchartsMap = () => {
	const myChart = echarts.init(<HTMLElement>visualizingDemo1.value);
	const option = {
		tooltip: {
			trigger: 'item',
			formatter(params: any) {
				// 自定义鼠标放入样式
				let item = state.echartsMapImages.find((v: any) => v.name === params.name);
				return `<div style="width: 240px;">
							<div style="display: flex; align-items: center">
								<img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px"  alt=""/>
								<div
									style="
										background: #51c1ff;
										width: 100%;
										height: 32px;
										display: flex;
										margin-left: -14px;
										align-items: center;
										padding-left: 20px;
										color: #fff;
									"
								>
									${item?.name}
								</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
							</div>
							<div style="margin-top: 10px; font-size: 12px">
								<div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
							</div>
						</div>`;
			},
		},
		color: ['#ea7ccc'],
		bmap: {
			center: [114.064524, 22.549225],
			zoom: 11,
			roam: true,
			mapStyle: {},
		},
		series: [
			{
				name: '门票收入',
				type: 'scatter',
				coordinateSystem: 'bmap',
				data: convertData(state.echartsMapList),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				label: {
					formatter: '{b}',
					position: 'right',
					show: false,
				},
				emphasis: {
					label: {
						show: true,
					},
				},
			},
			{
				name: '门票收入',
				type: 'effectScatter',
				coordinateSystem: 'bmap',
				data: convertData(
					state.echartsMapList
						.sort(function (a: any, b: any) {
							return b.value - a.value;
						})
						.slice(0, 6)
				),
				symbolSize: function (val: any) {
					return val[2] / 10;
				},
				encode: {
					value: 2,
				},
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'stroke',
				},
				hoverAnimation: true,
				label: {
					formatter: '{b}',
					position: 'right',
					show: true,
				},
				itemStyle: {
					shadowBlur: 100,
					shadowColor: '#333',
				},
				z: 1,
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);

	// 地图
	const map = (<any>myChart).getModel().getComponent('bmap').getBMap();
	// BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
	// BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
	// BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
	// BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
	// eslint-disable-next-line no-undef
	map.setMapType(BMAP_HYBRID_MAP);
	// eslint-disable-next-line no-undef
	let binary = new BMap.Boundary();
	// 获取行政区域
	binary.get('深圳', function (rs: any) {
		// 行政区域的点有多少个
		let count = rs.boundaries.length;
		for (let i = 0; i < count; i++) {
			// eslint-disable-next-line no-undef
			let ply = new BMap.Polygon(rs.boundaries[i], {
				// 设置多边形边线线粗
				strokeWeight: 4,
				// 设置多边形边线透明度0-1
				strokeOpacity: 1,
				// 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
				StrokeStyle: 'dashed',
				// 设置多边形边线颜色
				strokeColor: '#febb50',
				// 设置多边形填充颜色
				fillColor: '',
			});
			// 建立多边形覆盖物
			// 添加覆盖物
			map.addOverlay(ply);
			// 调整视野
			map.setViewport(ply.getPath());
		}
		// 初始化地图，设置中心点坐标和地图级别
		// new BMap.Point('深圳市', 11)
		// eslint-disable-next-line no-undef
		map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
	});
};
let config = reactive({});
// 受理工单数据
const initOrder = () => {
	config = {
		header: ['受理类型', '来电事件', '来电人', '标题', '区域'],
		data: acceptWorkOrderData,
		columnWidth: [100, 100, 100, 200, 100],
		headerBGC: 'rgba(0, 0, 0, .3)',
		oddRowBGC: 'rgba(25, 140, 139, 0.1)',
		evenRowBGC: 'rgba(25, 140, 139, 0.2)',
	};
};
// 问题类型统计
const questionType = ref();
const initQuestionType = () => {
	const myChart = echarts.init(questionType.value);
	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			top: 10,
			right: 10,
			bottom: 20,
			left: 45,
		},
		xAxis: {
			type: 'value',
			axisLabel: {
				color: '#16cfd0',
			},
			show: false,
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(22, 207, 208, 0.3)',
				},
			},
		},
		yAxis: {
			type: 'category',
			axisLabel: {
				color: '#16cfd0',
			},
			splitLine: {
				//网格线
				lineStyle: {
					type: 'dashed', //设置网格线类型 dotted：虚线 solid:实线
					color: 'rgba(6, 59, 60, 1)', //网格线颜色
					dataOffset: 20, //设置网格线相对刻度线的偏移量
				},
				show: true,
			},
		},
		series: [
			{
				name: '已完成',
				type: 'bar',
				stack: 'total',
				emphasis: {
					focus: 'series',
				},
				barWidth: 12,
				itemStyle: {
					label: {
						show: true,
					},
					color: '#4578EF',
				},
			},
			{
				name: '进行中',
				type: 'bar',
				stack: 'total',
				emphasis: {
					focus: 'series',
				},
				barWidth: 12,
				itemStyle: {
					label: {
						show: true,
					},
					color: '#28D5BF',
				},
			},
			{
				name: '已归档',
				type: 'bar',
				stack: 'total',
				emphasis: {
					focus: 'series',
				},
				barWidth: 12,
				itemStyle: {
					label: {
						show: true,
					},
					color: '#00FFDF',
				},
			},
			{
				name: '已创建',
				type: 'bar',
				stack: 'total',
				emphasis: {
					focus: 'series',
				},
				barWidth: 12,
				itemStyle: {
					label: {
						show: true,
					},
					color: '#AED7E4',
				},
			},
		],
		dataset: {
			source: [
				{ status: '表扬', value1: 33, value2: 93, value3: 12, value4: 53 },
				{ status: '投诉', value1: 53, value2: 32, value3: 12, value4: 53 },
				{ status: '求助', value1: 78, value2: 65, value3: 12, value4: 53 },
				{ status: '举报', value1: 12, value2: 35, value3: 12, value4: 53 },
				{ status: '咨询', value1: 12, value2: 35, value3: 12, value4: 53 },
				{ status: '其他', value1: 90, value2: 52, value3: 12, value4: 53 },
			],
		},
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 部门案件办理情况
const caseHandlingStatus = ref();
const initCaseHandlingStatus = () => {
	const myChart = echarts.init(caseHandlingStatus.value);
	const option = {
		grid: {
			top: 30,
			right: 0,
			bottom: 20,
			left: 30,
		},
		tooltip: {
			trigger: 'axis',
			// backgroundColor:'rgba(26, 42, 43, .5)',
			// borderColor:"transparent",
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#A3C4C4',
				},
			},
		},
		legend: {
			data: [
				{
					name: '总数',
					textStyle: {
						color: '#00E5FB',
					},
				},
				{
					name: '已办',
					textStyle: {
						color: '#4478EC',
					},
				},
				{
					name: '在办',
					textStyle: {
						color: '#28D5BF',
					},
				},
				{
					name: '超期',
					textStyle: {
						color: '#7FDF84',
					},
				},
			],
			top: '0',
			left: 'right',
			textStyle: {
				color: '#253A77',
			},
			itemWidth: 15,
			itemHeight: 5,
		},
		xAxis: {
			data: ['公安局', '民政局', '交通局', '人大办', '热线中心'],
			axisPointer: {
				type: 'shadow',
			},
			axisLabel: {
				show: true,
				textStyle: {
					color: '#7d838b',
				},
			},
			axisLine: {
				show: false,
				lineStyle: {
					color: '#253A77',
				},
			},
			axisTick: {
				show: false,
			},
		},
		yAxis: [
			{
				type: 'value',
				nameTextStyle: {
					color: '#7d838b',
				},
				min: 0,
				max: 50,
				interval: 10,
				axisLabel: {
					show: true,
					textStyle: {
						color: '#7d838b',
					},
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: '#253A77',
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						type: 'dashed',
						color: 'rgba(6, 59, 60, 1)',
					},
				},
				axisTick: {
					show: false,
				},
			},
		],
		series: [
			{
				name: '总数',
				type: 'bar',
				data: [4, 6, 36, 6, 8, 6, 4, 6, 36, 6, 8, 6, 4, 6, 36, 6, 8, 6, 4, 6, 80, 6, 8, 6],
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#00E8FF',
							},
							{
								offset: 1,
								color: '#04282B',
							},
						]),
						opacity: 1,
						barBorderRadius: 12,
					},
				},
				barGap: 1, //柱子之间距离
				barWidth: 6, //柱子宽度
			},
			{
				name: '已办',
				type: 'bar',
				data: [4, 19, 48, 3, 12, 2, 4, 19, 48, 3, 12, 2, 4, 19, 48, 3, 12, 2, 4, 19, 48, 3, 12, 2],
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#487CF7',
							},
							{
								offset: 1,
								color: '#04282B',
							},
						]),
						opacity: 1,
						barBorderRadius: 12,
					},
				},
				barGap: 1,
				barWidth: 6, //柱子宽度
			},
			{
				name: '在办',
				type: 'bar',
				data: [4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6],
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#28D5BF',
							},
							{
								offset: 1,
								color: '#04282B',
							},
						]),
						opacity: 1,
						barBorderRadius: 12,
					},
				},
				barGap: 1,
				barWidth: 6, //柱子宽度
			},
			{
				name: '超期',
				type: 'bar',
				data: [4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6, 4, 2, 36, 6, 8, 6],
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#81E186',
							},
							{
								offset: 1,
								color: '#04282B',
							},
						]),
						opacity: 1,
						barBorderRadius: 12,
					},
				},
				barGap: 1,
				barWidth: 6, //柱子宽度
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 问题高发 TOP5
const problemsTOP5 = ref();
const initProblemsTOP5 = () => {
	let data = [
		{
			name: '卫生健康',
			value: 10,
		},
		{
			name: '交通管理',
			value: 20,
		},
		{
			name: '疫情防空',
			value: 64,
		},
		{
			name: '时长管理',
			value: 44,
		},
		{
			name: '交通互联',
			value: 44,
		},
		{
			name: '其他',
			value: 44,
		},
	];
	let defaultData = [100, 100, 100, 100, 100, 100];
	const getArrByKey = (data: any[], k: string) => {
		let key = k || 'value';
		let res: any[] = [];
		if (data) {
			data.forEach(function (t) {
				res.push(t[key]);
			});
		}
		return res;
	};
	const getSymbolData = (data: string | any[]) => {
		let arr = [];
		for (let i = 0; i < data.length; i++) {
			arr.push({
				value: data[i].value,
				symbolPosition: 'end',
			});
		}
		return arr;
	};
	const myChart = echarts.init(problemsTOP5.value);
	const option = {
		tooltip: {
			show: false,
		},
		grid: {
			top: 20,
			bottom: 0,
			right: 20,
			left: 10,
			containLabel: true,
		},
		xAxis: {
			show: false,
		},
		yAxis: [
			{
				triggerEvent: false,
				show: true,
				inverse: true,
				data: getArrByKey(data, 'name'),
				axisLine: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					show: false,
					interval: 0,
					color: '#fff',
					align: 'left',
					margin: 40,
					fontSize: 13,
					formatter: function (value: string) {
						return '{title|' + value + '}';
					},
					rich: {
						title: {
							width: 165,
						},
					},
				},
			},
			{
				offset: 20,
				triggerEvent: false,
				show: true,
				inverse: true,
				data: getArrByKey(data, 'name'),
				axisLine: {
					show: false,
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					interval: 0,
					align: 'right',
					lineHeight: 40,
					fontSize: 14,
					color: '#ccc',
					formatter: function (value: any, index: number) {
						return data[index].value;
					},
				},
			},
		],
		series: [
			{
				name: 'XXX',
				type: 'pictorialBar',
				symbolSize: [10, 10],

				symbolOffset: [10, 0],
				z: 12,
				itemStyle: {
					normal: {
						color: '#E59B1A',
						borderColor: '#fff',
						borderWidth: 1,
					},
				},
				data: getSymbolData(data),
			},
			{
				name: '背景',
				type: 'bar',
				barWidth: 5,
				barGap: '-100%',
				z: 1,
				data: defaultData,
				itemStyle: {
					normal: {
						color: 'rgba(19, 33, 33, .5)',
						barBorderRadius: 10,
					},
				},
			},
			{
				name: '条',
				type: 'bar',
				yAxisIndex: 0,
				data: data,
				barWidth: 5,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
							{
								offset: 0,
								color: 'rgba(5, 13, 14, 1)',
							},
							{
								offset: 1,
								color: 'rgba(204, 218, 124, 1)',
							},
						]),
						barBorderRadius: 10,
					},
				},
				label: {
					normal: {
						color: '#87DCD7',
						show: true,
						position: [0, '-18px'],
						textStyle: {
							fontSize: 14,
						},
						formatter: function (a: { name: any }) {
							return a.name;
						},
					},
				},
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 办理情况TO5
const handlingStatusTop5 = ref();
const initHandlingStatusTop5 = () => {
	const myChart = echarts.init(handlingStatusTop5.value);
	const option = {
		tooltip: {
			trigger: 'axis',
		},
		grid: {
			top: 26,
			right: 10,
			bottom: 50,
			left: 35,
		},
		legend: {
			itemWidth: 10,
			itemHeight: 10,
			icon: 'circle', //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
			top: 0,
			textStyle: {
				fontSize: 12,
				color: '#A3C4C4',
			},
			data: [{ name: '长宁县' }, { name: '市辖区' }, { name: '农业科技' }, { name: '翠屏区' }, { name: '南溪区' }],
		},
		xAxis: {
			type: 'category',
			boundaryGap: true,
			axisLine: {
				lineStyle: {
					color: '#A3C4C4',
				},
			},
			axisTick: {
				alignWithLabel: true,
			},
			data: ['2022-06-01', '2022-06-27', '2022-07-19', '2022-08-16', '2022-09-23', '2022-10-17', '2022-11-08', '2022-11-28'],
		},
		yAxis: {
			axisLine: {
				show: false,
				lineStyle: {
					color: '#A3C4C4',
				},
			},
			axisTick: {
				show: false,
			},
			// 分割线
			splitLine: {
				lineStyle: {
					color: 'rgba(6, 59, 60, 1)',
					type: 'dashed',
				},
			},
			type: 'value',
		},
		series: [
			{
				name: '长宁县',
				type: 'line',
				showAllSymbol: false,
				lineStyle: {
					color: '#4273E3',
				},
				itemStyle: {
					color: '#4273E3',
				},
				smooth: 0.2,
				data: [10, 12, 21, 54, 34, 20, 14, 21, 54, 34, 20, 14],
				symbolSize: 0,
			},
			{
				name: '市辖区',
				type: 'line',
				lineStyle: {
					color: '#2579D8',
					opacity: 0.4,
				},
				itemStyle: {
					color: '#2579D8',
					opacity: 0.4,
				},
				smooth: true,
				data: [30, 12, 14, 34, 24, 30, 10, 14, 34, 24, 30, 10],
				symbolSize: 0,
			},
			{
				name: '农业科技',
				type: 'line',
				lineStyle: {
					color: '#7FDF84',
				},
				itemStyle: {
					color: '#7FDF84',
				},
				smooth: true,
				data: [24, 42, 45, 67, 12, 90, 20, 45, 67, 12, 90, 20],
				symbolSize: 0,
			},
			{
				name: '翠屏区',
				type: 'line',
				lineStyle: {
					color: '#87DCD7',
					opacity: 0.4,
				},
				itemStyle: {
					color: '#87DCD7',
					opacity: 0.4,
				},
				smooth: true,
				data: [43, 24, 45, 24, 56, 90, 20, 45, 24, 56, 90, 20],
				symbolSize: 0,
			},
			{
				name: '南溪区',
				type: 'line',
				lineStyle: {
					color: '#2FC25B',
					opacity: 0.4,
				},
				itemStyle: {
					color: '#2FC25B',
					opacity: 0.4,
				},
				smooth: true, // 折现平滑
				data: [43, 24, 45, 21, 3, 12, 20, 4, 2, 56, 1, 20],
				symbolSize: 0, // 不展示折现拐点
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 办件状态
const processingStatus = ref();
const initProcessingStatus = () => {
	const myChart = echarts.init(processingStatus.value);
	const option = {
		grid: {
			top: 50,
			right: 30,
			bottom: 50,
			left: 20,
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		xAxis: {
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisLine: {
				lineStyle: {
					color: 'rgba(22, 207, 208, 0.5)',
					width: 1,
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: '#16cfd0',
			},
		},
		yAxis: [
			{
				type: 'value',
				name: '亿元',
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(22, 207, 208, 0.1)',
					},
				},
				axisLabel: {
					color: '#16cfd0',
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(22, 207, 208, 0.3)',
					},
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: 'rgba(22, 207, 208, 0.02)',
					},
				},
				nameTextStyle: {
					color: '#16cfd0',
				},
			},
			{
				type: 'value',
				name: '同比',
				position: 'right',
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: true,
					formatter: '{value}%',
					textStyle: {
						color: '#16cfd0',
					},
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: 'rgba(22, 207, 208, 0.02)',
					},
				},
				nameTextStyle: {
					color: '#16cfd0',
				},
			},
		],
		series: [
			{
				name: '销售水量',
				type: 'line',
				yAxisIndex: 1,
				smooth: true,
				showAllSymbol: true,
				symbol: 'circle',
				itemStyle: {
					color: '#058cff',
				},
				lineStyle: {
					color: '#058cff',
				},
				areaStyle: {
					color: 'rgba(5,140,255, 0.2)',
				},
				data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
			},
			{
				name: '主营业务',
				type: 'bar',
				barWidth: 15,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#00FFE3',
							},
							{
								offset: 1,
								color: '#4693EC',
							},
						]),
					},
				},
				data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8],
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 坐席话务实况
const seatTraffic = ref();
const initSeatTraffic = () => {
	const myChart = echarts.init(seatTraffic.value);
	const option = {
		grid: {
			top: 50,
			right: 10,
			bottom: 40,
			left: 30,
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisLine: {
				lineStyle: {
					color: 'rgba(22, 207, 208, 0.1)',
					width: 1,
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel: {
				color: '#16cfd0',
			},
		},
		yAxis: [
			{
				type: 'value',
				name: '人数(万)',
				axisLine: {
					show: true,
					lineStyle: {
						color: 'rgba(22, 207, 208, 0.1)',
					},
				},
				axisLabel: {
					color: '#16cfd0',
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(22, 207, 208, 0.3)',
					},
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: 'rgba(22, 207, 208, 0.02)',
					},
				},
				nameTextStyle: {
					color: '#16cfd0',
				},
			},
		],
		series: [
			{
				name: '预购队列',
				type: 'line',
				data: [20, 15, 40, 55, 65, 85],
				smooth: true,
				itemStyle: {
					color: '#EA7CCC',
				},
			},
			{
				name: '最新成交价',
				type: 'line',
				data: [30, 45, 65, 85, 60, 105],
				smooth: true,
				itemStyle: {
					color: '#FAC958',
				},
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 来源占比分析
const sourceProportion = ref();
const initSourceProportion = () => {
	const myChart = echarts.init(sourceProportion.value);
	let m2R2Data = [
		{ value: 335, legendname: '项目01', name: '项目01', itemStyle: { color: '#8d7fec' } },
		{ value: 310, legendname: '项目02', name: '项目02', itemStyle: { color: '#5085f2' } },
		{ value: 234, legendname: '项目03', name: '项目03', itemStyle: { color: '#e75fc3' } },
		{ value: 154, legendname: '项目04', name: '项目04', itemStyle: { color: '#f87be2' } },
		{ value: 335, legendname: '项目05', name: '项目05', itemStyle: { color: '#f2719a' } },
		{ value: 335, legendname: '项目06', name: '项目06', itemStyle: { color: '#fca4bb' } },
		{ value: 335, legendname: '项目07', name: '项目07', itemStyle: { color: '#f59a8f' } },
		{ value: 335, legendname: '项目08', name: '项目08', itemStyle: { color: '#fdb301' } },
		{ value: 335, legendname: '项目09', name: '项目09', itemStyle: { color: '#57e7ec' } },
		{ value: 335, legendname: '项目10', name: '项目10', itemStyle: { color: '#cf9ef1' } },
		{ value: 335, legendname: '项目09', name: '项目11', itemStyle: { color: '#57e7ec' } },
		{ value: 335, legendname: '项目10', name: '项目12', itemStyle: { color: '#cf9ef1' } },
		{ value: 335, legendname: '项目011', name: '项目01', itemStyle: { color: '#8d7fec' } },
		{ value: 310, legendname: '项目012', name: '项目012', itemStyle: { color: '#5085f2' } },
		{ value: 234, legendname: '项目013', name: '项目013', itemStyle: { color: '#e75fc3' } },
		{ value: 154, legendname: '项目014', name: '项目014', itemStyle: { color: '#f87be2' } },
		{ value: 335, legendname: '项目015', name: '项目015', itemStyle: { color: '#f2719a' } },
		{ value: 335, legendname: '项目016', name: '项目016', itemStyle: { color: '#fca4bb' } },
		{ value: 335, legendname: '项目017', name: '项目017', itemStyle: { color: '#f59a8f' } },
		{ value: 335, legendname: '项目018', name: '项目018', itemStyle: { color: '#fdb301' } },
		{ value: 335, legendname: '项目019', name: '项目019', itemStyle: { color: '#57e7ec' } },
	];
	function array2obj(array: string | any[], key: string) {
		const resObj:any = {};
		for (let i = 0; i < array.length; i++) {
			resObj[array[i][key]] = array[i];
		}
		return resObj;
	}

	const objData:any = array2obj(m2R2Data, 'name');
	const option = {
		tooltip: {
			trigger: 'item',
			formatter: function (params: any) {
				return params.marker + '' + params.data.legendname + '</br>' + '数量：' + params.data.value + '</br>' + '占比：' + params.percent + '%';
			},
		},
		legend: {
			orient: 'vertical',
			left: '40%',
			align: 'left',
			itemWidth: 10,
			itemHeight: 10,
			top: 'middle',
			icon: 'circle', //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
			textStyle: {
				color: '#8C8C8C',
			},
			formatter: function (name: string | number) {
				return `${name} ${objData[name].value}`;
			},
		},
		series: [
			{
				type: 'pie',
				center: ['20%', '50%'],
				radius: ['50%', '75%'],
				clockwise: false, //饼图的扇区是否是顺时针排布
				avoidLabelOverlap: false,
				itemStyle: {
					borderWidth: 2,
					borderColor: 'transparent',
				},
				label: {
					normal: {
						show: false,
					},
				},
				labelLine: {
					show: false,
					normal: {
						length: 1,
						length2: 3,
						smooth: false,
					},
				},
				data: m2R2Data,
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
//  投诉热词
const complaintHotWords = ref(); // 投诉热词
const initComplaintHotWords = () => {
	const myChart = echarts.init(complaintHotWords.value);
	const option = {
		grid: {
			top: 15,
			right: 15,
			bottom: 10,
			left: 10,
		},
		tooltip: {
			trigger: 'item',
			formatter: (params: any) => {
				const { name, value } = params;
				return `
平台：${name} <br/>
出现次数：${value}
`;
			},
		},
		series: [
			{
				type: 'wordCloud',
				gridSize: 20,
				shape: 'circle',
				rotationRange: [0, 0],
				rotationStep: 4,
				data: complaintHotWordsData,
				height: '80%',
				width: '90%',
				sizeRange: [16, 36],
				// 是否渲染超出画布的文字
				drawOutOfBound: false,
				textStyle: {
					color: function () {
						// Random color
						return 'rgb(' + [Math.round(Math.random() * 250), Math.round(Math.random() * 250), Math.round(Math.random() * 250)].join(',') + ')';
					},
					emphasis: {
						shadowBlur: 10,
						shadowColor: '#2ac',
					},
				},
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', () => {
		for (let i = 0; i < state.myCharts.length; i++) {
			state.myCharts[i].resize();
		}
		initOrder();
	});
};
// 页面加载时
onMounted(async () => {
	NextLoading.done();
	initTime();
	await initEchartsMap(); // 初始化地图
	await initOrder(); // 受理工单
	await initQuestionType(); // 问题类型
	await initCaseHandlingStatus(); // 部门案件办理情况
	await initProblemsTOP5(); // 问题TOP5
	await initHandlingStatusTop5(); // 办理情况Top5
	await initProcessingStatus(); // 办件状态
	await initSeatTraffic(); // 坐席话务实况
	await initSourceProportion(); // 来源占比分析
	await initComplaintHotWords(); // 投诉热词
	await initEchartsResize(); //
	Watermark.del(); // 清除水印
  //  signalR 初始化signalr
  signalR.init();
  // 加入分组
  await signalR.joinGroup('BigScreenDataShow');
  signalR.SR.on('Send', (data: any) => {
    // 加入分组成功
    console.log(data, '加入分组成功');
  });
});
// 页面卸载时
onUnmounted(() => {
	window.clearInterval(state.time.fun);
  // 离开页面时离开分组
  signalR.SR.off('Send');
  signalR.leaveGroup('BigScreenDataShow');
  window.removeEventListener('resize', () => {},true);
});
</script>

<style scoped lang="scss">
// 左右两侧图表宽度
$lrWidth: 467px;
// 中部底部图表高度
$cbHeight: calc(25% - 23px);
// 中部顶部图标高度
$ctHeight: 60px;
// 标题宽度
$titleWidth: 240px;
// 盒子之间的间距
$boxSpace: 7px;
// 盒子背景样式
.boxBg {
	background: rgba(6, 64, 63, 0.6);
	box-shadow: 0 5px 45px 5px #06130b;
	border: 2px solid rgba(41, 211, 212, 0.2);
	padding: 5px 15px;
}
.visualizing-demo1 {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: #06130b;
	:deep(.BMap_cpyCtrl) {
		display: none;
	}
	:deep(.anchorBL) {
		display: none;
	}
	.visualizing-container {
		.visualizing-container-head {
			height: 60px;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			color: #ffffff;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
			z-index: 3;
			.visualizing-container-head-left {
				flex: 1;
				position: relative;
				height: 60px;
				.visualizing-container-head-left-text {
					position: relative;
					z-index: 1;
					font-size: 12px;
					opacity: 0.6;
					width: 93%;
					padding-left: 15px;
					top: 50%;
					transform: translateY(-100%);
					.visualizing-container-head-left-text-box {
						width: 100%;
						position: relative;
						padding-left: 15px;
						&::after {
							content: '';
							height: 20px;
							width: 100%;
							position: absolute;
							background: linear-gradient(to right, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
							top: -1px;
							left: 0;
							transform: skew(30deg);
						}
					}
				}
				&::before,
				&::after {
					content: '';
					height: 3px;
					background: linear-gradient(-90deg, #16cfd0, transparent);
					position: absolute;
					width: 100%;
				}
				&::before {
					top: 1px;
					right: 33px;
					opacity: 0.8;
				}
				&::after {
					top: 41px;
					right: -2px;
				}
			}
			.visualizing-container-head-center {
				height: 60px;
				font-size: 18px;
				text-align: center;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 0 60px;
				background: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.02) 70%);
				.visualizing-container-head-center-box {
					margin: auto;
					position: relative;
					z-index: 1;
					.visualizing-container-head-center-mainTitle {
						position: relative;

						font-size: 36px;
						font-weight: bold;
						color: #d3dbeb;

						background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						&::before,
						&::after {
							content: '';
							position: absolute;
							min-width: 21%;
							height: 29px;
							top: 2px;
							opacity: 0.3;
							border-top: 1px solid #16cfd0;
						}
						&::before {
							left: -70px;
							border-right: 2px solid #16cfd0;
							transform: skew(50deg);
						}
						&::after {
							right: -70px;
							border-left: 2px solid #16cfd0;
							transform: skew(-50deg);
						}
					}
					&::before,
					&::after {
						content: '';
						position: absolute;
						width: 36px;
						height: 17px;
						top: -8px;
						border-bottom: 2px solid rgba(22, 207, 208, 0.7);
					}
					&::before {
						transform: skew(32deg);
						left: -89px;
						border-left: 3px solid rgba(22, 207, 208, 0.7);
					}
					&::after {
						transform: skew(-32deg);
						right: -89px;
						border-right: 3px solid rgba(22, 207, 208, 0.7);
					}
				}
				&::before,
				&::after {
					content: '';
					position: absolute;
					min-width: 50%;
					height: 15px;
					bottom: 0;
					border-bottom: 4px solid #16cfd0;
				}
				&::before {
					transform: skew(60deg);
					left: 13px;
					border-left: 5px solid #16cfd0;
				}
				&::after {
					transform: skew(-60deg);
					right: 13px;
					border-right: 5px solid #16cfd0;
				}
			}
			.visualizing-container-head-right {
				flex: 1;
				position: relative;
				height: 60px;
				.visualizing-container-head-right-text {
					position: relative;
					z-index: 1;
					font-size: 12px;
					opacity: 0.6;
					width: 93%;
					float: right;
					text-align: right;
					padding-right: 15px;
					top: 50%;
					transform: translateY(-100%);
					.visualizing-container-head-right-text-box {
						width: 100%;
						position: relative;
						padding-right: 15px;
						&::after {
							content: '';
							height: 20px;
							width: 100%;
							position: absolute;
							background: linear-gradient(to left, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
							top: -1px;
							right: 0;
							transform: skew(-30deg);
						}
					}
				}
				&::before,
				&::after {
					content: '';
					height: 3px;
					background: linear-gradient(90deg, #16cfd0, transparent);
					position: absolute;
					width: 100%;
				}
				&::before {
					top: 1px;
					left: 33px;
					opacity: 0.8;
				}
				&::after {
					top: 41px;
					left: -2px;
				}
			}
		}
		.visualizing-container-title {
			max-width: $titleWidth;
			font-size: 16px;
			font-weight: bold;
			color: #ffffff;
			background: linear-gradient(0deg, #ffffff 0%, #8ccaca 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			i {
				padding-right: 5px;
				color: orange;
			}
		}
		.visualizing-container-content-left {
			width: $lrWidth;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
			padding-top: $ctHeight;
			z-index: 2;
			display: flex;
			flex-direction: column;
			.visualizing-container-content-left-flex {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: $boxSpace;
				margin-bottom: $boxSpace;
			}
		}
		.visualizing-container-content-center {
			width: 100%;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
			z-index: 1;
			.visualizing-container-content-center-top {
				width: calc(100% - #{$lrWidth * 2});
				height: $ctHeight;
				left: $lrWidth;
				top: 60px;
				position: absolute;
				display: flex;
				padding: 0 $boxSpace;
				.visualizing-container-content-center-top-box {
					text-align: center;
					flex: 1;
					margin: 0 $boxSpace;
					.visualizing-container-content-center-top-box-title {
						color: #bdd9d9;
						font-size: 14px;
						padding-top: 9px;
					}
					.visualizing-container-content-center-top-box-value {
						font-size: 28px;
						font-weight: bold;
					}
					.colorful1 {
						color: #d1904b;
						background: linear-gradient(0deg, #fff846 28.6865234375%, #ffffff 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.colorful2 {
						color: #5896e2;
						background: linear-gradient(0deg, #53a0ff 28.6865234375%, #ffffff 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.colorful3 {
						color: #2ffdfd;
						background: linear-gradient(0deg, #dafaff 0%, #30ae48 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.colorful4 {
						color: #179090;
						background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.colorful5 {
						color: #179090;
						background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					.colorful6 {
						color: #179090;
						background: linear-gradient(0deg, #dafaff 0%, #00726c 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
			.visualizing-container-content-center-middle {
				position: absolute;
				left: $lrWidth;
				top: calc(60px + #{$ctHeight});
				right: $lrWidth;
				bottom: calc(#{$cbHeight} + #{$boxSpace});
			}
			.visualizing-container-content-center-bottom {
				width: calc(100% - #{$lrWidth * 2} - #{$boxSpace * 2});
				height: $cbHeight;
				left: $lrWidth;
				bottom: 0;
				position: absolute;
				margin: 0 $boxSpace $boxSpace $boxSpace;
			}
		}
		.visualizing-container-content-right {
			width: $lrWidth;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			padding-top: $ctHeight;
			display: flex;
			flex-direction: column;
			z-index: 2;
			.visualizing-container-content-right-flex {
				display: flex;
				flex-direction: column;
				margin-right: $boxSpace;
				flex: 1;
				margin-bottom: $boxSpace;
			}
		}
	}
}
</style>
