wangtao
/
uskyq


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

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="icon" href="../assets/img/favicon.ico">
    <title>客户案例</title>

    <link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
    <!--====== Mean Menu ======-->
    <link rel="stylesheet" href="../assets/css/meanmenu.min.css" />
    <!--====== Default css ======-->
    <link rel="stylesheet" href="../assets/css/default.css" />
    <!--====== Style css ======-->
    <link rel="stylesheet" href="../assets/css/style.css" />
    <!--====== Animation css =======-->
    <link rel="stylesheet" href="../assets/css/animation.css" />
    <!--====== element css ====== -->
    <link rel="stylesheet" href="../assets/css/element.css">
    <!--====== home css ====== -->
    <link rel="stylesheet" href="../assets/css/home.css" />
    <link rel="stylesheet" href="../assets/css/case.css" />
    <style>
        strong {
            color: #000 !important;
            margin-bottom: 10px;
        }
        
        p {
            margin: none;
        }
        
        ul {
            list-style-type: disc;
            margin: 5px 0 5px 20px;
        }
        
        table {
            margin-top: 10px;
        }
        
        table,
        th,
        td {
            border: 1px solid #ccc;
        }
        
        td {
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--[if lte IE 9]>
            <p class="browserupgrade">请使用chrome，IE11等现代浏览器，浏览本网站.</p>
        <![endif]-->
        <div class="erMenu">
            <div>

            </div>
        </div>
        <!--====== HEADER START ======-->
        <header class="header-absolute sticky-header">
            <div class="custom-container-one">
                <div class="header-top-area">
                    <div class="container align-items-center">
                        <!-- <div class="col-md-6 col-sm-7">
                        <ul class="contact-list">
                            <li>
                                <a href="javascipt:void();">www.chinausky.com</a>
                            </li>
                            <li>
                                <a href="javascipt:void();">400 633 8668</a>
                            </li>
                        </ul>
                    </div> -->
                    </div>
                </div>
                <div id="headerNav"></div>
                <div>
                    <div class="mobile-menu"></div>
                </div>
            </div>
        </header>
        <!--====== HEADER END ======-->

        <!--====== NEWS BREADCRUMB START ======-->
        <section class="common-bradcrumb-section">
            <img :src="banner" alt="">
        </section>
        <!--====== NEWS BREADCRUMB END ======-->

        <!-- <section class="crumbs">
        <div class="container">
            <ul>
                <li>首页 ></li>
                <li class="active">新闻动态</li>
            </ul>
        </div>
    </section> -->
        <div class="col-lg-12 col-md-12 content case">
            <ul>
                <!-- <li v-for="(item,index) in list" :key="index" @click="caseClick(item.id)">{{item.name}}</li> -->
            </ul>
        </div>
        <!--====== NEWS CONTENT START ======-->
        <section class="news-content-section pt-70">

            <div class="container" style="margin-top:-60px">

                <div class="caseBox">
                    <div class="content" id="app">
                        <div v-if="!hasNews" class="pt-60 pb-60">
                            <div class="loadEffect">
                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                            </div>
                        </div>
                        <ul v-if="!loading">
                            <!-- 新闻列表主题start -->
                            <div class="list">
                                <div class="" v-for="item in news" :key="item.id">
                                    <div class="oneBox">
                                        <div class="img" style="height:auto">
                                            <img src="../assets/img/case/al1.png" alt=""></div>
                                        <div class="info">
                                            <div class="top">
                                                <span class="title">{{ item.title }} <span></span></p>
                                            </div>
                                            <div class="nr" v-html="item.content">

                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </ul>
                        <div v-if="!loading" class="page mt-30 mb-30">
                            <div class="d-flex justify-content-center align-items-end cannot_selected" style="position:relative">
                                <div class="page-des align-items-start cannot_selected">共<span> {{
                                        totalPageNum}}</span>页，共<span> {{totalPageSzie}}</span>条信息</div>


                                <el-pagination prev-text="上一页" next-text='下一页' :page-size="one_page_num" :current-page="currentPageNum" background layout="prev, pager, next" :total="totalPageSzie" @current-change="currentChange">
                                </el-pagination>

                                <div class="page-des2 align-items-end cannot_selected pc">前往第
                                    <input v-model="goPage" class="previous" @keyup.enter="enterPage" /> 页
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--====== NEWS CONTENT END ======-->

        <!--====== FOOTER PART START ======-->
        <div id="footer"></div>
        <!--====== FOOTER PART END ======-->
    </div>
    <script src="../assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <script src="../assets/js/vendor/jquery-1.12.4.min.js"></script>
    <!--====== Bootstrap js ======-->
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/popper.min.js"></script>
    <!--====== Mean Menu ======-->
    <script src="../assets/js/jquery.meanmenu.min.js"></script>
    <script src="../assets/css/font_mun4q5ltrbp/iconfont.js"></script>
    <!--====== Main js ======-->
    <script src="../assets/js/main.js"></script>
    <!--====== Setting Info js ======-->
    <script src="../assets/js/settinginfo.js"></script>
    <!--====== Vue js======-->
    <script src="../assets/js/vue.min.js"></script>
    <script src="../assets/js/element/index.js"></script>
    <script>
        $(function() {
            $('#footer').load("../footer.html");
            $('#headerNav').load("../headerNav.html");
        })
        var news_list = [];
        var app = new Vue({
            el: '#app',
            data: {
                banner: undefined,
                message: 'hello',
                news: [],
                goPage: 1,
                tabs: 0,
                tabsId: '',
                id: 18,
                one_page_num: 5,
                currentPageNum: 1,
                totalPageNum: 1,
                // totalPageSzie: 5,
                loading: true,

            },
            computed: {
                hasNews: function() {
                    return this.news.length > 0;
                },
            },
            mounted: function() {
                // this.journalism_display_Ajax();
                // this.caseClick(18)
                if (JSON.stringify(JSON.parse(localStorage.getItem("item")).children) != "[]") {
                    this.banner = JSON.parse(localStorage.getItem("item")).imagePath
                    if (window.location.search) {
                        if (window.location.search.indexOf("detailId") > -1) {
                            this.detailsData(this.getString('detailId')[2])
                        }
                        if (window.location.search.indexOf("id") > -1) {
                            this.getList(this.getString('id')[2])
                        }
                    } else {
                        this.getList()
                    }
                }
            },
            methods: {
                getString(key) {
                    //  获取地址栏的参数
                    var url = window.location.search;
                    //正则表达式筛选
                    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                    //匹配参数
                    var result = url.substr(1).match(reg);
                    return result
                },
                /** 获取分类 */
                getList(id) {
                    let _this = this
                    _this.tabs = id
                    _this.tabsId = id
                    let path = JSON.parse(localStorage.getItem("item")).sname
                    let data = JSON.parse(localStorage.getItem("item")).children
                    for (let i = 0; i < data.length; i++) {
                        if (id == data[i].id) {
                            var li = $(`
                                <a class="menuactive2" href=?id=${data[i].id}>
                                    ${data[i].categoryName}
                                </a>
                            `)
                            $('.case>ul a').siblings().removeClass('menuactive2')
                            $(_this).addClass('menuactive2')
                        } else {
                            var li = $(`
                                <a href=?id=${data[i].id}>${data[i].categoryName}</a>
                            `)
                        }
                        $(".case>ul").append(li)
                    }
                    if (!id) {
                        let li = $(`<a class="menuactive2" href="index.html">全部</a>`)
                        $(".case>ul").prepend(li)
                        _this.getListData(_this.tabsId, 1, _this.one_page_num)
                    } else {
                        let li = $(`<a href="index.html">全部</a>`)
                        _this.getListData(id, 1, _this.one_page_num)
                        $(".case>ul").prepend(li)
                    }
                },
                /** 获取分类下数据 */
                getListData(id = undefined, page, size) {
                    let _this = this
                    jQuery.ajax({
                        type: 'get',
                        dataType: 'json',
                        url: window.FQDN2 + 'siteArticle/siteArticleList',
                        data: {
                            categoryid: id,
                            pageNum: page,
                            pageSize: size,

                        }
                    }).done(function(res) {

                        _this.news = res.data.records
                        _this.totalPageNum = Math.ceil((res.data.total / res.data.size))
                        _this.totalPageSzie = res.data.total
                        _this.currentPageNum = res.data.current
                        if (res.data.records.length > 0) {
                            _this.loading = false
                        } else {
                            _this.loading = true
                        }

                    }).fail(function(err) {});
                },
                caseClick(id) {
                    var _this = this;
                    this.id = id
                    jQuery.ajax({
                        type: 'get',
                        dataType: 'json',
                        url: 'http://aiot.usky.cn:8089/USKYOW/index.php/index/Agw/siteArticleList',
                        data: {
                            id: 0,
                            categoryid: id,
                            pageNum: this.currentPageNum,
                            pageSize: this.one_page_num,
                        }
                    }).done(function(res) {
                        var data = res.data
                        _this.news = data
                            // _this.totalPageSzie = res.count
                            // _this.totalPageNum = Math.ceil(res.count / res.pageSize);
                        _this.totalPageSzie = res.count
                        _this.totalPageNum = Math.ceil(res.count / res.size);
                        _this.loading = false;

                    }).fail(function(err) {
                        _this.loading = false;
                    });
                },
                journalism_display_Ajax() {
                    // var _this = this;
                    // jQuery.ajax({
                    //     type: 'POST',
                    //     dataType: 'json',
                    //     url: window.FQDN + 'agw/journalism_display',
                    //     data: {
                    //         type: '1',
                    //         size: _this.one_page_num,
                    //         page: _this.currentPageNum
                    //     }
                    // }).done(function(res) {
                    //     if (!res.msg) {
                    //         return;
                    //     }
                    //     _this.news = res.data
                    //     _this.totalPageSzie = res.count
                    //     _this.totalPageNum = Math.ceil(res.count / res.size);

                    //     _this.loading = false;
                    // }).fail(function(err) {});
                },
                // oneInnerBox: function(id) {
                //     window.location = "./read.html?id=" + id
                // },
                enterPage: function(res) {
                    if (this.goPage >= 1 && this.goPage <= this.totalPageNum) {
                        this.currentPageNum = this.goPage
                        this.caseClick(this.id);
                    } else {
                        this.goPage = 1
                        alert('输入页数有误！')
                    }
                },
                currentChange: function(res) {
                    this.currentPageNum = res
                    this.caseClick(this.id);
                }
            },
        });
    </script>
</body>
<style>

</style>

</html>