dkyChenJiang.git

parent: 28e168f0 | 补丁 | 提交 | ignore whitespace

zmk

2024-05-22 5e322ff901135f1dbc5a33699e25dc0efd5a640e

提交代码

3个文件已删除

2个文件已修改

1个文件已添加

	javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java	18 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	javaweb-plus/javaweb-admin/src/main/resources/templates/main - 副本.html	172 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	javaweb-plus/javaweb-admin/src/main/resources/templates/main copy.html	1202 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	javaweb-plus/javaweb-admin/src/main/resources/templates/main.html	403 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html	153 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html	652 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 javaweb-plus/javaweb-admin/src/main/java/com/javaweb/web/controller/system/SysIndexController.java

@@ -185,10 +185,12 @@
     * @return
     */
    @ResponseBody
    @GetMapping("/system/indexVo")
    public AjaxResult projectProcess2() {
    @GetMapping("/system/indexDataCount")
    public AjaxResult indexDataCount() {
        IndexVo result = new IndexVo();

        result.setProjectStatus0(0);
        result.setProjectStatus0(0);
        result.setProjectStatus0(0);
        //=============================æ¥è¯¢åºå°æ°é===============================
        List<Project> projectList = projectService.selectProjectCountByStatus();
        if (!ObjectUtils.isEmpty(projectList)) {
@@ -204,16 +206,6 @@
                }
            }
        }
        if (ObjectUtils.isEmpty(result.getProjectStatus1())) {
            result.setProjectStatus0(0);
        }
        if (ObjectUtils.isEmpty(result.getProjectStatus2())) {
            result.setProjectStatus0(0);
        }
        if (ObjectUtils.isEmpty(result.getProjectStatus2())) {
            result.setProjectStatus0(0);
        }

        //=============================æ¥è¯¢è¿å°º===============================
        Hole hole = holeService.selectHoleTotalProcess();
        result.setFootageCplCount(hole.getFootageCpl());

 javaweb-plus/javaweb-admin/src/main/resources/templates/main - ¸±±¾.html

File was deleted

 javaweb-plus/javaweb-admin/src/main/resources/templates/main copy.html

New file
@@ -0,0 +1,1202 @@
<!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>

 javaweb-plus/javaweb-admin/src/main/resources/templates/main.html

@@ -22,7 +22,7 @@
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 16px;
        font-size: 14px;
        color: white;
        background: #314659;
        text-align: center;
@@ -61,7 +61,7 @@
        margin-left: 10px;
    }
    .rankrow{
        margin-top: 15px;
        margin-top: 12px;
    }

</style>
@@ -82,7 +82,7 @@
                    </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;">
@@ -105,7 +105,7 @@
                        <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">864ä¸ª
                        <span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">647ä¸ª
                        </span>
                    </div>
                    <div>
@@ -128,16 +128,16 @@
                        <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">114ä¸ª
                        <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;">
                            æ»è¿å°º  134,1000.00m
                            å·²å®è£  0
                            <li class="el-icon-caret-bottom" style="color: #f56c6c">
                        </span>
                        <span style="color:rgba(0,0,0,.65);font-size: 15px;">
                            å·²å®æ   12,322.23m
                            æªå®è£   68
                            <li class="el-icon-caret-bottom" style="color: #409eff">
                        </span>
                    </div>
@@ -170,9 +170,6 @@
        <el-row>
            <el-col :span="16">
                <el-card class="box-card">
<!--                    <div slot="header">-->
<!--                        -->
<!--                    </div>-->
                    <div style="height: 200px;">
                        <h3>ææç»è®¡</h3>
                    </div>
@@ -197,59 +194,24 @@
                        <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-row class="rankrow" v-for='entity in stationProcessData'>-->
<!--                            <el-col :span="2">-->
<!--                                <div class="active-red">{{entity.ranking}}</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">{{entity.station}}</div>-->
<!--                            </el-col >-->

                            <el-col :span="4">
                                <div style="font-size: 16px">åè°ä¸</div>
                            </el-col>
<!--                            <el-col :span="4">-->
<!--                                <div style="font-size: 16px">{{entity.status}}</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">1</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-col :span="12">-->
<!--                                <div><el-progress :stroke-width="12" :percentage="{{entity.status}}"></el-progress></div>-->
<!--                            </el-col>-->
<!--                        </el-row>-->

                    </div>

