From 41750848c6cc6506fa107036d04b28c0f28cfba8 Mon Sep 17 00:00:00 2001
From: zmk <496160012@qq.com>
Date: 星期三, 03 七月 2024 16:19:07 +0800
Subject: [PATCH] 提交
---
javaweb-plus/javaweb-admin/src/main/resources/templates/main.html | 812 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 765 insertions(+), 47 deletions(-)
diff --git a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
index b91925c..3a25567 100644
--- a/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
+++ b/javaweb-plus/javaweb-admin/src/main/resources/templates/main.html
@@ -2,57 +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 class="col-md-6">
- <span style="font-size:16px;font-weight: bold;line-height: 40px;">鐩戠鍗曚綅椤圭洰缁熻</span>
- </div>
- <div class="col-md-6" style="z-index:1;">
- <div class="btn-group statistic-btn" style="float: right">
- <button class="btn btn-white" type="button">鎬昏</button>
- <button class="btn btn-white" type="button">鏈勾搴�</button>
- <button class="btn btn-white" type="button">鏈湀搴�</button>
- </div>
- </div>
- </div>
- <div id="rank_chart" style="width: 100%;height: 600px;margin-top: 10px"></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>
@@ -61,15 +345,449 @@
<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">
+ 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 = [];
+ 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();
+ });
+
+ //map.setStyle("indigo");
+ }
+
+ 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/stat/project";
+ $.get(url,function(res){
+ var data = res.projects;
+ showProjectPoint(data);
+ })
+ }
+ //鍦板浘涓婂睍绀洪」鐩偣
+ function showProjectPoint(data){
+ 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});
+ 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/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: 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);
+ }
+
+
+
+
+
+</script>
+
</body>
</html>
--
Gitblit v1.9.1