修改监控中心前台样式

修改分组管理前台样式
3 months ago · a648d043ee
12 changed files with 126 additions and 93 deletions
--- a/hx-ai-intelligent/src/api/deviceManage.ts
+++ b/hx-ai-intelligent/src/api/deviceManage.ts
@ -30,6 +30,8 @@ export enum group {
  dropGroupInfoFilter = `${BASE_URL}/deviceGroup/dropGroupInfoFilter`, // 计算列表查询
  queryDeviceToEnergy = `${BASE_URL}/deviceGroup/queryDeviceToEnergy`, // 能耗监测用查询设备（能耗监测设备树）

+  importGroup = `${BASE_URL}/deviceGroup/importGroup`, // 批量导入计算节点
+
  getCarbonGroupList = `${BASE_URL}/deviceGroup/carbonEmissions/getGroupList`, // 分组管理-碳排放-分组查询设备
  deleteCarbonDevice = `${BASE_URL}/deviceGroup/carbonEmissions/deleteDevice`, // 分组管理-碳排放-删除设备
  addCarbonDevice = `${BASE_URL}/deviceGroup/carbonEmissions/addDevice`, // 分组管理-碳排放-添加设备
--- a/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/config.ts
@ -8,33 +8,39 @@ const tableCalKeyMap = [
    title: '来源企业',
    dataIndex: 'linkOrgName',
    textEllipsis: true,
+    align: 'center',
    textNumber: 10,
  },
  {
    title: '设备id',
    textNumber: 10,
    dataIndex: 'deviceCode',
+    align: 'center',
    textEllipsis: true,
  },
  {
    title: '设备编号',
    dataIndex: 'deviceNum',
+    align: 'center',
    textNumber: 10,
  },
  {
    textNumber: 10,
    title: '分组名称',
    dataIndex: 'groupName',
+    align: 'center',
  },
  {
    title: '设备品牌/型号',
    textNumber: 10,
    dataIndex: 'deviceNameType',
+    align: 'center',
  },
  {
    textNumber: 10,
    title: '设备状态',
    dataIndex: 'deviceStatus',
+    align: 'center',
    customRender: ({ value }) => {
      return value === '0' ? '启用' : '停用';
    },
@ -45,6 +51,7 @@ const tableCarbonKeyMap = [
  {
    title: '能源类型',
    dataIndex: 'energyTypeName',
+    align: 'center',
    // textEllipsis: true,
    textNumber: 5,
  },
@ -52,38 +59,45 @@ const tableCarbonKeyMap = [
  {
    title: '设备id',
    dataIndex: 'deviceInfoCode',
+    align: 'center',
    textNumber: 10,
  },
  {
    title: '设备编号',
    textNumber: 10,
    dataIndex: 'deviceName',
+    align: 'center',
    // textEllipsis: true,
  },
  {
    textNumber: 5,
    title: '碳排因子值',
    dataIndex: 'emissionFactor',
+    align: 'center',
  },
  {
    title: '设备品牌/型号',
    textNumber: 10,
    dataIndex: 'deviceModel',
+    align: 'center',
  },
  {
    title: '来源企业',
    textNumber: 10,
    dataIndex: 'manufacturer',
+    align: 'center',
  },
  {
    title: '分组名称',
    textNumber: 10,
    dataIndex: 'groupName',
+    align: 'center',
  },
  {
    textNumber: 5,
    title: '设备状态',
    dataIndex: 'status',
+    align: 'center',
    customRender: ({ value }) => {
      if (value) {
        if (value === '0') {
@ -101,14 +115,17 @@ const tableKeyMap = [
  {
    title: '来源企业',
    dataIndex: 'orgName',
+    align: 'center',
  },
  {
    title: '节点编号',
    dataIndex: 'pointNum',
+    align: 'center',
  },
  {
    title: '节点路径',
    dataIndex: 'routeName',
+    align: 'center',
  },
 ];
 const doWnload = (url) => {
@ -326,6 +343,9 @@ export const tableConfig = (el, elGroup, elFormula, defaultParams) => {
        type: 'primary',
        extra: {
          // api: props.postImportApi, // 导入接口名
+          api: group.importGroup, // 导入接口名
+          // dynamicParams: { defaultParams: defaultParams },
+          params: defaultParams.value,
          title: '设备信息', // 弹窗title
          templateName: 'whiteListUser', // 所使用的文件名称
          indexName: '设备id', // 匹配类型字段
@ -514,7 +534,7 @@ export const tableConfigCal = (
          return data.list.length === 0;
        },
        handle: ({ list }) => {
-          const ids = list.map(({ id }) => id);
+          const ids = list.filter(({ id }) => id > 0).map(({ id }) => id);

          defaultParams.value['saveDeviceInfoIds'] = ids;
          elGroup.value.toggle();
@ -709,20 +729,24 @@ export const editCarbonEquipmentConfig = (orgId, props) => {
      {
        title: '设备名称',
        dataIndex: 'deviceName',
+        align: 'center',
      },
      {
        title: '设备型号',
        dataIndex: 'deviceModel',
+        align: 'center',
      },
      {
        title: 'SN码',
        dataIndex: 'snCode',
+        align: 'center',
        textNumber: 5,
        textEllipsis: true,
      },
      {
        title: '设备一级区域',
        dataIndex: 'device1Area',
+        align: 'center',
        textWidth: 88,
        // width: 130,
        textEllipsis: true,
@ -730,6 +754,7 @@ export const editCarbonEquipmentConfig = (orgId, props) => {
      {
        title: '设备二级区域',
        dataIndex: 'device2Area',
+        align: 'center',
        textWidth: 88,
        // width: 130,
        textEllipsis: true,
@ -737,6 +762,7 @@ export const editCarbonEquipmentConfig = (orgId, props) => {
      {
        title: '设备详细位置',
        dataIndex: 'deviceAddress',
+        align: 'center',
        textNumber: 5,
        textEllipsis: true,
      },
@ -883,6 +909,7 @@ export const setFactorConfig = (orgId) => {
        title: '序号',
        textNumber: 2,
        dataIndex: 'address',
+        align: 'center',
        customRender: (text: any) => {
          return text.index + 1;
        },
@ -890,118 +917,50 @@ export const setFactorConfig = (orgId) => {
      {
        title: '因子值',
        dataIndex: 'emissionFactors',
+        align: 'center',
        textNumber: 3,
      },
      {
        title: '计量单位',
        dataIndex: 'carbonEmissionSuffix',
+        align: 'center',
        textNumber: 4,
        textEllipsis: true,
      },
      {
        title: '更新时间',
        dataIndex: 'updateTime',
+        align: 'center',
        textWidth: 88,
        // width: 130,
+        textNumber: 5,
        textEllipsis: true,
      },
      {
        title: '启用时间',
        dataIndex: 'startTime',
+        align: 'center',
        textWidth: 88,
        // width: 130,
+        textNumber: 6,
        textEllipsis: true,
      },
      {
        title: '结束时间',
        dataIndex: 'endTime',
-        textNumber: 5,
+        align: 'center',
+        textNumber: 7,
        textEllipsis: true,
      },
      {
        title: '数据来源',
        dataIndex: 'dataSources',
-        textNumber: 5,
+        align: 'center',
+        textNumber: 8,
        textEllipsis: true,
      },
    ],
-    // formConfig: {
-    //   schemas: [
-    //     {
-    //       field: 'areas',
-    //       label: '设备区域',
-    //       component: 'NsCascader',
-    //       format: (record) => {
-    //         console.log(record);

-    //         return record?.reduce(
-    //           (pre, cur) => {
-    //             const len = cur?.length - 1;
-    //             pre[len].push(cur[len]);
-    //             return pre;
-    //           },
-    //           [[], []],
-    //         );
-    //       },
-    //       fieldMap: ['area1', 'area2'],
-    //       componentProps: {
-    //         placeholder: '请选择设备区域',
-    //         multiple: true,
-    //         loadData: (selectedOptions, options) => {
-    //           const targetOption = selectedOptions[selectedOptions.length - 1];
-    //           if (!selectedOptions.length) {
-    //             http.post(device.dropArea, { orgId, filterField: 'DEVICE_AREA' }).then((res) => {
-    //               options.value = res.data?.map((item) => {
-    //                 return { label: item, value: item, children: [], isLeaf: false };
-    //               });
-    //             });
-    //           }
-    //           const value = targetOption?.value;
-    //           if (targetOption) {
-    //             targetOption.loading = true;
-    //             http
-    //               .post(device.dropArea, { device1Area: value, orgId, filterField: 'DEVICE_AREA' })
-    //               .then((res) => {
-    //                 targetOption.loading = false;
-    //                 targetOption.children = res.data?.map((item) => {
-    //                   return { label: item, value: item, children: [], isLeaf: true };
-    //                 });
-    //               });
-    //           }
-    //         },
-    //       },
-    //     },
-    //     {
-    //       field: 'deviceName',
-    //       label: '设备名称',
-    //       component: 'NsSelectApi',
-    //       componentProps: {
-    //         placeholder: '请选择设备名称',
-    //         api: (params) => {
-    //           return http.post(device.dropArea, params).then((res) => {
-    //             const result = res.data?.reduce((pre, cur) => {
-    //               !pre.includes(cur.deviceName) && pre.push(cur.deviceName);
-    //               return pre;
-    //             }, []);
-    //             return { data: result };
-    //           });
-    //         },
-    //         resultField: 'data',
-    //         params: { orgId, filterField: 'DEVICE_NAME_FACTORY' },
-    //         // labelField: 'deviceName',
-    //         // valueField: 'deviceName',
-    //         filterOption: (input: string, option: any) => {
-    //           return option.deviceName?.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-    //         },
-    //         showSearch: true,
-    //         immediate: true,
-    //         dropdownReload: true,
-    //         allowClear: true,
-    //       },
-    //     },
-    //   ],
-    //   params: {},
-    // },
    // pagination: { pageSizeOptions: false },
    rowKey: 'id',
  });
--- a/hx-ai-intelligent/src/view/equipmentManage/group/setFactor.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/group/setFactor.vue
@ -1,7 +1,7 @@
 <template>
  <a-modal
    v-model:visible="visible"
-    width="60%"
+    width="66%"
    class="custom-class"
    title="关联因子值"
    destroyOnClose
@ -9,7 +9,7 @@
    :cancel="() => (visible = false)"
    placement="right">
    <div class="drawerContainer">
-      <ns-view-list-table v-bind="config" ref="setFactorRef" style="height: 500px" />
+      <ns-view-list-table v-bind="config" ref="setFactorRef" />
    </div>
  </a-modal>
 </template>
@ -70,8 +70,18 @@
    box-shadow: @ns-content-box-shadow;
  }
  .drawerContainer {
-    height: 100%;
-    display: flex;
+    height: 500px;
+    // display: flex;
    justify-content: space-between;
  }
+  :deep(
+      .ns-list-table[data-v-64b9682f]:not(.ant-drawer-body > *):not(.ant-form > *)
+        .ns-table
+        .ns-table-main
+    ) {
+    margin-top: 0 !important;
+  }
+  :deep(.ns-list-table[data-v-64b9682f]:not(.ant-drawer-body > *):not(.ant-form > *)) {
+    background-color: #ffffff !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
@ -123,7 +123,7 @@
              const date = params[0].name;
              const values = params
                .map((param: any) => {
-                  const unit = data.value.find((d) => d.date === date)?.devicePositionUnit || '';
+                  const unit = data.value[0]?.unit || '';
                  return `<tr>
                          <td>${param.marker}${param.seriesName}</td>
                          <td style="text-align: right;">${param.value} ${unit}</td>
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
@ -280,4 +280,10 @@
  // ::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
  //   display: none !important;
  // }
+  :deep(
+      .ant-table-tbody > tr.ant-table-row:hover > td,
+      .ant-table-tbody > tr > td.ant-table-cell-row-hover
+    ) {
+    background: #f4f8ff !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@ -157,6 +157,8 @@
      const treeData2 = ref<TreeSelectProps['treeData']>([]);

      const changeDeviceType = (val: any, label: any) => {
+        options1.value = [];
+        selectedValue.value = '';
        treeLoading.value = true;
        http
          .post(device.queryDevicePage, {
@ -227,6 +229,8 @@
        throw new Error('pageData is not provided');
      }
      const getDianWeiList = () => {
+        options1.value = [];
+        selectedValue.value = '';
        let deviceIds: any[] = [];
        if (checkedKeys.value && checkedKeys.value.length > 0) {
          checkedKeys.value.forEach((element) => {
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
@ -320,4 +320,11 @@
  });
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(
+      .ant-table-tbody > tr.ant-table-row:hover > td,
+      .ant-table-tbody > tr > td.ant-table-cell-row-hover
+    ) {
+    background: #f4f8ff !important;
+  }
+</style>
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
@ -180,4 +180,11 @@
  });
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(
+      .ant-table-tbody > tr.ant-table-row:hover > td,
+      .ant-table-tbody > tr > td.ant-table-cell-row-hover
+    ) {
+    background: #f4f8ff !important;
+  }
+</style>
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
@ -19,7 +19,7 @@
          <div class="ns-right-title">
            <a-tabs
              v-model:activeKey="activeKey"
-              style="height: 8%; width: 100%"
+              style="height: 8%; width: 100%; font-size: 14px; font-weight: 400"
              @change="changeActive">
              <a-tab-pane key="1" tab="图表" />
              <a-tab-pane key="2" tab="分析" />
@ -139,7 +139,7 @@
    padding-right: 10px;
  }
  ::v-deep .ant-tabs-tab {
-    font-weight: bold; /* 选中标签的加粗 */
+    font-weight: 400; /* 选中标签的加粗 */
    // font-size: 16px;
    // letter-spacing: 1.33px;
    color: #666666 !important;
@ -150,11 +150,18 @@
    // border-radius: 5px; /* 选中标签的圆角 */
    // font-weight: bold; /* 选中标签的加粗 */

-    color: #000000 !important;
+    color: #333333 !important;
  }

  ::v-deep .ant-tabs-tab:hover {
-    color: #000000; /* 悬停时的文字颜色 */
+    color: #333333 !important; /* 悬停时的文字颜色 */
+  }
+  :deep(.ant-tabs-ink-bar) {
+    width: 31px !important;
+    height: 3px !important;
+    border-radius: 2px !important;
+    margin-left: -2%;
+    background: rgba(67, 136, 251, 1);
  }

  .title {
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
@ -277,4 +277,10 @@
    border-radius: 1px;
    background-color: #2778ff;
  }
+  :deep(
+      .ant-table-tbody > tr.ant-table-row:hover > td,
+      .ant-table-tbody > tr > td.ant-table-cell-row-hover
+    ) {
+    background: #f4f8ff !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
@ -426,4 +426,10 @@
    border-radius: 1px;
    background-color: #2778ff;
  }
+  :deep(
+      .ant-table-tbody > tr.ant-table-row:hover > td,
+      .ant-table-tbody > tr > td.ant-table-cell-row-hover
+    ) {
+    background: #f4f8ff !important;
+  }
 </style>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue
@ -11,6 +11,8 @@
          background: #ffffff;

          letter-spacing: 1.33px;
+          font-size: 14px;
+          font-weight: 400;
        ">
        <a-tab-pane key="1" tab="综合数据" />
        <a-tab-pane key="2" tab="历史数据" />
@ -447,7 +449,7 @@
 </script>
 <style lang="less" scoped>
  ::v-deep .ant-tabs-tab {
-    font-weight: 700; /* 选中标签的加粗 */
+    font-weight: 400; /* 选中标签的加粗 */
    color: #666666 !important;
  }
  ::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
@ -456,10 +458,27 @@
    // border-radius: 5px; /* 选中标签的圆角 */
    // font-weight: bold; /* 选中标签的加粗 */

-    color: #000000 !important;
+    color: #333333 !important;
  }

  ::v-deep .ant-tabs-tab:hover {
-    color: #000000; /* 悬停时的文字颜色 */
+    color: #333333; /* 悬停时的文字颜色 */
  }
+  :deep(.ant-tabs-ink-bar) {
+    width: 31px !important;
+    height: 3px !important;
+    border-radius: 2px !important;
+    margin-left: 6%;
+    background: rgba(67, 136, 251, 1);
+  }
+  // //table 颜色
+  // :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+  //   font-size: 14px !important;
+  //   font-weight: bolb !important;
+  //   color: #333333 !important;
+  // }
+  // :deep(.ant-tabs-tab-btn) {
+  //   font-size: 14px !important;
+  //   color: #666666 !important;
+  // }
 </style>