朔黄转储设备相关页面更新

hanbaoshan

2021-02-01 0e0944361a66439f7be48567c2fe6c482dd37a5c

朔黄转储设备相关页面更新

 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'
})

 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>


 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 //文件夹map
      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);

 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>

 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>