首页complete

src/components/WifiSign.vue

@@ -54,6 +54,7 @@
                     },
                     axisLine: {
                         color: "#04E3FD",
+                        // onZero:  false
                     },
                     yAxis: {
                         // name : '单位: dB',
@@ -72,10 +73,13 @@
                         axisLabel: {
                             show: true,
                             interval: 'auto',
-                            formatter: '- {value} db'
+                            formatter: function (val) {
+                                return  val - 150
+                            }
                         },
                     },
                     xAxis: {
+                        // offset:-120,
                         splitLine: {
                             lineStyle: {
                                 // 使用深浅的间隔色
@@ -88,6 +92,11 @@
                                 width: 1,//这里是为了突出显示加上的
                             }
                         }
+                    },
+                    tooltip:{
+                        formatter: function (val) {
+                            return   val[0].data - 150
+                        }
                     }
                 }
             }
@@ -101,7 +110,7 @@
                 } else {
                     val.Rs.forEach(function (item) {
                         item.X = "频道" + item.X;
-                        item.Y = 180 +  item.Y;
+                        item.Y =  150 +  item.Y;
                     });
                     that.chartData.rows = val.Rs;
                 }

src/components/signMap.vue

@@ -93,7 +93,6 @@
         props: ['signList'],
         watch: {
             signList: function (val) {
-                // console.log(val);
                 this.scan = val.Rs.Data;
                 this.XMax = val.Rs.XMax;
                 this.YMax = val.Rs.YMax;

src/router/index.js

@@ -169,6 +169,13 @@ const routes = [
                 meta: {
                     title: "无线信号统计",
                 }
+            },{
+                path: '/wirelessStatistics',
+                name: 'wirelessStatistics',
+                component: () => import('@/views/wirelessStatistics.vue'),
+                meta: {
+                    title: "无线信号统计",
+                }
             },{
                 path: '/addTactics',
                 name: 'addTactics',
@@ -176,6 +183,13 @@ const routes = [
                 meta: {
                     title: "新增策略",
                 }
+            },{
+                path: '/setting',
+                name: 'setting',
+                component: () => import('@/views/Setting.vue'),
+                meta: {
+                    title: "系统设定",
+                }
             },
         ]
     }, {

src/views/Main.vue

@@ -269,9 +269,17 @@
                 MonitorArea(postdata).then(res => {
                     let json = res;
                     if (json.Code == 0) {
-                        this.signList = json;
+                        if(!json.Rs.Data) {
+                            return false
+                        }else{
+                            this.signList = json;
+                        }
                     } else {
-                        this.signList = {};
+                        this.signList = {
+                            Rs:{
+                                Data:[]
+                            }
+                        };
                         that.$message.error(json.Memo);
                     }
                 })

src/views/Setting.vue

@@ -1,9 +1,5 @@
 <template>
     <div class="pages">
-        <div class="image-border image-border1"></div>
-        <div class="image-border image-border2"></div>
-        <div class="image-border image-border3"></div>
-        <div class="image-border image-border4"></div>
         <div class="tabs">
             <ul>
                 <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
@@ -13,22 +9,71 @@
         </div>
         <div class="content">
             <ul>
-<!--                <li>-->
-<!--                    <em>报警声音</em>-->
-<!--                    <el-switch-->
-<!--                            v-model="setting.sound"-->
-<!--                            active-color="#6DC1FF"-->
-<!--                            inactive-color="#DCDFE6">-->
-<!--                    </el-switch>-->
-<!--                </li>-->
                 <li>
-                    <em>设备固件自动升级</em>
+                    <em>是否启用信号录制</em>
                     <el-switch
                             v-model="setting.update"
                             active-color="#6DC1FF"
                             inactive-color="#DCDFE6">
                     </el-switch>
                 </li>
+                <li>
+                    <em>是否启用回放</em>
+                    <el-switch
+                            v-model="setting.update"
+                            active-color="#6DC1FF"
+                            inactive-color="#DCDFE6">
+                    </el-switch>
+                </li>
+                <li>
+                    <em>是否启用下载</em>
+                    <el-switch
+                            v-model="setting.update"
+                            active-color="#6DC1FF"
+                            inactive-color="#DCDFE6">
+                    </el-switch>
+                </li>
+                <li>
+                    <em>扫描策略数量上限</em>
+                    <el-input v-model="setting.max" placeholder="" type="number"></el-input>
+                </li>
+                <li>
+                    <em>扫描任务最大时长</em>
+                    <el-input v-model="setting.max" placeholder="" type="number"></el-input>
+                </li>
+                <li>
+                    <em>信号录制文件最大容量</em>
+                    <el-select v-model="setting.value" placeholder="请选择">
+                        <el-option
+                                v-for="item in setting.options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                        </el-option>
+                    </el-select>
+                </li>
+                <li>
+                    <em>归档策略</em>
+                    <el-select v-model="setting.value" placeholder="请选择">
+                        <el-option
+                                v-for="item in setting.options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                        </el-option>
+                    </el-select>
+                </li>
+                <li>
+                    <em>归档数据保留期限</em>
+                    <el-select v-model="setting.value" placeholder="请选择">
+                        <el-option
+                                v-for="item in setting.options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                        </el-option>
+                    </el-select>
+                </li>
             </ul>
         </div>
     </div>
@@ -38,16 +83,31 @@
     export default {
         data() {
             return {
-                tabIndex: 2,
+                tabIndex: 0,
                 tabs: [
-                    {name: '固件管理', url: 'hardware'},
-                    //{name: '警务通管理', url: 'police'},
-                    {name: '密码修改', url: 'pwd'},
                     {name: '系统设置', url: 'setting'},
                 ],
-                setting:{
-                  sound:true,
-                  update:false,
+                setting: {
+                    sound: true,
+                    update: false,
+                    max:10,
+                    value:1,
+                    options: [{
+                        value: '选项1',
+                        label: '黄金糕'
+                    }, {
+                        value: '选项2',
+                        label: '双皮奶'
+                    }, {
+                        value: '选项3',
+                        label: '蚵仔煎'
+                    }, {
+                        value: '选项4',
+                        label: '龙须面'
+                    }, {
+                        value: '选项5',
+                        label: '北京烤鸭'
+                    }],
                 },
             }
         },
@@ -66,6 +126,7 @@
     .tabs ul {
         width: 558px;
     }
+
     .pages {
         width: 96%;
         min-height: 600px;
@@ -73,67 +134,67 @@
         display: block;
         margin-left: 20px;
     }
+
     .content {
+        position: absolute;
+        top: 60px;
+        left: 30px;
+        right: 30px;
+        bottom: 60px;
+        overflow: hidden;
+        display: block;
+        margin: 0 auto;
+        border: 1px solid rgba(0, 147, 254, 0.24);
+        background: rgba(0, 130, 255, 0.05);
+    }
+
+    .content ul {
         width: 100%;
-        height: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
+        padding: 0;
+        list-style: none;
+        padding-top: 30px;
     }
+
     .content li {
         width: 100%;
         overflow: hidden;
         display: block;
         margin: 0 auto;
-        background: rgba(27,86,200,0.14);
-        color:#6DC1FF;
+        background: rgba(27, 86, 200, 0.14);
+        color: #6DC1FF;
         font-size: 16px;
         height: 60px;
         line-height: 60px;
         padding-left: 37px;
         margin-bottom: 5px;
     }
+
     .content li em {
+        width: 140px;
         float: left;
+        text-align: right;
         font-style: normal;
         margin-right: 27px;
     }
+
     .content li .el-switch {
         float: left;
         margin-top: 20px;
     }
-
-    .image-border {
-        position: absolute;
-        width: 20px;
-        height: 20px;
-    }
-
-    .image-border1 {
-        top: 0px;
-        left: 25px;
-        border-left: 2px solid #6DC1FF;
-        border-top: 2px solid #6DC1FF;
-    }
-
-    .image-border2 {
-        top: 0;
-        right: 12px;
-        border-right: 2px solid #6DC1FF;
-        border-top: 2px solid #6DC1FF;
+    /deep/ .el-input {
+        width: 120px;
+        float: left;
+        color: #fff;
     }
-
-    .image-border3 {
-        bottom: 0;
-        left: 25px;
-        border-bottom: 2px solid #6DC1FF;
-        border-left: 2px solid #6DC1FF;
+    /deep/ .el-input__inner {
+        background-color: inherit;
+        border: none;
+        color: #fff;
     }
-
-    .image-border4 {
-        bottom: 0;
-        right: 12px;
-        border-right: 2px solid #6DC1FF;
-        border-bottom: 2px solid #6DC1FF;
+    /deep/ .el-select {
+        float: left;
     }
 </style>

src/views/statistics.vue

@@ -1,13 +1,233 @@
 <template>
+    <div class="content">
+        <div class="tabs">
+            <ul>
+                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
+                    {{tab.name}}
+                </li>
+            </ul>
+        </div>
+        <div class="panel">
+            <div class="panel-body">
+                <div class=" panel_control">
+                    <div class="pline">
+                        <em>统计时间</em>
+                        <el-date-picker
+                                v-model="panel.time1"
+                                type="daterange"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期">
+                        </el-date-picker>
+                    </div>
+                    <div class="pline">
+                        <em>安全等级:</em>
+                        <el-select v-model="panel.level">
+                            <el-option
+                                    v-for="item in panel.levelOptions"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                    <div class="pline">
+                        <el-button size="medium" type="primary" @click="query">查询</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
+        <div class="histogram">
+            <ve-Line :data="chartData" width="100%" height="700px" :loading="loading" :legend-visible="false"
+                          :extend="chartExtend"></ve-Line>
+            <div class="null_state" v-if="chartData.rows == ''">
+                暂无
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import Global from '../Global.js'
+    import {
+        DetectorList,
+    } from '../api/getApiRes.js'
+
+    let qs = require('qs');
     export default {
-        name: "statistics"
+        data() {
+            return {
+                tabIndex: 0,
+                tabs: [
+                    {name: '监测记录统计', url: 'statistics'},
+                    {name: '无线信号统计', url: 'wirelessStatistics'},
+                ],
+                // panel 配置项目
+                panel: {
+                    usercode: '',
+                    username: '',
+                    compname: '',
+                    keyword: '',
+                    USERCODE: '',
+                    taskstatus: 99,
+                    level: 0,
+                    regionid: 0,
+                    regionid2: '',
+                    regionidOptions: [],
+                    regionidOptions2: [],
+                    levelOptions: [
+                        {value: 0, label: '全部'},
+                        {value: 1, label: '安全'},
+                        {value: 2, label: '可疑'},
+                        {value: 3, label: '危险'},
+                    ],
+                    time1: globalBt3(2),
+                },
+                days: 13,
+                loading: false,
+                chartData: {
+                    columns: ['X', 'Y'],
+                    rows: []
+                },
+                chartExtend: {
+                    color: ['#72FF99'],
+                    series: {
+                        barMaxWidth: 10,
+                        // 区域填充样式
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
+                                    },
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        },
+                    },
+                    axisLine: {
+                        color: "#04E3FD",
+                        // onZero:  false
+                    },
+                    yAxis: {
+                        // name : '单位: dB',
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#08255B']
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#04E3FD',
+                                width: 1,//这里是为了突出显示加上的
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            interval: 'auto',
+                            formatter: function (val) {
+                                return  val
+                            }
+                        },
+                    },
+                    xAxis: {
+                        // offset:-120,
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#04E3FD']
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#04E3FD',
+                                width: 1,//这里是为了突出显示加上的
+                            }
+                        }
+                    },
+                    tooltip:{
+                        formatter: function (val) {
+                            return   val[0].data
+                        }
+                    }
+                }
+            };
+        },
+        mounted() {
+            this.getTableQuery();
+            // test
+            this.chartData.rows = [
+                {X:"01-01",Y:200},
+                {X:"01-02",Y:300},
+                {X:"01-03",Y:400},
+                {X:"01-04",Y:200},
+                {X:"01-05",Y:500},
+                {X:"01-06",Y:210},
+                {X:"01-07",Y:600},
+            ]
+        },
+        methods:{
+            // 查询按钮
+            query() {
+                this.getTableQuery();
+                this.$message.success('查询完毕');
+            },
+            // 页面数据查询
+            getTableQuery() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                    mac: this.panel.mac,//
+                    regionId: that.panel.regionId,//
+                    name: that.panel.tagname,//标签名
+                    comid: 1,//
+                    start: 1,//
+                    tableMax: 9999,//
+                };
+                let postdata = qs.stringify(param);
+                DetectorList(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+
+                    } else {
+                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
+                    }
+                })
+            },
+            // 跳转tab页面
+            goTab(url) {
+                this.$router.push({path: url});
+            },
+        }
     }
 </script>
 
 <style scoped>
