dkyChenJiang.git

			@@ -2,61 +2,341 @@
			<html lang="zh" xmlns:th="http://www.thymeleaf.org">
			<head>
			<th:block th:include="include :: header('弹层组件')" />
			<link href="../static/css/bootstrap.min.css"
			th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
			<link href="../static/css/font-awesome.min.css"
			th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
			<link href="../static/css/main/animate.min.css"
			th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
			<link href="../static/css/main/style.min862f.css"
			th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
			<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
			<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
			<link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet" />
			<link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet" />
			<link rel="stylesheet" th:href="@{/css/custom/main.css}" />
			<th:block th:include="include :: datetimepicker-css" />
			<style type="text/css">
			.content {
			width: 100%;
			background-color: rgba(0,0,0,0.01) !important;
			}
			</style>
			<link href="../static/js/elementUI/index.css" th:href="@{/js/elementUI/index.css}" rel="stylesheet" />

			<style type="text/css">
			.content {
			width: 100%;
			background-color: rgba(0,0,0,0.01) !important;
			padding:10px;
			}
			[v-cloak]{
			display: none;
			}
			.el-card__header{
			height: 40px;
			padding: 8px 20px;
			}
			.active-red{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #F56C6C;
			text-align: center;
			line-height: 20px;
			float: left;
			}

			.active-yellow{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #E6A23C;
			text-align: center;
			line-height: 20px;
			float: left;
			}

			.active-blue{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 14px;
			color: white;
			background: #67C23A;
			text-align: center;
			line-height: 20px;
			float: left;
			}
			.cdcode{
			width: 15%;
			float: left;
			margin-left: 10px;
			font-size: 16px;
			line-height: 20px;
			}
			.cdstatus{
			width: 15%;
			float: left;
			margin-left: 0px;
			font-size: 16px;
			line-height: 20px;
			}
			.cdprocess{
			width: 60%;
			float: left;
			margin-left: 10px;
			}
			.rankrow{
			margin-top: 12px;
			cursor: pointer;
			}
			.ilblock{
			border-left: 1px solid #e3e5e7;
			padding: 0 40px;
			align-content: center;
			}
			.ilblock>span{
			display: block;
			line-height: 30px;
			}


			<!-- 表格样式 -->
			.el-table, .el-table__expanded-cell {
			background-color: transparent;
			color: #4D4D4D;
			font-size: 13px;
			}

			.el-table th,
			.el-table tr,
			.el-table td {
			background-color: transparent;
			border: 0px;
			color: #4D4D4D;
			font-size: 13px;
			font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
			font-weight: Normal;
			}
			.el-table::before {
			height: 0px;
			}
			.el-table__body tr,
			.el-table__body td {
			padding: 0;
			height: 22px;
			}
			.el-table__row.warning-row {
			background:rgb(252,212,165);
			}
			.el-table__body-wrapper::-webkit-scrollbar-track {
			background-color: rgb(252,212,165);
			}
			.el-table__body-wrapper::-webkit-scrollbar {
			width: 10px;
			opacity: 0.5;
			}
			.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 15px;
			background-color:rgb(252,212,165);
			}
			</style>
			</head>

			<body class="gray-bg">
			<div class="content">
			<div class="col-sm-12">
			<div class="ibox float-e-margins">
			<div class="ibox-title">
			<h3>沉降监测网建设工程项目分布</h3>
			</div>
			<div class="ibox-content">

			<div class="row">
			<div class="col-sm-8">
			<div id="map_div" style="width: 100%;height: 750px;"></div>
			<div class="content" id="app" v-cloak>
			<el-row style="height: 127px;">
			<el-col :span="6">
			<el-card class="box-card">
			<div style="flex:4;padding-right: 20px;" >
			<div>
			<li class="el-icon-s-promotion" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #409eff;"></li>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">场地数量</span>
			</div>

			<div class="col-sm-4">
			<div >
			<div style="width: 100%;height: 20px;">
			<h3>项目总体进度(%)</h3>
			</div>
			<div id="Chart1" style="width: 80%;height: 250px;margin-left: 10%;"></div>
			</div>

			<div >
			<div style="width: 100%;height: 20px;">
			<h3>场地详细进度(%)</h3>
			</div>
			<div style="width: 100%;height: 500px;overflow: auto">
			<div id="Chart2" style="width: 100%;height: 1500px;"></div>
			</div>

			</div>

			<div style="text-align: center;">
			<span style="color:#ED1C24;font-size: 30px;word-break: break-all;line-height: 70px">34
			</span>
			</div>
			</div>
			</div>
			</div>
			</div>

			<div style="flex:6;" class="ilblock">
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			协调中
			<span style="float: right">{{indexDataCount.projectStatus0}}</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">-->

			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			待开工
			<span style="float: right">{{indexDataCount.projectStatus1}}</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #e6a23c">-->
			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			进行中
			<span style="float: right">{{indexDataCount.projectStatus2}}</span>
			<!-- <li class="el-icon-caret-top" style="color: #409eff">-->
			</span>

			</div>
			</el-card>
			</el-col>

			<el-col :span="6">
			<el-card class="box-card">
			<div style="flex:4;padding-right: 20px;">
			<div>
			<li class="el-icon-coin" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #085abe"></li>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">钻孔进尺</span>
			</div>
			<div style="text-align: center">
			<span style="color:#1894F6;font-size: 30px;word-break: break-all;line-height: 70px;">647
			</span>
			</div>
			</div>

			<div style="flex:6;" class="ilblock">
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			总进尺 <span style="float: right">{{indexDataCount.footageCount}}m</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			已完成 <span style="float: right">{{indexDataCount.footageCplCount}}m</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
			</span>
			</div>
			</el-card>
			</el-col>

			<el-col :span="6">
			<el-card class="box-card">
			<div style="flex:4;padding-right: 20px;">
			<div>
			<li class="el-icon-video-camera" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #11d713"></li>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">实时监控</span>
			</div>
			<div style="text-align: center">
			<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px">68
			</span>
			</div>
			</div>

			<div style="flex:6;" class="ilblock">
			<div>

			</div>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			已安装 <span style="float: right">{{indexDataCount.cameraCount}}</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			未安装 <span style="float: right">{{indexDataCount.cameraCountNaN}}</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
			</span>
			</div>
			</el-card>
			</el-col>
			<el-col :span="6">
			<el-card class="box-card">
			<div style="flex:4;padding-right: 20px;">
			<div>
			<li class="el-icon-s-order" style="font-size: 18px;margin-right: 5px;margin-left: -5px;color: #917ed0"></li>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;font-weight: bold;">资料文件</span>
			</div>
			<div style="text-align: center">
			<span style="color:#F7931E;font-size: 30px;word-break: break-all;line-height: 70px;">
			{{indexDataCount.fileCount}}
			</span>
			</div>
			</div>

			<div style="flex:6;" class="ilblock">
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			施工资料 <span style="float: right">0</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #f56c6c">-->
			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			安全资料 <span style="float: right">0</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
			</span>
			<span style="color:rgba(0,0,0,.87);font-size: 15px;">
			质量资料 <span style="float: right">0</span>
			<!-- <li class="el-icon-caret-bottom" style="color: #409eff">-->
			</span>
			</div>

			</el-card>
			</el-col>
			</el-row>
			<el-row>
			<el-col :span="16">
			<el-card class="box-card">
			<div style="height: 200px;width: 100%;">
			<h3>材料统计</h3>
			<el-col :span="10" style="height: 200px;">
			<div style="margin-top: 15px">
			<template>
			<el-table :data="tubLogs" border size="small" style="width: 100%"
			:header-cell-style="{color: '#4D4D4D',background: '#F7931E',fontWeight: '400'}"
			:row-class-name="tableRowClassName">
			<!-- <el-table-column prop="code" label="序号"></el-table-column>-->
			<el-table-column prop="tubName" label="名称"></el-table-column>
			<el-table-column prop="inboundNumber" label="入库数量"></el-table-column>
			<el-table-column prop="outboundNumber" label="出库数量"></el-table-column>
			<el-table-column prop="unit" label="单位"></el-table-column>

			</el-table>
			</template>
			</div>
			</el-col>
			<el-col :span="14" style="height: 200px;">
			<div id="column-chart" style="height: 180px; width: 100%;"></div>
			</el-col>
			</div>
			</el-card>

			<el-card class="box-card" style="margin-top: 20px;">
			<div id="map_div" style="width: 100%;height: 550px;margin-top: -5px"></div>
			</el-card>

			</el-col>

			<el-col :span="8">
			<el-card class="box-card">
			<div style="height: 200px;width: 100%">
			<div style="width: 100%;height: 20px;">
			<h3>项目总体进度(%)</h3>
			</div>
			<div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
			</div>
			</el-card>

			<el-card class="box-card" style="margin-top: 20px;">
			<div style="width: 100%">
			<div style="width: 100%;height: 20px;margin-bottom: 10px;text-align: center;">
			<h3>场地详细进度(%)</h3>
			</div>
			<div style="width: 100%;height: 500px;overflow: auto">

			<el-row class="rankrow" v-for='entity in stationProcessData' @click.native='viewStation(entity)'>
			<el-col :span="2" >
			<div v-if="entity.status=='协调中'" class="active-red">{{entity.ranking}}</div>
			<div v-if="entity.status=='待开工'" class="active-yellow">{{entity.ranking}}</div>
			<div v-if="entity.status=='进行中'" class="active-blue">{{entity.ranking}}</div>

			</el-col>

			<el-col :span="7">
			<div style="font-size: 16px">{{entity.station}}</div>
			</el-col >

			<el-col :span="5">
			<div style="font-size: 16px">{{entity.status}}</div>
			</el-col>

			<el-col :span="8">
			<div>
			<el-progress :stroke-width="10" :percentage="entity.value"></el-progress>
			</div>
			</el-col>
			</el-row>
			</div>
			</div>

			</el-card>

			</el-col>

			</el-row>

			</div>

			@@ -68,18 +348,151 @@
			<script src="http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js" type="text/javascript"></script>
			<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js" type="text/javascript"></script>
			<script th:src="@{/js/custom/main.js}"></script>

			<script th:src="@{/js/vue.min.js}"></script>
			<script th:src="@{/js/elementUI/index.js}"></script>

			<th:block th:include="include :: sparkline-js" />
			<th:block th:include="include :: footer" />

			<script th:inline="javascript">
			var loginuser = [[${loginuser}]];

			$(function() {
			if(loginuser=='admin'){
			window.open("http://49.4.115.102:8000/onemap/onemap.html","_blank");
			}

			loadMap();
			getReallyData();
			totalProcess();
			stationProcess();

			indexCount();
			tubLogs();
			})
			//场地和地图点击联动
			function viewStation(station) {
			var lng = station.lng;
			var lat = station.lat;
			map.centerAndZoom(new T.LngLat(lng, lat), 13);
			}

			function tubLogs() {

			const chart = echarts.init(document.getElementById("column-chart"));
			const option = {
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow'
			}
			},
			legend: {},
			grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
			},
			xAxis: [
			{
			type: 'category',
			data: []
			}
			],
			yAxis: [
			{
			type: 'value'
			}
			],
			series: [
			{
			name: '出库',
			type: 'bar',
			emphasis: {
			focus: 'series'
			},
			data: [],
			itemStyle: {
			// 修改柱子的颜色
			color: '#e2b507'
			}
			},
			{
			name: '入库',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
			focus: 'series'
			},
			data: [],
			itemStyle: {
			// 修改柱子的颜色
			color: '#2992c6'
			}
			},

			]
			};

			let url = ctx + "/system/stat/tubLogData";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			vm.tubLogs = res.tubLogs;

			res.tubLogs.forEach(function(value, index, array) {
			const tubName = value.tubName;
			const inboundNumber = value.inboundNumber;
			const outboundNumber = value.outboundNumber;
			const unit = value.unit;
			option.xAxis[0].data[index] = tubName;
			option.series[0].data[index] = outboundNumber;
			option.series[1].data[index] = inboundNumber;
			});
			chart.setOption(option, true);
			})
			$.ajaxSettings.async = false;
			}

			//首页第一行个数统计
			function indexCount() {
			let url = ctx + "/system/stat/indexDataCount";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			vm.indexDataCount = res.data;
			vm.indexDataCount.cameraCountNaN = 68 -vm.indexDataCount.cameraCount;
			})
			$.ajaxSettings.async = false;

			}
			//场地进度
			function stationProcess() {
			let url = ctx + "/system/stat/projectProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			vm.stationProcessData = res.projectData;
			})
			$.ajaxSettings.async = false;
			}
			var vm = new Vue({
			el: "#app",
			data() {
			return {
			stationProcessData: [],
			indexDataCount :"",
			tubLogs:[],
			};
			},
			methods: {
			tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 == 0) {
			return "";
			} else {
			return "warning-row";
			}
			},
			}
			});
			// 加载地图
			let map=null;
			var countries = [];
			@@ -100,6 +513,8 @@
			map.addOverLay(countriesOverlay1)
			countriesOverlay.bringToBack();
			});

			//map.setStyle("indigo");
			}

			function init(sel, transform) {
			@@ -143,7 +558,7 @@

			// 获取数据库真实数据
			function getReallyData() {
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
			let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/stat/project";
			$.get(url,function(res){
			var data = res.projects;
			showProjectPoint(data);
			@@ -151,12 +566,28 @@
			}
			//地图上展示项目点
			function showProjectPoint(data){
			var projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/6.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			var projectIcon ;
			for(let i =0;i<data.length;i++){
			if (data[i].status === '1'){
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/yellow.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}else if (data[i].status === '2'){
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/blue.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}else {
			projectIcon = new T.Icon({
			iconUrl: '/bjfw/images/icon/red.png',
			iconSize: new T.Point(30, 30),
			iconAnchor: new T.Point(6, 40),
			});
			}

			let lng = data[i].lng;
			let lat = data[i].lat;
			let marker = new T.Marker(new T.LngLat(lng, lat), { title: "场地位置",icon:projectIcon});
			@@ -199,23 +630,25 @@
			map.openInfoWindow(markerInfoWin, point); //开启信息窗口
			}


			//总进度仪表盘
			function totalProcess() {
			var Chart1 = echarts.init(document.getElementById('Chart1'));
			var pointerData = 0; // 仪表指针数据
			let url = ctx + "/system/totalProcess";
			let url = ctx + "/system/stat/totalProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			pointerData = res.pointerData;
			pointerData = (pointerData*100).toFixed(0);
			})
			});

			$.ajaxSettings.async = false;
			var option = {
			backgroundColor: "#fff",
			series: [
			{
			type: "gauge",
			radius: 120,
			radius: 80,
			z: 1,
			startAngle: 225,
			endAngle: -45,
			@@ -350,298 +783,6 @@
			Chart1.setOption(option);
			}

			var datas = [
			{ ranking: 1, station: '场地001', value: 85 },
			{ ranking: 2, station: '场地002', value: 22 },
			{ ranking: 3, station: '场地003', value: 33 },
			{ ranking: 4, station: '场地004', value: 40 },
			{ ranking: 5, station: '场地005', value: 33 },
			{ ranking: 6, station: '场地006', value: 14.97 },
			{ ranking: 7, station: '场地007', value: 13.03 },
			{ ranking: 8, station: '场地008', value: 18.48 },
			{ ranking: 9, station: '场地009', value: 16.74 },
			{ ranking: 10, station: '场地010', value: 14.97 },

			{ ranking: 11, station: '场地011', value: 13.03 },
			{ ranking: 12, station: '场地012', value: 18.48 },

			{ ranking: 13, station: '场地013', value: 16.74 },
			{ ranking: 14, station: '场地014', value: 14.97 },
			{ ranking: 15, station: '场地015', value: 13.03 },
			{ ranking: 16, station: '场地016', value: 18.48 },

			{ ranking: 17, station: '场地017', value: 16.74 },
			{ ranking: 18, station: '场地018', value: 14.97 },
			{ ranking: 19, station: '场地019', value: 13.03 },
			{ ranking: 20, station: '场地020', value: 18.48 },

			{ ranking: 21, station: '场地021', value: 16.74 },
			{ ranking: 22, station: '场地022', value: 14.97 },
			{ ranking: 23, station: '场地023', value: 13.03 },
			{ ranking: 24, station: '场地024', value: 18.48 },

			{ ranking: 25, station: '场地025', value: 16.74 },
			{ ranking: 26, station: '场地026', value: 14.97 },
			{ ranking: 27, station: '场地027', value: 13.03 },
			{ ranking: 28, station: '场地028', value: 18.48 },

			{ ranking: 29, station: '场地029', value: 13.03 },
			{ ranking: 30, station: '场地030', value: 18.48 },
			{ ranking: 31, station: '场地031', value: 13.03 },
			{ ranking: 32, station: '场地032', value: 18.48 },
			{ ranking: 33, station: '场地033', value: 13.03 },
			{ ranking: 34, station: '场地034', value: 18.48 },
			];


			var seriesName = ['已完成进度','总进度'];
			var attackSourcesColor1 = ['#FF557F','#FFAA00','#5470C6','#1E9FFF'];

			var attackSourcesColor = [
			new echarts.graphic.LinearGradient(0, 1, 1, 1, [
			{ offset: 0, color: 'rgba(255,85,127,1)' },
			{ offset: 1, color: 'rgba(255,85,127,1)' },
			]),
			new echarts.graphic.LinearGradient(0, 1, 1, 1, [
			{ offset: 0, color: 'rgba(255,170,0,1)' },
			{ offset: 1, color: 'rgba(255,170,0,1)' },
			]),
			new echarts.graphic.LinearGradient(0, 1, 1, 1, [
			{ offset: 0, color: 'rgba(84,112,198,1)' },
			{ offset: 1, color: 'rgba(84,112,198,1)' },
			]),
			new echarts.graphic.LinearGradient(0, 1, 1, 1, [
			{ offset: 0, color: 'rgba(30,159,255,.82)' },
			{ offset: 1, color: 'rgba(30,159,255,.82)' },
			]),
			];

			function stationProcess() {

			let url = ctx + "/system/projectProcess";
			$.ajaxSettings.async = false;
			$.get(url,{},function(res){
			console.log(res.projectData);
			datas = res.projectData;
			})
			$.ajaxSettings.async = false;


			var Chart2 = echarts.init(document.getElementById('Chart2'));
			var rankings = [];
			var stationData = [];
			var values = [];

			datas.forEach(function (it, index) {
			rankings.push(it.ranking);
			stationData.push(it.station);
			values.push(it.value);
			});

			option = {
			// backgroundColor: '#000',
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			type: 'shadow',
			},
			},

			grid: {
			left: '-8%',
			right: '2%',
			bottom: '3%',
			top:'2%',
			containLabel: true,
			},
			xAxis: {
			type: 'value',
			splitLine: {
			show: false,
			},
			axisLabel: {
			show: false,
			},
			axisTick: {
			show: false,
			},
			axisLine: {
			show: false,
			},
			},
			yAxis: [
			{
			type: 'category',
			inverse: true,
			axisLine: {
			show: false,
			},
			axisTick: {
			show: false,
			},
			data: stationData,
			axisLabel: {
			margin: 30,
			fontSize: 14,
			align: 'left',
			padding: [3, 0, 0, 0],
			color: '#000',
			rich: {
			nt1: {
			color: '#fff',
			backgroundColor: attackSourcesColor1[0],
			width: 20,
			height: 18,
			fontSize: 12,
			align: 'center',
			borderRadius: 50,
			lineHeight: '5',
			padding: [2, 0, 0, 0],
			// padding:[0,0,2,0],
			},
			nt2: {
			color: '#fff',
			backgroundColor: attackSourcesColor1[1],
			width: 20,
			height: 18,
			fontSize: 12,
			align: 'center',
			borderRadius: 50,
			padding: [2, 0, 0, 0],
			},
			nt3: {
			color: '#fff',
			backgroundColor: attackSourcesColor1[2],
			width: 20,
			height: 18,
			fontSize: 12,
			align: 'center',
			borderRadius: 50,
			padding: [2, 0, 0, 0],
			},
			nt: {
			color: '#fff',
			backgroundColor: attackSourcesColor1[3],
			width: 20,
			height: 18,
			fontSize: 12,
			align: 'center',
			borderRadius: 50,
			padding: [2, 0, 0, 0],
			},
			},
			formatter: function (value, index) {
			index = contains(stationData, value) + 1;
			if (index - 1 < 3) {
			return ['{nt' + index + '\|' + index + '}'].join('\n');
			} else {
			return ['{nt\|' + index + '}'].join('\n');
			}
			},
			},
			},

			{
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
			textStyle: {
			color: '#666',
			fontSize: '12',
			},
			},
			data: dataFormat(values),
			},

			{ // 条状标题
			type: 'category',
			inverse: true,
			offset: -10,
			position: 'left',
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
			interval: 0,
			color: ['#666'],
			align: 'left',
			verticalAlign: 'bottom',
			lineHeight: 42,
			fontSize: 14,
			},
			data: dataFormat(stationData),
			},
			],
			series: [
			{
			zlevel: 1,
			name: seriesName[0],
			type: 'bar',
			barWidth: 15,
			data: dataFormat(values),
			align: 'center',
			itemStyle: {
			normal: {
			barBorderRadius: 10,
			},
			},
			label: { //条状中的样式
			show: true,
			fontSize: 10,
			color: '#fff', //条装中字体颜色
			textBorderWidth: 2,
			padding: [2, 0, 0, 0],
			},
			},
			{
			name: seriesName[1],
			type: 'bar',
			barWidth: 15,
			barGap: '-100%',
			data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
			100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
			100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
			100, 100, 100, 100],
			itemStyle: {
			normal: {
			color: 'rgba(200,200,200,.3)',
			//width:"100%",
			fontSize: 12,
			barBorderRadius: 30,
			},
			},
			},
			],
			};
			Chart2.setOption(option);
			}

			function dataFormat(data) {
			var arr = [];
			data.forEach(function (item, i) {
			let itemStyle = {
			color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
			};
			arr.push({
			value: item,
			itemStyle: itemStyle,
			});
			});
			return arr;
			}

			function contains(arr, dst) {
			var i = arr.length;
			while ((i -= 1)) {
			if (arr[i] == dst) {
			return i;
			}
			}
			return false;
			}