refactor: 1. 统计中异常值不显示；2.统计中切换设备保留上次所选类目；3.添加运维管理员的权限判断

src/components/config/function-config-pending.vue

@@ -107,7 +107,7 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20" class="mt-5 pl-2">
+    <el-row v-if="isAdmin" :gutter="20" class="mt-5 pl-2">
       <el-form-item>
         <el-button type="primary" @click="onSubmit">提交</el-button>
         <el-button @click="onReset">重置</el-button>
@@ -137,6 +137,7 @@ const store = useStore();
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const emit = defineEmits(['status']);
 const props = defineProps({ activeName: String });
+const isAdmin = computed(() => store.getters['user/isAdmin']);
 
 /**
  * 格式化时间

src/components/config/network-config-pending.vue

@@ -65,7 +65,7 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20" class="mt-5 pl-2">
+    <el-row v-if="isAdmin" :gutter="20" class="mt-5 pl-2">
       <el-form-item>
         <el-button type="primary" @click="onSubmit">提交</el-button>
         <el-button @click="onReset">重置</el-button>
@@ -92,6 +92,7 @@ const store = useStore();
 const currentDeviceId = computed(() => store.state.device.currentDeviceId);
 const emit = defineEmits(['status']);
 const props = defineProps({ activeName: String });
+const isAdmin = computed(() => store.getters['user/isAdmin']);
 
 /**
  * 查询网络参数配置

src/components/history/local.vue

@@ -77,7 +77,6 @@ const getData = async () => {
 
       const options = { ...search.value };
       const date = options && options.date ? options.date : [];
-      console.log(date);
       if (!date || date.length !== 2) {
         return ElMessage.error('请选择时间 ');
       }

src/components/history/missing-data.vue

@@ -14,21 +14,25 @@
 
     <el-table-column align="center" header-align="center" label="操作" min-width="100">
       <template #default="scope">
-        <el-button :disabled="scope.row.disabled" plain size="small" type="success" @click="handlePass(scope.row)">补传 </el-button>
+        <el-button :disabled="scope.row.disabled || !isAdmin" plain size="small" type="success" @click="handlePass(scope.row)">
+          补传
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref } from 'vue';
+import { defineProps, defineEmits, ref, computed } from 'vue';
 import dayjs from 'dayjs';
 import { sendCommand } from 'apis';
 import { ElMessage } from 'element-plus';
+import { useStore } from 'vuex';
 
 defineProps({ data: Object });
+const store = useStore();
 const emit = defineEmits(['on-success']);
-
+const isAdmin = computed(() => store.getters['user/isAdmin']);
 const contentHeight = ref(600);
 
 /**

src/components/navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center justify-between pr-5">
+  <div class="flex items-center justify-between pr-5 shadow-sm">
     <h1 class="text-lg font-medium py-3 px-6">
       <i
         v-if="menu.show"
@@ -7,7 +7,7 @@
         class="el-icon-guide mr-2"
         @click="toggleCollapse"
       ></i>
-      {{ $route.meta.title || '智能大气腐蚀监测平台' }}
+      智能大气腐蚀监测平台【{{ $route.meta.title }}】
     </h1>
 
     <el-dropdown>

src/components/statistical/stastistical-chart.vue

@@ -29,6 +29,7 @@ echarts.use([
 const store = useStore();
 const props = defineProps({ searchHeight: Number });
 const realtimeData = computed(() => store.state.statistics.realtimeData);
+const defaultSelectedLegend = computed(() => store.state.statistics.defaultSelectedLegend);
 const isMounted = ref(false);
 const noData = ref(true);
 let myChart = null;
@@ -56,9 +57,10 @@ function initChart(data) {
   chartDom.style.height = `${canvasHeight}px`;
   myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
-  render(data);
+  render(data, defaultSelectedLegend.value);
 
   myChart.on('legendselectchanged', event => {
+    store.commit('statistics/setDefaultSelectedLegend', event.selected);
     render(data, event.selected);
   });
 }

src/store/statistics.js

@@ -8,11 +8,31 @@ export default {
     corrosionData: null,
     moistTimeData: null,
     realtimeData: null,
+    defaultSelectedLegend: {
+      '钢腐蚀电流(nA)': true,
+      '铜腐蚀电流(nA)': true,
+      '铝腐蚀电流(nA)': true,
+      '锌腐蚀电流(nA)': true,
+      'SO2(ppb)': false,
+      '盐分阻抗(Ω)': false,
+      '盐分温度(℃)': false,
+      '环境温度(℃)': false,
+      '环境湿度(RH%)': false,
+    },
   },
 
   getters: {},
 
   mutations: {
+    /**
+     * 设置数据统计图表上选中的legend
+     * @param {Object} state
+     * @param {Object} newData
+     */
+    setDefaultSelectedLegend(state, newData) {
+      state.defaultSelectedLegend = { ...newData };
+    },
+
     /**
      * 设置积分电量数据
      * @param {*} state

src/store/user.js

@@ -18,6 +18,10 @@ export default {
       if (!user) return null;
       return user.account;
     },
+    isAdmin({ user }) {
+      if (!user) return false;
+      return user.account === 'iacdadmin';
+    },
   },
 
   mutations: {

src/utils/statistical.js

@@ -1,7 +1,8 @@
 /* eslint-disable max-len,object-curly-newline */
 import dayjs from 'dayjs';
 import max from 'lodash/max';