+    @import "../assets/css/panel.css";
+    .tabs ul {
+        width: 368px;
+        float: left;
+    }
+    .tabs li {
+        width: 168px;
+        float: left;
+    }
+    table span {
+        cursor: pointer;
+    }
 
 </style>

src/views/wirelessStatistics.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="content">
+        <div class="tabs">
+            <ul>
+                <li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
+                    {{tab.name}}
+                </li>
+            </ul>
+        </div>
+        <div class="panel">
+            <div class="panel-body">
+                <div class=" panel_control">
+                    <div class="pline">
+                        <em>统计时间</em>
+                        <el-date-picker
+                                v-model="panel.time1"
+                                type="daterange"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期">
+                        </el-date-picker>
+                    </div>
+                    <div class="pline">
+                        <em>安全等级:</em>
+                        <el-select v-model="panel.level">
+                            <el-option
+                                    v-for="item in panel.levelOptions"
+                                    :key="item.value"
+                                    :label="item.label"
+                                    :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                    <div class="pline">
+                        <el-button size="medium" type="primary" @click="query">查询</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="histogram">
+            <ve-Line :data="chartData" width="100%" height="700px" :loading="loading" :legend-visible="false"
+                          :extend="chartExtend"></ve-Line>
+            <div class="null_state" v-if="chartData.rows == ''">
+                暂无
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Global from '../Global.js'
+    import {
+        DetectorList,
+    } from '../api/getApiRes.js'
+
+    let qs = require('qs');
+    export default {
+        data() {
+            return {
+                tabIndex: 1,
+                tabs: [
+                    {name: '监测记录统计', url: 'statistics'},
+                    {name: '无线信号统计', url: 'wirelessStatistics'},
+                ],
+                // panel 配置项目
+                panel: {
+                    usercode: '',
+                    username: '',
+                    compname: '',
+                    keyword: '',
+                    USERCODE: '',
+                    taskstatus: 99,
+                    level: 0,
+                    regionid: 0,
+                    regionid2: '',
+                    regionidOptions: [],
+                    regionidOptions2: [],
+                    levelOptions: [
+                        {value: 0, label: '全部'},
+                        {value: 1, label: '安全'},
+                        {value: 2, label: '可疑'},
+                        {value: 3, label: '危险'},
+                    ],
+                    time1: globalBt3(2),
+                },
+                days: 13,
+                loading: false,
+                chartData: {
+                    columns: ['X', 'Y'],
+                    rows: []
+                },
+                chartExtend: {
+                    color: ['#72FF99'],
+                    series: {
+                        barMaxWidth: 10,
+                        // 区域填充样式
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgba(0,255,212,0.15)', // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgba(0,255,212,0.15)' // 100% 处的颜色
+                                    },
+                                ],
+                                global: false // 缺省为 false
+                            }
+                        },
+                    },
+                    axisLine: {
+                        color: "#04E3FD",
+                        // onZero:  false
+                    },
+                    yAxis: {
+                        // name : '单位: dB',
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#08255B']
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#04E3FD',
+                                width: 1,//这里是为了突出显示加上的
+                            }
+                        },
+                        axisLabel: {
+                            show: true,
+                            interval: 'auto',
+                            formatter: function (val) {
+                                return  val
+                            }
+                        },
+                    },
+                    xAxis: {
+                        // offset:-120,
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                color: ['#04E3FD']
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#04E3FD',
+                                width: 1,//这里是为了突出显示加上的
+                            }
+                        }
+                    },
+                    tooltip:{
+                        formatter: function (val) {
+                            return   val[0].data
+                        }
+                    }
+                }
+            };
+        },
+        mounted() {
+            this.getTableQuery();
+            // test
+            this.chartData.rows = [
+                {X:"01-01",Y:200},
+                {X:"01-02",Y:300},
+                {X:"01-03",Y:400},
+                {X:"01-04",Y:200},
+                {X:"01-05",Y:500},
+                {X:"01-06",Y:210},
+                {X:"01-07",Y:600},
+            ]
+        },
+        methods:{
+            // 查询按钮
+            query() {
+                this.getTableQuery();
+                this.$message.success('查询完毕');
+            },
+            // 页面数据查询
+            getTableQuery() {
+                let that = this;
+                that.loading = true;
+                let param = {
+                    token: localStorage.token,
+                    mac: this.panel.mac,//
+                    regionId: that.panel.regionId,//
+                    name: that.panel.tagname,//标签名
+                    comid: 1,//
+                    start: 1,//
+                    tableMax: 9999,//
+                };
+                let postdata = qs.stringify(param);
+                DetectorList(postdata).then(res => {
+                    let json = res;
+                    if (json.Code == 0) {
+                        that.loading = false;
+
+                    } else {
+                        that.$message.error(json.Memo + '，错误代码：' + json.Code);
+                    }
+                })
+            },
+            // 跳转tab页面
+            goTab(url) {
+                this.$router.push({path: url});
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    @import "../assets/css/panel.css";
+    .tabs ul {
+        width: 368px;
+        float: left;
+    }
+    .tabs li {
+        width: 168px;
+        float: left;
+    }
+    table span {
+        cursor: pointer;
+    }
+
+</style>