feat(views): 优化“历史数据曲线”

1.无数据显示“-”。
2.新增数据区域缩放功能。

src/layout/HvacAside.vue

@@ -11,7 +11,7 @@ import { getPageList } from '@/api';
 import { translateNavigation } from '@/utils';
 
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import type { DeviceGroupItem } from '@/types';
+import type { DeviceGroupItem, PageParams } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
@@ -19,6 +19,13 @@ const menuRef = useTemplateRef('menu');
 const selectedKeys = ref<string[]>([route.path]);
 const openKeys = ref<string[]>([]);
 const deviceGroupList = ref<DeviceGroupItem[]>([]);
+const messageOpen = ref<boolean>(false);
+const messageList = ref([]);
+const messageParam = ref<PageParams>({
+  pageIndex: 1,
+  pageSize: 10,
+});
+const messageTotal = ref<number>();
 
 const menuGroupList = computed(() => {
   return [
@@ -33,6 +40,33 @@ const menuGroupList = computed(() => {
   ];
 });
 
+const messageColumns = [
+  {
+    title: '报警内容',
+    dataIndex: 'name',
+    key: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '二级设备分组/事件名称',
+    dataIndex: 'name1',
+    key: 'name1',
+    ellipsis: true,
+  },
+  {
+    title: '设备/监测点',
+    dataIndex: 'name2',
+    key: 'name2',
+    ellipsis: true,
+  },
+  {
+    title: '时间',
+    dataIndex: 'Time',
+    key: 'Time',
+    ellipsis: true,
+  },
+];
+
 onMounted(async () => {
   try {
     const data = await getPageList();
@@ -88,6 +122,10 @@ const collapsed = ref<boolean>(false);
 const toggleCollapsed = () => {
   collapsed.value = !collapsed.value;
 };
+const addInformation = () => {
+  messageOpen.value = true;
+};
+const messageChange = () => {};
 </script>
 
 <template>
@@ -165,7 +203,7 @@ const toggleCollapsed = () => {
       </AMenu>
     </Simplebar>
     <div v-show="collapsed" class="aside-collapsed-icons">
-      <SvgIcon name="information" />
+      <SvgIcon name="information" @click="addInformation" />
       <SvgIcon name="setting" />
       <SvgIcon name="unfold" @click="toggleCollapsed" />
     </div>
@@ -173,11 +211,36 @@ const toggleCollapsed = () => {
       <div class="aside-footer-avatar"></div>
       <div v-show="!collapsed">
         <SvgIcon name="setting" />
-        <SvgIcon name="information" />
+        <span @click="addInformation">
+          <ABadge count="5">
+            <SvgIcon name="information" />
+          </ABadge>
+        </span>
+
         <SvgIcon name="fold" @click="toggleCollapsed" />
       </div>
     </div>
   </ALayoutSider>
+  <AModal v-model:open="messageOpen" title="消息中心" width="926px" :footer="null" :keyboard="false">
+    <ATable class="table-margin" :columns="messageColumns" :data-source="messageList" :pagination="false">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'name'">
+          <span>{{ record.name }}</span>
+        </template>
+      </template>
+    </ATable>
+    <AFlex justify="flex-end" class="footer">
+      <APagination
+        v-model:current="messageParam.pageIndex"
+        v-model:page-size="messageParam.pageSize"
+        :total="messageTotal"
+        :show-size-changer="true"
+        @change="messageChange"
+        show-quick-jumper
+        :show-total="(total) => $t('common.pageTotal', { total })"
+      />
+    </AFlex>
+  </AModal>
 </template>
 
 <style lang="scss">
@@ -194,6 +257,24 @@ const toggleCollapsed = () => {
 </style>
 
 <style lang="scss" scoped>
+:deep(.aside-footer) {
+  .ant-badge .ant-badge-count {
+    min-width: 15px;
+    height: 15px;
+    font-size: 10px;
+    line-height: 15px;
+    cursor: pointer;
+  }
+
+  .ant-badge {
+    margin: 0 15px;
+  }
+}
+
+.table-margin {
+  margin: 24px 0;
+}
+
 .aside-container {
   --aside-border-radius: 18px;
   --aside-padding: 12px;

src/types/index.ts

@@ -2091,7 +2091,7 @@ export interface AlgorithmForm {
 export interface AlgorithmConfigInfo extends AlgorithmForm {
   chillers: ChillersItem[];
   chilledWaterOutletTempRangeList: TemperatureRangeItem[];
-  chilledWaterOutletTempRange: string;
+  chilledWaterOutletTempRange?: string;
   chilledWaterOutletTempSet: string;
 }