地图默认位置改为从接口获取

.vscode/launch.json

+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open zjjc.html",
+            "file": "d:\\00 GitCode\\screen\\pages\\zjjc.html"
+        }
+    ]
+}
\ No newline at end of file

pages/htjc.html

@@ -13,7 +13,7 @@
     <link rel="stylesheet" href="../static/css/dist/htjc.css">
     <script src="../static/js/jquery-3.0.0.min.js"></script>
     <script src="../static/plugin/layui/layui.js"></script>
-    <script src="../static/js/public.js"></script>
+    <script src="../static/js/public.js?v=1.0.1"></script>
     <script src="../static/js/swiper.min.js"></script>
     <style>
         .container .content .map .amap-info-content {
@@ -116,7 +116,7 @@
 </body>
 <script type="text/javascript"
     src="https://webapi.amap.com/maps?v=1.4.15&key=fc00c5b70f67a8414344682f217d4b6e&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script>
-<script src="../static/js/htjc.js"></script>
+<script src="../static/js/htjc.js?v=1.0.1"></script>
 <script>
     $(function () {
         $("#htjc-item a").addClass('active');

static/js/htjc.js

@@ -137,7 +137,8 @@ var map = {
             level: 'province'
         };
         var district = new AMap.DistrictSearch(options);
-        district.search('河南省', function (status, result) {
+        district.search($("#province").html(), function (status, result) {
+        //district.search('河南省', function (status, result) {
             var bounds = result.districtList[0]['boundaries'];
             var mask = [];
             for (var i = 0; i < bounds.length; i++) {
@@ -166,8 +167,8 @@ var map = {
                 }
                 //行政区查询
                 district.setLevel('district')
-                // district.search($("#area").html(), function(status, result) {
-                district.search('濮阳市', function (status, result) {
+                district.search($("#area").html(), function(status, result) {
+                //district.search('濮阳市', function (status, result) {
                     map.remove(polygons)//清除上次结果
                     polygons = [];
                     var bounds = result.districtList[0].boundaries;

static/js/public.js

@@ -48,7 +48,7 @@ function getHeader() {
     <div class="name">
         <p class="icon_font icon-ilogo-2"></p>
         <p class="icon_font icon-vertical_line"></p>
-        <p><span id='area' style='display:none;'></span>检测监管云平台</p>
+        <p><span id='area' style='display:none;'></span><span id='province' style='display:none;'></span>检测监管云平台</p>
     </div>
     <div class="right-item">
         <div class="tab" id="head-tab">
@@ -100,6 +100,7 @@ function getHeaderInfo() {
 
             $("#op_name").html(data.data[0].op_name);
             $("#area").html(data.data[0].area);
+            $("#province").html(data.data[0].province);
             $("#op_avatar").attr('src', data.data[0].op_avatar);
             var menu_key = data.data[0].menu_key.split(',');
             var max = Math.max(...menu_key);

xcjc/static/css/main.css

+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+    font: 12px/1.5tahoma, arial, \5b8b\4f53;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+}
+
+address,
+cite,
+dfn,
+em,
+var {
+    font-style: normal;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: couriernew, courier, monospace;
+}
+
+small {
+    font-size: 12px;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+sup {
+    vertical-align: text-top;
+}
+
+sub {
+    vertical-align: text-bottom;
+}
+
+legend {
+    color: #000;
+}
+
+fieldset,
+img {
+    border: 0;
+}
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.shadow {
+    box-shadow: rgba(77, 130, 255, 0.45) 0px 0px 2rem inset;
+}
+
+.card {
+    position: relative;
+    color: #80a5ee;
+    background-color: rgba(17, 53, 125, 0.8);
+}
+
+.right-float {
+    float: right;
+}
+
+.icon-border {
+    position: absolute;
+}
+
+.icon-border-lt {
+    top: -0.1rem;
+    left: -0.1rem;
+}
+
+.icon-border-lb {
+    left: -0.1rem;
+    bottom: -0.1rem;
+}
+
+.icon-border-rt {
+    right: -0.1rem;
+    top: -0.1rem;
+}
+
+.icon-border-rb {
+    right: -0.1rem;
+    bottom: -0.1rem
+}
+
+.icon-qiehuan-2 {
+    font-size: 1.2rem!important;
+    padding-left: 0.5rem;
+}
+
+.border {
+    border: 0.1rem solid rgba(0, 90, 255, 0.8);
+}
+
+.title {
+    color: #fff;
+    display: flex;
+    height: 4.5rem;
+    line-height: 4.5rem;
+}
+
+.title .title-name {
+    width: calc(100% - 13rem);
+    background-size: 100% 100%;
+    background-image: url(/static/images/img_line_long.png);
+    padding: 0 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.title .title-tab {
+    width: 13rem;
+    padding: 0 1rem;
+    display: flex;
+    justify-content: space-around;
+}
+
+.title .title-tab div {
+    width: 100%;
+    text-align: center;
+    cursor: pointer;
+}
+
+.title .title-tab .active-tab {
+    background-size: 100% 100%;
+    color: #4ddef6;
+    background-image: url('/static/images/img_line_short.png');
+}
+
+.title .font_family {
+    color: #81efff;
+    margin-right: 1rem;
+    font-size: 2rem;
+}
+
+.border-bottom-green {
+    border-bottom: 0.1rem solid rgba(0, 255, 162, 0.3);
+}
+
+.border-right {
+    border-right: 0.1rem solid rgba(255, 255, 255, 0.2);
+}
+
+.border-bottom {
+    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.2);
+}
+
+.flex-content-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.flex-content-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.text-orange {
+    color: #ff924a;
+}
+
+.text-purple {
+    color: #8983e4;
+}
+
+.text-gray {
+    color: #d4d4d4;
+}
+
+.text-cyan {
+    color: #81ffef;
+}
+
+.text-green-light {
+    color: #c4e349;
+}
+
+.text-green {
+    color: #00ffa2;
+}
+
+.text-red {
+    color: #ff7061;
+}
+
+.text-blue {
+    color: #00ccff;
+}
+
+.square {
+    width: 0.6rem;
+    height: 0.6rem;
+    display: inline-block;
+    margin-right: 1rem;
+}
+
+.bg-red {
+    background-color: #ff7171;
+}
+
+.bg-cyan {
+    background-color: #4ddef6;
+}
+
+.contain {
+    height: calc(100% - 8.5rem);
+    padding: 2rem;
+    overflow: hidden;
+    /* overflow-y: scroll;
+    overflow-x: scroll; */
+}
+
+.contain::-webkit-scrollbar {
+    display: none;
+}
+
+
+/* .chart-box {
+    overflow: hidden;
+    overflow-x: scroll;
+    overflow-y: scroll;
+} */
+
+.icon-you-21 {
+    font-size: 1rem!important;
+    padding-left: 0.5rem;
+}
+
+.flex-content-col-ar {
+    justify-content: space-around;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 0.5rem;
+    /* width: calc(100% - 10rem); */
+    margin-top: 0.5rem;
+}
+
+.dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    display: inline-block;
+    margin-right: 0.5rem;
+    border: 0.1rem solid #4ddef6;
+}
+
+.amap-logo {
+    display: none!important;
+}
+
+.hidden {
+    display: none!important;
+}
+
+.popup-outer {
+    background-color: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.popup-content {
+    width: 120rem;
+    height: 80rem;
+    /* background-color: red; */
+    background-color: #0d3b94;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.popup-content .title {
+    text-align: center!important;
+    display: block;
+    background-image: url(/static/images/img_line_long.png);
+    background-size: 100% 100%;
+}
+
+.filter-box {
+    display: flex;
+    background-color: #03266b;
+    border: 0.1rem solid #596fb6;
+    margin: 1rem;
+}
+
+.filter-box div {
+    margin: 1rem;
+}
+
+.filter-box span {
+    margin-right: 0.5rem;
+}
+
+.filter-box input,
+.filter-box button {
+    padding: 0.5rem;
+}
+
+.filter-box input {
+    background-color: #0d3b94;
+    border: 0.1rem solid #245a8d;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.popup-content .title .icon-shanchu-2 {
+    color: #fff;
+    font-size: 1.4rem;
+    margin-right: 2rem;
+}
+
+.table-content {
+    margin: 1rem;
+    text-align: center;
+    border: 0.1rem solid rgba(255, 255, 255, 0.3);
+    height: 65rem;
+    position: relative;
+}
+
+.table-content .footer {
+    position: absolute;
+    border-top: 0.1rem solid rgba(255, 255, 255, 0.3);
+    padding: 1rem 2rem;
+    bottom: 0;
+    width: calc(100% - 4rem);
+    display: flex;
+    justify-content: space-between;
+}
+
+.table-content .footer input {
+    padding: 0.7rem 1rem;
+    width: 2rem;
+    background-color: #03266b;
+    border: 0.1rem solid #245a8d;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.table-content .footer button {
+    margin: 0 0.5rem;
+    color: #fff;
+    padding: 0.5rem 1rem;
+}
+
+.table-content .footer .pagebtn {
+    background-color: #03266b;
+    border: 0.1rem solid rgba(255, 255, 255, 0.3);
+}
+
+.table-content .footer .pagebtn:active {
+    background-color: #042e83;
+}
+
+.table-content .footer .tapbtn {
+    border: none;
+    color: #fff;
+    background-color: #00c2c9;
+}
+
+.tapbtn:active {
+    background-color: #05dee6;
+}
+
+.popup-table {
+    width: 100%;
+}
+
+.popup-table td,
+.popup-table th {
+    padding: 1rem;
+    border-right: 0.1rem solid rgba(255, 255, 255, 0.3);
+    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.3);
+}
+
+.popup-table th {
+    background-color: #03266b;
+}
+
+.popup-table tr:nth-child(odd) td {
+    background-color: #0a327f;
+}
+
+.popup-table tr td:last-child,
+.popup-table tr th:last-child {
+    border-right: none;
+}
+
+.filter-box .tapbtn {
+    border: none;
+    color: #fff;
+    width: 8rem;
+    background-color: #00c2c9;
+}
+
+input::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.bigMap {
+    width: 100vw!important;
+    height: 100vh!important;
+    position: absolute!important;
+    left: 0!important;
+    top: 0!important;
+    z-index: 9999999999!important;
+}
+
+select {
+    width: 12rem;
+    background-color: #0d3b94;
+    border: 0.1rem solid #245a8d;
+    height: 3rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+
+/* loading */
+
+.img_loading {
+    width: 60px;
+    height: 60px;
+    position: absolute;
+    left: calc(50% - 30px);
+    top: calc(50% - 30px);
+}
+
+.nodata {
+    position: absolute;
+    width: 90px;
+    height: 90px;
+    top: calc(50% - 45px);
+    left: calc(50% - 45px);
+}
+
+.pointer {
+    cursor: pointer;
+}
\ No newline at end of file

xcjc/static/js/effect_back.js

+$().ready(function() {
+    $('.card').append('<img src="/static/images/icon_border_lt.png" class="icon-border icon-border-lt"><img src="/static/images/icon_border_lb.png" class="icon-border icon-border-lb"><img src="/static/images/icon_border_rt.png" class="icon-border icon-border-rt"><img src="/static/images/icon_border_rb.png" class="icon-border icon-border-rb">');
+    // 桩基检测本月本年切换
+    $('#zjjc div').click(function() {
+            $('#zjjc div').removeClass('active-tab');
+            $(this).addClass('active-tab');
+            var datasource = [{
+                "square_date": "2020-07-23",
+                "square_type": 13,
+                "square_describe": "今日取样（组）",
+                "square_datetime": "2020-07-23",
+                "num1": "5",
+                "num2": "12",
+                "num3": "31",
+                "num4": "26",
+                "num5": "19",
+                "num6": "20"
+            }]
+            if ($(this).text() == '本月') {
+                console.log('点击本月')
+                $("span[square_type='13'][num='num1']").text(datasource[0].num1);
+                $("span[square_type='13'][num='num2']").text(datasource[0].num2);
+                $("span[square_type='14'][num='num1']").text(datasource[0].num1);
+                $("span[square_type='14'][num='num2']").text(datasource[0].num2);
+            } else {
+                console.log('点击本年')
+                    // 本年
+                $("span[square_type='13'][num='num1']").html(datasource[0].num4);
+                $("span[square_type='13'][num='num2']").html(datasource[0].num5);
+                $("span[square_type='14'][num='num1']").html(datasource[0].num4);
+                $("span[square_type='14'][num='num2']").html(datasource[0].num5);
+            }
+        })
+        // 现场结构实体检验切换
+    $('#stjy1').click(function() {
+        if ($('#stjy1 .status').text() == '本月') {
+            $('#stjy1 .status').text('本年');
+        } else {
+            $('#stjy1 .status').text('本月');
+        }
+    })
+    $('#stjy2').click(function() {
+        if ($('#stjy2 .status').text() == '本月') {
+            $('#stjy2 .status').text('本年');
+        } else {
+            $('#stjy2 .status').text('本月');
+        }
+    })
+    $('#xwjgqk').click(function() {
+            if ($('#xwjgqk .status').text() == '本月') {
+                $('#xwjgqk .status').text('本年');
+            } else {
+                $('#xwjgqk .status').text('本月');
+            }
+        })
+        // 两材两块
+    $('#lclk div').click(function() {
+            $('#lclk div').removeClass('active-tab');
+            $(this).addClass('active-tab');
+            var datasource = [{
+                "square_date": "2020-07-23",
+                "square_type": 13,
+                "square_describe": "今日取样（组）",
+                "square_datetime": "2020-07-23",
+                "num1": "5",
+                "num2": "12",
+                "num3": "31",
+                "num4": "26",
+                "num5": "19",
+                "num6": "20"
+            }]
+            if ($(this).text() == '本月') {
+                console.log('点击本月')
+                $("span[square_type='23'][num='num1']").text(datasource[0].num1);
+                $("span[square_type='23'][num='num2']").text(datasource[0].num2);
+                $("span[square_type='24'][num='num1']").text(datasource[0].num1);
+                $("span[square_type='24'][num='num2']").text(datasource[0].num2);
+                $("span[square_type='25'][num='num1']").text(datasource[0].num1);
+                $("span[square_type='25'][num='num2']").text(datasource[0].num2);
+            } else {
+                console.log('点击本年')
+                    // 本年
+                $("span[square_type='23'][num='num1']").html(datasource[0].num4);
+                $("span[square_type='23'][num='num2']").html(datasource[0].num5);
+                $("span[square_type='24'][num='num1']").html(datasource[0].num4);
+                $("span[square_type='24'][num='num2']").html(datasource[0].num5);
+                $("span[square_type='25'][num='num1']").html(datasource[0].num4);
+                $("span[square_type='25'][num='num2']").html(datasource[0].num5);
+            }
+        })
+        // 监督检测情况
+    $('#jdjc').click(function() {
+        if ($('#jdjc .status').text() == '本月') {
+            $('#jdjc .status').text('本年');
+        } else {
+            $('#jdjc .status').text('本月');
+        }
+    })
+})
+
+function mapHandle(type) {
+    getMap(type);
+}
+
+function closePopup() {
+    $('.popup').addClass('hidden');
+}
+
+function showPop(id) {
+    $('.popup').removeClass('hidden');
+    $('.other-box').removeClass('hidden');
+    $('.map-box').addClass('hidden');
+    $('.popup-title').text('今日检测样品');
+
+}
+
+function videoConect() {
+    console.log('click');
+}
+// 放大地图
+function biggerMap() {
+    if ($('.sizingmap').hasClass('icon-fangda-icon-2-2')) {
+        $('.map-outer').addClass('bigMap');
+    } else {
+        $('.map-outer').removeClass('bigMap');
+    }
+    $('.sizingmap').toggleClass('icon-suoxiao-3-2').toggleClass('icon-fangda-icon-2-2');
+}
+// 地图legend点击效果
+function handle(index, name) {
+    $('.popup').removeClass('hidden');
+    $('.other-box').addClass('hidden');
+    $('.map-box').removeClass('hidden');
+    $('.popup-title').text(name);
+}
\ No newline at end of file

xcjc_jc/pages/login.html

+<!DOCTYPE html>
+<html style="font-size: 100px !important;">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>建设工程桩基视频服务系统</title>
+    <link rel="stylesheet" href="../static/css/dist/login.css">
+    <script type="text/javascript" src="/Plugins/jQuery/jquery-1.11.1.min.js"></script>
+    <script type="text/javascript" src="/Scripts/login/framework.js"></script>
+    <script type="text/javascript" src="/Scripts/Library/sha1.js"></script>
+    <script type="text/javascript" src="/Plugins/jQuery/jquery.cookie.js"></script>
+    <SCRIPT src="/Scripts/login_new.js"></SCRIPT>
+</head>
+
+<body>
+    <div class="building">
+        <div class="people"><img src="../static/images/ch.png" /></div>
+        <div class="QR-item">
+            <div class="QRcode">
+                <p style="font-size: .14rem; color: #ffffff; margin-bottom: 8px; margin-top: 8px; text-align: center;">扫码下载现场检测APP</p>
+                <img src="../static/images/qrcode.png" alt="" style="background-size: 100% 100%; width: 1.51rem; height: 1.51rem;">
+            </div>
+        </div>
+        <div class="text">
+            <div class="topOne">建设工程桩基视频服务系统</div>
+            <div class="topTwo"></div>
+        </div>
+        <!-- 登录 -->
+        <form class="card">
+            <p class="title">用户登录</p>
+            <div class="flex-item">
+                <div class="item">
+                    <img src="../static/images/icon_zh.png" />
+                    <input type="text" id="txtaccount" name="username" required placeholder="账号/用户名" class="inputItem"></input>
+                </div>
+            </div>
+            <div class="flex-item">
+                <div class="item">
+                    <img src="../static/images/icon_mm.png" />
+                    <input type="password" id="txtpassword" name="password" required placeholder="密码" class="inputItem">
+                </div>
+            </div>
+            <div class="all">
+                <div class="remPass"><input name="Fruit" type="checkbox" value="" />记住密码</div>
+            </div>
+            <div class="form-message"></div>
+            <div class="go"><button id="btlogin" type="button">登录</button></div>
+        </form>
+    </div>
+</body>
+<script>
+    // 自适应
+    var designW = 1920;
+    var font_rate = 100;
+    document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW *
+        font_rate + "px";
+    document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW *
+        font_rate + "px";
+    //监测窗口大小变化
+    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
+        document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth /
+            designW * font_rate + "px";
+        document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth /
+            designW * font_rate + "px";
+    }, false);
+
+
+    var agent = navigator.userAgent.toLowerCase();
+    var browser = "";
+    if (agent.indexOf("android") > -1) {
+        browser = "android";
+        document.getElementsByTagName("body")[0].classList.add('isphone');
+    } else if (agent.indexOf("iphone") > -1) {
+        browser = "iphone";
+        document.getElementsByTagName("body")[0].classList.add('isphone');
+    } else if (agent.indexOf("ipad") > -1) {
+        browser = "ipad";
+        document.getElementsByTagName("body")[0].classList.add('isPad');
+    } else {
+        browser = "web";
+        document.getElementsByTagName("body")[0].classList.remove('isphone');
+        document.getElementsByTagName("body")[0].classList.remove('isPad');
+    }
+</script>
+</html>
\ No newline at end of file

xcjc_jc/pages/xcjc.html

+<!DOCTYPE html>
+<html style="font-size: 100px !important;">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>桩基视频全过程追溯</title>
+    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css">
+    <link rel="stylesheet" href="../static/css/dist/public.css">
+    <link rel="stylesheet" href="../static/css/dist/xcjc.css">
+    <script src="../static/js/jquery-3.0.0.min.js"></script>
+    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
+    <script src="../static/plugin/layui/layui.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="head" id="header"></div>
+        <div class="content">
+            <div class="map" id="map"></div>
+            <div class="left-content">
+                <div class="cards card1">
+                    <div class="card-head">
+                        <div class="title">现场人员</div>
+                        <div class="desc">总数：<span id="xcry-count">0</span>人</div>
+                    </div>
+                    <div class="card-main">
+                        <div class="flex-item">
+                            <div class="input1"><div class="input" id="xcry-date"></div></div>
+                            <div class="input2"><input class="input" id="xcry-keywords" type="text" autocomplete="off" placeholder="在场人员/项目名称">
+                                <div onclick="xcry.get_data()"><img src="../static/images/icon/search.png" /></div>
+                            </div>
+                        </div>
+                        <div class="info-item" id="xcry-data"></div>
+                    </div>
+                </div>
+            </div>
+            <input type="text" id="lselect" class="layui-input lselect" placeholder="检测项目选择" readonly />
+            <div class="legend" id="legend">
+                <div class="item"><img src="../static/images/icon/icon_gcdw.png" />工程定位</div>
+                <div class="item"><img src="../static/images/icon/icon_zjgc.png" />在检工程</div>
+            </div>
+            <div class="bottom-content">
+                <div class="cards card1">
+                    <div class="card-head">
+                        <div class="title">检测计划</div>
+                        <div class="flex-item">
+                            <div class="input1"><div class="input" id="jcjh-date"></div></div>
+                            <div class="input2"><input class="input" id="jcjh-item" type="text" placeholder="检测项目">
+                                <div onclick="jcjh.get_data()"><img src="../static/images/icon/search.png" /></div>
+                            </div>
+                        </div>
+                        <div class="desc">总数：<span id="jcjh-count">0</span>人</div>
+                    </div>
+                    <div class="card-main">
+                        <div class="list-head flex-item">
+                            <div class="item1">工程名称</div>
+                            <div class="item2">检测项目</div>
+                            <div class="item3">参与人员</div>
+                            <div class="item4">开始时间</div>
+                            <div class="item5">结束时间</div>
+                            <div class="item6">状态</div>
+                        </div>
+                        <div id="jcjh-data"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="right-content">
+                <div class="cards card1">
+                    <div class="card-head">
+                        <div class="title">检测项目分析</div>
+                        <div class="tab" id="jcxm-tab">
+                            <div onclick="jcxm.check(0)" class="item item0">近一年</div>
+                            <div onclick="jcxm.check(1)" class="item item1">近一月</div>
+                        </div>
+                    </div>
+                    <div class="card-main">
+                        <div class="list-head flex-item">
+                            <div class="item1">检测项目</div>
+                            <div class="item2">总量</div>
+                            <div class="item3">不合格量</div>
+                            <div class="item4">不合格率</div>
+                        </div>
+                        <div id="jcxm-data"></div>
+                    </div>
+                </div>
+                <div class="cards card2">
+                    <div class="card-head">
+                        <div class="title">本月检测情况</div>
+                        <div class="tab">
+                            <input id="byjc-date" class="item" readonly>
+                        </div>
+                    </div>
+                    <div class="card-main">
+                        <div class="flex-item" id="byjc-data"></div>
+                        <div class="chart" id="chart"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="left-bg bg-item"></div>
+        <div class="right-bg bg-item"></div>
+        <div class="bottom-bg bg-item"></div>
+    </div>
+    <div id="popup-info" class="popup-info"></div>
+</body>
+<script src="../static/js/public.js"></script>
+<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fc00c5b70f67a8414344682f217d4b6e&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script>
+<script src="../static/js/xcjc.js"></script>
+</html>
\ No newline at end of file

xcjc_jc/pages/zjjc.html

+<!DOCTYPE html>
+<html style="font-size: 100px !important;">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>桩基视频全过程追溯</title>
+    <link rel="stylesheet" href="../static/css/dist/zjjc.css">
+    <link rel="stylesheet" href="../static/css/dist/public.css">
+    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css">
+    <link rel="stylesheet" href="../static/css/dist/public.css">
+    <script src="../static/js/jquery-3.0.0.min.js"></script>
+    <script src="../static/plugin/layui/layui.js"></script>
+</head>
+
+<body>
+    <div class="container">
+        <div class="head" id="header"></div>
+        <div class="content">
+            <div class="left-content">
+                <div class="cards card1">
+                    <div class="card-head">
+                        <div class="title">桩基数据工程统计</div>
+                            <div class="tab" id="zjsj-tab">
+                                <div onclick="leftList.get_data(0)" class="item item0">近一年</div>
+                                <div onclick="leftList.get_data(1)" class="item item1">近一月</div>
+                            </div>
+                    </div>
+                    <div class="card-main" id="xxx-data">
+                        <div class="numberAll"><p>在检工程</p><p>0</p></div>
+                        <div class="numberAll red"><p>异常工程</p><p>0</p></div>
+                        <div class="numberAll green"><p>在检桩基</p><p>0</p></div>
+                        <div class="numberAll org"><p>异常桩基</p><p>0</p></div>
+                    </div>
+                </div>
+                <div class="cards card2">
+                    <div class="card-head">
+                        <div class="title">在检工程桩基信息</div>
+                        <div class="desc">总数：<span id="xcry-count">0</span>人</div>
+                    </div>
+                    <div class="card-main">
+                        <div class="flex-item">
+                            <div class="input1"><input id="jcjh-date" readonly placeholder="选择检测日期"></div>
+                            <div class="input2"><input id="jcjh-item" type="text" placeholder="桩号/项目名称">
+                                <div onclick="zjjc.get_data();"><img src="../static/images/icon/search.png" /></div>
+                            </div>
+                        </div>
+                        <div class="card-list" id="message-List"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="map" id="map"></div>
+            <div class="right-content">
+                <div class="cards card1">
+                    <div class="card-head">
+                        <div class="title">监控与抓拍</div>
+                    </div>
+                    <div class="card-main" id="video-list">
+                        <div class="nodata">暂无数据</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="left-bg bg-item"></div>
+        <div class="right-bg bg-item"></div>
+    </div>
+    <div id="popup-info" class="popup-info"></div>
+</body>
+<script src="../static/js/public.js"></script>
+<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=fc00c5b70f67a8414344682f217d4b6e&plugin=AMap.MarkerClusterer,AMap.DistrictSearch"></script>
+<script src="../static/js/zjjc.js"></script>
+</html>
\ No newline at end of file

xcjc_jc/static/css/dist/theme.css

+@font-face {
+  font-family: 'PuHuiTi';
+  src: url("../font/AlibabaPuHuiTi-2-115-Black.ttf") format("truetype");
+  src: url("../font/AlibabaPuHuiTi-2-55-Regular.ttf") format("truetype");
+  src: url("../font/AlibabaPuHuiTi-2-65-Medium.ttf") format("truetype");
+  src: url("../font/AlibabaPuHuiTi-2-85-Bold.ttf") format("truetype");
+}

xcjc_jc/static/css/scss/theme.scss

+// 文字
+$text-color-main: #DEE7F0;
+
+//边框
+$border: .01rem solid;
+
+// 颜色
+$white: #FFF;
+$blue: #06BAFE;
+
+@mixin v-center(){
+     display: flex;
+     align-items: center;
+    }
+// 图片
+@mixin bg($img, $size:100% 100%, $repeat: no-repeat) {
+    background-image: url($img);
+    background-size: $size;
+    background-repeat: $repeat;
+}
+
+// 滚动条
+@mixin scrollbar($width: 12, $height: 12, $thumb-background: rgba(0, 0, 0, 0.4), $track-background: rgba(42, 93, 197, .3)) {
+    &::-webkit-scrollbar {
+        width: $width+px;
+        height: $height+px;
+    }
+    &::-webkit-scrollbar-thumb{
+        background: $thumb-background;
+        border-radius: 8px;
+    }
+    &::-webkit-scrollbar-track {
+        background: $track-background;
+        border-radius: 8px;
+    }
+}
+
+@mixin V-center(){
+    display: flex;
+    align-items: center;
+}
+
+@font-face {
+    font-family: 'PuHuiTi';
+    src: url('../font/AlibabaPuHuiTi-2-115-Black.ttf') format('truetype');
+    src: url('../font/AlibabaPuHuiTi-2-55-Regular.ttf') format('truetype');
+    src: url('../font/AlibabaPuHuiTi-2-65-Medium.ttf') format('truetype');
+    src: url('../font/AlibabaPuHuiTi-2-85-Bold.ttf') format('truetype');
+}
\ No newline at end of file