|
|
@@ -0,0 +1,438 @@
|
|
|
+<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>
|