|
|
@@ -1,65 +1,72 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto">
|
|
|
- <el-form-item :label="this.$t('fwztsz')" prop="serverName">
|
|
|
- <el-select style="width: 100%" v-model="mode" @change="handleSelectChange" ref="multiSelect">
|
|
|
- <el-option v-for="item in modes" :key="item.id" :label="$t(item.name)" :value="item.id">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <!--<el-form-item :label="this.$t('fwzt')+this.$t('sz')" prop="serverName">-->
|
|
|
+ <!--<el-select style="width: 100%" v-model="mode" @change="handleSelectChange" ref="multiSelect">-->
|
|
|
+ <!--<el-option v-for="item in modes" :key="item.id" :label="$t(item.name)" :value="item.id">-->
|
|
|
+ <!--</el-option>-->
|
|
|
+ <!--</el-select>-->
|
|
|
+ <!--</el-form-item>-->
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" style="width: 100px;" icon="el-icon-plus" size="mini" @click="sensorStatusAdd">{{$t('xz')}}</el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="sensorStatusAdd">{{$t('xz')}}</el-button>
|
|
|
</el-form-item>
|
|
|
<!--<el-row :gutter="10" class="mb8">-->
|
|
|
- <!--<el-col :span="1.5">-->
|
|
|
- <!--<el-button-->
|
|
|
- <!--type="primary"-->
|
|
|
- <!--plain-->
|
|
|
- <!--icon="el-icon-plus"-->
|
|
|
- <!--size="mini"-->
|
|
|
- <!--@click="sensorStatusAdd"-->
|
|
|
- <!-->{{$t('xz')}}</el-button>-->
|
|
|
- <!--</el-col>-->
|
|
|
- <!--<!–<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>–>-->
|
|
|
+ <!--<el-col :span="1.5">-->
|
|
|
+ <!--<el-button-->
|
|
|
+ <!--type="primary"-->
|
|
|
+ <!--plain-->
|
|
|
+ <!--icon="el-icon-plus"-->
|
|
|
+ <!--size="mini"-->
|
|
|
+ <!--@click="sensorStatusAdd"-->
|
|
|
+ <!-->{{$t('xz')}}</el-button>-->
|
|
|
+ <!--</el-col>-->
|
|
|
+ <!--<!–<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>–>-->
|
|
|
<!--</el-row>-->
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<el-card style="min-height: 700px ;border-radius: 15px">
|
|
|
- <el-table max-height="700" :data="channelList" :header-cell-style="{ background:'#FFFFFF',color:'#000000'}">
|
|
|
- <!--<el-table-column type="selection" width="55" align="center" />-->
|
|
|
- <el-table-column :label="this.$t('mc')" prop="serverName" />
|
|
|
- <el-table-column label="idx" prop="idx" v-if="false" />
|
|
|
- <el-table-column label="Broker ID" prop="kfdId" />
|
|
|
- <el-table-column :label="this.$t('ym')+'/IP'" :min-width="getStringWidth(this.$t('ym'))+'/IP'" prop="ip" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column :label="this.$t('dk2')" :min-width="getStringWidth(this.$t('dk2'))" prop="port" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column :label="this.$t('yhm2')" :min-width="getStringWidth(this.$t('yhm2'))" prop="yhm" :show-overflow-tooltip="true" />
|
|
|
- <el-table-column :label="this.$t('formPassword')" :min-width="getStringWidth(this.$t('formPassword'))" prop="mm" />
|
|
|
- <el-table-column :label="this.$t('ljzt')" :min-width="getStringWidth(this.$t('ljzt'))" align="center" prop="ljzt" >
|
|
|
- <template slot-scope="scope">
|
|
|
- <span v-if="scope.row.ljzt=='2'" style="color: red">{{getDity(scope.row,'ljzt')}}</span>
|
|
|
- <span v-else style="color: green">{{getDity(scope.row,'ljzt')}}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :label="this.$t('cz')" align="center" class-name="small-padding fixed-width">
|
|
|
- <template slot-scope="scope" >
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- >{{$t('xg')}}</el-button>
|
|
|
- <el-dropdown style="margin-left:10px" size="mini" @command="(command) => mqttCommand(command, scope.row)" >
|
|
|
- <el-button icon="el-icon-d-arrow-right" size="mini" type="text" style="margin-left: 10px">{{$t('gd')}}</el-button>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item command="close" style="margin-left: 10px">{{$t('gb')}}</el-dropdown-item>
|
|
|
- <el-dropdown-item command="open" style="margin-left: 10px">{{$t('kq')}}</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
+ <el-table max-height="700" :data="channelList" :header-cell-style="{ background:'#FFFFFF',color:'#000000'}">
|
|
|
+ <!--<el-table-column type="selection" width="55" align="center" />-->
|
|
|
+ <el-table-column :label="this.$t('mc')" prop="serverName" />
|
|
|
+ <el-table-column label="idx" prop="idx" v-if="false" />
|
|
|
+ <el-table-column label="Broker ID" prop="kfdId" />
|
|
|
+ <el-table-column :label="this.$t('ym')+'/IP'" :min-width="getStringWidth(this.$t('ym'))+'/IP'" prop="ip" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column :label="this.$t('dk2')" :min-width="getStringWidth(this.$t('dk2'))" prop="port" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column :label="this.$t('yhm2')" :min-width="getStringWidth(this.$t('yhm2'))" prop="yhm" :show-overflow-tooltip="true" />
|
|
|
+ <el-table-column :label="this.$t('formPassword')" :min-width="getStringWidth(this.$t('formPassword'))" prop="mm" />
|
|
|
+ <el-table-column :label="this.$t('zs')" :min-width="getStringWidth(this.$t('zs'))" prop="zs" />
|
|
|
+ <el-table-column :label="this.$t('ljzt')" :min-width="getStringWidth(this.$t('ljzt'))" align="center" prop="ljzt" >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.ljzt=='2'" style="color: red">{{getDity(scope.row,'ljzt')}}</span>
|
|
|
+ <span v-else style="color: green">{{getDity(scope.row,'ljzt')}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="this.$t('cz')" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope" >
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ >{{$t('xg')}}</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-upload"
|
|
|
+ @click="handleImport(scope.row)"
|
|
|
+ >{{$t('zssc')}}</el-button>
|
|
|
+ <el-dropdown style="margin-left:10px" size="mini" @command="(command) => mqttCommand(command, scope.row)" >
|
|
|
+ <el-button icon="el-icon-d-arrow-right" size="mini" type="text" style="margin-left: 10px">{{$t('gd')}}</el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="close" style="margin-left: 10px">{{$t('gb')}}</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="open" style="margin-left: 10px">{{$t('kq')}}</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
|
|
|
- </el-dropdown>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</el-card>
|
|
|
<!-- 编辑通道-->
|
|
|
<el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
|
|
|
@@ -94,7 +101,37 @@
|
|
|
<el-button @click="cancel">{{$t('qx')}}</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body>
|
|
|
+ <el-form ref="form3" :model="form3" label-width="auto">
|
|
|
+ <el-form-item v-if="false" :label="this.$t('lx')" prop="uploadType">
|
|
|
+ <el-input :readonly="true" v-model="form3.uploadType" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
|
|
|
+ </el-form>
|
|
|
+ <el-upload
|
|
|
+ ref="upload"
|
|
|
+ :limit="1"
|
|
|
+ accept=".*"
|
|
|
+ :action="upload.url + '?idx=' + form3.uploadType+'&type=importData&token='+this.usertoken"
|
|
|
+ :disabled="upload.isUploading"
|
|
|
+ :on-progress="handleFileUploadProgress"
|
|
|
+ :before-upload="beforeAvatarUpload"
|
|
|
+ :on-success="handleFileSuccess"
|
|
|
+ :auto-upload="false"
|
|
|
+ drag
|
|
|
+ >
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">{{$t('drts')}}<em>{{$t('djsc')}}</em></div>
|
|
|
+ <div class="el-upload__tip text-center" slot="tip">
|
|
|
+ <span>{{$t('bcts')}}</span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitFileForm">{{$t('qd')}}</el-button>
|
|
|
+ <el-button @click="upload.open = false">{{$t('qx')}}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -118,6 +155,7 @@
|
|
|
open: false,
|
|
|
// 通道配置表单参数
|
|
|
form: {},
|
|
|
+ form3: {},
|
|
|
channelLoadTypes:["空调","服务器","交换机","路由器","计算机","显示器","灯","其他"],
|
|
|
modes:[{"id":"0","name":"gb"},{"id":"1","name":"kq"}],
|
|
|
ljzts:[{"id":"1","name":"ylj"},{"id":"2","name":"wlj"}],
|
|
|
@@ -131,6 +169,16 @@
|
|
|
usertoken:"",
|
|
|
mode:"",
|
|
|
mode2:"",
|
|
|
+ upload: {
|
|
|
+ // 是否显示弹出层(用户导入)
|
|
|
+ open: false,
|
|
|
+ // 弹出层标题(用户导入)
|
|
|
+ title: "",
|
|
|
+ // 是否禁用上传
|
|
|
+ isUploading: false,
|
|
|
+ // 上传的地址
|
|
|
+ url: window.location.origin+"/pdu/serviceManagementUpload"
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -139,6 +187,35 @@
|
|
|
this.queryChannelStatus2(); // 查询状态
|
|
|
},
|
|
|
methods: {
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ if(file==null){
|
|
|
+ this.$modal.msgSuccess(this.$t('zxcg'));
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 导入按钮操作 */
|
|
|
+ handleImport(row) {
|
|
|
+ this.upload.title = this.$t('zssc'); // todo
|
|
|
+ this.upload.open = true;
|
|
|
+ this.form3.uploadType =row.idx;
|
|
|
+ },
|
|
|
+
|
|
|
+// 文件上传中处理
|
|
|
+ handleFileUploadProgress(event, file, fileList) {
|
|
|
+ this.upload.isUploading = true;
|
|
|
+ },
|
|
|
+// 文件上传成功处理
|
|
|
+ handleFileSuccess(response, file, fileList) {
|
|
|
+ this.upload.open = false;
|
|
|
+ this.upload.isUploading = false;
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", this.$t("drjg"), { dangerouslyUseHTMLString: true });
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+// 提交上传文件
|
|
|
+ submitFileForm() {
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ },
|
|
|
getStringWidth(text) {
|
|
|
//console.log('text', text)
|
|
|
const font = '14px Arial'
|
|
|
@@ -179,22 +256,22 @@
|
|
|
serviceManagement(params);
|
|
|
}).then(() => {
|
|
|
this.$modal.msgSuccess(this.$t('zxcg'));
|
|
|
- this.querySensorStatusMonitoring();
|
|
|
- }).catch(() => {});
|
|
|
+ this.querySensorStatusMonitoring();
|
|
|
+ }).catch(() => {});
|
|
|
|
|
|
- break;
|
|
|
- case "close":
|
|
|
- params.type="mqttClose";
|
|
|
- this.$modal.confirm(this.$t('qrygbm')).then(function() {
|
|
|
- serviceManagement(params);
|
|
|
- }).then(() => {
|
|
|
- this.$modal.msgSuccess(this.$t('zxcg'));
|
|
|
- this.querySensorStatusMonitoring();
|
|
|
- }).catch(() => {});
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
+ break;
|
|
|
+ case "close":
|
|
|
+ params.type="mqttClose";
|
|
|
+ this.$modal.confirm(this.$t('qrygbm')).then(function() {
|
|
|
+ serviceManagement(params);
|
|
|
+ }).then(() => {
|
|
|
+ this.$modal.msgSuccess(this.$t('zxcg'));
|
|
|
+ this.querySensorStatusMonitoring();
|
|
|
+ }).catch(() => {});
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
},
|
|
|
changeMode(value){
|
|
|
this.mode= value
|
|
|
@@ -215,7 +292,7 @@
|
|
|
this.$modal.confirm(this.$t('qdy')+modeName).then(function() {
|
|
|
serviceManagement(params).then(response => {
|
|
|
thisa.$modal.msgSuccess(thisa.$t('zxcg'));
|
|
|
- });
|
|
|
+ });
|
|
|
}).catch(function (e) {
|
|
|
if(e=='cancel'){
|
|
|
thisa.changeMode(a)
|
|
|
@@ -239,10 +316,11 @@
|
|
|
// };
|
|
|
// this.mode =re.data.mode
|
|
|
// this.mode2 =re.data.mode
|
|
|
- this.loading = true;
|
|
|
+ this.loading = true;
|
|
|
serviceManagement(this.queryParams).then(response => {
|
|
|
this.mode = response.data.mode;
|
|
|
- this.mode2 = response.data.mode;
|
|
|
+ this.mode2 = response.data.mode;
|
|
|
+
|
|
|
}).catch(() => {});
|
|
|
this.loading = false;
|
|
|
},
|
|
|
@@ -263,17 +341,22 @@
|
|
|
// "msg": "操作成功"
|
|
|
// };
|
|
|
// this.channelList =re.data
|
|
|
- this.loading = true;
|
|
|
+ this.loading = true;
|
|
|
serviceManagement(this.queryParams).then(response => {
|
|
|
if(response.data!=null){
|
|
|
this.channelList = response.data;
|
|
|
- }
|
|
|
+ this.total= response.data.length;
|
|
|
+ }
|
|
|
|
|
|
}).catch(() => {});
|
|
|
this.loading = false;
|
|
|
},
|
|
|
//新增传感器
|
|
|
sensorStatusAdd(){
|
|
|
+ if( this.total>=5){
|
|
|
+ this.$modal.alert(this.$t('mqbcts'));
|
|
|
+ return;
|
|
|
+ }
|
|
|
this.form ={};
|
|
|
this.open = true;
|
|
|
this.title = this.$t('xz');
|
|
|
@@ -358,7 +441,7 @@
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
this.open = false;
|
|
|
- this.queryChannelStatus();
|
|
|
+ this.queryChannelStatus();
|
|
|
},
|
|
|
/** 强退按钮操作 */
|
|
|
handleForceLogout(row) {
|