单站监控-设备监控-动态三级菜单,点位清单排序

src/views/ems/dzjk/sbjk/index.vue

@@ -1,38 +1,66 @@
 <template>
-    <div class="ems-dashboard-editor-container ems-third-menu-container">
-    <el-menu
-      class="ems-third-menu"
-      :default-active="$route.name"
-      background-color="#ffffff"
-      text-color="#666666"
-      active-text-color="#ffffff"
-    >
-      <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
-        <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
-          {{item.meta.title}}
-        </router-link>
-      </el-menu-item>
-    </el-menu>
-    <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
-      <keep-alive>
-        <router-view></router-view>
-      </keep-alive>
-    </div>
+    <div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
+      <el-menu
+        class="ems-third-menu"
+        :default-active="$route.name"
+        background-color="#ffffff"
+        text-color="#666666"
+        active-text-color="#ffffff"
+      >
+        <el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
+          <router-link  style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
+            {{item.meta.title}}
+          </router-link>
+        </el-menu-item>
+      </el-menu>
+      <div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
+        <keep-alive>
+          <router-view></router-view>
+        </keep-alive>
+      </div>
   </div>
 
 </template>
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { dzjk } from '@/router/ems'
+import {mapState} from "vuex";
 const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
 export default {
   name:'DzjkSbjk',
+  mixins:[getQuerySiteId],
+  computed:{
+    ...mapState({
+      zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
+    }),
+    locationSiteCategory(){
+      return this.zdDeviceCategoryOptions[this.siteId] || []
+    },
+    categoryRouter(){
+      const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.categoryName))
+      if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
+        const locationPageCategoryName = this.$route.meta?.categoryName || ''
+        if(!routeData.some(item=> item.meta.categoryName===locationPageCategoryName)){
+          this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
+        }
+      }
+      return routeData
+    }
+  },
   data(){
     return {
       childrenRoute,
-      activeMenu:''
+      activeMenu:'',
+      loading:false,
     }
   },
+  methods:{
+    init(){
+      this.loading=true
+      this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
+    }
+  }
 }
 </script>
 

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

@@ -58,8 +58,8 @@
         max-height="400px"
         stripe
         style="width: 100%"
-        :default-sort="{ order: 'descending' }"
-        @sort-change="changeSort"
+        :default-sort="defaultSort"
+        @sort-change="handleSortChange"
       >
         <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
         <el-table-column label="数据点位名称" prop="pointName">
@@ -84,7 +84,7 @@
             >
           </template>
         </el-table-column>
-        <el-table-column label="单位" prop="unit"></el-table-column>
+        <el-table-column label="单位" prop="dataUnit"></el-table-column>
         <el-table-column label="更新时间" prop="updateTime" sortable="custom">
         </el-table-column>
       </el-table>
@@ -124,8 +124,8 @@ export default {
         this.pageNum = 1;
         this.totalSize = 0;
         this.form = {
-          valueSortMethod: "desc", //升序不传或者asc、降序desc）
           sortMethod: "desc", //升序不传或者asc、降序desc）
+          sortData:this.defaultSort.prop,
           dataPointName: "", //点位名称
           dataPoint: "", //点位名称
           lower: "", //
@@ -137,10 +137,12 @@ export default {
   },
   data() {
     return {
+      // 默认排序
+      defaultSort: { prop: "updateTime", order: "descending" },
       show: false,
       loading: false,
       form: {
-        valueSortMethod: "desc", //最新值升序不传或者asc、降序desc）
+        sortData: "updateTime", //最新值升序不传或者asc、降序desc）
         sortMethod: "desc", //升序不传或者asc、降序desc）
         dataPointName: "", //点位名称
         dataPoint: "", //点位名称
@@ -163,15 +165,11 @@ export default {
       pointName &&
         this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
     },
-    changeSort(c) {
-      console.log("切换排序方式", c);
-      if (c.prop === "updateTime" && c.order) {
-        this.form.sortMethod = c.order === "descending" ? "desc" : "asc";
-        this.getData();
-      } else if (c.prop === "pointValue" && c.order) {
-        this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
-        this.getData();
-      }
+    handleSortChange(column) {
+      this.form.sortData = column.prop
+      this.form.sortMethod = column.order === "descending" ? "desc" : "asc";
+      console.log("切换排序方式", column, this.form);
+      this.getData();
     },
     search() {
       this.pageNum = 1;
@@ -194,7 +192,7 @@ export default {
         pageNum,
         pageSize,
         form: {
-          valueSortMethod,
+          sortData,
           sortMethod,
           dataPointName,
           dataPoint,
@@ -208,7 +206,7 @@ export default {
         deviceCategory,
         pageNum,
         pageSize,
-        valueSortMethod,
+        sortData,
         sortMethod,
         dataPointName,
         dataPoint,