fix: 完善api对接

4 years ago · 3a34a4ce96
11 changed files with 54 additions and 122 deletions
--- a/src/components/history/device.vue
+++ b/src/components/history/device.vue
@ -3,7 +3,7 @@

  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceId" />
      <el-table-column align="center" label="采集时间" min-width="170">
        <template #default="scope">
          {{ formatTime(+scope.row.time) }}
@ -22,8 +22,8 @@
      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
      <!--      TODO:-->
-      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="salt" />
-      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="salt" />
+      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
+      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
      <el-table-column align="center" label="太阳能板电压(V)" min-width="140" prop="solarVoltage" />
@ -97,10 +97,12 @@ const getData = async () => {
        paging: true,
        page: page.value.page,
        size: page.value.size,
-        sort: {
-          col: 'gathered_at',
+        sort: [
+          {
+            col: 'time',
            order: 'DESC',
          },
+        ],
      };

      loadingSearch.value = true;
--- a/src/components/history/history-log-table.vue
+++ b/src/components/history/history-log-table.vue
@ -1,6 +1,6 @@
 <template>
-  <template v-if="devicesAll && devicesAll.data">
-    <el-table :data="devicesAll.data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
+  <template v-if="data">
+    <el-table :data="data" :max-height="contentHeight" border class="mt-6" stripe style="width: 100%">
      <el-table-column align="center" label="设备ID" min-min-width="100" prop="deviceId" />
      <el-table-column align="center" label="开始时间" min-width="200">
        <template #default="scope">
@ -23,91 +23,20 @@
        </template>
      </el-table-column>
    </el-table>
-
-    <el-pagination
-      :current-page="devicesAll.page.page"
-      :default-page-size="50"
-      :page-count="devicesAll.page.count"
-      :page-size="devicesAll.page.size"
-      :page-sizes="[1, 10, 20, 50, 100]"
-      :total="devicesAll.page.total"
-      background
-      class="my-3 float-right"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="onSizeChange"
-      @current-change="onCurrentPageChange"
-    ></el-pagination>
  </template>
-
-  <!-- 编辑设备信息 -->
-  <DeviceEdit :show="editing" @toggle-mdoal="editing = false" />
 </template>

 <script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useStore } from 'vuex';
+import { defineProps, onMounted, ref } from 'vue';
 import dayjs from 'dayjs';
-import DeviceEdit from 'components/device/device-edit.vue';
-import StatusTagPending from 'components/config/status-tag-pending.vue';
 import { PENDING_TYPE } from '@/config/config';

-let timer = null;
-const store = useStore();
-const token = computed(() => store.getters['user/token']);
-const devicesAll = computed(() => {
-  return store.state.device.devicesAll;
-});
-const currentDeviceId = computed(() => store.state.device.currentDeviceId);
-const contentHeight = ref(600);
-const editing = ref(false);
-
-// 获取设备完整信息列表
-const getDevicesAllData = () => {
-  try {
-    if (token && token.value) {
-      store.dispatch('device/getDevicesAll');
-      timer && clearTimeout(timer);
-      timer = null;
-    } else {
-      timer = setTimeout(() => {
-        getDevicesAllData();
-      });
-    }
-  } catch (error) {
-    throw new Error(error);
-  }
-};
+defineProps({ data: Object });

-getDevicesAllData();
+const contentHeight = ref(600);

-// 设置表格高度
 onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
-  contentHeight.value = winHeight - 250;
+  contentHeight.value = winHeight - 150;
 });
-
-/**
- * 删除
- * @param {number} page 页码
- * @param {number} size 每页条数
- */
-function onSearch(page, size = 50) {
-  const deviceId = currentDeviceId.value;
-  const params = {
-    deviceId,
-    page,
-    size,
-  };
-  store.dispatch('device/getDevicesAll', params);
-}
-
-// 当前页码变化
-const onCurrentPageChange = page => {
-  onSearch(page, devicesAll.value.page.size || 50);
-};
-
-// 每页条数变化
-const onSizeChange = size => {
-  onSearch(1, size);
-};
 </script>
--- a/src/components/history/history-log.vue
+++ b/src/components/history/history-log.vue
@ -1,35 +1,35 @@
 <template>
-  <SearchHistoryLog @search="onSearch" />
+  <SearchHistoryLog @search="getData" />

-  <TableHistoryLog />
+  <TableHistoryLog :data="data" />
 </template>

 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { getSendHistory } from 'apis';
