signal_web/src/views/Hardware.vue

<template>
    <div>
        <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="upload">
            <h5>固件上传</h5>
            <div class="uploadContainer">
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-change="handleChange"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <em>
                    <i></i>
                    添加备注
                </em>
            </div>
        </div>
        <div class="hardwareList">
            <h5>设备列表</h5>
        <div class="panel">
            <div class="panel-body">
                <div class=" panel_control">
                    <el-row :gutter="20">
                        <el-col :span="4">
                            <em>所属区域:</em>
                            <el-select v-model="panel.taskstatus">
                                <el-option
                                        v-for="item in panel.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4">
                            <em>固件版本:</em>
                            <el-input v-model="panel.keyword" placeholder="请输入固件版本"></el-input>
                        </el-col>

                        <el-col :span="4">
                            <el-button size="small" type="primary" @click="query">查询</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <div class="contorl">
            <el-button size="small" type="primary" @click="addList">开始更新</el-button>
            <div class="version">
                <em>NEW</em>
                <span>最新固件版本：v.2.0.1版本固件</span>
            </div>
            <el-button size="small" type="primary" @click="changeList">修改</el-button>
        </div>
        <el-table
                :data="tableData"
                class=""
                stripe
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="设备ID"
            >
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="检测时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="探测区域"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="信道"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="信号频段">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="数据量">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="信号强度">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作记录">
                <template slot-scope="scope">
                    <span @click="goRecord(scope.row)">探测记录</span>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-pagination
                background
                :total="pageination.total"
                :page-size="pageination.pageItem"
                @current-change="pageChange"
        ></el-pagination>

        <dialog_referrer_list
                :show="dialog_state"
                :title="dialog_title"
                :large="true"
                @dialog_cancel="dialog_cancel"
                @dialog_ok="dialog_ok"
        >
            <div class="dialogContent">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <label>
                            设备ID
                        </label>
                        <el-input v-model="dialog.name"></el-input>
                    </el-col>
                    <el-col :span="10">
                        <label>
                            MAC地址
                        </label>
                        <el-input v-model="dialog.name"></el-input>
                    </el-col>
                    <el-col :span="10">
                        <label>
                            标签名
                        </label>
                        <el-input v-model="dialog.name"></el-input>
                    </el-col>
                    <el-col :span="10">
                        <label>
                            设备所属楼层
                        </label>
                        <el-select v-model="dialog.region" placeholder="请选择所属楼层">
                            <el-option
                                    v-for="item in panel.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="20">
                        <label>
                            备注
                        </label>
                        <el-input type="textarea" v-model="dialog.memo"></el-input>
                    </el-col>
                </el-row>
            </div>
        </dialog_referrer_list>
    </div>
    </div>
</template>

