yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.0" />
    <style type="text/css">
        body {
            background: #fff;
        }

        .content {
            overflow-x: scroll;
        }

        /* 返回 */

        .headerPlace {
            font-size: 22px;
            color: #418fbb;
            cursor: pointer;
        }

        .headerPlace img {
            vertical-align: middle;
            margin-right: 10px;
            margin-top: -4px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .row {
            margin: 0;
        }

        .equipInfo {
            margin: 20px 0;
        }

        .equipInfo .row {
            margin: 0 13px;
            box-shadow: 0 0 40px #eee;
            padding: 30px;
        }

        .equipInfo .row>div {
            height: 52px;
            text-align: center;
            border-left: 1px solid #eee;
        }

        .equipInfo .row .txt {
            position: absolute;
            left: 105px;
        }

        .equipInfo .row>div:first-child {
            border-left: none;
        }

        .typeResult {
            font-size: 18px;
            line-height: 30px;
        }

        @media (max-width: 1200px) {
            .col-xs-4.secondLine {
                border-left: none !important;
            }

            .col-xs-4 {
                margin-bottom: 10px;
            }
        }


        /*  */

        .backStyle {
            background: #fff;
            box-shadow: 0 0 40px #eee;
            padding: 20px;
        }

        .backStyleA {
            background: #fff;
            box-shadow: 0 0 40px #eee;
            padding: 20px;
            overflow-y: scroll;
            overflow-x: scroll;
            height: 380px;
        }

        .backStyleB {
            background: #fff;
            box-shadow: 0 0 40px #eee;
            padding: 20px;
            height: 468px;
        }

        .backStyle h1 {
            font-size: 18px;
            margin-bottom: 15px;
        }

        .haloParent {
            position: absolute;
            width: 100px;
            height: 100px;
            float: left;
            margin-top: -23px;
        }

        .halo {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

        .solidCircle {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25%;
        }

        .solidCircle4 {
            background: #4ca1ff;
        }

        .solidCircle6 {
            background: #a597f8;
        }

        .solidCircle8 {
            background: #fc9558;
        }


        .halo4 {
            animation: haloFour 2s 3s infinite;
        }

        .halo6 {
            animation: haloSix 2s 3s infinite;
        }

        .halo8 {
            animation: haloEight 2s 3s infinite;
        }

        @keyframes haloFour {
            0% {
                background: #4ca1ff;
                transform: scale(.3);
                opacity: 0
            }

            20% {
                background: #1258a5;
                transform: scale(.5);
                opacity: .5
            }

            100% {
                background: #1258a5;
                transform: scale(.8);
                opacity: 0
            }
        }

        @keyframes haloSix {
            0% {
                background: #a597f8;
                transform: scale(.3);
                opacity: 0
            }

            20% {
                background: #3d2aaf;
                transform: scale(.5);
                opacity: .5
            }

            100% {
                background: #3d2aaf;
                transform: scale(.8);
                opacity: 0
            }
        }

        @keyframes haloEight {
            0% {
                background: #f8bb97;
                transform: scale(.3);
                opacity: 0
            }

            20% {
                background: #fa8845;
                transform: scale(.5);
                opacity: .5
            }

            100% {
                background: #f27125;
                transform: scale(.8);
                opacity: 0
            }
        }

        .haloIcon {
            margin-top: 14px;
            width: 24px;
            height: 24px;
        }

        /* ul和li */
        .list {
            border-bottom: 1px dashed rgb(131, 129, 129);
            margin-top: 40px;
        }

        .hid {
            display: none;
        }

        .font18 {
            text-indent: 2em;
            text-align: left;
            font-size: 18px;
            line-height: 28px;
        }

        .font19 {
            margin: 0 0 0 -50px;
            width: 14rem;
        }

        .font20 {
            margin: 0 0 0 49px;
        }

        .imgHid {
            display: none;
        }

        .font18Box {
            display: flex;
        }

        #addrPhoto {
            /* width: 850px; */
            width: 760px;
            height: 590px;
            margin: 30px 0 0 35px;
        }

        .layui-carousel>[carousel-item]>* {
            display: inline-block;
        }
    </style>


</head>

<body>

    <div class="content">
        <div class="page-header">
            <!-- <span class="headerPlace" onclick="gobackA('equipmanage_cbd')"> -->
                <span class="headerPlace" onclick="gobackA()">
                <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
            </span>
        </div>

        <!-- <div class="layui-carousel col-xs-12 col-md-6" id="test1" lay-filter="test1">
            <div carousel-item="" class="addrPhoto_box" id="addrPhoto_box">
                <img src="" alt="" class="" id="addrPhoto_img">
                <img src="" alt="" class="">
                <img src="" alt="" class="">
            </div>
        </div> -->

        <div class="col-xs-12 col-md-6" id="addrPhoto_box"></div>
        <!-- 轮播图 -->

        <!-- 右边 -->
        <!-- <div class="col-xs-12 col-md-6" style="padding-left: 0px;padding-right:0px;margin:-18px 0 0 15px;"> -->
        <div class="col-xs-12 col-md-6" style="padding-left: 0px;padding-right:0px;">
            <!-- 信息条 -->
            <div class="equipInfo">
                <div class="row" style="margin-left: 0;">
                    <div class="col-xs-4">
                        <div class="haloParent">
                            <div class="halo halo6"></div>
                            <div class="solidCircle solidCircle6">
                                <img class="haloIcon" src="{% static '/img/haloIcon25.png' %}" alt="">
                            </div>
                        </div>
                        <div class="txt">
                            <span class="typeResult" id="userId"></span>
                            <p class="typeResult" id="userIdName">测报员</p>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="haloParent">
                            <div class="halo halo4"></div>
                            <div class="solidCircle solidCircle4">
                                <img class="haloIcon" src="{% static '/img/haloIcon26.png' %}" alt="">
                            </div>
                        </div>
                        <div class="txt">
                            <span class="typeResult" id="time"></span>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="haloParent">
                            <div class="halo halo8"></div>
                            <div class="solidCircle solidCircle8">
                                <img class="haloIcon" src="{% static '/img/haloIcon1.png' %}" alt="">
                            </div>
                        </div>
                        <div class="txt">
                            <!-- <span class="typeResult" id="lng">经度：113.46655</span>
                            <p class="typeResult" id="lat">纬度：48.121211</p> -->
                            <!-- <span class="typeResult" id="lng">经度：113.46655</span> -->
                            <!-- <span class="typeResult" id="userCityName">地址</span> -->
                            <span class="typeResult" id="userCity">地址</span>
                            <p class="typeResult" id="userMonth"></p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-xs-6" style="padding-left: 0;">
                    <div class="backStyleB" style="margin-bottom:20px">
                        <ul class="">
                            <li class="list">
                                <span class="typeResult tempTitel" id="statisticalName">统计种类：</span>
                                <span class="typeResult tempTitel" id="statistical"></span>
                            </li>
                            <li class="list">
                                <span class="typeResult tempTitel" id="insectSortName">所属分类：</span>
                                <span class="typeResult tempTitel" id="insectSort"></span>
                            </li>
                            <li class="list">
                                <span class="typeResult tempTitel" id="namesName">病虫害名称：</span>
                                <span class="typeResult tempTitel" id="names"></span>
                            </li>
                            <li class="list">
                                <span class="typeResult tempTitel" id="statisticalMethodName">统计方法：</span>
                                <span class="typeResult tempTitel" id="statisticalMethod"></span>
                            </li>
                            <li class="list" id="areaName">
                                <span class="typeResult tempTitel">统计面积：</span>
                                <span class="typeResult tempTitel" id="area"></span>
                            </li>
                            <li class="list">
                                <span class="typeResult tempTitel" id="userCityName">生育期：</span>
                                <span class="typeResult tempTitel" id="growthStages"></span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 温控状态 -->
                <div class="col-xs-6" style="padding-left: 0;">

                    <div class="backStyle" style="margin-bottom:20px">
                        <span class="typeResult tempTitel" id="tpsName">病虫害值：</span>
                        <span class="typeResult tempTitel" id="tps"></span>
                    </div>
                    <div class="backStyleA">
                        <div class="temperatureKind">
                            <div class="clearfix weatherType">
                                <div class="tempTypeValue" id="tempTypeValue">
                                    <p class="font18" id="pestname"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧详情 -->
    </div>
    <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
    <script src="{% static '/lib/layui/layui.all.js' %}"></script>
    <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
    </script>
    <script type="text/javascript">
        particulars();
        //详情数据
        function particulars() {
            //判断是已录还是识别
            if (sessionStorage.getItem('cordID') !== null) {
                var aa = new Array();
                aa = sessionStorage.getItem('cordID').split(',')
                var bb = 'cord'
                var ahAt = '2'
            } else if (sessionStorage.getItem('discID') !== null) {
                $("#addrPhoto_img").remove();
                aa = sessionStorage.getItem('discID').split(',')
                var bb = 'disc'
                var ahAt = '2'
            }

            // console.log(aa[1])
            $.ajax({
                url: 'check_account',
                type: 'post',
                data: {
                    id: aa[0],
                    // ret: aa[1],
                    ret: ahAt,
                    req: bb
                },
                dataType: 'json',
                success: function (data) {
                    //判断是已录信息还是识别记录
                    if (bb == 'cord') {
                        $('#userId').html(data[0].user_name) //测报员
                        $('#time').html(data[0].upl_time) //时间
                        // if (data[0].lng == "null" && data[0].lat == "null") {
                        //     $('#lng').html('经度：' + '--') //经度
                        //     $('#lat').html('纬度：' + '--') //纬度
                        // } else {
                        //     $('#lng').html('经度：' + data[0].lng) //经度
                        //     $('#lat').html('纬度：' + data[0].lat) //纬度
                        // }

                        if (data[0].lng == "null" && data[0].lat == "null") {
                            $('#lng').html('经度：' + '--') //经度
                            $('#lat').html('纬度：' + '--') //纬度
                        } else {
                            $('#lng').html('经度：' + data[0].lng) //经度
                            $('#lat').html('纬度：' + data[0].lat) //纬度
                        }

                        if (data[0].city == "null") {
                            $('#userCity').html('暂无地址') //地址
                        } else {
                            $('#userCity').html(data[0].city) //地址
                        }

                        if (data[0].statistical == '1') {
                            $('#statistical').html('病害') //统计种类
                        } else {
                            $('#statistical').html('虫害')
                        }

                        if (data[0].crop_sort == '1') {
                            $('#insectSort').html('粮食作物下的' + data[0].pest) //统计种类
                        } else if (data[0].crop_sort == '2') {
                            $('#insectSort').html('作物经济下的' + data[0].pest)
                        } else if (data[0].crop_sort == '3') {
                            $('#insectSort').html('林业下的' + data[0].pest)
                        }
                        
                        $('#names').html(data[0].pest_name) //病虫害名称
                        $('#growthStages').html(data[0].growth_stages) //生育期
                        $('#userMonth').html(data[0].month + '月份') //月份
                        $('#statisticalMethod').html(data[0].cens_method) //统计方法
                        $('#area').html(data[0].area) //统计面积
                        // $('#insectSort').html(data[0].insect_sort) //所属分类

                        //病虫害值
                        var insect = '';
                        var insectAyn = data[0].pestname;
                        for (var i in insectAyn) {
                            var key = Object.keys(insectAyn[i])
                            var values = insectAyn[i][key]
                            insect += '<div class="font18Box">' + '<p class="font18 font19" id="pestname">' + key[0] + "：" + '<div class="font20">' + values[0] + '</div>' + '</p>' + '</div>'
                        }
                        document.getElementById('tempTypeValue').innerHTML = insect

                        //轮播图
                        var image = ''
                        var img = data[0].addr_photo
                        // for (var i = 0; i < img.length; i++) {
                        //     image += '<img src=' + img[i] + ' id="addrPhoto">'
                        //     console.log(img[i])
                        //     document.getElementById('addrPhoto_box').innerHTML = image

                        // }

                        image += '<img src=' + img[0] + ' id="addrPhoto">'
                        document.getElementById('addrPhoto_box').innerHTML = image
                        // document.getElementById('addrPhoto_box').innerHTML = image
                    } else if (bb == 'disc') {
                        //先将文本更改
                        $('#statisticalMethodName').html('测报员：') //统计方法改为测报员
                        $('#userIdName').html('所属用户') //测报员改为所属用户
                        $('#area').html(data[0].area) //统计面积
                        $('#tpsName').html('详情描述：') //统计面积
                        $('#areaName').addClass('hid') //统计面积

                        //填充数据
                        if (data[0].ret == 'insect') {
                            var fenlei = '虫害'
                        } else if (data[0].ret == 'plant') {
                            var fenlei = '病害'
                        }

                        if (data[0].course == '') {
                            var kemu = '暂无'
                        } else if (data[0].course !== '') {
                            var kemu = data[0].course
                        }

                        if (data[0].img_urls !== '') {
                            var image = data[0].img_urls
                        }

                        //切割详情字符串数据并渲染
                        let Adata = data[0].prevention;
                        var asj = Adata.replace(/]/g, "：");
                        let Bdata = new Array();
                        Bdata = asj.split("[");


                        $('#userId').html(data[0].username) //所属用户
                        $('#time').html(data[0].time) //时间
                        if (data[0].lng == "null" && data[0].lat == "null") {
                            $('#lng').html('经度：' + '--') //经度
                            $('#lat').html('纬度：' + '--') //纬度
                        } else {
                            $('#lng').html('经度：' + data[0].lng) //经度
                            $('#lat').html('纬度：' + data[0].lat) //纬度
                        }

                        if (data[0].addr == "null") {
                            $('#userCity').html('暂无地址') //地址
                        } else {
                            $('#userCity').html(data[0].addr) //地址
                        }
                        // $('#lng').html('经度：' + data[0].lng) //经度
                        // $('#lat').html('纬度：' + data[0].lat) //纬度
                        // $('#userCity').html(data[0].addr) //地址
                        $('#names').html(data[0].name) //病虫害名称
                        $('#statistical').html(fenlei) //统计种类
                        $('#statisticalMethod').html(data[0].reporter) //统计方法
                        $('#area').html(data[0].area) //统计面积
                        $('#insectSort').html(kemu) //所属分类
                        $('#pestname').html(Bdata) //详情描述
                        $('#addrPhoto').attr('src', image) //图片


                        var image = ''
                        var img = new Array();
                        if (data[0].img_urls == '' || data[0].img_urls == null) {
                            img.push(data[0].img)
                        } else {
                            img.push(data[0].img_urls)
                        }
                        // img.push(data[0].img_urls)
                        // img.push(data[0].img_urls)
                        // for (var i = 0; i < img.length; i++) {
                        //     image += '<img src=' + img[i] + ' id="addrPhoto">'
                        // }
                        image += '<img src=' + img[0] + ' id="addrPhoto">'
                        document.getElementById('addrPhoto_box').innerHTML = image
                        // ins.reload({ elem: '#test1' });//重置轮播图
                    }
                    scrollBar();
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }

        //返回功能
        function gobackA() {
            window.history.back(-1)
        }

    </script>
</body>

</html>