监控中心 - 环境监控根据UI设计图进行页面优化

3 months ago · 59c3004067
5 changed files with 204 additions and 115 deletions
--- a/hx-ai-intelligent/src/icon/xianshiqi.svg
+++ b/hx-ai-intelligent/src/icon/xianshiqi.svg
@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.921875" height="30.218994140625" viewBox="0 0 37.921875 30.218994140625" fill="none">
+<path d="M37.6256 11.8506L0.296264 11.8506C0.133319 11.8506 0 11.9839 0 12.1469L0 21.9236C0 22.5791 0.529573 23.1086 1.18506 23.1086L17.4796 23.1086C17.6426 23.1086 17.7759 23.242 17.7759 23.4049L17.7759 26.3676C17.7759 26.5305 17.6426 26.6638 17.4796 26.6638L10.9618 26.6638C10.7988 26.6638 10.6655 26.7972 10.6655 26.9601L10.6655 28.8118C10.6655 28.9747 10.7988 29.108 10.9618 29.108L17.4796 29.108C17.6426 29.108 17.7759 29.2413 17.7759 29.4043L17.7759 30.0709C17.7759 30.1523 17.8425 30.219 17.924 30.219L19.9979 30.219C20.0793 30.219 20.146 30.1523 20.146 30.0709L20.146 29.4043C20.146 29.2413 20.2793 29.108 20.4422 29.108L26.9601 29.108C27.123 29.108 27.2563 28.9747 27.2563 28.8118L27.2563 26.9601C27.2563 26.7972 27.123 26.6638 26.9601 26.6638L20.4422 26.6638C20.2793 26.6638 20.146 26.5305 20.146 26.3676L20.146 23.4049C20.146 23.242 20.2793 23.1086 20.4422 23.1086L36.7368 23.1086C37.3923 23.1086 37.9219 22.5791 37.9219 21.9236L37.9219 12.1469C37.9219 11.9839 37.7885 11.8506 37.6256 11.8506ZM4.74023 16.5908C4.74023 15.9353 5.2698 15.4057 5.92529 15.4057C6.58078 15.4057 7.11035 15.9353 7.11035 16.5908C7.11035 17.2463 6.58078 17.7759 5.92529 17.7759C5.2698 17.7759 4.74023 17.2463 4.74023 16.5908ZM32.8335 17.4278C32.6187 17.6425 32.3225 17.7759 31.9966 17.7759L10.6655 17.7759C10.01 17.7759 9.48046 17.2463 9.48046 16.5908C9.48046 15.9353 10.01 15.4057 10.6655 15.4057L31.9966 15.4057C32.6521 15.4057 33.1816 15.9353 33.1816 16.5908C33.1816 16.9167 33.0483 17.213 32.8335 17.4278ZM36.7368 0L1.18506 0C0.529573 0 0 0.529572 0 1.18507L0 10.9618C0 11.1247 0.133319 11.2581 0.296264 11.2581L37.6256 11.2581C37.7885 11.2581 37.9219 11.1247 37.9219 10.9618L37.9219 1.18507C37.9219 0.529572 37.3923 0 36.7368 0ZM4.74023 4.74022C4.74023 4.08473 5.2698 3.55516 5.92529 3.55516C6.58078 3.55516 7.11035 4.08473 7.11035 4.74022C7.11035 5.39571 6.58078 5.92529 5.92529 5.92529C5.2698 5.92529 4.74023 5.39571 4.74023 4.74022ZM32.8335 5.57718C32.6187 5.79196 32.3225 5.92529 31.9966 5.92529L10.6655 5.92529C10.01 5.92529 9.48046 5.39571 9.48046 4.74022C9.48046 4.08473 10.01 3.55516 10.6655 3.55516L31.9966 3.55516C32.6521 3.55516 33.1816 4.08473 33.1816 4.74022C33.1816 5.06613 33.0483 5.36238 32.8335 5.57718Z"   fill="url(#linear_fill_0_5271)" >
+</path>
+<defs>
+<linearGradient id="linear_fill_0_5271" x1="18.9609375" y1="0" x2="18.9609375" y2="30.218994140625" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#2BC69C"  />
+<stop offset="1" stop-color="#0CA87E"  />
+</linearGradient>
+</defs>
+</svg>
--- a/hx-ai-intelligent/src/icon/zongheshuju.svg
+++ b/hx-ai-intelligent/src/icon/zongheshuju.svg
@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#50a6ff"/>
+      <stop offset="1" stop-color="#4182fb"/>
+    </linearGradient>
+    <filter id="矩形_8514" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse">
+      <feOffset dy="6" input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-color="#4886fb" flood-opacity="0.2"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g id="组_21753" data-name="组 21753" transform="translate(-1578 -238)">
+    <g transform="matrix(1, 0, 0, 1, 1578, 238)" filter="url(#矩形_8514)">
+      <rect id="矩形_8514-2" data-name="矩形 8514" width="24" height="24" rx="8" transform="translate(9 3)" fill="url(#linear-gradient)"/>
+    </g>
+    <path id="wodeshenqing" d="M130.422,98.2H123.2a1.211,1.211,0,0,0-1.2,1.215v8.1a1.21,1.21,0,0,0,1.2,1.215h7.221a1.21,1.21,0,0,0,1.2-1.215v-8.1A1.21,1.21,0,0,0,130.422,98.2Zm-3.62,2.041a.606.606,0,1,1-.6.606A.606.606,0,0,1,126.8,100.241Zm-2.6,0a.606.606,0,1,1-.6.606A.6.6,0,0,1,124.206,100.241Zm-.2,2.827h4.429a.406.406,0,0,1,0,.812H124a.406.406,0,0,1,0-.812Zm5.606,3.224H124a.406.406,0,0,1,0-.812h5.606a.406.406,0,0,1,0,.812Zm-.2-4.836a.606.606,0,1,1,.6-.606A.6.6,0,0,1,129.413,101.455Z" transform="translate(1471.873 149.182)" fill="#fff"/>
+  </g>
+</svg>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@ -1,19 +1,22 @@
 <!-- eslint-disable vue/v-on-event-hyphenation -->
 <template>
  <!-- <a-spin :spinning="loading"> -->
