Merge branch 'develop' into single-develop

src/api/ems/site.js

@@ -70,9 +70,9 @@ export function getDeviceList(siteId) {
 }
 
 //获取设备点位table
-export function getDevicePointList({siteId,deviceId,deviceCategory,parentId,pageNum,pageSize,dataPointName='',sortMethod,sortData,dataPoint,lower,upper}) {
+export function getDevicePointList({siteId,deviceId,deviceCategory,parentId,pageNum,pageSize,dataPointName='',sortMethod,sortData,dataPoint,lower,upper,ipAddress,ipPort}) {
   return request({
-    url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}&parentId=${parentId}&dataPoint=${dataPoint}&lower=${lower}&upper=${upper}&pageNum=${pageNum}&sortMethod=${sortMethod}&sortData=${sortData}`,
+    url: `/ems/siteConfig/getDevicePointList?siteId=${siteId}&deviceId=${deviceId}&pageNum=${pageNum}&pageSize=${pageSize}&deviceCategory=${deviceCategory}&dataPointName=${dataPointName}&parentId=${parentId}&dataPoint=${dataPoint}&lower=${lower}&upper=${upper}&pageNum=${pageNum}&sortMethod=${sortMethod}&sortData=${sortData}&ipAddress=${ipAddress}&ipPort=${ipPort}`,
     method: 'get',
   })
 }
@@ -128,3 +128,56 @@ export function protectPlanList({siteId, faultName,pageSize,pageNum}) {
     method: 'get',
   })
 }
+
+// 点位导出
+export function exportPointList(data) {
+  return request({
+    url: `/ems/pointMatch/export`,
+    method: 'post',
+    data
+  })
+}
+// 点位导入
+export function importPointList(data) {
+  return request({
+    url: `/ems/pointMatch/importData`,
+    method: 'post',
+    data
+  })
+}
+
+
+
+//mqtt
+export function getMqttList({pageSize,pageNum,mqttTopic,topicName}) {
+  return request({
+    url: `/ems/mqttConfig/list?pageSize=${pageSize}&pageNum=${pageNum}&mqttTopic=${mqttTopic}&topicName=${topicName}`,
+    method: 'get',
+  })
+}
+export function getMqttDetail(id) {
+  return request({
+    url: `/ems/mqttConfig/${id}`,
+    method: 'get',
+  })
+}
+export function addMqtt(data) {
+  return request({
+    url: `/ems/mqttConfig`,
+    method: 'post',
+    data
+  })
+}
+export function editMqtt(data) {
+  return request({
+    url: `/ems/mqttConfig`,
+    method: 'put',
+    data
+  })
+}
+export function deleteMqtt(id) {
+  return request({
+    url: `/ems/mqttConfig/${id}`,
+    method: 'delete',
+  })
+}

src/views/ems/site/mqtt/AddMqtt.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="400px"  class="ems-dialog" :title="mode === 'add'?'新增配置':`编辑配置` " >
+    <el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
+      <el-form-item label="订阅topic" prop="deviceName">
+        <el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="topic描述" prop="description">
+        <el-input v-model="formData.topicName" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="saveDialog">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
+export default {
+  data() {
+    return {
+      loading:0,
+      dialogTableVisible:false,
+      mode:'',
+      formData: {
+        id:'',//设备唯一标识
+        topicName:'',
+        mqttTopic:''
+      },
+      rules: {
+        mqttTopic:[
+          { required: true, message: '请输入订阅topic', trigger: 'blur'},
+        ],
+        topicName:[
+          { required: true, message: '请输入topic描述', trigger: 'blur'},
+        ],
+      },
+    }
+  },
+  methods: {
+    showDialog(id){
+      this.dialogTableVisible = true
+      if(id){
+        this.mode = 'edit'
+        this.formData.id = id
+        this.getDetail(id)
+      }else{
+        this.mode = 'add'
+      }
+    },
+    getDetail(id){
+      getMqttDetail(id).then(response => {
+        const {topicName='',mqttTopic=''} = JSON.parse(JSON.stringify(response?.data || {}));
+        this.formData.mqttTopic=mqttTopic;
+        this.formData.topicName=topicName;
+      })
+    },
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.loading+=1
+        const {
+          id='',
+          mqttTopic='',//站点ID
+          topicName='',//设备id
+        }= this.formData;
+        if(this.mode === 'add'){
+          addMqtt( {mqttTopic,topicName}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
+              this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }else{
+          editMqtt({mqttTopic,topicName,id}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
+              this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }
+
+      })
+    },
+    closeDialog(){
+      this.$emit('clear')
+      // 清空所有数据
+      this.formData= {
+        id:'',//设备唯一标识
+        mqttTopic:'',
+        topicName:''
+      }
+      this.$refs.addTempForm.resetFields()
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+</style>

src/views/ems/site/mqtt/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="订阅topic">
+        <el-input
+            v-model="form.mqttTopic"
+            clearable
+            placeholder="请输入订阅topic"
+            style="width: 150px"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="topic描述">
+        <el-input
+            v-model="form.topicName"
+            clearable
+            placeholder="请输入topic描述"
+            style="width: 150px"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+                <el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
+                <el-button native-type="button" @click="onReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="addPowerConfig('')">新增</el-button>
+    <el-table
+        :data="tableData"
+        class="common-table"
+        max-height="600px"
+        stripe
+        style="width: 100%;margin-top: 25px">
+      <el-table-column
+          label="订阅topic"
+          prop="mqttTopic">
+      </el-table-column>
+      <el-table-column
+          label="topic描述"
+          prop="topicName">
+      </el-table-column>
+      <el-table-column
+          fixed="right"
+          label="操作">
+        <template slot-scope="scope">
+          <el-button
+              size="mini"
+              style="margin-top:10px;"
+              type="warning"
+              @click="addPowerConfig(scope.row.id)">
+            编辑
+          </el-button>
+          <el-button
+              size="mini"
+              style="margin-top:10px;"
+              type="danger"
+              @click="deleteMqtt(scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+        v-show="tableData.length>0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+    <add-mqtt ref="addMqtt" @update="getData"/>
+  </div>
+</template>
+
+<script>
+import {deleteMqtt,getMqttList} from '@/api/ems/site'
+import AddMqtt from './AddMqtt.vue'
+export default {
+  name: "Mqtt",
+  components: {AddMqtt},
+  computed: { },
+  data() {
+    return {
+      form:{
+        topicName:'',
+        mqttTopic:''
+      },
+      loading:false,
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    onReset(){
+      this.form={
+        topicName:'',
+        mqttTopic:''
+      }
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      const {mqttTopic,topicName} = this.form;
+      const {pageNum,pageSize} = this;
+      getMqttList({pageNum,pageSize,mqttTopic,topicName}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    addPowerConfig(id=''){
+      this.$refs.addMqtt.showDialog(id);
+    },
+    deleteMqtt(row){
+      this.$confirm(`确认要删除该配置吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            deleteMqtt(row.id).then(response => {
+              response.code === 200 && done();
+            }).finally(() => {
+              instance.confirmButtonLoading = false;
+            })
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在废弃成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+        this.getData()
+        //调用接口 更新表格数据
+      }).catch(() => {
+        //取消关机
+      });
+    },
+  },
+  mounted() {
+    this.loading=true
+    this.getData()
+  }
+}
+</script>