<script>
    import Global from '../Global.js'
    import dialog_referrer_list from '../components/dialog_referrer_list'

    export default {
        data() {
            return {
                // dialog
                dialog_state: false,
                dialog_title: '添加设备',
                dialog_type: '',//类型，1是添加，2是修改
                tabIndex: 0,
                tabs: [
                    {name: '固件管理', url: 'hardware'},
                    {name: '警务通管理', url: 'police'},
                    {name: '密码修改', url: 'pwd'},
                    {name: '系统设置', url: 'setting'},
                ],
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                // panel 配置项目
                panel: {
                    usercode: '',
                    username: '',
                    compname: '',
                    keyword: '',
                    USERCODE: '',
                    taskstatus: 99,
                    options: [
                        {value: 99, label: '全部'},
                        {value: 1, label: '进行中'},
                        {value: 2, label: '已完成'},
                    ],
                    time1: globalBt2(),
                },
                pageination: {
                    pageItem: 10,
                    pageoptions: pageOptions(),
                    total: 10,
                    pageIndex: 1,
                },
                dialog: {
                    name: 10,
                    region: 10,
                    memo: '',
                },
                multipleSelection: [],
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        mounted() {
            this.getTableQuery();
        },
        methods: {
            // 跳转tab页面
            goTab(url) {
                this.$router.push({path: url});
            },
            // 查询按钮
            query() {
                this.getTableQuery();
                this.$message.success('查询完毕');
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            },
            // 页面数据查询
            getTableQuery() {
                // let that = this;
                // that.loading = true;
                // let url = headapi + '?ctl=ajax&mod=dial&act=taskListQuery';//获取
                // let param = {
                //     'taskstatus': that.panel.taskstatus,
                //     'bt': globaltime2String(that.panel.time1[0]),
                //     'et': globaltime2String(that.panel.time1[1]),
                //     'KEYWORD': that.panel.keyword,
                //     'USERCODE': that.panel.USERCODE,
                // };
                // let JSON = '';
                // let postdata = qs.stringify(param);
                // axios.post(url, postdata)
                //     .then(function (response) {
                //         JSON = response.data;
                //         that.loading = false;
                //         that.allTableData = JSON.rs;
                //         that.recordsTotal = JSON.rs.length;
                //         // 设置分页数据
                //         that.setPaginations();
                //     })
                //     .catch(function (error) {
                //         console.log(error);
                //     });
            },
            // 设置分页数据
            setPaginations() {
                // 分页属性
                let that = this;
                that.pageination.total = that.recordsTotal;
                // 默认分页
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
            },
            // 每页显示数量
            handleSizeChange() {
                let that = this;
                that.tableData = that.allTableData.filter((item, index) => {
                    return index < that.pageination.pageItem;
                });
                that.draw = that.pageination.pageItem;
                that.getTableQuery();
            },
            // 翻页
            pageChange(pageIndex) {
                let that = this;
                // 获取当前页
                let index = that.pageination.pageItem * (pageIndex - 1);
                // 数据总数
                let nums = that.pageination.pageItem * pageIndex;
                // 容器
                let tables = [];
                for (var i = index; i < nums; i++) {
                    if (that.allTableData[i]) {
                        tables.push(that.allTableData[i])
                    }
                    this.tableData = tables;
                }
                that.start = index * that.draw;
                that.getTableQuery();
            },
            // 自动排序
            sortChange(params) {
                console.log(params)
            },
            // 过滤时间
            filterFmtDate(value, row, column) {
                let that = this;
                return globalfmtDate(column, 11);
            },
            addList() {
                this.dialog_state = true;
                this.dialog_title = '添加设备';
            },
            delList() {
                // checkNum
                if (!this.multipleSelection.length) {
                    this.$message({
                        showClose: true,
                        message: '错了哦，需要先选中至少一条记录',
                        type: 'error'
                    });
                    return false
                }
                // todo delEquip
            },
            changeList() {
                // checkNum
                if (!this.multipleSelection.length) {
                    this.$message({
                        showClose: true,
                        message: '错了哦，需要先选中一条记录',
                        type: 'error'
                    });
                    return false
                }
                if (this.multipleSelection.length > 1) {
                    this.$message({
                        showClose: true,
                        message: '错了哦，只能选中一条记录',
                        type: 'error'
                    });
                    return false
                }
            },
            // 探测记录
            goRecord(row) {
                console.log(row);
                this.$router.push({path: '/record', query: {row: row}});
            },
            dialog_cancel() {
                let that = this;
                that.dialog_state = false;
            },
            dialog_ok() {
                let that = this;
                let dialog_type = that.dialog_type;
                let name = that.field_name;
                let id = that.field_id;
            },
        },
        components: {
            dialog_referrer_list
        }
    }
</script>

<style scoped>
    @import "../assets/css/panel.css";
    @import "../assets/css/dialog.css";

    .tabs ul {
        width: 800px;
    }

    table span {
        cursor: pointer;
    }
    .upload {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
    .upload h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #6DC1FF;
        font-size: 18px;
        text-align: left;
        font-weight: normal;
    }
    .uploadContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: rgba(27,86,200,0.14);
        border: 1px solid #005EA2;
        border-radius: 0;
        margin-top: 11px;
        padding: 10px 0;
    }
    /deep/ .el-upload {
        float: left;
        margin-left: 27px;
    }
    /deep/ .el-upload-list {
        width: 200px;
        float: left;
    }
</style>