yf_elsa.cui
/
ninglu-frontt


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618
							<!DOCTYPE html>
<html lang="en">

<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/layui/css/layui.css">
    <style>
        body {
            background-color: #f6f6f6;
            padding: 0;
            margin: 0;
        }

        /* @font-face {
            font-family: zhanti;
            src: url("./static/font/zhanti.ttf");
        } */

        p {
            margin: 0;
        }

        .recognbox {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-color: #101010;
        }

        .videobox {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .shang {
            position: absolute;
            top: -14px;
            left: 1.8%;
            width: 100%;
            height: 100px;
        }

        .tilte {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            /* font-family: zhanti; */
            color: #fff;
            text-align: center;
            line-height: 55px;
            font-size: 30px;
            margin: 0;
        }

        .xia {
            position: absolute;
            bottom: -10px;
            left: 1.8%;
            width: 100%;
            height: 80px;
        }

        .wormlistbox {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            box-sizing: border-box;
            position: absolute;
            top: 66px;
            left: 5%;
            width: 90%;
            height: 90%;
            z-index: 98;
            text-align: center;
        }

        .wormlistpai {
            width: 300px;
            background-color: #fff;
            height: 100%;
        }

        .wormlistinfo {
            width: calc(100% - 320px);
            background-color: #fff;
            height: 100%;
        }

        #wormlist {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-around; */

        }

        .searcbox {
            display: flex;
            margin: 15px;
        }

        .searchbtn {
            width: 60px;
            height: 30px;
            color: #fff;
            background-color: #4F71FF;
            outline: none;
            border: 0px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        #uname {
            outline: none;
            padding-left: 10px;
        }

        .wormlistpai {
            padding: 10px;
            box-sizing: border-box;
        }

        .wormlistpai_list {
            padding: 0 10px;
        }

        .wormlistpai_top {
            display: flex;
            justify-content: space-between;
        }

        .topage {
            width: 126px;
            height: 54px;
            background-image: url(./static/images/button.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 25px;
            left: 95px;
            z-index: 99999;
            color: #fff;
            line-height: 52px;
            /* padding-left: 15px; */
            box-sizing: border-box;
            /* padding: 8px 15px; */
            text-align: center;
        }

        .caozuo {
            position: absolute;
            top: 20px;
            right: 20px;
            height: 100px;
        }
        .fangda img,.suoxiao img{
            width: 24px;
            height: 24px;
        }
        #bindingsimbox {
            width: 100%;
            padding: 20px 15px;
            box-sizing: border-box;
            display: flex;
        }

        #simtype {
            height: 30px;
            width: 300px;
        }

        .simboxsearchbtn {
            width: 80px;
            height: 30px;
            color: #fff;
            background-color: #4F71FF;
            outline: none;
            border: 0px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="recognbox" id="recognbox">
        <div class="videobox">
            <video controls="controls" muted="muted" autoplay="autoplay" loop="loop" class="fillWidth" id="fillWidths">
                <source src="https://zhanting-shibie.oss-cn-hangzhou.aliyuncs.com/1.mp4" type="video/mp4" />
            </video>
        </div>
        <img src="./static/images/shang.png" alt="" class="shang" />
        <img src="./static/images/xia.png" alt="" class="xia" />
        <p class="tilte">病害库</p>
        <div class="wormlistbox">
            <div class="wormlistinfo">
                <div class="searcbox">
                    <input type="text" value="" class="" id="uname" placeholder="病害名称搜索" />
                    <div class="searchbtn" onclick="searcbtn()">搜索</div>
                </div>
                <div id="wormlist">

                </div>
                <div style="display: flex;justify-content: space-around;" id="pageid">
                    <div id="demo1"></div>
                </div>
            </div>
            <div class="wormlistpai">
                <div class="wormlistpai_top">
                    <p style="font-size: 16px;line-height: 30px;">识别排名</p>
                    <div class="searchbtn" onclick="bieshibtn()">识别</div>
                </div>
                <div class="wormlistpai_list" id="wormlistpai_list">
                </div>
            </div>
        </div>
        <div id="tokenbox" style="width:800px;display:none">
            <div style="padding: 20px;">
                <div style="display:flex;margin-bottom: 15px;">
                    <p style="width: 70px;margin-right: 10px;">病害名称：</p>
                    <p id="bingname"></p>
                </div>
                <div style="display:flex;margin-bottom: 15px;">
                    <p style="width: 70px;margin-right: 10px;">病害图片：</p>
                    <p id="bingsrc"></p>
                </div>
                <div style="display:flex;">
                    <p style="width: 70px;margin-right: 10px;">病害详情：</p>
                    <p id="binginfo" style="width: calc(100% - 80px);"></p>
                </div>
            </div>
        </div>
        <div id="shibiebox">
            <div style="padding: 20px;">
                <div style="display:flex;margin-bottom: 15px;">
                    <p style="width: 70px;margin-right: 10px;">病害名称：</p>
                    <p id="shibiename"></p>
                </div>
                <div style="display:flex;margin-bottom: 15px;">
                    <p style="width: 70px;margin-right: 10px;">病害图片：</p>
                    <p id="shibiesrc"></p>
                </div>
                <div style="display:flex;">
                    <p style="width: 70px;margin-right: 10px;">病害详情：</p>
                    <p id="shibieinfo" style="width: calc(100% - 80px);"></p>
                </div>
            </div>
        </div>
        <div class="topage" onclick="topage()">
            <i class="el-icon-back"></i>
            返 回
        </div>
        <div class="caozuo">
            <div class="fangda" id="fangda" onclick="btnClick()">
                <img src="./static/images/index/fangda.png" alt="">
            </div>
            <div class="suoxiao" id="suoxiao" onclick="exitFullScreen()">
                <img src="./static/images/index/suoxiao.png" alt="">
            </div>
        </div>

        <div id="bindingsimbox" style="display: none;">
            <div style="margin-bottom: 15px;">
                <select name="simtype" lay-verify="required" lay-search="" id="simtype">
                    <option value="1">小麦</option>
                    <option value="2">水稻</option>
                    <option value="3">油菜</option>
                    <option value="4">玉米</option>
                    <option value="5">大豆</option>
                    <option value="6">萝卜</option>
                    <option value="7">梨</option>
                    <option value="8">黄瓜</option>
                    <option value="9">豇豆</option>
                    <option value="10">桑</option>
                    <option value="11">柿</option>
                    <option value="12">烟草</option>
                    <option value="13">甘薯</option>
                    <option value="14">茄子</option>
                    <option value="15">甘蔗</option>
                    <option value="16">甘蓝</option>
                    <option value="17">番茄</option>
                    <option value="18">南瓜</option>
                    <option value="19">辣椒</option>
                    <option value="20">桃</option>
                    <option value="21">棉花</option>
                    <option value="22">茶</option>
                    <option value="23">花生</option>
                    <option value="24">白菜</option>
                    <option value="25">马铃薯</option>
                    <option value="26">葡萄</option>
                    <option value="27">柑橘</option>
                    <option value="28">苹果</option>
                </select>
            </div>
            <div class="simboxsearchbtn" id="bieshi">上传图片</div>
        </div>
    </div>
    <script src="./static/js/jquery-2.1.4.min.js"></script>
    <script src="./static/layui/layui.all.js"></script>
    <script src="./static/js/show.js"></script>
    <script>
        function Base64() {
            // private property
            _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

            // public method for encoding
            this.encode = function (input) {
                var output = "";
                var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                var i = 0;
                input = _utf8_encode(input);
                while (i < input.length) {
                    chr1 = input.charCodeAt(i++);
                    chr2 = input.charCodeAt(i++);
                    chr3 = input.charCodeAt(i++);
                    enc1 = chr1 >> 2;
                    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                    enc4 = chr3 & 63;
                    if (isNaN(chr2)) {
                        enc3 = enc4 = 64;
                    } else if (isNaN(chr3)) {
                        enc4 = 64;
                    }
                    output = output +
                        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                        _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
                }
                return output;
            }

            // public method for decoding
            this.decode = function (input) {
                var output = "";
                var chr1, chr2, chr3;
                var enc1, enc2, enc3, enc4;
                var i = 0;
                input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
                while (i < input.length) {
                    enc1 = _keyStr.indexOf(input.charAt(i++));
                    enc2 = _keyStr.indexOf(input.charAt(i++));
                    enc3 = _keyStr.indexOf(input.charAt(i++));
                    enc4 = _keyStr.indexOf(input.charAt(i++));
                    chr1 = (enc1 << 2) | (enc2 >> 4);
                    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                    chr3 = ((enc3 & 3) << 6) | enc4;
                    output = output + String.fromCharCode(chr1);
                    if (enc3 != 64) {
                        output = output + String.fromCharCode(chr2);
                    }
                    if (enc4 != 64) {
                        output = output + String.fromCharCode(chr3);
                    }
                }
                output = _utf8_decode(output);
                return output;
            }

            // private method for UTF-8 encoding
            _utf8_encode = function (string) {
                string = string.replace(/\r\n/g, "\n");
                var utftext = "";
                for (var n = 0; n < string.length; n++) {
                    var c = string.charCodeAt(n);
                    if (c < 128) {
                        utftext += String.fromCharCode(c);
                    } else if ((c > 127) && (c < 2048)) {
                        utftext += String.fromCharCode((c >> 6) | 192);
                        utftext += String.fromCharCode((c & 63) | 128);
                    } else {
                        utftext += String.fromCharCode((c >> 12) | 224);
                        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                        utftext += String.fromCharCode((c & 63) | 128);
                    }

                }
                return utftext;
            }

            // private method for UTF-8 decoding
            _utf8_decode = function (utftext) {
                var string = "";
                var i = 0;
                var c = c1 = c2 = 0;
                while (i < utftext.length) {
                    c = utftext.charCodeAt(i);
                    if (c < 128) {
                        string += String.fromCharCode(c);
                        i++;
                    } else if ((c > 191) && (c < 224)) {
                        c2 = utftext.charCodeAt(i + 1);
                        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                        i += 2;
                    } else {
                        c2 = utftext.charCodeAt(i + 1);
                        c3 = utftext.charCodeAt(i + 2);
                        string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                        i += 3;
                    }
                }
                return string;
            }
        }

        console.log($)
        var wornnanme = ""
        function getdatalist(page, wornnanmedata, first) {
            if (wornnanmedata == "") {
                url = "pest.pests.pests_info"
            } else {
                url = "pest.pests.pests_search"
            }
            $.ajax({
                method: "post",
                url: "http://8.136.98.49:8002/api/api_gateway?method=" + url, //请求的url地址
                data: {
                    code: 1,
                    page: page,
                    name: wornnanmedata,
                    token: "OURKOlrV9dXxUGpGR2UWF7gYOJgqEfV LTemxZDudFA=",
                    "page_size": "15"
                },
                dataType: "json",
                success: function (data) {
                    console.log(data.data)
                    var list = data.data.data
                    var str = "";
                    for (var i = 0; i < list.length; i++) {
                        str += `<div style="width:17.5%;box-shadow: 1px 1px 8px 0 #ddd;margin:0 15px 15px 15px;" onclick="tab(` + list[i].id + `)"><img src="` + list[i].img_urls + `" style='width:100%;height:180px;' alt=""><p style="text-align: center;margin:5px 0;">` + list[i].name + `</p></div>`
                    }
                    $("#wormlist")[0].innerHTML = str
                    if (first) {
                        layui.use(['laypage', 'layer'], function () {
                            var laypage = layui.laypage
                                , layer = layui.layer;
                            //总页数大于页码总数
                            laypage.render({
                                elem: 'demo1'
                                , count: data.data.nums //数据总数
                                , theme: '#4F71FF'
                                , limit: 15
                                , jump: function (obj, first) {
                                    // console.log(obj, first)
                                    // getwarnlist(obj.curr, 0)
                                    getdatalist(obj.curr, wornnanme, false)
                                }
                            });
                        })
                    }

                }
            });
        }
        getdatalist(1, wornnanme, true)
        function searcbtn() {
            wornnanme = $("#uname").val()
            // console.log(str)
            getdatalist(1, wornnanme, true)
        }
        function getranking() {
            $.ajax({
                method: "post",
                url: "http://8.136.98.49:8002/api/api_gateway?method=pest.pests.pests_search", //请求的url地址
                data: {
                    code: 1,
                    page: 1,
                    token: "OURKOlrV9dXxUGpGR2UWF7gYOJgqEfV LTemxZDudFA="
                },
                dataType: "json",
                success: function (data) {
                    console.log(data.data)
                    var list = data.data.data
                    var str = ""
                    for (var i = 0; i < list.length; i++) {
                        str += `<div style="display:flex;margin:10px 0;" onclick="tab(` + list[i].id + `)">
                    <p style="line-height:50px;">`+ (i + 1) + `</p>
                    <img src="`+ list[i].img_urls + `" style="width: 50px;height: 50px;border-radius: 50%;margin-left:50px;" alt="">
                    <p style="line-height:50px;width: 61%;text-align: end;">`+ list[i].name + `</p>
                </div>`
                    }
                    $("#wormlistpai_list")[0].innerHTML = str
                }
            });
        }
        getranking()
        function tab(id) {
            console.log(id)
            layer.open({
                type: 1,
                title: '病害信息',
                area: ['800px', '600px'], //宽高
                content: $('#tokenbox'),
                success: function (layero, index) {
                    $.ajax({
                        method: "post",
                        url: "http://8.136.98.49:8002/api/api_gateway?method=pest.pests.pests_info", //请求的url地址
                        data: {
                            code: "2",
                            page: "1",
                            pest_id: id,
                            token: "OURKOlrV9dXxUGpGR2UWF7gYOJgqEfV LTemxZDudFA="
                        },
                        dataType: "json",
                        success: function (data) {
                            console.log(data.data)
                            $("#bingname")[0].innerText = data.data.name
                            var str = `<img src="` + data.data.img_urls + `" style="width: 160px;height: 160px;" alt="">`
                            $("#bingsrc")[0].innerHTML = str
                            let Adata = data.data.prevention;
                            var a = Adata.replace(/]/g, "：");
                            let Bdata = new Array();
                            Bdata = a.split("[");
                            console.log(Bdata)
                            var str = ""
                            for (var i = 0; i < Bdata.length; i++) {
                                if (Bdata[i] != "") {
                                    str += `<p style="margin-bottom:10px;">` + Bdata[i] + `</p>`
                                }
                            }
                            $("#binginfo")[0].innerHTML = str

                        }
                    });
                }
            })
        }
        function bieshibtn() {
            layer.open({
                type: 1,
                title: '病害识别',
                area: ['450px', '130px'], //宽高
                content: $('#bindingsimbox'),
                skin: 'layui-layer-editName', //样式类名
                success: function (layero, index) {

                }
            })
        }
        // function bieshibtn() {
        layui.use(['upload', 'element', 'layer'], function () {
            var $ = layui.jquery
                , upload = layui.upload
                , element = layui.element
                , layer = layui.layer;

            //常规使用 - 普通图片上传
            var myMsg;
            var base = new Base64();
            var uploadInst = upload.render({
                elem: '#bieshi'
                , url: 'http://8.136.98.49:8002/identify/zhichong'
                , field: "imageFile"
                , data: {
                    type: $("#simtype").val()
                },
                headers: {
                    Authorization: "Basic " + base.encode("pingpu:123456789")
                }
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    // console.log(obj)

                    myMsg = layer.msg('识别中，请稍后.....', { icon: 16, time: 0 });
                }, done: function (res) {
                    console.log(res)
                    layer.close(myMsg)
                    if (res.message == "") {
                        layer.open({
                            type: 1,
                            title: '病害信息',
                            area: ['800px', '600px'], //宽高
                            content: $('#shibiebox'),
                            success: function (layero, index) {
                                var data = res.data
                                $("#shibiename")[0].innerText = data.name
                                var str = `<img src="` + data.img_urls + `" style="width: 160px;height: 160px;" alt="">`
                                $("#shibiesrc")[0].innerHTML = str
                                let Adata = data.prevention;
                                var a = Adata.replace(/]/g, "：");
                                let Bdata = new Array();
                                Bdata = a.split("[");
                                console.log(Bdata)
                                var str = ""
                                for (var i = 0; i < Bdata.length; i++) {
                                    if (Bdata[i] != "") {
                                        str += `<p style="margin-bottom:10px;">` + Bdata[i] + `</p>`
                                    }
                                }
                                $("#shibieinfo")[0].innerHTML = str
                            }
                        })
                    } else {
                        layer.msg(res.message)
                    }
                }
            });
        })
        function topage() {
            window.location.href = "./index.html"
        }
    </script>
</body>

</html>