src/views/ems/site/sblb/PointTable.vue

@@ -11,9 +11,9 @@
       lock-scroll
       show-close
       title="点位清单"
-      width="800px"
+      width="950px"
     >
-      <el-form :inline="true" label-width="85px">
+      <el-form :inline="true" label-width="100px">
         <el-form-item label="点位名称">
           <el-input
             v-model="form.dataPointName"
@@ -30,7 +30,14 @@
             style="width: 150px"
           ></el-input>
         </el-form-item>
-        <br />
+        <el-form-item label="modbus ip">
+          <el-input
+              v-model="form.ipAddress"
+              clearable
+              placeholder="请输入ip"
+              style="width: 150px"
+          ></el-input>
+        </el-form-item>
         <el-form-item label="最小值">
           <el-input
             v-model="form.lower"
@@ -47,6 +54,14 @@
             style="width: 150px"
           ></el-input>
         </el-form-item>
+        <el-form-item label="modbus 端口">
+          <el-input
+              v-model="form.ipPort"
+              clearable
+              placeholder="请输入端口"
+              style="width: 150px"
+          ></el-input>
+        </el-form-item>
         <el-form-item style="margin-left: 20px">
           <el-button type="primary" @click="search">搜索</el-button>
         </el-form-item>
@@ -62,7 +77,13 @@
         @sort-change="handleSortChange"
       >
         <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
-        <el-table-column label="数据点位名称" prop="pointName">
+        <el-table-column label="数据点位名称" prop="pointName"></el-table-column>
+        <el-table-column
+            label="modbus地址"
+        >
+          <template slot-scope="scope">
+            <span>{{`${scope.row.ipAddress || ''} ${scope.row.ipPort || ''}`}}</span>
+          </template>
         </el-table-column>
         <el-table-column
           label="最新值"
@@ -83,7 +104,7 @@
           </template>
         </el-table-column>
         <el-table-column label="单位" prop="dataUnit"></el-table-column>
-        <el-table-column label="更新时间" prop="updateTime" sortable="custom">
+        <el-table-column label="更新时间" min-width="160px" prop="updateTime" sortable="custom">
         </el-table-column>
       </el-table>
       <el-pagination
@@ -128,6 +149,8 @@ export default {
           dataPoint: "", //点位名称
           lower: "", //
           upper: "", //
+          ipAddress:'',
+          ipPort:''
         };
         this.loading = false;
       }
