优化监控中心前台页面

2024-08-22 15:23:02 +08:00
parent 05bb62752b
commit 7b1f25689e
12 changed files with 122 additions and 80 deletions
--- a/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
@@ -149,7 +149,7 @@ export const formSchema = [
    component: 'NsInput',
    componentProps: {
      placeholder: '请输入',
-      maxLength: 32,
+      maxLength: 20,
    },
    rules: [
      {
@@ -410,25 +410,26 @@ export const tableConfigCal = (
          }
        },
      },
-      isCarbon
-        ? {
-            label: '关联因子值',
-            name: 'SetFactor',
-            type: 'primary',
-            dynamicDisabled: (data: any) => {
-              return data.list.length === 0;
-            },
-            handle: ({ list }) => {
-              // 过滤出 id 大于 0 的项
-              const filteredList = list.filter(({ id }) => id > 0);
+      {
+        label: '关联因子值',
+        name: 'SetFactor',
+        type: 'primary',
+        dynamicDisabled: (data: any) => {
+          return data.list.length === 0;
+        },
+        ifShow: (data: any) => {
+          return isCarbon;
+        },
+        handle: ({ list }) => {
+          // 过滤出 id 大于 0 的项
+          const filteredList = list.filter(({ id }) => id > 0);

-              // 提取出 id 值
-              const ids = filteredList.map(({ id }) => id);
+          // 提取出 id 值
+          const ids = filteredList.map(({ id }) => id);

-              setFactorRef.value.toggle(ids);
-            },
-          }
-        : {},
+          setFactorRef.value.toggle(ids);
+        },
+      },
      {
        label: '批量删除',
        name: 'GroupPointDelete',
@@ -518,10 +519,29 @@ export const tableConfigCal = (
      actions: [
        {
          label: '关联因子',
+          // label: (record) => {
+          //   // 根据record的某个字段值判断显示'关联因子'或'修改因子'
+          //   return record.emissionFactor ? '修改因子' : '关联因子';
+          // },
          name: 'SetFactor',
-          dynamicDisabled: (record) => {
+          ifShow: (record) => {
            // 这里根据record的某个字段值判断是否禁用删除按钮
-            return record.id < 0;
+            return isCarbon && record.id >= 0 && !record.emissionFactor;
+          },
+          handle: (row) => {
+            setFactorRef.value.toggle([row.id]);
+          },
+        },
+        {
+          label: '修改关联',
+          // label: (record) => {
+          //   // 根据record的某个字段值判断显示'关联因子'或'修改因子'
+          //   return record.emissionFactor ? '修改因子' : '关联因子';
+          // },
+          name: 'SetFactor',
+          ifShow: (record) => {
+            // 这里根据record的某个字段值判断是否禁用删除按钮
+            return isCarbon && record.id >= 0 && record.emissionFactor;
          },
          handle: (row) => {
            setFactorRef.value.toggle([row.id]);
@@ -530,9 +550,9 @@ export const tableConfigCal = (
        {
          label: '删除',
          name: 'GroupPointDelete',
-          dynamicDisabled: (record) => {
+          ifShow: (record) => {
            // 这里根据record的某个字段值判断是否禁用删除按钮
-            return record.id < 0;
+            return record.id >= 0;
          },
          dynamicParams: isCarbon
            ? {
@@ -797,7 +817,7 @@ export const editCarbonEquipmentConfig = (orgId) => {
      ],
      params: {},
    },
-    // pagination: { pageSizeOptions: false },
+    pagination: true,
    rowKey: 'deviceInfoCode',
  });
 };
--- a/hx-ai-intelligent/src/view/equipmentManage/group/editCal.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/editCal.vue
@@ -9,7 +9,9 @@
    :cancel="() => (visible = false)"
    placement="right">
    <div class="drawerContainer">
-      <ns-tree-api v-bind="config" @select="treeSelect" />
+      <div style="padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px">
+        <ns-tree-api v-bind="config" @select="treeSelect" />
+      </div>
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="dataSource"
--- a/hx-ai-intelligent/src/view/equipmentManage/group/editCarbonEquipment.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/editCarbonEquipment.vue
@@ -120,4 +120,7 @@
    right: 50px; /* Adjust based on your modal's positioning */
    // z-index: 1050; /* Ensure it's above the modal's backdrop */
  }
+  ::v-deep .ant-table-pagination.ant-pagination {
+    margin: 26px 0 !important; /* 根据需要调整 padding 大小 */
+  }
 </style>
--- a/hx-ai-intelligent/src/view/equipmentManage/group/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/index.vue
@@ -22,7 +22,9 @@
                    ? 'fenzujiedian'
                    : 'jisuanjiedian'
                " />
-              <span style="padding-left: 8px">{{ data.pointName }}</span>
+              <span style="padding-left: 8px" :title="data.pointName">
+                {{ truncatedName(data.pointName) }}
+              </span>
            </div>
            <a-dropdown>
              <ns-icon name="actionMore" size="14" class="actionMore" />
@@ -52,15 +54,7 @@
      v-show="!defaultType && isCarbon"
      class="table"
      v-bind="configCarbon"
-      ref="tableCalRef">
-      <!-- <template #bodyCell="{ column, record }">
-        <template v-if="column.title === '操作'">
-          <a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
-            >设为目标值</a-button
-          >
-        </template>
-      </template> -->
-    </ns-view-list-table>
+      ref="tableCalRef" />
  </div>
 </template>
 <script lang="ts" setup>
@@ -208,6 +202,12 @@
    const res = actions.filter(({ key, name }) => list.includes(key) && checkAllPermission(name));
    return res;
  };
+  const truncatedName = (name) => {
+    if (name.length > 8) {
+      return name.substring(0, 8) + '...';
+    }
+    return name;
+  };
  const actionList = [
    { title: '新增子节点', name: 'GroupAdd', key: 'addNodeSon', func: (data) => addNodeSon(data) },
    { title: '编辑', name: 'GroupEdit', key: 'editNode', func: (data) => editNode(data) },
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
@@ -155,7 +155,7 @@
        chartInstance.setOption(option);
      };
      onMounted(() => {
-        // draw();
+        draw();
      });

      // 下载图表
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@@ -32,9 +32,9 @@
              <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
            </div>
          </div>
-          <span style="padding-left: 10px; line-height: 20px"
-            ><ns-icon name="title" size="11" style="margin-right: 3px" />统计数据</span
-          >
+          <span style="padding-left: 10px; line-height: 20px">
+            <ns-icon name="title" size="11" style="margin-right: 3px" />统计数据
+          </span>
        </div>

        <div v-if="activeKey == '1'" style="height: 72%; width: 100%">
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
@@ -171,7 +171,7 @@
      // 日期类型
      const dateTypeValue = ref();

-      const frequencyValue = ref();
+      const frequencyValue = ref(0);

      const activeKey = ref('1');

@@ -284,13 +284,13 @@
      const getSelectGraph = (key: any) => {
        if (key) {
          activeKey.value = key;
-          if (
-            pageData.graphTableList.length > 0 &&
-            pageData.graphTableColumns.length > 0 &&
-            pageData.graphGraphList.length > 0
-          ) {
-            return;
-          }
+          // if (
+          //   pageData.graphTableList.length > 0 &&
+          //   pageData.graphTableColumns.length > 0 &&
+          //   pageData.graphGraphList.length > 0
+          // ) {
+          //   return;
+          // }
        }

        let startTime = '';
@@ -364,9 +364,9 @@
      const getSelectAnalyse = (key: any) => {
        if (key) {
          activeKey.value = key;
-          if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
-            return;
-          }
+          // if (pageData.analysisGraphList.length > 0 && pageData.analysisTableList.length > 0) {
+          //   return;
+          // }
        }
        let startTime = '';
        let endTime = '';
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
@@ -811,6 +811,26 @@
            lineHeight: 20,
          },
        },
+        dataZoom: [
+          {
+            show: true,
+            type: 'slider',
+            zoomLock: true,
+            startValue: 0, // 从头开始。
+            endValue: 23,
+            bottom: 20,
+            height: 10,
+            showDetail: false,
+          },
+          {
+            show: true,
+            type: 'inside',
+            xAxisIndex: 0,
+            zoomOnMouseWheel: false, // 滚轮是否触发缩放
+            moveOnMouseMove: true, // 鼠标滚轮触发滚动
+            moveOnMouseWheel: true,
+          },
+        ],
        visualMap: {
          show: false,
          min: min,
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/config.ts
@@ -4,10 +4,14 @@ export const tableColumns = [
    customRender: (text: any) => {
      return text.index + 1;
    },
+    width: 150,
+    align: 'center',
  },
  {
    title: '时间',
    dataIndex: 'time',
+    width: 150,
+    align: 'center',
  },
  // {
  //   title: '温度（℃）',
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@@ -9,7 +9,7 @@
        bordered
        :pagination="false"
        style="height: 75%"
-        :scroll="{ x: 100, y: 450 }">
+        :scroll="{ x: 200, y: 450 }">
        <template #title>
          <div
            style="display: flex; align-items: center; justify-content: space-between; width: 100%">
@@ -84,6 +84,7 @@
  });

  const loading = ref(false);
+  const x = ref(1200);

  const typeList = ref();
  // 采集频率
@@ -181,8 +182,11 @@
          tableColumnsB.push({
            title: headerList[i],
            dataIndex: headerList[i],
+            width: 150,
+            align: 'center',
          });
        }
+        x.value = 300 + headerList.length * 150;
        let columnA: any[] = [...tableColumnsA];
        columnA.push(...tableColumnsB);
        tableColumns.value = columnA;
@@ -222,7 +226,7 @@
    display: flex;
  }
  ::v-deep .ant-table-container {
-    padding: 0px 16px;
+    margin: 0px 16px;
  }
 </style>
 <style scoped>
@@ -233,4 +237,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 {
+    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
@@ -8,7 +8,7 @@
        bordered
        :pagination="false"
        :height="500"
-        :scroll="{ x: 3000, y: 440 }">
+        :scroll="{ x: x, y: 440 }">
        <template #title>
          <div
            style="
@@ -123,6 +123,8 @@
  const tableColumnsA: TableColumnType[] = [
    {
      title: '序号',
+      width: 50,
+      align: 'center',
      customRender: ({ record, index }) => {
        // 自定义单元格内容，这里返回序号
        if (index == 0) {
@@ -159,6 +161,7 @@
      title: '区域名称',
      dataIndex: 'location',
      width: 100,
+      align: 'center',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@@ -182,6 +185,7 @@
      title: '点位',
      dataIndex: 'pointName',
      width: 100,
+      align: 'center',
      customCell: (record, rowIndex) => {
        if (rowIndex == undefined) {
          return {
@@ -209,6 +213,7 @@
      title: '日期',
      dataIndex: 'time',
      width: 110,
+      align: 'center',
    },
  ];

@@ -236,6 +241,7 @@
    pageSize: 10,
  });
  const orgId = ref('');
+  const x = ref(2000);
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;

@@ -310,8 +316,11 @@
          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;
@@ -370,7 +379,7 @@
    display: flex;
  }
  ::v-deep .ant-table-container {
-    padding: 0px 16px;
+    margin: 0px 16px;
  }
 </style>
 <style scoped>
@@ -381,4 +390,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 {
+    display: none !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@@ -40,7 +40,7 @@
    @ok="handleOk"
    @cancel="closeOpenUpload">
    <div style="display: flex">
-      <div style="width: 15%">
+      <div style="width: 15%; height: 100%; position: sticky; top: 0; align-self: flex-start">
        <a-tabs
          v-model:activeKey="typeValue"
          tab-position="left"
@@ -76,25 +76,6 @@
              ">
              <div style="display: flex; align-items: center; width: 85%">
                <div style="width: 10%">数据列表</div>
-                <!-- <a-select
-                  v-model:value="typeValue"
-                  placeholder="请选择环境参数"
-                  style="width: 15%"
-                  :options="typeList" /> -->
-                <!-- <a-tree-select
-                  v-model:value="quyuvalue"
-                  style="width: 35%; margin-left: 10px"
-                  :tree-data="treeData2"
-                  :field-names="{
-                    children: 'childList',
-                    label: 'name',
-                    value: 'id',
-                  }"
-                  tree-checkable
-                  allow-clear
-                  placeholder="请选择区域"
-                  tree-node-filter-prop="label"
-                  :maxTagCount="1" /> -->
                <a-cascader
                  :options="treeData2"
                  v-model:value="quyuvalue"
@@ -115,18 +96,11 @@
                  v-model:value="areaName"
                  placeholder="请输入设备名称"
                  style="width: 20%; margin-left: 1%" />
-                <!-- <a-select
-                  v-model:value="frequencyValue"
-                  placeholder="请选择采集频率"
-                  style="width: 15%; margin-left: 10px"
-                  :options="frequencyOptions" /> -->
-                <!-- <a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" /> -->
                <a-button style="margin-left: 10px" @click="resetting"> 重置 </a-button>
                <a-button type="primary" style="margin-left: 10px" @click="queryDeviceInfoListPage">
                  搜索
                </a-button>
              </div>
-              <!-- <a-button type="primary"> 导出 </a-button> -->
            </div>
            <div>
              <a-divider />