修改监控中心样式

修改分组管理样式
2024-08-30 17:22:49 +08:00
parent b36081126f
commit 84ed95512f
7 changed files with 98 additions and 85 deletions
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -53,6 +53,7 @@
            <div v-for="(item, index) in ringData" :key="index">
              {{ item.name }} : {{ item.value }} {{ item.unit }}
              <a-progress
+                :stroke-color="index == 0 ? '#4388FB' : '#55C3BB'"
                :percent="(100 * item.value) / sum"
                :show-info="false"
                :strokeWidth="15" />
@@ -785,7 +786,7 @@
        grid: {
          height: '80%',
          width: '85%',
-          top: '10%',
+          top: '5%',
        },
        xAxis: {
          type: 'category',
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -8,8 +8,7 @@
        :data-source="pageData"
        bordered
        :pagination="false"
-        style="height: 75%"
-        :scroll="{ x: x, y: 450 }">
+        :scroll="{ x: x }">
        <template #title>
          <div
            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
@@ -47,24 +46,30 @@
          </div>
        </template>
      </a-table>
+      <!-- <a-pagination
+        :current="queryParams.pageNum"
+        :total="total"
+        :show-total="(total, range) => ` 共 ${total} 条`"
+        :page-size="queryParams.pageSize"
+        style="display: flex; justify-content: right; margin-top: 16px; margin-right: 30px"
+        :show-size-changer="true"
+        :show-quick-jumper="true"
+        @change="onChange" /> -->
+      <a-pagination
+        :total="total"
+        size="small"
+        :show-total="(total, range) => `显示第${range[0]}到${range[1]}条记录 ,共${total} 条记录`"
+        show-size-changer
+        show-quick-jumper
+        @change="onChange"
+        style="
+          display: flex;
+          justify-content: right;
+          margin-top: 10px;
+          margin-right: 30px;
+          padding-bottom: 10px;
+        " />
    </a-spin>
-    <a-pagination
-      :current="queryParams.pageNum"
-      :total="total"
-      :show-total="(total, range) => ` 共 ${total} 条`"
-      :page-size="queryParams.pageSize"
-      style="
-        display: flex;
-        position: absolute;
-        bottom: 20px;
-        right: 30px;
-        justify-content: right;
-        margin-top: 16px;
-        margin-right: 30px;
-      "
-      :show-size-changer="true"
-      :show-quick-jumper="true"
-      @change="onChange" />
  </div>
  <!-- </a-spin> -->
 </template>
@@ -245,7 +250,7 @@
  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
    border: none !important;
  }
-  ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
+  /* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
    display: none !important;
-  }
+  } */
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div style="background: #ffffff; height: 95%; position: relative">
+  <div style="background: #ffffff; height: 95%; position: relative; overflow-y: auto">
    <a-spin :spinning="loading" style="height: 100%">
      <a-table
        :columns="tableColumns"
@@ -8,7 +8,7 @@
        bordered
        :pagination="false"
        :height="500"
-        :scroll="{ x: x, y: 440 }">
+        :scroll="{ x: x }">
        <template #title>
          <div
            style="
@@ -68,22 +68,15 @@
          </div>
        </template>
      </a-table>
+      <a-pagination
+        :total="total"
+        size="small"
+        :show-total="(total, range) => `显示第${range[0]}到${range[1]}条记录 ,共${total} 条记录`"
+        show-size-changer
+        show-quick-jumper
+        @change="onChange"
+        style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
    </a-spin>
-    <a-pagination
-      :total="total"
-      :show-total="(total, range) => ` 共 ${total} 条`"
-      show-size-changer
-      show-quick-jumper
-      @change="onChange"
-      style="
-        display: flex;
-        position: absolute;
-        bottom: 20px;
-        right: 30px;
-        justify-content: right;
-        margin-top: 10px;
-        margin-right: 30px;
-      " />
  </div>
 </template>
 <script lang="ts" setup>