-import { colors, defaultSelectedLegend, generateDefaultSeries, legendData, yAxisData } from '@/config/chart';
+import isNaN from 'lodash/isNaN';
+import { colors, generateDefaultSeries, legendData, yAxisData } from '@/config/chart';
 
 /**
  * 生成chart所需参数
@@ -33,15 +34,15 @@ function generateParams(data) {
   };
   data.forEach(item => {
     result.time.push(dayjs(new Date(+item.time)).format('YY/MM/DD HH:mm'));
-    result.so2.push(+item.so2);
+    !isNaN(+item.so2) && result.so2.push(+item.so2);
-    result.saltR.push(+item.saltR);
+    !isNaN(+item.saltR) && result.saltR.push(+item.saltR);
-    result.saltT.push(+item.saltT);
+    !isNaN(+item.saltT) && result.saltT.push(+item.saltT);
-    result.environmentTemperature.push(+item.environmentTemperature);
+    !isNaN(+item.environmentTemperature) && result.environmentTemperature.push(+item.environmentTemperature);
-    result.environmentHumidity.push(+item.environmentHumidity);
+    !isNaN(+item.environmentHumidity) && result.environmentHumidity.push(+item.environmentHumidity);
-    result.corrosionXIN.push(+item.corrosion1);
+    !isNaN(+item.corrosion1) && result.corrosionXIN.push(+item.corrosion1);
-    result.corrosionTONG.push(+item.corrosion2);
+    !isNaN(+item.corrosion2) && result.corrosionTONG.push(+item.corrosion2);
-    result.corrosionLV.push(+item.corrosion3);
+    !isNaN(+item.corrosion3) && result.corrosionLV.push(+item.corrosion3);
-    result.corrosionGANG.push(+item.corrosion4);
+    !isNaN(+item.corrosion4) && result.corrosionGANG.push(+item.corrosion4);
   });
   return result;
 }
@@ -138,11 +139,10 @@ function generateGrid(yAxis) {
 /**
  * 生成chart参数
  * @param {Object[]} rawData 返回段返回的data数据
- * @param {Object[]} yAxis
+ * @param {Object} selected 选中的legend
- * @returns {{yAxis: [{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},{axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string},null,null,null], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: string[], grid: {right: string}, legend: {data: string[]}, series: [{data: *[], name: string, type: string},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},{data: *[], name: string, type: string, yAxisIndex: number},null,null,null], tooltip: {axisPointer: {type: string}, trigger: string}, toolbox: {feature: {saveAsImage: {show: boolean}, restore: {show: boolean}, dataView: {show: boolean, readOnly: boolean}}}}}
+ * @returns {{yAxis: ({axisLabel: {formatter: string}, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string}|{axisLabel: {formatter: string}, offset: number, axisLine: {lineStyle: {color: string}, show: boolean}, name: string, position: string, type: string})[], xAxis: [{data: *[], axisTick: {alignWithLabel: boolean}, type: string}], color: [string,string,string,string,string,string,string,string,string], grid: {left: number, right: number}, legend: {data: [string,string,string,string,string,string,string,string,string], type: string, selected}, series: (({data: ([]|number|string|*), name: string, type: string}|{data: ([]|number|BufferSource|string|*), name: string, type: string, yAxisIndex: number}|{data: ([]|string|*), name: string, type: string, yAxisIndex: number}|{data: [], name: string, type: string, yAxisIndex: number})[]|*[]), tooltip: {axisPointer: {type: string, snap: boolean}, trigger: string}, dataZoom: [{type: string},{type: string}]}}
  */
-// eslint-disable-next-line import/prefer-default-export
+export function generateChartOption(rawData, selected) {
-export function generateChartOption(rawData, selected = defaultSelectedLegend) {
   const data = generateParams(rawData);
   const yAxis = generateYAxis(selected);
   const series = generateSeries(data, yAxis);

src/views/Index.vue

@@ -44,7 +44,7 @@ function openPage(path) {
 <template>
   <el-config-provider :locale="local">
     <el-container>
-      <el-header style="padding: 0">
+      <el-header style="padding: 0; height: 54px">
         <Navbar />
       </el-header>
       <el-container class="overflow-hidden">