<!DOCTYPE html>
|
<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 rel="stylesheet" th:href="@{/css/custom/main.css}" />
|
<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;
|
}
|
.el-card__header{
|
height: 40px;
|
padding: 8px 20px;
|
}
|
.active-red{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
font-size: 14px;
|
color: white;
|
background: #314659;
|
text-align: center;
|
line-height: 20px;
|
float: left;
|
}
|
|
.active-blue{
|
width: 20px;
|
height: 20px;
|
border-radius: 50%;
|
font-size: 16px;
|
color: white;
|
background: dodgerblue;
|
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;
|
}
|
|
</style>
|
</head>
|
|
<body class="gray-bg">
|
<div class="content" id="app">
|
<el-row style="height: 130px;">
|
<el-col :span="6">
|
<el-card class="box-card">
|
<div>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">场地数量</span>
|
<li class="el-icon-s-promotion" style="font-size: 18px;float: right;color: grey">
|
</div>
|
<div>
|
<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">34个
|
</span>
|
</div>
|
<div>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
协调中 0
|
<li class="el-icon-caret-bottom" style="color: #f56c6c">
|
</span>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
待开工 34
|
<li class="el-icon-caret-bottom" style="color: #e6a23c">
|
</span>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
进行中 0
|
<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>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">钻孔进尺</span>
|
<li class="el-icon-coin" style="font-size: 18px;float: right;color: grey">
|
</div>
|
<div>
|
<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">647个
|
</span>
|
</div>
|
<div>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
总进尺 134,1000.00m
|
<li class="el-icon-caret-bottom" style="color: #f56c6c">
|
</span>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
已完成 12,322.23m
|
<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>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">实时监控</span>
|
<li class="el-icon-video-camera" style="font-size: 18px;float: right;color: grey">
|
</div>
|
<div>
|
<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">68个
|
</span>
|
</div>
|
<div>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
已安装 0
|
<li class="el-icon-caret-bottom" style="color: #f56c6c">
|
</span>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
未安装 68
|
<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>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">资料文件</span>
|
<li class="el-icon-s-order" style="font-size: 18px;float: right;color: grey">
|
</div>
|
<div>
|
<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">3813
|
</span>
|
</div>
|
<div>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
总进尺 134,1000.00m
|
<li class="el-icon-caret-bottom" style="color: #f56c6c">
|
</span>
|
<span style="color:rgba(0,0,0,.65);font-size: 15px;">
|
已完成 12,322.23m
|
<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;">
|
<h3>材料统计</h3>
|
</div>
|
</el-card>
|
|
<el-card class="box-card">
|
<div id="map_div" style="width: 100%;height: 550px;"></div>
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
<el-card class="box-card">
|
<div style="width: 100%;height: 20px;">
|
<h3>项目总体进度(%)</h3>
|
</div>
|
<div id="Chart1" style="width: 80%;height: 180px;margin-left: 10%;"></div>
|
</el-card>
|
|
<el-card class="box-card">
|
<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>-->
|
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地002</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">20</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地003</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
<el-row class="rankrow">
|
<el-col :span="2">
|
<div class="active-red">1</div>
|
</el-col>
|
|
<el-col :span="4">
|
<div style="font-size: 16px">场地001</div>
|
</el-col >
|
|
<el-col :span="4">
|
<div style="font-size: 16px">协调中</div>
|
</el-col>
|
|
<el-col :span="12">
|
<div><el-progress :stroke-width="12" :percentage="50"></el-progress></div>
|
</el-col>
|
</el-row>
|
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<script th:src="@{/js/jquery.min.js}"></script>
|
<script th:src="@{/js/bootstrap.min.js}"></script>
|
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
|
<script th:src="@{/ajax/libs/report/echarts/echarts-all.js}"></script>
|
<script th:src="@{/js/tdt.js}" type="text/javascript"></script>
|
<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">
|
|
$(function() {
|
loadMap();
|
getReallyData();
|
totalProcess();
|
stationProcess();
|
})
|
var vm = new Vue({
|
el: "#app",
|
data() {
|
return {};
|
},
|
methods: {
|
}
|
});
|
// 加载地图
|
let map=null;
|
var countries = [];
|
var countriesOverlay = new T.D3Overlay(init,redraw);
|
var countriesOverlay1 = new T.D3Overlay(init1,redraw1);
|
function loadMap() {
|
map = new T.Map('map_div');
|
map.centerAndZoom(new T.LngLat(116.38, 40.2), 9);
|
|
var control = new T.Control.Zoom();
|
control.setPosition(T_ANCHOR_TOP_RIGHT);
|
map.addControl(control);// 添加缩放平移控件
|
var scale = new T.Control.Scale();// 创建比例尺控件对象
|
d3.json("/bjfw/js/custom/beijing.json", function (data) {
|
countries = data.features;
|
map.addOverLay(countriesOverlay)
|
countriesOverlay.bringToBack();
|
map.addOverLay(countriesOverlay1)
|
countriesOverlay.bringToBack();
|
});
|
}
|
|
function init(sel, transform) {
|
var upd = sel.selectAll('path.geojson').data(countries);
|
upd.enter()
|
.append('path')
|
.attr("class", "geojson")
|
.attr('stroke', 'grey')
|
.attr('fill', function (d, i) {
|
//return d3.hsl(Math.random() * 360, 0.9, 0.5)
|
return "transparent"
|
})
|
.attr('fill-opacity', '0')
|
}
|
function redraw(sel, transform) {
|
sel.selectAll('path.geojson').each(
|
function (d, i) {
|
d3.select(this).attr('d', transform.pathFromGeojson)
|
}
|
)
|
}
|
function init1(sel, transform) {
|
var upd = sel.selectAll('path.geojson1').data(countries);
|
upd.enter()
|
.append('path')
|
.attr("class", "geojson1")
|
.attr('stroke', 'grey')
|
.attr('fill', function (d, i) {
|
return d3.hsl(Math.random() * 360, 0.9, 0.5)
|
})
|
.attr('fill-opacity', '0.1')
|
}
|
|
function redraw1(sel, transform) {
|
sel.selectAll('path.geojson1').each(
|
function (d, i) {
|
d3.select(this).attr('d', transform.pathFromGeojson)
|
}
|
)
|
}
|
|
// 获取数据库真实数据
|
function getReallyData() {
|
let url = window.location.protocol + "//" + window.location.host + "/bjfw/system/project";
|
$.get(url,function(res){
|
var data = res.projects;
|
showProjectPoint(data);
|
})
|
}
|
//地图上展示项目点
|
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),
|
});
|
for(let i =0;i<data.length;i++){
|
let lng = data[i].lng;
|
let lat = data[i].lat;
|
let marker = new T.Marker(new T.LngLat(lng, lat), { title: "场地位置",icon:projectIcon});
|
let proj = infoWindowProject(data[i]);
|
addClickHandler(proj, marker);
|
map.addOverLay(marker);
|
}
|
|
}
|
|
function infoWindowProject(e){
|
|
let ids = e.ids + "";
|
var sContent =
|
"<div style='margin:0px;'>" +
|
"<div>" +
|
"<div style='margin:1px 0px 1px 2px;width: 200px;'>" +
|
"<font style='font-weight: bolder;'>场地编号 :</font>" + e.code + "<br>" +
|
"<font style='font-weight: bolder;'>场地名字 :</font>" + e.fullName + "<br>" +
|
"<font style='font-weight: bolder;'>负责人 :</font>" + e.leader + "<br>" +
|
"<a class='btn' onclick=viewdata(" +"'" + ids+ "'" + ")>场地数据</a>" +
|
"</div>" +
|
"</div>" +
|
"</div>";
|
return sContent;
|
}
|
function viewdata (id) {
|
$.modal.openTab("场地导航",ctx+ "/geo/project/navigate?ids="+id);
|
}
|
|
function addClickHandler(content, marker) {
|
marker.addEventListener("click", function (e) {
|
openInfo(content, e)
|
});
|
}
|
|
function openInfo(content, e) {
|
var point = e.lnglat;
|
var markerInfoWin = new T.InfoWindow(content, { offset: new T.Point(0, -30) }); // 创建信息窗口对象
|
map.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
}
|
|
//总进度仪表盘
|
function totalProcess() {
|
var Chart1 = echarts.init(document.getElementById('Chart1'));
|
var pointerData = 0; // 仪表指针数据
|
let url = ctx + "/system/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: 80,
|
z: 1,
|
startAngle: 225,
|
endAngle: -45,
|
splitNumber: 50,
|
title: {
|
color: "red",
|
},
|
splitLine: {
|
show: true,
|
length: 15,
|
distance: -10,
|
lineStyle: {
|
color: "#fff",
|
width: 1,
|
},
|
},
|
detail: {
|
show: true,
|
offsetCenter: [0, 60],
|
fontSize: 22,
|
formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
|
rich: {
|
a: {
|
fontSize: 20,
|
color: "rgba(84, 108, 198, 0.65)",
|
},
|
b: {
|
fontSize: 24,
|
color: "rgba(84, 108, 198, 0.65)",
|
},
|
},
|
},
|
// 仪表盘的线，颜色值为一个数组
|
axisLine: {
|
show: true,
|
// 两端是否设置为圆角；在5.0之后的版本有效
|
roundCap: false,
|
lineStyle: {
|
width: 15,
|
shadowColor: "#0093ee", //默认透明
|
shadowOffsetX: 0,
|
shadowOffsetY: 0,
|
shadowBlur: 20,
|
opacity: 1,
|
color: [
|
[
|
pointerData / 100,
|
{
|
x: 0,
|
y: 0,
|
x1: 1,
|
y1: 0,
|
colorStops: [
|
{
|
offset: 0,
|
color: "rgba(0, 255, 255, 0.6)",
|
},
|
{
|
offset: 1,
|
color: "rgba(0, 0, 255, .6)",
|
},
|
],
|
},
|
],
|
[1, "rgba(0,0,0,0.15)"],
|
],
|
},
|
},
|
// 仪表盘刻度标签
|
axisLabel: {
|
show: true,
|
color: "rgba(84, 108, 198, 0.65)",
|
fontSize: 14,
|
distance: 20,
|
formatter: (val) => {
|
const num = Math.floor(val);
|
return num % 20 === 0 ? num : "";
|
},
|
},
|
// 刻度
|
axisTick: {
|
show: false,
|
},
|
// 指针，此设置仅对5.0以上的版本生效
|
anchor: {
|
show: true,
|
icon: "circle",
|
showAbove: true,
|
size: 20,
|
itemStyle: {
|
borderWidth: 6,
|
borderColor: "rgba(84, 108, 198, 0.85)",
|
},
|
},
|
data: [pointerData],
|
},
|
{
|
// 背景渐变色
|
type: "pie",
|
radius: "80%",
|
// 不响应及触发鼠标事件
|
silent: true,
|
// 关闭背景动画
|
animation: false,
|
z: 0,
|
itemStyle: {
|
color: {
|
type: "radial", // 径向渐变
|
x: 0.5,
|
y: 0.5,
|
r: 0.25,
|
colorStops: [
|
{
|
offset: 0,
|
color: "rgba(84, 103, 198, 0.6)",
|
},
|
{
|
offset: 0.1,
|
color: "rgba(84, 103, 198, 0.35)",
|
},
|
{
|
offset: 1,
|
color: "rgba(84, 103, 198, 0)",
|
},
|
],
|
},
|
},
|
data: [pointerData],
|
},
|
],
|
};
|
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;
|
}
|
|
|
|
|
</script>
|
|
</body>
|
</html>
|
