站点管理菜单调整，新增设备列表页面

src/api/ems/site.js

@@ -1,8 +1,24 @@
 import request from '@/utils/request'
-// 首页、站点地图页面页面顶部 所有站点信息
+// 站点列表
 export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
   return request({
     url: `/ems/siteConfig/getSiteInfoList?siteName=${siteName}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
     method: 'get'
   })
 }
+
+// 设备列表
+export function getDeviceInfoList({siteId,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 设备详情
+export function getDeviceDetailInfo(deviceId) {
+  return request({
+    url: `/ems/siteConfig/getDeviceDetailInfo?deviceId=${deviceId}`,
+    method: 'get'
+  })
+}

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

@@ -0,0 +1,197 @@
+
+<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="站点选择">
+          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+          </el-select>
+        </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="600px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
+      <el-table-column
+        prop="siteName"
+        label="站点名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceId"
+        label="设备ID"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="deviceName"
+        label="设备名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceType"
+        label="设备类型">
+      </el-table-column>
+      <el-table-column
+        prop="communicationStatus"
+        label="通信状态">
+        <template slot-scope="scope">
+          <span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="140">
+        <template slot-scope="scope">
+          <el-button
+            @click="toDetail(scope.row.deviceId)"
+            type="primary"
+            size="small">
+            查看详情
+          </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>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
+      <div class="descriptions-main" style="padding: 0" >
+        <el-descriptions direction="vertical" :column="2" :colon="false" border>
+          <el-descriptions-item v-for="item in detailData" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
+import {getAllSites} from '@/api/ems/zddt'
+import {formatNumber} from "@/filters/ems";
+export default {
+  name: "Sblb",
+  data() {
+    return {
+      loading:false,
+      searchLoading:false,
+      siteId:'',
+      siteList:[],
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+      dialogTableVisible:false,
+      detailData:[
+        {label:'设备ID',value:'',attr:'deviceId'},
+        {label:'设备名称',value:'',attr:'deviceName'},
+        {label:'设备类型',value:'',attr:'deviceType'},
+        {label:'通信状态',value:'',attr:'communicationStatus'},
+        {label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
+        {label:'TCP端口号',value:'',attr:'ipPort'},
+        {label:'串口路径',value:'',attr:'serialPort'},
+        {label:'波特率',value:'',attr:'baudRate'},
+        {label:'数据位',value:'',attr:'dataBits'},
+        {label:'停止位',value:'',attr:'stopBits'},
+        {label:'校验位',value:'',attr:'parity'},
+        {label:'设备描述',value:'',attr:'description'},
+        {label:'设备类别',value:'',attr:'deviceCategory'},
+        {label:'上级设备ID',value:'',attr:'parentId'},
+        {label:'设备唯一标识符',value:'',attr:'deviceId'},
+      ],
+      detailformatAttr:{
+        'deviceType':'deviceTypeOptions',
+        'communicationStatus':'communicationStatusOptions',
+      }
+    }
+  },
+  methods:{
+    handleClosed(done){
+      this.detailData.forEach((item)=>{item.value = ''})
+      done()
+    },
+    toDetail(deviceId){
+      this.loading = true
+      getDeviceDetailInfo(deviceId).then(response => {
+        const data = response?.data || {};
+        this.detailData.forEach(item=>{
+          if(this.detailformatAttr[item.attr]){
+            item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
+          }else{
+            item.value=formatNumber(data[item.attr]);
+          }
+
+        })
+        this.dialogTableVisible = true
+      }).finally(() => {this.loading = false})
+
+    },
+    // 分页
+    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.siteId=''
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {siteId,pageNum,pageSize} =this
+      getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    //获取站点列表
+    getZdList(){
+      this.searchLoading=true
+      getAllSites().then(response => {
+        this.siteList = response?.data || []
+      }).finally(() => {this.searchLoading=false})
+    }
+  },
+  mounted() {
+    this.onReset()
+    this.getZdList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -32,6 +32,10 @@
       stripe
       max-height="500px"
       style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
       <el-table-column
         prop="siteName"
         label="站点名称">
@@ -71,10 +75,10 @@
 </template>
 
 <script>
-import {getSiteInfoList} from'@/api/ems/site'
+import {getSiteInfoList} from '@/api/ems/site'
 import { formatDate } from '@/filters/ems'
 export default {
-  name: "Site",
+  name: "Zdlb",
   data() {
     return {
       loading:false,
@@ -97,13 +101,13 @@ export default {
     handleSizeChange(val) {
       this.pageSize = val;
       this.$nextTick(()=>{
-        this.getTableData()
+        this.getData()
       })
     },
     handleCurrentChange(val) {
       this.pageNum = val
       this.$nextTick(()=>{
-        this.getTableData()
+        this.getData()
       })
     },
     // 搜索