@@ -282,12 +244,39 @@
        loadMap();
        getReallyData();
        totalProcess();
        stationProcess();
        //stationProcess();
        indexCount();
    })

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

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

    }
    var vm = new Vue({
        el: "#app",
        data() {
            return {};
            return {
                stationProcessData: [],
                indexDataCount :"",
            };
        },
        methods: {
        }
@@ -562,298 +551,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;
    }




 javaweb-plus/javaweb-admin/src/main/resources/templates/main2.html

File was deleted

 javaweb-plus/javaweb-admin/src/main/resources/templates/main3.html

File was deleted

			@@ -185,10 +185,12 @@
			* @return
			*/
			@ResponseBody
			@GetMapping("/system/indexVo")
			public AjaxResult projectProcess2() {
			@GetMapping("/system/indexDataCount")
			public AjaxResult indexDataCount() {
			IndexVo result = new IndexVo();

			result.setProjectStatus0(0);
			result.setProjectStatus0(0);
			result.setProjectStatus0(0);
			//=============================æ¥è¯¢åºå°æ°é===============================
			List<Project> projectList = projectService.selectProjectCountByStatus();
			if (!ObjectUtils.isEmpty(projectList)) {
			@@ -204,16 +206,6 @@
			}
			}
			}
			if (ObjectUtils.isEmpty(result.getProjectStatus1())) {
			result.setProjectStatus0(0);
			}
			if (ObjectUtils.isEmpty(result.getProjectStatus2())) {
			result.setProjectStatus0(0);
			}
			if (ObjectUtils.isEmpty(result.getProjectStatus2())) {
			result.setProjectStatus0(0);
			}

			//=============================æ¥è¯¢è¿å°º===============================
			Hole hole = holeService.selectHoleTotalProcess();
			result.setFootageCplCount(hole.getFootageCpl());

			@@ -22,7 +22,7 @@
			width: 20px;
			height: 20px;
			border-radius: 50%;
			font-size: 16px;
			font-size: 14px;
			color: white;
			background: #314659;
			text-align: center;
			@@ -61,7 +61,7 @@
			margin-left: 10px;
			}
			.rankrow{
			margin-top: 15px;
			margin-top: 12px;
			}

			</style>
			@@ -82,7 +82,7 @@
			</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;">
			@@ -105,7 +105,7 @@
			<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">864ä¸ª
			<span style="color:#000;font-size: 26px;word-break: break-all;line-height: 38px">647ä¸ª
			</span>
			</div>
			<div>
			@@ -128,16 +128,16 @@
			<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">114ä¸ª
			<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;">
			æ»è¿å°º 134,1000.00m
			å·²å®è£ 0
			<li class="el-icon-caret-bottom" style="color: #f56c6c">
			</span>
			<span style="color:rgba(0,0,0,.65);font-size: 15px;">
			å·²å®æ 12,322.23m
			æªå®è£ 68
			<li class="el-icon-caret-bottom" style="color: #409eff">
			</span>
			</div>
			@@ -170,9 +170,6 @@
			<el-row>
			<el-col :span="16">
			<el-card class="box-card">
			<!-- <div slot="header">-->
			<!-- -->
			<!-- </div>-->
			<div style="height: 200px;">
			<h3>ææç»è®¡</h3>
			</div>
			@@ -197,59 +194,24 @@
			<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-row class="rankrow" v-for='entity in stationProcessData'>-->
			<!-- <el-col :span="2">-->
			<!-- <div class="active-red">{{entity.ranking}}</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">{{entity.station}}</div>-->
			<!-- </el-col >-->

			<el-col :span="4">
			<div style="font-size: 16px">åè°ä¸</div>
			</el-col>
			<!-- <el-col :span="4">-->
			<!-- <div style="font-size: 16px">{{entity.status}}</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">1</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-col :span="12">-->
			<!-- <div><el-progress :stroke-width="12" :percentage="{{entity.status}}"></el-progress></div>-->
			<!-- </el-col>-->
			<!-- </el-row>-->

			</div>

			@@ -282,12 +244,39 @@
			loadMap();
			getReallyData();
			totalProcess();
			stationProcess();
			//stationProcess();
			indexCount();
			})

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

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

			}
			var vm = new Vue({
			el: "#app",
			data() {
			return {};
			return {
			stationProcessData: [],
			indexDataCount :"",
			};
			},
			methods: {
			}
			@@ -562,298 +551,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;
			}