@@ -151,6 +174,8 @@ export default {
         dataPoint: "", //点位名称
         lower: "", //
         upper: "", //
+        ipAddress:'',
+        ipPort:''
       },
       deviceCategory: "",
       deviceId: "",
@@ -204,6 +229,8 @@ export default {
           dataPoint,
           lower,
           upper,
+          ipAddress,
+          ipPort
         },
       } = this;
       getDevicePointList({
@@ -219,6 +246,8 @@ export default {
         dataPoint,
         lower,
         upper,
+        ipAddress,
+        ipPort
       })
         .then((response) => {
           this.tableData = response?.rows || [];

src/views/ems/site/sblb/PointUpload.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog :visible.sync="show" class="ems-dialog" title="点位上传" width="400px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
+<!--    <file-upload :fileType='["xls", "xlsx"]' value="String" :limit="1" :drag="false"  @input="updateFile"/>-->
+    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip text-center" slot="tip">
+        <span>仅允许导入xls、xlsx格式文件。</span>
+<!--        <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>-->
+      </div>
+    </el-upload>
+    <div slot="footer">
+      <el-button @click="handleClosed">取消</el-button>
+      <el-button type="primary" @click="submitFileForm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+import { getToken } from "@/utils/auth"
+export default {
+  data(){
+    return {
+      show:false,
+      // 用户导入参数
+      upload: {
+        // 是否禁用上传
+        isUploading: false,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "/ems/pointMatch/importData"
+      },
+    }
+  },
+  methods:{
+    showDialog(){
+      this.show = true;
+    },
+    //关闭弹窗 重置数据
+    handleClosed(){
+      this.$refs.upload.clearFiles()//写在before-closed无效
+      this.show=false
+    },
+    // updateFile(data){
+    //   console.log('上传文件emit',data)
+    // },
+    // saveDialog(){
+    //  this.show=true
+    // },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      console.log('上传文件结果',response)
+      this.upload.isUploading = false
+      if(response.code === 500 && !response.msg) response.msg = '上传失败'
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + (response.msg || '上传成功' )+ "</div>", "导入结果", { dangerouslyUseHTMLString: true })
+      this.$emit('update')
+      this.handleClosed()
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit()
+    }
+  }
+}
+</script>

src/views/ems/site/sblb/index.vue

@@ -13,6 +13,12 @@
       </el-form-item>
     </el-form>
     <el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
+    <el-button
+        @click="uploadPointDetail"
+        type="success"
+        plain>
+      上传点位清单
+    </el-button>
     <el-table
       class="common-table"
       :data="tableData"
@@ -50,7 +56,7 @@
       <el-table-column
         fixed="right"
         label="操作"
-        width="260">
+        width="250">
         <template slot-scope="scope">
           <el-button
               @click="pointDetail(scope.row)"
@@ -58,14 +64,24 @@
               size="mini">
             点位清单
           </el-button>
+          <el-button
+              @click="downloadPointDetail(scope.row)"
+              type="primary"
+              plain
+              size="mini">
+            下载点位清单
+          </el-button>
+          <br>
           <el-button
             @click="editDevice(scope.row)"
+            style="margin-top:10px;"
             type="warning"
             size="mini">
             编辑
           </el-button>
           <el-button
             type="danger"
+            style="margin-top:10px;"
             @click="deleteDevice(scope.row)"
             size="mini">
             删除
@@ -95,18 +111,21 @@
     </el-dialog>
     <add-device ref="addDevice" :mode="mode" :id="editDeviceId" @update="getData" @clear="clearEditDeviceData"/>
     <point-table ref="pointTable"/>
+    <point-upload ref="pointUpload" @update="getData"/>
   </div>
 </template>
 
 <script>
-import {getDeviceInfoList,getDeviceDetailInfo,deleteService} from'@/api/ems/site'
+import {getDeviceInfoList,getDeviceDetailInfo,deleteService,exportPointList,importPointList} from'@/api/ems/site'
 import {getAllSites} from '@/api/ems/zddt'
 import {formatNumber} from "@/filters/ems";
 import PointTable from './PointTable.vue'
 import AddDevice from "./AddDevice.vue";
+import PointUpload from "./PointUpload.vue";
+import {download} from "@/utils/request";
 export default {
   name: "Sblb",
-  components:{AddDevice,PointTable},
+  components:{AddDevice,PointTable,PointUpload},
   data() {
     return {
       loading:false,
@@ -148,6 +167,17 @@ export default {
     pointDetail(row){
       this.$refs.pointTable.showTable(row)
     },
+    // 下载点位清单
+    downloadPointDetail({siteId,deviceCategory,deviceName}){
+      this.download('ems/pointMatch/export', {
+        siteId,
+        deviceCategory
+      }, `点位清单_${deviceName}_${new Date().getTime()}.xlsx`)
+    },
+    // 上传点位清单
+    uploadPointDetail(){
+      this.$refs.pointUpload.showDialog()
+    },
     clearEditDeviceData(){
       this.mode = '';
       this.editDeviceId=''