feat: 缓存站点选择

ruoyi-ui/src/components/SiteSelector/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <el-select :value="siteId" @change="siteChangeHandler" placeholder="请选择站点">
+    <el-option
+      v-for="item in siteList"
+      :key="item.siteId"
+      :label="item.siteName"
+      :value="item.siteId">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { listSite } from "@/api/site/site";
+import { getSiteId, setSiteId } from "@/utils/cache/site";
+
+export default {
+  data() {
+    return {
+      siteId: '',
+      siteList: [],
+    }
+  },
+  mounted() {
+    this.getSiteList();
+  },
+  methods: {
+    getSiteList() {
+      listSite({ page: 1, size: 1000 }).then(response => {
+        const siteList = response.data.records || [];
+        if (siteList.length === 0) {
+          return;
+        }
+        this.siteList = siteList;
+        const cachedSiteId = getSiteId();
+
+        if (siteList.map(({siteId}) => siteId).includes(cachedSiteId)) {
+          this.siteId = cachedSiteId;
+        } else {
+          this.siteId = siteList[0].siteId;
+        }
+      });
+    },
+    siteChangeHandler(v) {
+      setSiteId(v);
+      this.siteId = v;
+    }
+  },
+  watch: {
+    siteId(v) {
+      this.$emit('change', v);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/utils/cache/site.js

@@ -0,0 +1,11 @@
+export function setSiteId(id) {
+  sessionStorage.setItem('query_site_id', id);
+}
+
+export function getSiteId() {
+  return Number.parseInt(sessionStorage.getItem('query_site_id')) || undefined;
+}
+
+export function removeSiteId() {
+  return sessionStorage.removeItem('query_site_id');
+}

ruoyi-ui/src/views/analysis/task/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="handleSiteChange">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="siteIdHandler" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -87,14 +80,16 @@
 </template>
 
 <script>
-import { listSite } from "@/api/site/site";
 import { listAchievements, taskAction } from "@/api/analysis/achievement";
+import SiteSelector from '@/components/SiteSelector';
 
 export default {
+  components: {
+    SiteSelector,
+  },
   data() {
     return {
-      siteId: '',
-      siteList: [],
+      siteId: 0,
       queryParams: {
         page: 1,
         size: 10,
@@ -108,22 +103,10 @@ export default {
       list: []
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
+    siteIdHandler(v) {
+      this.siteId = v;
+      this.handleQuery();
     },
     handleQuery() {
       this.getList();

ruoyi-ui/src/views/analysis/water-flow/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="queryParams.siteId" placeholder="请选择站点">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="id => queryParams.siteId = id" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -59,8 +52,8 @@
 </template>
 
 <script>
-import { listSite } from "@/api/site/site";
 import { parseTime } from '@/utils/ruoyi'
+import SiteSelector from '@/components/SiteSelector';
 import Chart from './chart'
 import Table from './table'
 
@@ -73,13 +66,13 @@ const initDateRange = () => {
 
 export default {
   components: {
+    SiteSelector,
     Chart,
     Table,
   },
   data() {
     const dateRange = initDateRange(1);
     return {
-      siteList: [],
       dateRange: dateRange,
       queryParams: {
         siteId: 0,
@@ -90,9 +83,6 @@ export default {
       loading: true,
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
     handleQuery() {
       if (this.mode === 'chart') {
@@ -107,18 +97,6 @@ export default {
       this.queryParams.startTime = dateRange[0]
       this.queryParams.endTime = dateRange[1]
     },
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.queryParams.siteId = this.siteList[0].siteId;
-          }
-        }
-      ).finally(() => {
-        this.loading = false;
-      });
-    },
     dateRangeChangeHandler(dateRange) {
       this.queryParams.startTime = dateRange[0];
       this.queryParams.endTime = dateRange[1];

ruoyi-ui/src/views/analysis/water-time/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="queryParams.siteId" placeholder="请选择站点">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="id => queryParams.siteId = id" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -71,8 +64,8 @@
 </template>
 
 <script>
-import { listSite } from "@/api/site/site";
 import { parseTime } from '@/utils/ruoyi'
+import SiteSelector from '@/components/SiteSelector';
 import Chart from './chart'
 import Table from './table'
 
@@ -106,13 +99,13 @@ const initDateRangeByType = (type) => {
 
 export default {
   components: {
+    SiteSelector,
     Chart,
     Table,
   },
   data() {
     const dateRange = initDateRangeByType(1);
     return {
-      siteList: [],
       dateRange: dateRange,
       queryParams: {
         siteId: 0,
@@ -133,9 +126,6 @@ export default {
       ]
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
     handleQuery() {
       if (this.mode === 'chart') {
@@ -151,18 +141,6 @@ export default {
       this.queryParams.startTime = dateRange[0]
       this.queryParams.endTime = dateRange[1]
     },
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.queryParams.siteId = this.siteList[0].siteId;
-          }
-        }
-      ).finally(() => {
-        this.loading = false;
-      });
-    },
     dateRangeChangeHandler(dateRange) {
       this.queryParams.startTime = dateRange[0];
       this.queryParams.endTime = dateRange[1];

ruoyi-ui/src/views/site/plain-point/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="handleSiteChange">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="handleSiteChange" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -50,19 +43,19 @@
 </template>
 
 <script>
-import { getConfig, listSite } from "@/api/site/site";
+import { getConfig } from "@/api/site/site";
 import { deletePlainPoint, getSiteSection, listPlainPoint } from "@/api/site/berthing";
+import SiteSelector from '@/components/SiteSelector';
 import ChartList from './chart-list';
-import {delUser} from "@/api/system/user";
 
 export default {
   components: {
-    ChartList
+    SiteSelector,
+    ChartList,
   },
   data() {
     return {
       siteId: '',
-      siteList: [],
       plain: {
         wlevelmax: 0,
         wlevelmin: 0,
@@ -78,29 +71,11 @@ export default {
       list: []
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
     handleQuery() {
       this.getList()
     },
     resetQuery() {},
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-            this.loadConfig();
-            this.loadSection();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
-    },
     getList() {
       this.loading = true;
       listPlainPoint({ ...this.queryParams, siteId: this.siteId }).then(response => {

ruoyi-ui/src/views/site/plain-time/chart-list.vue

@@ -38,6 +38,7 @@ export default {
         return;
       }
       const { sections, wlevelmax, wlevelmin, list } = plain;
+      const xAxisData = sections.map(({ x }) => x);
       const seriesData = sections.map(({ x, y }) => ([x, y]));
       const options = {
         xAxis: {
@@ -183,7 +184,7 @@ export default {
               }
             }
           },
-          data: new Array(seriesData.length).fill(wlevel),
+          data: xAxisData.map((x) => [x, wlevel]),
           type: 'line',
           markLine: {
             symbol: 'none',

ruoyi-ui/src/views/site/plain-time/chart.vue

@@ -38,6 +38,7 @@ export default {
         return;
       }
       const { sections, wlevelmax, wlevelmin, wlevel } = plain;
+      const xAxisData = sections.map(({ x }) => x);
       const seriesData = sections.map(({ x, y }) => [x, y]);
       const options = {
         xAxis: {
@@ -171,7 +172,7 @@ export default {
           lineStyle: {
             width: 0,
           },
-          data: new Array(seriesData.length).fill(wlevel),
+          data: xAxisData.map((x) => [x, wlevel]),
           type: 'line',
           markLine: {
             symbol: 'none',

ruoyi-ui/src/views/site/plain-time/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="handleSiteChange">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="handleSiteChange" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -61,18 +54,19 @@
 </template>
 
 <script>
-import { getConfig, listSite } from "@/api/site/site";
+import { getConfig } from "@/api/site/site";
 import { deletePlainTime, getSiteSection, listPlainTime } from "@/api/site/berthing";
+import SiteSelector from '@/components/SiteSelector';
 import ChartList from './chart-list';
 
 export default {
   components: {
-    ChartList
+    SiteSelector,
+    ChartList,
   },
   data() {
     return {
       siteId: '',
-      siteList: [],
       plain: {
         wlevelmax: 0,
         wlevelmin: 0,
@@ -88,29 +82,11 @@ export default {
       list: []
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
     handleQuery() {
       this.getList()
     },
     resetQuery() {},
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-            this.loadConfig();
-            this.loadSection();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
-    },
     getList() {
       this.loading = true;
       listPlainTime({ ...this.queryParams, siteId: this.siteId }).then(response => {

ruoyi-ui/src/views/site/plain-water/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="handleSiteChange">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="handleSiteChange" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -54,11 +47,13 @@
 <script>
 import { getConfig, listSite } from "@/api/site/site";
 import { deletePlainWater, getSiteSection, listPlainWater } from "@/api/site/berthing";
+import SiteSelector from '@/components/SiteSelector';
 import ChartList from './chart-list';
 
 export default {
   components: {
-    ChartList
+    SiteSelector,
+    ChartList,
   },
   data() {
     return {
@@ -79,29 +74,11 @@ export default {
       list: []
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
     handleQuery() {
       this.getList()
     },
     resetQuery() {},
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-            this.loadConfig();
-            this.loadSection();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
-    },
     getList() {
       this.loading = true;
       listPlainWater({ ...this.queryParams, siteId: this.siteId }).then(response => {

ruoyi-ui/src/views/site/section-history/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="getList">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="siteIdHandler" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -61,20 +54,20 @@
 </template>
 
 <script>
-import { listSite } from "@/api/site/site";
 import { listSection, deleteSection } from "@/api/site/berthing";
+import SiteSelector from '@/components/SiteSelector';
 import ChartList from './chart-list';
 import SectionChart from './chart';
 
 export default {
   components: {
+    SiteSelector,
     ChartList,
     SectionChart,
   },
   data() {
     return {
       siteId: '',
-      siteList: [],
       queryParams: {
         page: 1,
         size: 1000,
@@ -86,27 +79,15 @@ export default {
       sectionChartVisible: false,
     }
   },
-  created() {
-    this.init();
-  },
   methods: {
+    siteIdHandler(v) {
+      this.siteId = v;
+      this.handleQuery();
+    },
     handleQuery() {
       this.getList()
     },
     resetQuery() {},
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
-    },
     getList() {
       this.loading = true;
       listSection({ ...this.queryParams, siteId: this.siteId }).then(response => {

ruoyi-ui/src/views/site/section/index.vue

@@ -7,14 +7,7 @@
           <el-row :gutter="30">
             <el-col :span="6">
               <el-form-item label="选择站点">
-                <el-select v-model="siteId" placeholder="请选择站点" @change="getList">
-                  <el-option
-                    v-for="item in siteList"
-                    :key="item.siteId"
-                    :label="item.siteName"
-                    :value="item.siteId">
-                  </el-option>
-                </el-select>
+                <SiteSelector @change="siteIdHandler" />
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -53,18 +46,18 @@
 </template>
 
 <script>
-import { listSite } from "@/api/site/site";
-import { getSiteSection, deleteSection } from "@/api/site/berthing";
+import { getSiteSection } from "@/api/site/berthing";
+import SiteSelector from '@/components/SiteSelector';
 import SectionChart from './chart';
 
 export default {
   components: {
-    SectionChart
+    SiteSelector,
+    SectionChart,
   },
   data() {
     return {
       siteId: '',
-      siteList: [],
       queryParams: {
         page: 1,
         size: 1000,
@@ -79,23 +72,14 @@ export default {
     this.init();
   },
   methods: {
+    siteIdHandler(v) {
+      this.siteId = v;
+      this.handleQuery();
+    },
     handleQuery() {
       this.getList()
     },
     resetQuery() {},
-    init() {
-      this.loading = true;
-      listSite({ page: 1, size: 1000 }).then(response => {
-          this.siteList = response.data.records || [];
-          if (this.siteList.length > 0) {
-            this.siteId = this.siteList[0].siteId;
-            this.getList();
-          }
-        }
-      ).catch(() => {
-        this.loading = false;
-      });
-    },
     getList() {
       this.loading = true;
       getSiteSection(this.siteId).then(response => {