From 0e0944361a66439f7be48567c2fe6c482dd37a5c Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 01 二月 2021 13:57:26 +0800
Subject: [PATCH] 朔黄转储设备相关页面更新
---
src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue | 157 ++++++++++++++++++++--
src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue | 56 ++++++-
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 133 ++++++++++++++++++
src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 39 +++-
src/api/shuohuang.ts | 26 ++-
5 files changed, 361 insertions(+), 50 deletions(-)
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
index 8c60ae4..ac54af1 100644
--- a/src/api/shuohuang.ts
+++ b/src/api/shuohuang.ts
@@ -126,10 +126,22 @@
data
})
-export const uploadFile = (data:any) =>{
- request({
- url:'/data/api-c/user/uploadFile',
- method:'post',
- data
- })
-}
+export const getTransferRecord = (query:any) => request({
+ url:'/data/api-c/saverecord/getlst',
+ method: 'get',
+ params: query
+})
+
+export const getTransferStatusList = () => request({
+ url:'/data/api-c/saverecord/getStatusList',
+ method: 'get'
+})
+export const addDevice = (data:any)=>request({
+ url:'/data/api-c/device/add',
+ method: 'post',
+ data
+})
+export const getDeviceList = ()=>request({
+ url:'/data/api-c/device/getlst',
+ method: 'get'
+})
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
index 05e7537..6128ecf 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/guideIndex.vue
@@ -124,8 +124,11 @@
</el-select>
</div>
<div class="rank-list">
- <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id" >
- <span class="rank-index" :class="{'first':index==0,'second':index==1,'third':index==2}">{{index+1}}</span>
+ <div class="rank-item" v-for="(rankItem,index) in rankList" :key="rankItem.id">
+ <span
+ class="rank-index"
+ :class="{'first':index==0,'second':index==1,'third':index==2}"
+ >{{index+1}}</span>
<span class="name">{{rankItem.name}}</span>
<span class="val">{{rankItem.val}}</span>
</div>
@@ -182,7 +185,11 @@
<time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
</div>
<div class="statics-content">
- <el-radio-group v-model="irregularEventType" @change="checkIrregularEventType" size="small">
+ <el-radio-group
+ v-model="irregularEventType"
+ @change="checkIrregularEventType"
+ size="small"
+ >
<el-radio-button label="fhdd">闃叉姢鍦版</el-radio-button>
<el-radio-button label="jcz">杩涘嚭绔�</el-radio-button>
<el-radio-button label="gfx">杩囧垎鐩�</el-radio-button>
@@ -327,11 +334,13 @@
</div>
</div>
</div>
+ <JsTree :node="jsTreeNodes"></JsTree>
</div>
</div>
</template>
<script>
+import JsTree from '@/components/treeMenu/index';
import timeShortcut from './timeShortcut';
import Bar from './charts/bar';
import Pie from './charts/pie';
@@ -339,13 +348,41 @@
import SwipeTabs from './swipeTabs';
import DatasetChart from './charts/dataset';
export default {
- components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
+ components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart, JsTree },
+ mounted () {
+ let tempArr = [{
+ "text": "Same but with checkboxes",
+ "children": [
+ {
+ "text": "initially selected",
+ "selected": true
+ }
+ ]
+ }];
+ for (var i = 0; i < 20; i++) {
+ tempArr[0].children.push({
+ "text": "initially open",
+ "icon": "fa fa-folder icon-state-default",
+ "opened": true,
+ "children": [
+ {
+ "text": "Another node"
+ }
+ ]
+ })
+ }
+ tempArr.forEach(node=>{
+ //if(node.children.length)
+
+ })
+ this.jsTreeNodes = tempArr
+ },
data () {
return {
//actCardTab: 'dataStatistic',
actCardTab: 'taskStatistic',
hidDangerTab: 'hidDanderStatistic',
- optionsOfWeekAnalyze:{
+ optionsOfWeekAnalyze: {
animation: false,
grid: {
top: 0,
@@ -720,14 +757,15 @@
}
]
},
- taskAnalyzeCaseTableData: []
+ taskAnalyzeCaseTableData: [],
+ jsTreeNodes: [],
}
},
methods: {
- checkTabInSwipe(tab){
+ checkTabInSwipe (tab) {
debugger
},
- checkIrregularEventType(type){
+ checkIrregularEventType (type) {
debugger
},
taskAnalyzeCase (time) {
@@ -758,7 +796,7 @@
}
},
-
+
}
</script>
diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
index fb52efc..2111a3e 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue
@@ -33,11 +33,12 @@
<el-option
v-for="item in genders"
:key="item.id"
- :value="item.id"
+ :value="item.name=='鍏ㄩ儴'?'':item.name"
:label="item.name"
>{{item.name}}</el-option>
</el-select>
<el-button type="primary" size="small" @click="renderMemberTable">鏌ヨ</el-button>
+ <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button>
</div>
<div class="table-area">
<div class="actions">
@@ -157,7 +158,7 @@
<el-form-item label="韬唤璇佸彿:">
<el-input v-model="memberEditForm.OwnerID" size="mini"></el-input>
</el-form-item>
- <el-form-item label="鎵嬫満鍙�:">
+ <el-form-item label="鎵嬫満鍙�:" prop="Tel">
<el-input v-model="memberEditForm.Tel" size="mini"></el-input>
</el-form-item>
<div class="btns">
@@ -232,7 +233,6 @@
<script>
import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile } from '@/api/shuohuang'
-
export default {
data () {
return {
@@ -247,7 +247,7 @@
menuLeft: 0,
keyword: '',
gender: '',
- genders: [{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }],
+ genders: [{id:'g3',name:'鍏ㄩ儴'},{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }],
tableData: [],
multipleTableSelection: [],
PageIndex: 1,
@@ -265,7 +265,8 @@
memberEditFormRule: {
Name: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
UserName: [{ required: true, message: '璇疯緭鍏ュ鍚�', trigger: 'change' }],
- Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }]
+ Sex: [{ required: true, message: '璇烽�夋嫨鎬у埆', trigger: 'change' }],
+ Tel: [{ validator: this.isPhone, trigger: 'change' }],
},
memberPicUrl: '',
showDemo: false,
@@ -279,6 +280,20 @@
},
methods: {
+ resetFilter(){
+ this.keyword = '';
+ this.gender = '';
+ this.renderMemberTable();
+ },
+ isPhone (rule, value, callback) {
+ if (value.trim()) {
+ var pattern = /^1[345789]\d{9}$/
+ if (pattern.test(value)) {
+ return callback()
+ }
+ return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒'))
+ }
+ },
nodeContextMenu (e, data, node, comp) {
this.showMenu = true;
this.menuTop = e.pageY;
@@ -313,7 +328,7 @@
memberSave () {
this.$refs['memberForm'].validate((valid) => {
if (valid) {
- let params = Object.assign({DeptID:this.curLeftTreeNode.id},this.memberEditForm);
+ let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm);
if (this.memberEditForm.ID) {
updateMemberInfo(params).then(res => {
if (res.success) {
@@ -379,7 +394,7 @@
let _this = this;
let params = {
DeptID: this.deptId,
- keyword: this.keyword,
+ Keyword: this.keyword,
Sex: this.gender,
PageIndex: this.PageIndex,
PageSize: this.PageSize
@@ -398,14 +413,14 @@
importDirectory () {
//this.$refs['directoryInput'].files //鏂囦欢澶筸ap
let formData = new FormData;
- for(var file in this.$refs['directoryInput'].files){
+ for (var file in this.$refs['directoryInput'].files) {
formData.append('files', this.$refs['directoryInput'].files[file])
}
//formData.append('files', this.$refs['directoryInput'].files)
- uploadDirectory(formData).then(res=>{
+ uploadDirectory(formData).then(res => {
debugger
-
+
})
},
@@ -483,10 +498,10 @@
return obj
});
this.$nextTick(() => {
- if(!Object.keys(_this.curLeftTreeNode).length){
+ if (!Object.keys(_this.curLeftTreeNode).length) {
_this.curLeftTreeNode = _this.treeData[0];
_this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]);
- }else{
+ } else {
_this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode);
}
_this.checkNode(_this.curLeftTreeNode);
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 3665b38..5429e2b 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -1,6 +1,29 @@
<template>
<div class="transfer-device-manage">
+ <div class="header-with-tab">
+ <el-tabs v-model="actTab" @tab-click="checkTab" >
+ <el-tab-pane name="dev1" v-for="tab in devices" :key="tab">
+ <div slot="label" class="label-slot">
+ <span>{{tab.Name}}</span>
+ <span class="capsule" :class="{'online':tab.Status==0,'offline':tab.Status==1}">{{tab.Status==0?"鍦ㄧ嚎":"绂荤嚎"}}</span>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane name="dev2">
+ <div slot="label" class="label-slot">
+ <span>杞偍璁惧2</span>
+ <span class="capsule offline">绂荤嚎</span>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ <div class="btn-add-dev" @click="showAddDevice">
+ <i class="el-icon-circle-plus"></i>
+ <span>娣诲姞璁惧</span>
+ </div>
+ </div>
<div class="general-view">
+ <div class="indicator">
+ <el-button>璁惧閲嶅惎</el-button>
+ </div>
<div
class="indicator"
:class="{'lastOne':index==generalIndicators.length-1}"
@@ -16,12 +39,12 @@
</div>
<div class="table-area">
<div class="filter-bar flex-box">
- <div>
+ <!-- <div>
<label>璁惧鍦板潃:</label>
<div>
<el-input v-model="deviceAddr" size="small"></el-input>
</div>
- </div>
+ </div> -->
<div>
<label>璁惧鐘舵��:</label>
<div>
@@ -49,21 +72,75 @@
</el-table-column>
</el-table>
</div>
+ <el-dialog :visible="visibleOfialogAddDev">
+ <div>
+ <p slot="title">娣诲姞璁惧</p>
+ <div class="flex-box">
+ <label>璁惧鍚嶇О锛�</label>
+ <el-input v-model="Name"></el-input>
+ </div>
+ <div class="flex-box">
+ <label>璁惧IP锛�</label>
+ <el-input v-model="IP"></el-input>
+ </div>
+ <div slot="footer" class="btns">
+ <el-button type="primary" size="small" @click="toAddDevice">纭畾</el-button>
+ <el-button size="small" @click="visibleOfialogAddDev=false">鍙栨秷</el-button>
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
+import {addDevice,getDeviceList} from '@/api/shuohuang';
export default {
-
data () {
return {
+ actTab: 'dev1',
+ devices: [],
generalIndicators: [{ id: 'gz', title: '鏈夋晠闅滆澶�', val: 156 }, { id: 'zc', title: '姝ｅ父璁惧', val: 5000 }, { id: 'dx', title: '璇诲啓涓�', val: 56 }, { id: 'kx', title: '绌洪棽涓�', val: 2000 }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', val: 1000 }],
deviceAddr: '',
deviceState: '',
- tableData: []
+ tableData: [],
+ visibleOfialogAddDev: false,
+ Name:'',
+ IP:'',
}
},
+ mounted(){
+ this.findDeviceList();
+ },
methods: {
- checkSlot(row){
+ findDeviceList (){
+ getDeviceList().then(res=>{
+ debugger
+ //_this.devices =
+ })
+ },
+ toAddDevice(){
+ let _this = this;
+ let params = {
+ Name: this.Name,
+ IP: this.IP
+ }
+ addDevice(params).then(res=>{
+ if(res.success){
+ this.$notify({
+ type:'success',
+ message: res.msg
+ })
+ _this.visibleOfialogAddDev = true;
+ }
+ })
+ },
+ showAddDevice(){
+ this.visibleOfialogAddDev = true;
+
+ },
+ checkTab (tab, event) {
+
+ },
+ checkSlot (row) {
}
}
@@ -73,6 +150,51 @@
<style lang="scss">
.transfer-device-manage {
padding: 20px;
+ .el-tabs__item{
+ height: 45px;
+ line-height: 45px;
+ }
+ .el-tabs__nav-wrap::after {
+ height: 1px;
+ }
+ .header-with-tab {
+ position: relative;
+ .label-slot {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ font-weight: bold;
+ .capsule {
+ width: 42px;
+ height: 20px;
+ margin-left: 10px;
+ line-height: 20px;
+ text-align: center;
+ border-radius: 20px;
+ font-size: 12px;
+ font-weight: normal;
+ color: #fff;
+ &.online{
+ background: #00a854;
+ }
+ &.offline{
+ background: #f04134;
+ }
+ }
+ }
+ .btn-add-dev {
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ top: 10px;
+ color: #1890ff;
+ font-size: 14px;
+ i {
+ padding-right: 4px;
+ font-size: 16px;
+ }
+ }
+ }
.general-view {
display: flex;
padding: 30px;
@@ -119,6 +241,5 @@
}
}
}
-
}
</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
index 9dbc0bc..cc0bccd 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferMemo.vue
@@ -3,55 +3,177 @@
<div class="filter-bar flex-box">
<div>
<label>鎿嶄綔鏃堕棿:</label>
- <div></div>
+ <el-date-picker
+ v-model="searchTime"
+ type="datetimerange"
+ size="small"
+ :picker-options="pickerOptions"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ align="right"
+ ></el-date-picker>
</div>
<div>
<label>鎿嶄綔浜�:</label>
<div>
- <el-input v-model="operator" size="small"></el-input>
+ <el-input v-model="Operator" size="small"></el-input>
</div>
</div>
<div>
<label>杞偍鐘舵��:</label>
<div>
- <el-select v-model="transferStatus" size="small">
+ <el-select v-model="Status" size="small">
+ <el-option value="" label="鍏ㄩ儴"></el-option>
<el-option
v-for="item in allTransferStatus"
:key="item.id"
- :value="item.id"
+ :value="item.name"
:label="item.name"
></el-option>
</el-select>
</div>
</div>
<div class="btns">
- <el-button type="primary" size="small">鏌ヨ</el-button>
+ <el-button type="primary" size="small" @click="renderTable">鏌ヨ</el-button>
+ <el-button type="primary" size="small" @click="resetFilter">閲嶇疆</el-button>
</div>
</div>
<div class="table-area">
<el-table :data="tableData" fit>
- <el-table-column prop="time" label="鎿嶄綔鏃堕棿"></el-table-column>
- <el-table-column prop="operator" label="鎿嶄綔浜�"></el-table-column>
- <el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О"></el-table-column>
- <el-table-column prop="pos" label="鍗℃Ы浣嶇疆"></el-table-column>
- <el-table-column prop="transferStatus" label="杞偍鐘舵��"></el-table-column>
- <el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
- <el-table-column prop="content" label="杞偍鍐呭"></el-table-column>
+ <el-table-column prop="OperaterDate" label="鎿嶄綔鏃堕棿"></el-table-column>
+ <el-table-column prop="Operator" label="鎿嶄綔浜�"></el-table-column>
+ <el-table-column prop="tranferDevice" label="杞偍璁惧鍚嶇О">
+ <template slot-scope="scope">
+ <div>
+ 璁惧{{scope.$index}}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="SlotID" label="鍗℃Ы浣嶇疆">
+ <template slot-scope="scope">
+ <div>
+ 鎻掓Ы{{scope.row.SlotID}}
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="Status" label="杞偍鐘舵��"></el-table-column>
+ <el-table-column prop="Cover" label="鐜板満鍥剧墖"></el-table-column>
+ <el-table-column prop="Content" label="杞偍鍐呭"></el-table-column>
</el-table>
- <el-pagination background layout="prev, pager, next" :total="tableDataTotal"></el-pagination>
+ <el-pagination
+ class="pagination-under-table"
+ @size-change="handleTableSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page.sync="PageIndex"
+ :page-size="PageSize"
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
</div>
</div>
</template>
<script>
+import { getTransferStatusList,getTransferRecord } from "@/api/shuohuang"
export default {
data () {
return {
- transferStatus: '',
- operator: '',
+ pickerOptions: {
+ shortcuts: [{
+ text: '浠婂ぉ',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setHours(0, 0, 0);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '鏄ㄥぉ',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24);
+ start.setHours(0, 0, 0);
+ end.setTime(end.getTime() - 3600 * 1000 * 24);
+ end.setHours(23, 59, 59);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '杩戜笁澶�',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '杩戜竴鍛�',
+ onClick (picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ //start.setHours(0,0,0);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
+ },
+ Status: '',
+ Operator: '',
allTransferStatus: [],
tableData: [],
- tableDataTotal: 5
+ tableTotal: 0,
+ PageIndex: 1,
+ pageSizes: [8, 15, 20],
+ PageSize: 8,
+ searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
+ }
+ },
+ mounted () {
+ this.renderTable();
+ this.renderTransferStatusList();
+ },
+ methods: {
+ handleCurrentChange(){
+ this.renderTable();
+ },
+ resetFilter(){
+ this.searchTime = [];
+ this.Operator = '';
+ this.Status = '';
+ this.renderTable();
+ },
+ handleTableSizeChange (size) {
+ this.tablePageSize = size;
+ this.renderTable();
+ },
+ renderTransferStatusList(){
+ let _this = this;
+ getTransferStatusList().then(res=>{
+ _this.allTransferStatus = res.data.map((item,index)=>{
+ return {
+ id: 'sta'+index,
+ name: item
+ }
+ });
+ })
+ },
+ renderTable () {
+ let _this = this;
+ let params = {
+ Operator: this.Operator,
+ Status: this.Status,
+ PageIndex: this.PageIndex,
+ PageSize: this.PageSize,
+ StartDate: this.searchTime ? this.searchTime[0]:'',
+ EndDate: this.searchTime ? this.searchTime[1]:'',
+ };
+
+ getTransferRecord(params).then(res=>{
+ _this.tableData = res.data;
+ _this.tableTotal = res.total;
+ })
}
}
}
@@ -81,5 +203,8 @@
cursor: pointer;
}
}
+ .pagination-under-table{
+ margin-top: 20px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0