@@ -288,7 +281,7 @@
  // 获取表格数据
  const getTableList = () => {
    loading.value = true;
-    tableColumns.value = [];
+    tableColumns.value = tableColumnsA;
    data.value = [];
    total.value = 0;
    pageData.value = [];
@@ -318,26 +311,31 @@
        timeRate: frequencyValue.value, // 频率
      })
      .then((res) => {
-        // 拼接表头
-        let headerList = res.data.headerList;
-        let tableColumnsB = [];
-        for (let i = 0; i < headerList.length; i++) {
-          tableColumnsB.push({
-            title: headerList[i],
-            dataIndex: headerList[i],
-            width: 60,
-            align: 'center',
-          });
-        }
-        x.value = 360 + headerList.length * 60;
-        let columnA: any[] = [...tableColumnsA];
-        columnA.push(...tableColumnsB);
-        tableColumns.value = columnA;
+        if (res.retcode == 0) {
+          // 拼接表头
+          let headerList = res.data.headerList;
+          let tableColumnsB = [];
+          for (let i = 0; i < headerList.length; i++) {
+            tableColumnsB.push({
+              title: headerList[i],
+              dataIndex: headerList[i],
+              width: 60,
+              align: 'center',
+            });
+          }
+          x.value = 360 + headerList.length * 60;
+          debugger;
+          let columnA: any[] = [...tableColumnsA];
+          columnA.push(...tableColumnsB);
+          tableColumns.value = columnA;

-        // 数据赋值
-        data.value = res.data.data;
-        total.value = res.data.data.length;
-        onChange(1, 10);
+          // 数据赋值
+          data.value = res.data.data;
+          total.value = res.data.data.length;
+          onChange(1, 10);
+        } else {
+          x.value = 360;
+        }
      })
      .finally(() => {
        loading.value = false;
@@ -349,10 +347,10 @@
      .get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value })
      .then((res) => {
        treeData2.value = res.data;
-        if (treeData2.value && treeData2.value.length > 0) {
-          quyuvalue.value = [treeData2.value[0].childList[0].id];
-          getTableList();
-        }
+        // if (treeData2.value && treeData2.value.length > 0) {
+        //   quyuvalue.value = [treeData2.value[0].childList[0].id];
+        //   getTableList();
+        // }
      });
  };
  // 导出excel文件
@@ -360,6 +358,7 @@
    exportExcel(tableColumns.value, data.value, '历史数据导出', true, 'location', 1, 3);
  };
  onMounted(async () => {
+    tableColumns.value = tableColumnsA;
    // 获取频率
    let frequency = await getEnum({ params: { enumType: 'TimeFlagEnum' } });
    frequencyOptions.value = frequency.data;
@@ -378,6 +377,7 @@
    }
    // 获取区域数据
    await queryDeviceArea();
+    getTableList();
  });

  // 分页器
@@ -403,7 +403,7 @@
  ::v-deep .ant-table.ant-table-bordered > .ant-table-title {
    border: none !important;
  }
-  ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
+  /* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
    display: none !important;
-  }
+  } */
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -9,11 +9,8 @@
          margin-top: 0.5%;
          padding-left: 1.5%;
          background: #ffffff;
-          font-family: 'PingFang SC';
-          font-size: 16px;
-          font-weight: 700;
+
          letter-spacing: 1.33px;
-          line-height: 21px;
        ">
        <a-tab-pane key="1" tab="综合数据" />
        <a-tab-pane key="2" tab="历史数据" />
@@ -29,8 +26,8 @@
    </div>

    <aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
-    <history-data ref="historyDataRef" v-if="activeKey == '2'" />
-    <average-data ref="averageDataRef" v-if="activeKey == '3'" />
+    <history-data ref="historyDataRef" v-if="activeKey == '2'" style="height: 90%" />
+    <average-data ref="averageDataRef" v-if="activeKey == '3'" style="height: 85%" />
  </div>

  <a-modal
@@ -451,8 +448,6 @@
 <style lang="less" scoped>
  ::v-deep .ant-tabs-tab {
    font-weight: 700; /* 选中标签的加粗 */
-    // font-size: 16px;
-    // letter-spacing: 1.33px;
    color: #666666 !important;
  }
  ::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {