vue中时间插件的引入

其他 2018-11-15 09:01:05 阅读次数: 0

首先是在第一个div中引入时间插件 

 <Row type="flex" justify="end">
            <Col>
            <DatePicker v-model="timeStr" format="yyyy/MM/dd" type="daterange" placement="bottom-end" :placeholder="place"
                        style="width: 200px;margin-bottom: 10px" @on-change="changeDate"></DatePicker>
            </Col>
        </Row>

其次是在template中初始化时间

<script>
    import TpSsaEcharts from "../../../../components/locale-components/tp-ssa-echarts/tp-ssa-echarts";
    import TpTable from "../../../../components/locale-components/tp-table/tp-table";
    export default {
        name: "information_utilization",
        components: {TpTable, TpSsaEcharts},
        data(){
            return{
                place:'',
                Srcnum:0,
                Dstnum:0,
                Servernum:0,
                bTime:null,
                eTime:null,
                timeStr:'',
                eventList:{"全部":0},
                lineparams:{
                    id: 'lineparams',
                    type: "line",
                    title: "非法访问行为趋势",
                    url: '/api/getlinesHistory',
                    reload: 0,
                    data: {

再次就是时间的引入了：

使用bTime代替begtime

首先就是要对bTime和eTime进行初始化，然后用这两个数去接时间的改变。

 data(){
            return{
                place:'',
                Srcnum:0,
                Dstnum:0,
                Servernum:0,
                bTime:null,
                eTime:null,
                timeStr:'',
                eventList:{"全部":0},
                lineparams:{
                    id: 'lineparams',
                    type: "line",
                    title: "非法访问行为趋势",
                    url: '/api/getlinesHistory',
                    reload: 0,
                    data: {
                        index: 'ssa_envents*',
                        type: 'nsec',
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        begTime: null,
                        endTime: null
                    }
                },

再次就是初始化时间，begTime与endTime分别为null，意思就是默认情况下时间走系统时间，当选择时间的时候会发请求，改变时间。

 changeDate(params){
                this.bTime = new Date(params[0]).getTime();
                this.eTime = new Date(params[1]).getTime();
                this.$refs.lineparams.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.$refs.barparams.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.$refs.optionLog.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.getNumber()
            },
            getNumber(){
                this.$http.get("/api/getpie",{
                    params:{
                        index: "ssa_envents*",
                        type: "nsec",
                        aggField:"SrcIP",
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        size:10000,
                        begTime: this.bTime,
                        endTime: this.eTime
                    }
                }).then(res => {
                    this.Srcnum=res.data.rows.length
                });

整个代码：

<template>
    <div>
        <Row type="flex" justify="end">
            <Col>
            <DatePicker v-model="timeStr" format="yyyy/MM/dd" type="daterange" placement="bottom-end" :placeholder="place"
                        style="width: 200px;margin-bottom: 10px" @on-change="changeDate"></DatePicker>
            </Col>
        </Row>
        <Row style="height: 200px;font-size: 30px;text-align: center">
            <Row type="flex" justify="space-around":gutter="16">
                <Col span="2" style="height: 100px;color: #fff">
                    <img title="存在非法访问攻击行为的主机数" src="../../../../../static/images/clouddc-topology/攻击.png"/><p>{{Srcnum}}</p>
                </Col>
                <Col span="7" style="height: 80px">
                    <img src="../../../../../static/images/clouddc-topology/箭头.gif" style="width: 100%;"/>
                </Col>
                <Col span="4" style="height: 80px;color: #fff;padding-left: 55px;">
                    <img title="服务器数" src="../../../../../static/images/clouddc-topology/服务器.png"/><p>{{Servernum}}</p>
                </Col>
                <Col span="7" style="height: 80px">
                    <img src="../../../../../static/images/clouddc-topology/箭头.gif" style="width: 100%;" />
                </Col>
                <Col span="4" style="height: 80px;color: #fff">
                    <img title="受非法访问攻击的服务器数" src="../../../../../static/images/clouddc-topology/受攻击.png"/><p>{{Dstnum}}</p>
                </Col>
            </Row>
            <p style="font-size: 20px;margin-top: 50px;">存在非法访问攻击行为的主机<span class="num">{{Srcnum}}</span>个，其中服务器<span class="num">{{Servernum}}</span>个，遭受非法访问攻击行为的服务器<span class="num">{{Dstnum}}</span>个</p>
        </Row>
        <Row>
            <Col span="12" style="height: 300px">
                <tp-ssa-echarts ref="lineparams" :allParams="lineparams"></tp-ssa-echarts>
            </Col>
            <Col span="12" style="height: 300px">
                <tp-ssa-echarts ref="barparams" :allParams="barparams"></tp-ssa-echarts>
            </Col>
        </Row>
        <!--<Row>-->
            <!--<Button v-for="(item,key) in eventList" v-on:click="changeProgram(key)" >{{key}}({{item}})</Button>-->
        <!--</Row>-->
        <Row style="height: 600px">
            <tp-table ref="optionLog" :all_params="optionLog"></tp-table>
        </Row>
    </div>
</template>
<script>
    import TpSsaEcharts from "../../../../components/locale-components/tp-ssa-echarts/tp-ssa-echarts";
    import TpTable from "../../../../components/locale-components/tp-table/tp-table";
    export default {
        name: "information_utilization",
        components: {TpTable, TpSsaEcharts},
        data(){
            return{
                place:'',
                Srcnum:0,
                Dstnum:0,
                Servernum:0,
                bTime:null,
                eTime:null,
                timeStr:'',
                eventList:{"全部":0},
                lineparams:{
                    id: 'lineparams',
                    type: "line",
                    title: "非法访问行为趋势",
                    url: '/api/getlinesHistory',
                    reload: 0,
                    data: {
                        index: 'ssa_envents*',
                        type: 'nsec',
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        begTime: null,
                        endTime: null
                    }
                },
                barparams:{
                    id: 'barparams',
                    type: "bar",
                    title: "攻击源TOP5",
                    url: '/api/getpie',
                    reload: 0,
                    data: {
                        index: 'ssa_envents*',
                        type: 'nsec',
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        aggField:'SrcIP',
                        begTime: null,
                        endTime: null,
                        size: 5
                    },
                    config:{
                        xAxis:[{
                            axisLabel:{
                                rotate:0
                            }
                        }]
                    }
                },

                optionLog:{
                    id :"tableBox",
                    type : "table",
                    ajaxType : "get",
                    checkBox: true,
                    url: '/api/ssa_table',
                    data:{
                        index: "ssa_envents*",
                        type: "nsec",
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        begTime: null,
                        endTime: null
                    },
                    add_btn:false,
                    modify_btn:false,
                    cols: [
                        {
                            title: '源IP',
                            width:130,
                            align: 'center',
                            search:'SrcIP',
                            render: (h, params) => {
                                return h( 'div',params.row._source.SrcIP);
                            }
                        },
                        {
                            title: '目的IP',
                            width:130,
                            align: 'center',
                            // search:'DstIP',
                            render: (h, params) => {
                                return h( 'div',params.row._source.DstIP);
                            }
                        },
                        {
                            title: '源端口',
                            align: 'center',
                            // search:'SrcPort',
                            render: (h, params) => {
                                return h( 'div',params.row._source.SrcPort);
                            }
                        },
                        {
                            title: '目的端口',
                            align: 'center',
                            // search:'DstPort',
                            render: (h, params) => {
                                return h( 'div',params.row._source.DstPort);
                            }
                        },
                        {
                            title: '日志类型',
                            align: 'center',
                            // search:'logtype',
                            render: (h, params) => {
                                return h( 'div',params.row._source.logtype);
                            }
                        },
                        {
                            title: '日志源',
                            render: (h, params) => {
                                return h( 'div',params.row._source.host);
                            }
                        },
                        {
                            title: '类型',
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.type);
                            }
                        },
                        {
                            title: '告警',
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.severity_label);
                            }
                        },
                        {
                            title: '告警等级',
                            width:85,
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.severity);
                            }
                        },
                        {
                            title: '时间',
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.GenTime);
                            }
                        },
                        {
                            title: '动作',
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.Action==='null'|| params.row._source.Action=== undefined ?'(无)':params.row._source.Action);
                            }
                        },
                        {
                            title: '协议',
                            align: 'center',
                            render: (h, params) => {
                                return h( 'div',params.row._source.Protocol);
                            }
                        },
                        {
                            title: '操作',
                            width: 250,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('a', {
                                        style: {
                                            marginRight: '10px'
                                        },
                                        on: {
                                            click: () => {

                                                this.$router.push({
                                                    name: "sec_target",
                                                    params: {
                                                        source: 'index_intrusion',
                                                        CombQueryDataObject: params.row._source.DstIP
                                                    }
                                                });
                                            }
                                        }
                                    }, '目标画像'),
                                    h('a', {
                                        style: {
                                            marginRight: '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    name: "sec_hacker",
                                                    params: {
                                                        source: 'index_intrusion',
                                                        CombQueryDataObject:  params.row._source.SrcIP
                                                    }

                                                });
                                            }
                                        }
                                    }, '黑客画像'),
                                    h('a', {
                                        on: {
                                            click: () => {
                                                this.$router.push({
                                                    name: "sec_traceback",
                                                    params: {
                                                        source: 'index_intrusion',
                                                        CombQueryDataObject: {
                                                            SrcIP:params.row._source.SrcIP,
                                                            DstIP:params.row._source.DstIP
                                                        }
                                                    }

                                                });
                                            }
                                        }
                                    }, '入侵回溯')
                                ]);
                            }
                        }
                    ]
                }
            }
        },
        created(){
            this.getTimeData();
            Date.prototype.Format = function (fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        },
        mounted(){
             this.getNumber()
        },
        methods:{
            changeProgram(searchField){

                if (searchField === "全部"){

                    this.$refs.optionLog.changeParams({
                        search:{
                        },
                    });
                } else{
                    this.$refs.optionLog.changeParams({
                        search:{
                            EventType:searchField
                        },
                    });
                }
            },
            changeDate(params){
                this.bTime = new Date(params[0]).getTime();
                this.eTime = new Date(params[1]).getTime();
                this.$refs.lineparams.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.$refs.barparams.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.$refs.optionLog.changeParams({
                    begTime: this.bTime,
                    endTime: this.eTime
                });
                this.getNumber()
            },
            getNumber(){
                this.$http.get("/api/getpie",{
                    params:{
                        index: "ssa_envents*",
                        type: "nsec",
                        aggField:"SrcIP",
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        size:10000,
                        begTime: this.bTime,
                        endTime: this.eTime
                    }
                }).then(res => {
                    this.Srcnum=res.data.rows.length
                });
                this.$http.get("/api/getpie",{
                    params:{
                        index: "ssa_envents*",
                        type: "nsec",
                        aggField:"SrcIP",
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部","Srctype":"服务器"}
                        },
                        // 'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                        size:10000,
                        begTime: this.bTime,
                        endTime: this.eTime
                    }
                }).then(res => {
                    this.Servernum=res.data.rows.length
                });
                this.$http.get("/api/getpie",{
                    params:{
                        index: "ssa_envents*",
                        type: "nsec",
                        aggField:"DstIP",
                        CombQuerysMust:{
                            'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            'Must':{ "threatType":"内部" }
                        },
                        // 'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                        size:10000,
                        begTime: this.bTime,
                        endTime: this.eTime
                    }
                }).then(res => {
                    this.Dstnum=res.data.rows.length
                });
                this.$http.get("/api/getpie",{
                    params:{
                        index: "ssa_envents*",
                        type: "nsec",
                        aggField:"EventType",
                        CombQuery:{
                            'logtype':['LOG_APPSEC_URLFILTER','LOG_FW_BLACKLIST','LOG_APPSEC_POLICY'],
                            "threatType":["内部"]
                        },
                        // 'EventType':['弱口令攻击','远程访问攻击','内容过滤','强力攻击'],
                        begTime: this.bTime,
                        endTime: this.eTime
                    }
                }).then(res => {
                    this.eventList={"全部":0};
                    for(let index in res.data.rows)
                    {
                        let item=res.data.rows[index];
                        this.eventList[item.key]=item.doc_count;
                    }
                    this.eventList["全部"]=res.data.doc_count;
                });
            },
            getTimeData(status) {
                let _this = this;
                this.$http
                    .get('/api/sysmgr/get_conf', {params: {type: 'time'}})
                    .then(res => {
                        if (res.code === 0) {

                            console.log(res);
                            var beginTime =res.data.rows.beginTime;
                            var endTime = res.data.rows.endTime;
                            _this.bTimestemp = res.data.rows.beginTime;
                            _this.eTimestemp = res.data.rows.endTime;
                            var timeStr = new Date(beginTime).Format("yyyy/MM/dd");
                            timeStr = timeStr+" - "+(new Date(endTime).Format("yyyy/MM/dd/"));

                            _this.timeStr = timeStr;
                            _this.place="请选择日期";
                        }
                        if (status) {
                            _this.$Message.success(this.$t('已刷新'));
                        }
                    });
            }
        }
    }
</script>
<style lang="less" scoped>
    .num{
        color: #E23938;
    }
</style>

总之：时间的引入：首先就是在第一个div中引入时间插件，接着在template中初始化时间，bTime和eTime分别为null,在代码中用begTime 和endTime 来代替时间，并且分别进行初始化为null,在改变时间的事件中，引入改变时间，然后用bTime和eTime去接时间。

 begTime: this.bTime,
 endTime: this.eTime

猜你喜欢

转载自blog.csdn.net/wyqwilliam/article/details/84034550
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022