mobile forensic tool.html 10.7 KB

Raw Blame History Permalink

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <script src="echarts.min.js"></script>
    <script src="axios.min.js"></script>
    <script src="vue.js"></script>
    <style>
        .ui.segments {
            margin-bottom: 50px;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="ui segments">
        <div class="ui red segment">
            <p>call records</p>
        </div>
        <table class="ui attached selectable celled table">
            <thead>
            <tr>
                <th>number</th>
                <th>name</th>
                <th>incoming</th>
                <th>outgoing</th>
                <th>duration</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in calls">
                <th>{{item.number}}</th>
                <th>{{item.name}}</th>
                <th>{{item.incoming}}</th>
                <th>{{item.outgoing}}</th>
                <th>{{item.duration}}</th>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="ui segments">
        <div class="ui red segment">
            <p>message</p>
        </div>
        <table class="ui attached selectable table">
            <thead>
            <tr>
                <th>address</th>
                <th>body</th>
                <th>date</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in messages">
                <th>{{item.address}}</th>
                <th>{{item.body}}</th>
                <th>{{item.date}}</th>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="chart1" style="width: 100%;height:800px;margin-top: 40px;"></div>
    <div class="ui segments">
        <div class="ui red segment">
            <p>cmd</p>
        </div>
        <table class="ui attached selectable celled table">
            <thead>
            <tr>
                <th>uid</th>
                <th>pid</th>
                <th>ppid</th>
                <th>stime</th>
                <th>time</th>
                <th>cmd</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in processes">
                <th>{{item.uid}}</th>
                <th>{{item.pid}}</th>
                <th>{{item.ppid}}</th>
                <th>{{item.stime}}</th>
                <th>{{item.time}}</th>
                <th>{{item.cmd}}</th>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="ui segments">
        <div class="ui red segment">
            <p>alarms</p>
        </div>
        <table class="ui attached selectable celled table">
            <thead>
            <tr>
                <th>id</th>
                <th>when</th>
                <th>history</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in alarms">
                <th>{{item.id}}</th>
                <th>{{item.when}}</th>
                <th>
                    type: {{item.history[0].type}} , when: {{item.history[0].when}}<br>
                    type: {{item.history[1].type}} , when: {{item.history[1].when}}<br>
                </th>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="chart2" style="width: 100%;height:800px;margin-top: 40px;"></div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            messages: [],
            alarms: [],
            processes: [],
            calls: []
        },
        methods: {},
        created() {
            axios.get("http://3.35.21.200/extractions/inner/calls/analyses").then(res => {
                this.calls = res.data.map(item => ({
                        number: item.number,
                        name: "null",
                        incoming: item.incoming,
                        outgoing: item.outgoing,
                        duration: item.duration,
                    })
                );
            })
            axios.get("http://3.35.21.200/extractions/inner/messages").then(res => {
                this.messages = res.data
            })
            axios.get("http://3.35.21.200/extractions/adb/processes").then(res => {
                this.processes=res.data
                let myChart = echarts.init(document.getElementById('chart1'));

                let xAxisData=[]
                let seriesData=[]
                for (const item of res.data) {
                    if (xAxisData.indexOf(item.stime) === -1) {
                        xAxisData.push(item.stime);
                    }
                    seriesData.push(getSeconds(item.time))
                }
                let option = {
                    color:["#2f89cf"],
                    title: {
                        text: 'process'
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer:{
                            // type: "line"
                            type: "shadow"
                        }
                    },
                    legend: {
                        data:['time']
                    },
                    xAxis: {
                        data: xAxisData,
                        axisLabel:{
                            color: "rgb(119,3,244)",
                            fontSize: "16"
                        },
                        axisLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        splitLine: {
                            lineStyle:{
                                color:"rgb(119,3,244)"
                            }
                        },
                        axisLabel:{
                            //函数模板
                            formatter:function (value, index) {
                                return formatSeconds(value);
                            }
                        }
                    },
                    series: [{
                        name: 'time',
                        type: 'bar',
                        barWidth: "30%",
                        data: seriesData,
                        itemStyle:{
                            borderRadius:15,
                        }
                    }]
                };
                option.tooltip.formatter = function(data) {
                    return data[0].name + '<br/>' +data[0].seriesName+formatSeconds(data[0].value);
                }
                myChart.setOption(option);
            })
            axios.get("http://3.35.21.200/extractions/adb/alarms").then(res => {
                this.alarms=res.data
            })
            axios.get("http://3.35.21.200/extractions/inner/apps/analyses").then(res => {
                let myChart = echarts.init(document.getElementById('chart2'));

                let xAxisData=[]
                let seriesData=[]
                for (let data of res.data) {
                    xAxisData.push(data.foreground_time);
                    if (seriesData.indexOf(data.wifi_usage)) {
                        seriesData.push(data.wifi_usage);
                    }
                }

                let option = {
                    color:["#2f89cf"],
                    title: {
                        text: 'app'
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer:{
                            // type: "line"
                            type: "shadow"
                        }
                    },
                    legend: {
                        data:['usage']
                    },
                    xAxis: {
                        data: xAxisData,
                        axisLabel:{
                            color: "rgb(119,3,244)",
                            fontSize: "16"
                        },
                        axisLine:{
                            show:false
                        }
                    },
                    yAxis: {
                        splitLine: {
                            lineStyle:{
                                color:"rgb(119,3,244)"
                            }
                        },
                        axisLabel:{
                            //函数模板
                            // formatter:function (value, index) {
                            //     return formatSeconds(value);
                            // }
                        }
                    },
                    series: [{
                        name: 'usage',
                        type: 'bar',
                        barWidth: "30%",
                        data: seriesData,
                        itemStyle:{
                            borderRadius:15,
                        }
                    }]
                };
                option.tooltip.formatter = function(data) {
                    let name=''
                    for (let item of res.data) {
                        if (item.foreground_time === parseInt(data[0].name) && item.wifi_usage === parseInt(data[0].value)) {
                            name=item.name
                            break
                        }
                    }
                    return 'name:' +name + '<br/>'+
                        'foreground_time:' +data[0].name + '<br/>' +data[0].seriesName+':'+data[0].value;
                }
                myChart.setOption(option);
            })
        }
    })

    function getSeconds(time) {
        let split = time.split(":");
        let arr=split.map((v,i)=>{
            return parseInt(v)
        })
        return arr[0]*60*60+arr[1]*60+arr[2]
    }
    /**
     * 格式化秒
     * @param value 总秒数
     * @returns {string} result 格式化后的字符串
     */
    function formatSeconds(value) {
        var theTime = parseInt(value);// 需要转换的时间秒
        var theTime1 = 0;// 分
        var theTime2 = 0;// 小时
        var theTime3 = 0;// 天
        if(theTime > 60) {
            theTime1 = parseInt(theTime/60);
            theTime = parseInt(theTime%60);
            if(theTime1 > 60) {
                theTime2 = parseInt(theTime1/60);
                theTime1 = parseInt(theTime1%60);
                if(theTime2 > 24){
                    //大于24小时
                    theTime3 = parseInt(theTime2/24);
                    theTime2 = parseInt(theTime2%24);
                }
            }
        }
        return '00:'+addZero(theTime1)+":"+addZero(theTime);
    }
    function addZero(obj) {
        if(obj<10) return "0" + obj;
        else return obj;
    }

</script>
</body>
</html>