+import { ElMessage } from 'element-plus';
 import SearchHistoryLog from 'components/history/search-history-log.vue';
 import TableHistoryLog from 'components/history/history-log-table.vue';

 const store = useStore();
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
-async function getData() {
-  try {
-    const params = {
+const data = ref([]);
+
+async function getData(
+  params = {
    deviceId: currentDeviceId.value,
-      status: 'DATA',
-      type: 'EVENT',
-    };
+    status: '',
+    type: '',
+  },
+) {
+  try {
    const resData = await getSendHistory(params);
-    console.log(resData);
+    data.value = resData ? [...resData] : [];
  } catch (error) {
-    console.error(error);
+    ElMessage.error(error.message || '查询失败');
  }
 }

 getData();
-
-function onSearch(event) {
-  console.log(event);
-}
 </script>
--- a/src/components/history/local.vue
+++ b/src/components/history/local.vue
@ -3,7 +3,7 @@

  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceId" />
      <el-table-column align="center" label="采集时间" min-width="170">
        <template #default="scope">
          {{ formatTime(+scope.row.time) }}
@ -21,8 +21,8 @@
      <el-table-column align="center" label="环境温度(℃)" min-width="110" prop="environmentTemperature" />
      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
-      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="salt" />
-      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="salt" />
+      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
+      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
      <el-table-column align="center" label="太阳能板电压(V)" min-width="140" prop="solarVoltage" />
      <el-table-column align="center" label="蓄电池电压(V)" min-width="120" prop="batteryVoltage" />
      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
@ -51,7 +51,7 @@
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
 import SearchBar from 'components/history/search-bar-data.vue';
-import { getHistory } from 'apis';
+import { getDatas } from 'apis';
 import { ElMessage } from 'element-plus';
 import dayjs from 'dayjs';

@ -76,7 +76,6 @@ const getData = async () => {
      }

      const options = { ...search.value };
-      console.log('options:', options);
      const date = options && options.date ? options.date : [];
      if (!date || date.length !== 2) {
        return ElMessage.error('请选择时间 ');
@ -89,12 +88,12 @@ const getData = async () => {
        size: page.value.size,
        sort: [
          {
-            col: 'gathered_at',
+            col: 'time',
            order: 'DESC',
          },
        ],
      };
-      const resData = await getHistory(params);
+      const resData = await getDatas(params);
      data.value = resData.data;
      page.value = resData.page;
      timer && clearTimeout(timer);
@ -115,7 +114,7 @@ const getData = async () => {
 // 设置表格高度
 onMounted(() => {
  const winHeight = document.documentElement.clientHeight;
-  contentHeight.value = winHeight - 350;
+  contentHeight.value = winHeight - 250;
 });

 /**
--- a/src/components/history/search-history-log.vue
+++ b/src/components/history/search-history-log.vue
@ -1,5 +1,5 @@
 <template>
-  <el-form ref="searchDeviceForm" :inline="true" :model="searchDevice">
+  <el-form ref="searchHistoryLogForm" :inline="true" :model="searchDevice">
    <el-form-item label="选择站点">
      <el-select v-model="searchDevice.deviceId" placeholder="请选择站点" @change="change">
        <el-option label="全部" value></el-option>
@ -48,7 +48,7 @@ const searchDevice = reactive({
  type: '',
  status: '',
 });
-const searchDeviceForm = ref(null); // form
+const searchHistoryLogForm = ref(null); // form
 const store = useStore();
 const devices = computed(() => store.state.device.devices);
 const currentDeviceId = computed(() => store.state.device.currentDeviceId); // 正在操作的设备的id
@ -70,7 +70,7 @@ const change = e => {

 // 提交
 const onSubmit = () => {
-  searchDeviceForm.value.validate(() => {
+  searchHistoryLogForm.value.validate(() => {
    emit('search', { ...searchDevice });
  });
 };
--- a/src/config/chart.js
+++ b/src/config/chart.js
@ -74,7 +74,7 @@ export const yAxisData = [
      show: true,
      lineStyle: { color: colors[3] },
    },
-    axisLabel: { formatter: '{value}ppb' },
+    axisLabel: { formatter: '{value}' },
    axisPointer: { show: false },
  },
  {
@ -87,7 +87,7 @@ export const yAxisData = [
      show: true,
      lineStyle: { color: colors[4] },
    },
-    axisLabel: { formatter: '{value}Ω' },
+    axisLabel: { formatter: '{value}' },
    axisPointer: { show: false },
  },
 ];
--- a/src/utils/statistical.js
+++ b/src/utils/statistical.js
@ -55,7 +55,6 @@ function generateParams(data) {
 export function computeYAxisShow(yName, selectedLegend) {
  // eslint-disable-next-line guard-for-in,no-restricted-syntax
  for (const key in selectedLegend) {
-    console.log('key:', key, yName);
    if (key.includes(yName) && selectedLegend[key]) {
      return true;
    }
@ -132,7 +131,7 @@ function generateGrid(yAxis) {
  });
  return {
    left: max(left) + 100,
-    right: max(right) + 45,
+    right: max(right) + 80,
  };
 }

@ -173,6 +172,5 @@ export function generateChartOption(rawData, selected = defaultSelectedLegend) {
    yAxis,
    series,
  };
-  console.log(option);
  return option;
 }
--- a/src/views/commands.vue
+++ b/src/views/commands.vue
@ -39,7 +39,7 @@

      <el-table-column align="center" label="类型标识" min-width="80">
        <template #default="scope">
-          {{ log.ASDU_TYPE[scope.row.asduType].text }}
+          <span v-if="scope.row.asduType && log.ASDU_TYPE[scope.row.asduType]">{{ log.ASDU_TYPE[scope.row.asduType].text }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="信息体顺序" min-width="100">
--- a/src/views/data-realtime.vue
+++ b/src/views/data-realtime.vue
@ -3,7 +3,7 @@

  <template v-if="data">
    <el-table :data="data" :max-height="contentHeight" border stripe style="width: 100%">
-      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceNo" />
+      <el-table-column align="center" fixed label="设备ID" min-width="80" prop="deviceId" />
      <el-table-column align="center" label="采集时间" min-width="170">
        <template #default="scope">
          {{ formatTime(+scope.row.time) }}
@ -22,8 +22,8 @@
      <el-table-column align="center" label="环境湿度(RH%)" min-width="130" prop="environmentHumidity" />
      <el-table-column align="center" label="SO2(ppb)" min-width="90" prop="so2" />
      <!--      TODO:-->
-      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="salt" />
-      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="salt" />
+      <el-table-column align="center" label="盐分温度(℃)" min-width="110" prop="saltT" />
+      <el-table-column align="center" label="盐分阻抗(Ω)" min-width="110" prop="saltR" />
      <el-table-column align="center" label="机箱温度(℃)" min-width="110" prop="deviceTemperature" />
      <el-table-column align="center" label="机箱湿度(RH%)" min-width="130" prop="deviceHumidity" />
      <el-table-column align="center" label="太阳能板电压(V)" min-width="140" prop="solarVoltage" />
@ -96,7 +96,7 @@ const getData = async () => {
        size: page.value.size,
        sort: [
          {
-            col: 'gathered_at',
+            col: 'createdAt',
            order: 'DESC',
          },
        ],
--- a/src/views/device-list.vue
+++ b/src/views/device-list.vue
@ -20,7 +20,10 @@
            <el-col :span="9">安装位置：{{ props.row.installLocation }}</el-col>
            <el-col :span="9">sim1：{{ props.row.sim1 }}</el-col>
            <el-col :span="9">协议版本：{{ props.row.protocolVersion }}</el-col>
-            <el-col :span="9">产品类型：{{ ASDU_TYPE[props.row.type].text }}</el-col>
+            <el-col :span="9">
+              产品类型：
+              <span v-if="ASDU_TYPE[props.row.type]">{{ ASDU_TYPE[props.row.type].text }}</span>
+            </el-col>
            <el-col :span="9">与主站后台联调情况：{{ props.row.joint }}</el-col>
            <el-col :span="9">备注：{{ props.row.remark }}</el-col>
            <el-col :span="9">维修记录：{{ props.row.operationRecord }}</el-col>
--- a/src/views/statistical-report.vue
+++ b/src/views/statistical-report.vue
@ -8,6 +8,7 @@ import SearchBar from 'components/statistical/search-bar.vue';
 import HistoryData from 'components/statistical/stastistical-chart.vue';
 import { computed, onMounted, ref } from 'vue';
 import { useStore } from 'vuex';
+import { ElMessage } from 'element-plus';

 const searchBar = ref(null);
 let timer = null;
@ -55,7 +56,7 @@ const getData = async () => {
    }
  } catch (error) {
    loadingSearch.value = false;
-    console.log('error: ', error);
+    ElMessage.error(error.message || '查询失败');
  }
 };