-  <div style="background: #ffffff; height: 95%">
+  <div style="background: #ffffff; height: 95%; position: relative">
    <a-spin :spinning="loading">
      <a-table
        :columns="tableColumns"
        :data-source="pageData"
        bordered
        :pagination="false"
+        style="height: 75%"
        :scroll="{ x: 100, y: 450 }">
        <template #title>
          <div
            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
            <div style="display: flex; align-items: center; width: 85%">
-              <div style="width: 10%">数据报表</div>
+              <div style="width: 10%"
+                ><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
+              >

              <a-select
                v-model:value="frequencyValue"
@ -39,15 +42,24 @@
          </div>
        </template>
      </a-table>
-      <a-pagination
-        :current="queryParams.pageNum"
-        :total="total"
-        :page-size="queryParams.pageSize"
-        style="display: flex; justify-content: center; margin-top: 16px"
-        :show-size-changer="true"
-        :show-quick-jumper="true"
-        @change="onChange" />
    </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>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@ -1,18 +1,21 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div style="background: #ffffff; height: 95%">
-    <a-spin :spinning="loading">
+  <div style="background: #ffffff; height: 95%; position: relative">
+    <a-spin :spinning="loading" style="height: 100%">
      <a-table
        :columns="tableColumns"
        :data-source="pageData"
        bordered
        :pagination="false"
-        :scroll="{ x: 100 }">
+        :height="500"
+        :scroll="{ x: 3000, y: 440 }">
        <template #title>
          <div
            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
            <div style="display: flex; align-items: center; width: 85%">
-              <div style="width: 10%">数据报表</div>
+              <div style="width: 10%"
+                ><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
+              >
              <a-select
                v-model:value="typeValue"
                placeholder="请选择环境参数"
@ -20,7 +23,7 @@
                :options="typeList" />
              <a-tree-select
                v-model:value="quyuvalue"
-                style="width: 17%; margin-left: 10px"
+                style="width: 22%; margin-left: 10px"
                :tree-data="treeData2"
                :field-names="{
                  children: 'childList',
@ -54,13 +57,22 @@
          </div>
        </template>
      </a-table>
-      <a-pagination
-        :total="total"
-        show-size-changer
-        show-quick-jumper
-        @change="onChange"
-        style="display: flex; justify-content: center; margin-top: 10px" />
    </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>
@ -138,6 +150,7 @@
    {
      title: '区域名称',
      dataIndex: 'location',
+      width: 100,
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@ -160,6 +173,7 @@
    {
      title: '点位',
      dataIndex: 'pointName',
+      width: 100,
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@ -186,6 +200,7 @@
    {
      title: '日期',
      dataIndex: 'time',
+      width: 110,
    },
  ];