|
|
@@ -0,0 +1,553 @@
|
|
|
+<template>
|
|
|
+ <div class="detail">
|
|
|
+ <mt-header class="detail_head" fixed title="资产详情">
|
|
|
+ <router-link to="/assets" slot="left">
|
|
|
+ <mt-button icon="back"></mt-button>
|
|
|
+ </router-link>
|
|
|
+ </mt-header>
|
|
|
+ <div class="detail_body">
|
|
|
+ <div class="detailBox userInfo">
|
|
|
+ <div class="frame_title">
|
|
|
+ <span>{{detail.name}}</span>
|
|
|
+ <span>
|
|
|
+ <mt-button v-if="detail.doorStatus==0" size="small" type="primary" v-on:click.native.stop="openDoor(1)">开门</mt-button>
|
|
|
+ <span v-else style="color:red">已开门</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="frame_number">{{detail.modelNumber}}</div>
|
|
|
+ <div class="frame_label">
|
|
|
+ <span><span>机架ID：</span>{{detail.rackIp}}</span>
|
|
|
+ <span><span>温度：</span>{{detail.temp}}</span>
|
|
|
+ <span><span>湿度：</span>{{detail.hum}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detailBox">
|
|
|
+ <div class="assDel assDel_Head">
|
|
|
+ 机柜设备列表
|
|
|
+ <!-- <img v-if="power.indexOf('update_assets')>-1" v-on:click="addNo()" src="../../assets/image/add.png"> -->
|
|
|
+ </div>
|
|
|
+ <div class="assDel_List">
|
|
|
+ <div class="one_assDel isFrame" v-for="item in delList">
|
|
|
+ <mt-cell-swipe title="" :right="[
|
|
|
+ { content: '下架', style: { background: 'red', color: '#fff' }, handler: () => handle(item.id) },
|
|
|
+ ]">
|
|
|
+ <div>
|
|
|
+ <div class="new_title">
|
|
|
+ <span>{{item.deviceName}}</span>
|
|
|
+ <span>{{item.modelNo}}</span>
|
|
|
+ <span>{{item.currentState==0?'禁止':'运行'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="new_label">
|
|
|
+ <span><span>标签ID：</span>{{item.labelId}}</span>
|
|
|
+ <span><span>模块ID：</span>{{item.modelId}}</span>
|
|
|
+ <span><span>U位号：</span>{{item.ubitNum}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </mt-cell-swipe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { MessageBox } from 'mint-ui';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: this.$route.params.id,
|
|
|
+ power: sessionStorage.getItem("power"),
|
|
|
+ detail: "",
|
|
|
+ delList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ this.$indicator.open();
|
|
|
+ this.http.post(this.port.assets.detail, {
|
|
|
+ 'id': this.id
|
|
|
+ } ,
|
|
|
+ res => {
|
|
|
+ this.$indicator.close();
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.detail = res.data;
|
|
|
+ this.delList = res.data.goodsNosVO;
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$indicator.close();
|
|
|
+ this.$toast({
|
|
|
+ message: error,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加资产编号
|
|
|
+ addNo() {
|
|
|
+ MessageBox({
|
|
|
+ $type:'prompt',
|
|
|
+ title:'',
|
|
|
+ message:'添加资产数量',
|
|
|
+ closeOnClickModal:false,
|
|
|
+ showCancelButton:true,
|
|
|
+ inputValidator:function(v){
|
|
|
+ if (v === null) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ var str = /^[0-9]*[1-9][0-9]*$/;
|
|
|
+ if(str.test(v) && v != "") {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ inputErrorMessage:'请输入资产编号数量',
|
|
|
+ showInput:true
|
|
|
+ }).then(({ value, action }) => {
|
|
|
+ if(value == null) {
|
|
|
+ this.$toast({
|
|
|
+ message: '创建失败',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.$indicator.open();
|
|
|
+ this.http.post(this.port.assets.addNo, {
|
|
|
+ 'goodsId': this.id,
|
|
|
+ 'count': value
|
|
|
+ } ,
|
|
|
+ res => {
|
|
|
+ this.$indicator.close();
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.$toast({
|
|
|
+ message: '创建成功',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.getDetail();
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$indicator.close();
|
|
|
+ this.$toast({
|
|
|
+ message: error,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除资产编号
|
|
|
+ deleteNos(id) {
|
|
|
+ MessageBox.confirm('', {
|
|
|
+ message: '是否删除该资产？',
|
|
|
+ title: '',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(action => {
|
|
|
+ if (action == 'confirm') { //确认的回调
|
|
|
+ this.http.post(this.port.assets.delNo, {
|
|
|
+ 'id': id
|
|
|
+ } ,
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.$toast({
|
|
|
+ message: "删除成功",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ for(var i in this.delList) {
|
|
|
+ if(this.delList[i].id == id) {
|
|
|
+ this.delList.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var list = this.delList,
|
|
|
+ useList = [],
|
|
|
+ serList = [],
|
|
|
+ scrList = [],
|
|
|
+ unuList = [];
|
|
|
+ for(var i in list) {
|
|
|
+ if(list[i].state == 0) {
|
|
|
+ unuList.push(list[i])
|
|
|
+ } else if(list[i].state == 1) {
|
|
|
+ useList.push(list[i])
|
|
|
+ serList.push(list[i])
|
|
|
+ } else if(list[i].state == 3) {
|
|
|
+ scrList.push(list[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.useList = useList;
|
|
|
+ this.serList = serList;
|
|
|
+ this.scrList = scrList;
|
|
|
+ this.unuList = unuList;
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$toast({
|
|
|
+ message: error,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转
|
|
|
+ jumpBack() {
|
|
|
+ this.$router.push("/assets");
|
|
|
+ },
|
|
|
+
|
|
|
+ // 开门
|
|
|
+ openDoor() {
|
|
|
+ MessageBox.confirm('', {
|
|
|
+ message: '是否打开机柜？',
|
|
|
+ title: '',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(action => {
|
|
|
+ if (action == 'confirm') { //确认的回调
|
|
|
+ this.http.post(this.port.assets.openDoor, {
|
|
|
+ 'goodsId': this.id,
|
|
|
+ 'doorStatus': 1
|
|
|
+ } ,
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.$toast({
|
|
|
+ message: "开门成功",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.getDetail();
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$toast({
|
|
|
+ message: error,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 下架设备
|
|
|
+ handle(id) {
|
|
|
+ MessageBox.confirm('', {
|
|
|
+ message: '是否下架该设备？',
|
|
|
+ title: '',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消'
|
|
|
+ }).then(action => {
|
|
|
+ if (action == 'confirm') { //确认的回调
|
|
|
+ this.http.post(this.port.assets.upMold, {
|
|
|
+ 'id': id
|
|
|
+ } ,
|
|
|
+ res => {
|
|
|
+ if (res.code == "ok") {
|
|
|
+ this.$toast({
|
|
|
+ message: "下架成功",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.getDetail();
|
|
|
+ } else {
|
|
|
+ this.$toast({
|
|
|
+ message: res.msg,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, error => {
|
|
|
+ this.$toast({
|
|
|
+ message: error,
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .detail_head {
|
|
|
+ background: #fff;
|
|
|
+ color: #333;
|
|
|
+ height: 0.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail_body {
|
|
|
+ margin-top: 0.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ background: #EFEFEF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailBox {
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 0.11rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .userInfo {
|
|
|
+ padding: 0 0.1rem 0.12rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_title > span {
|
|
|
+ padding: 0.12rem 0 0 0;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_title > span:nth-child(1) {
|
|
|
+ display: inline-block;
|
|
|
+ width: 70%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_title > span:nth-child(2) {
|
|
|
+ float: right;
|
|
|
+ color: #2680EB;
|
|
|
+ padding: 0.1rem 0 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_number {
|
|
|
+ padding: 0.05rem 0;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label {
|
|
|
+ padding: 0 0 0.05rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label > span {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #888;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label > span:nth-child(1) {
|
|
|
+ width: 40%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label > span:nth-child(2) {
|
|
|
+ width: 30%;
|
|
|
+ float: left;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label > span:nth-child(3) {
|
|
|
+ width: 30%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_label > span > span {
|
|
|
+ color: #555;
|
|
|
+ font-size: 0.13rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .frame_detail {
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 0.01rem 0.05rem;
|
|
|
+ color: #2680EB;
|
|
|
+ font-size: 0.13rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .assDel {
|
|
|
+ padding: 0.12rem 0.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .assDel_List {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .assDel_Status span {
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ width: 24%;
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .assDel_Status span.active {
|
|
|
+ color: #26a2ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .assDel_Head img {
|
|
|
+ float: right;
|
|
|
+ width: 0.2rem;
|
|
|
+ height: 0.2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel {
|
|
|
+ /* padding: 0 0.1rem; */
|
|
|
+ margin: 0 0 0.15rem 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mint-cell-wrapper {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_head {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_body {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_head > span {
|
|
|
+ display:inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #666;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_head > span:nth-child(1){
|
|
|
+ width: 85%;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_head > span:nth-child(2){
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_body span {
|
|
|
+ /* display:inline-block; */
|
|
|
+ color: #aaa;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel_body img {
|
|
|
+ float: right;
|
|
|
+ width: 0.25rem;
|
|
|
+ height: 0.25rem;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .new_title {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_label {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_title > span {
|
|
|
+ padding: 0.12rem 0;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_title > span:nth-child(1) {
|
|
|
+ max-width: 40%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #333;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_title > span:nth-child(2) {
|
|
|
+ max-width: 40%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_title > span:nth-child(3) {
|
|
|
+ float: right;
|
|
|
+ color: #2680EB;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_label > span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 0 0.05rem 0;
|
|
|
+ width: 49%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .new_label > span > span {
|
|
|
+ color: #555;
|
|
|
+ font-size: 0.13rem;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+ .detail_head .mint-header-title {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 0.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail_head .mint-button-text {
|
|
|
+ color: #26a2ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailBox .mint-cell {
|
|
|
+ padding: 0 0 0 0.02rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel .mint-cell-value {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel .mint-cell:last-child {
|
|
|
+ background-image: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel .mint-cell-wrapper {
|
|
|
+ background-image: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel .mint-cell-swipe-button {
|
|
|
+ line-height: 0.55rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .one_assDel .noName .mint-cell-swipe-button {
|
|
|
+ line-height: 48px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .isFrame .mint-cell-swipe-button {
|
|
|
+ line-height: 0.83rem;
|
|
|
+ }
|
|
|
+</style>
|
