'首页开发'

@@ -15,7 +15,7 @@ enum API {
 
 // 获取
 export const getAlarmContact = (params: ContactPageParams) => {
-  return getPageData<ContactModal>(params, Api.alarmContact);
+  return getPageData<ContactModal>(params, API.alarmContact);
 };
 
 // 新增
@@ -48,6 +48,7 @@ export const saveOrEditAlarmContact = (params: ContactInfo, isUpdate: boolean) =
   addAlarmContact(params);
 };
 
+// 查询设备分页数据
 export const devicePage = (params: DeviceQueryParam) => {
   return defHttp.get<DeviceModel>({
     url: API.devicePage,

@@ -33,6 +33,7 @@
         'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
       const wrapRef = ref<HTMLDivElement | null>(null);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+
       async function initMap() {
         await toPromise();
         await nextTick();

 <template>
   <div class="md:flex">
     <template v-for="(item, index) in growCardList" :key="item.title">
-      <Card
-        size="small"
-        :loading="$attrs.loading"
-        :title="item.title"
-        class="md:w-1/4 w-full !md:mt-0 !mt-4"
-        :class="[index + 1 < 4 && '!md:mr-4']"
-        :canExpan="false"
+      <div
+        class="growCardItem md:w-1/3 w-full !md:mt-0 !mt-4 !md:mr-4"
+        :class="[index + 1 < growCardList.length && '!md:mr-4']"
       >
-        <template #extra>
-          <Tag :color="item.color">{{ item.action }}</Tag>
-        </template>
-
-        <div class="py-4 px-4 flex justify-between">
-          <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
-          <Icon :icon="item.icon" :size="40" />
+        <div class="growCardItem-top">
+          <img :src="item.imgUrl" style="width: 90px; height: 90px" />
+          <div class="growCardItem-right">
+            <div class="flex justify-between ml-3">
+              <div style="font-size: 26px; color: #333">{{ item.value }}</div>
+              <img src="../../../../assets/images/tip.png" style="width: 20px; height: 20px" />
+            </div>
+            <div class="ml-3">{{ item.title }}</div>
+            <div class="ml-3 mt-3 flex" v-if="item.offLine">
+              <div class="count">
+                <img src="../../../../assets/images/online.png" style="width: 10px; height: 10px" />
+                在线 {{ item.onLine }}
+              </div>
+              <div class="count">
+                <img src="../../../../assets/images/offline.png" alt="" />
+                离线 {{ item.offLine }}
+              </div>
+              <div class="count">
+                <img src="../../../../assets/images/inactive.png" alt="" />
+                未激活 {{ item.inactive }}
+              </div>
+            </div>
+          </div>
         </div>
 
-        <div class="p-2 px-4 flex justify-between">
-          <span>总{{ item.title }}</span>
-          <CountTo prefix="$" :startVal="1" :endVal="item.total" />
-        </div>
-      </Card>
+        <div class="growCardItem-bottom"> 今日新增 {{ item.newDay }}</div>
+      </div>
     </template>
   </div>
 </template>
 <script lang="ts" setup>
-  import { CountTo } from '/@/components/CountTo/index';
-  import { Icon } from '/@/components/Icon';
-  import { Tag, Card } from 'ant-design-vue';
   import { growCardList } from '../data';
 </script>
+
+<style scoped lang="less">
+  .growCardItem {
+    height: 179px;
+    background-color: #fff;
+    color: 666;
+    .growCardItem-top {
+      display: flex;
+      margin: 20px;
+      border-bottom: 1px solid #f2f2f5;
+      padding-bottom: 10px;
+      .growCardItem-right {
+        width: 300px;
+        .count {
+          display: flex;
+          font-size: 12px;
+          align-items: center;
+          margin-left: 8px;
+        }
+      }
+    }
+    .growCardItem-bottom {
+      margin-left: 20px;
+    }
+  }
+</style>

+<template>
+  <Card title="帮助文档">
+    <div>
+      <template v-for="item in helpDoc" :key="item.title">
+        <AnchorLink v-bind="item" />
+      </template>
+    </div>
+    <Card
+      :tab-list="tabListTitle"
+      v-bind="$attrs"
+      :active-tab-key="activeKey"
+      :bordered="false"
+      @tabChange="onTabChange"
+      :bodyStyle="{ padding: 0 }"
+    >
+      <div v-if="activeKey === 'tab1'">
+        <List item-layout="horizontal" :data-source="data">
+          <template #renderItem="{ item }">
+            <ListItem>
+              <ListItemMeta description="有新的告警数据需要处理，现在就去查看吧">
+                <template #title>
+                  <a href="https://www.antdv.com/">{{ item.title }}</a>
+                </template>
+                <template #avatar>
+                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+                </template>
+              </ListItemMeta>
+              <template #extra> 7小时前 </template>
+            </ListItem>
+          </template>
+        </List>
+      </div>
+      <div v-else>222</div>
+    </Card>
+    <Card hoverable title="联系我们" :bordered="false">
+      <template #cover>
+        <QrCode :value="qrCodeUrl" />
+      </template>
+      <CardMeta>
+        <template #description>
+          <p>联系人: 张三</p>
+          <p>联系电话: 15912341234</p>
+          <p>联系地址: 四川省成都市剑南大道北段中1533号 </p>
+        </template>
+      </CardMeta>
+    </Card>
+  </Card>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { Card, AnchorLink, List, ListItem, ListItemMeta, Avatar, CardMeta } from 'ant-design-vue';
+  import { QrCode, QrCodeActionType } from '/@/components/Qrcode/index';
+  export default defineComponent({
+    components: {
+      Card,
+      AnchorLink,
+      List,
+      ListItem,
+      ListItemMeta,
+      Avatar,
+      CardMeta,
+      QrCode,
+    },
+    setup() {
+      const helpDoc = ref([
+        {
+          title: '如何接入设备?',
+          href: '',
+        },
+        {
+          title: '什么是设备配置?',
+          href: '',
+        },
+        {
+          title: '云组态模板如何使用?',
+          href: '',
+        },
+        {
+          title: '查看全部>>',
+          href: '',
+        },
+      ]);
+
+      const activeKey = ref('tab1');
+      const tabListTitle = [
+        {
+          key: 'tab1',
+          tab: '通知公告',
+        },
+        {
+          key: 'tab2',
+          tab: '系统公告',
+        },
+      ];
+      const onTabChange = (key) => {
+        activeKey.value = key;
+      };
+
+      // 列表
+      interface DataItem {
+        title: string;
+      }
+      const data: DataItem[] = [
+        {
+          title: '企业管理员',
+        },
+        {
+          title: '企业管理员',
+        },
+        {
+          title: '管理员',
+        },
+        {
+          title: '管理员',
+        },
+        {
+          title: '管理员',
+        },
+      ];
+
+      const qrRef = ref<Nullable<QrCodeActionType>>(null);
+      const qrCodeUrl = 'https://www.vvbin.cn';
+      const download = () => {
+        const qrEl = unref(qrRef);
+        if (!qrEl) return;
+        qrEl.download('文件名');
+      };
+
+      return {
+        activeKey,
+        tabListTitle,
+        onTabChange,
+        data,
+        helpDoc,
+        qrCodeUrl,
+        download,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>

@@ -5,12 +5,8 @@
     :active-tab-key="activeKey"
     @tabChange="onTabChange"
   >
-    <p v-if="activeKey === 'tab1'">
-      <VisitAnalysis />
-    </p>
-    <p v-if="activeKey === 'tab2'">
-      <VisitAnalysisBar />
-    </p>
+    <VisitAnalysis v-if="activeKey === 'tab1'" />
+    <VisitAnalysisBar v-else />
   </Card>
 </template>
 <script lang="ts" setup>
@@ -24,11 +20,11 @@
   const tabListTitle = [
     {
       key: 'tab1',
-      tab: '流量趋势',
+      tab: '告警数统计',
     },
     {
       key: 'tab2',
-      tab: '访问量',
+      tab: '消息量统计',
     },
   ];
 

 export interface GrowCardItem {
-  icon: string;
+  imgUrl: string;
   title: string;
-  value: number;
-  total: number;
-  color: string;
-  action: string;
+  value: string;
+  onLine?: number;
+  offLine?: number;
+  inactive?: number;
+  newDay: string;
 }
 
 export const growCardList: GrowCardItem[] = [
   {
-    title: '访问数',
-    icon: 'visit-count|svg',
-    value: 2000,
-    total: 120000,
-    color: 'green',
-    action: '月',
+    imgUrl: '/src/assets/images/device-count.png',
+    title: '设备数（个）',
+    value: '10,0000',
+    onLine: 2000,
+    offLine: 3000,
+    inactive: 4000,
+    newDay: '123,45',
   },
   {
-    title: '成交额',
-    icon: 'total-sales|svg',
-    value: 20000,
-    total: 500000,
-    color: 'blue',
-    action: '月',
+    imgUrl: '/src/assets/images/alarm-count.png',
+    title: '11月告警数（条）',
+    value: '11,000',
+    newDay: '167,45',
   },
   {
-    title: '下载数',
-    icon: 'download-count|svg',
-    value: 8000,
-    total: 120000,
-    color: 'orange',
-    action: '周',
-  },
-  {
-    title: '成交数',
-    icon: 'transaction|svg',
-    value: 5000,
-    total: 50000,
-    color: 'purple',
-    action: '年',
+    imgUrl: '/src/assets/images/msg-count.png',
+    title: '11月消息量（条）',
+    value: '12,000',
+    newDay: '198,45',
   },
 ];

 <template>
-  <div class="p-4">
-    <GrowCard :loading="loading" class="enter-y" />
-    <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
-    <div class="md:flex enter-y">
-      <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
-      <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
-      <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
+  <div class="p-4 md:flex">
+    <div class="md:w-7/10 w-full !mr-4 enter-y">
+      <GrowCard :loading="loading" class="enter-y" />
+      <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
+      <div class="md:flex enter-y">
+        <Card title="核心流程指南" style="width: 100%">
+          <img alt="核心流程指南" src="../../../assets/images/flow.png" />
+        </Card>
+      </div>
+    </div>
+    <div class="md:w-3/10 w-full enter-y">
+      <HelpDoc />
     </div>
   </div>
 </template>
@@ -13,12 +18,9 @@
   import { ref } from 'vue';
   import GrowCard from './components/GrowCard.vue';
   import SiteAnalysis from './components/SiteAnalysis.vue';
-  import VisitSource from './components/VisitSource.vue';
-  import VisitRadar from './components/VisitRadar.vue';
-  import SalesProductPie from './components/SalesProductPie.vue';
-
+  import { Card } from 'ant-design-vue';
+  import HelpDoc from './components/HelpDoc.vue';
   const loading = ref(true);
-
   setTimeout(() => {
     loading.value = false;
   }, 1500);

 <template>
   <div class="step3">
-    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
-      >未配置报警规则</h1
-    >
-
-    <template v-else v-for="(item, index) in alarmList" :key="item">
-      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
+    <template v-for="(item, index) in alarmList" :key="item.id">
+      <CollapseContainer class="border mb-8">
         <template #action>
-          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
+          <div @click="deleteAlarmRule(index)" class="cursor-pointer">
             <DeleteOutlined style="font-size: 20px" class="mr-2" />
           </div>
         </template>
-        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
-          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
-            <a-input v-model:value="item.alarmType" />
-          </a-form-item>
-        </a-form>
-
+        <BasicForm @register="registerForm" />
         <CollapseContainer>
           <template #action> 高级设置 </template>
-          <div class="flex" style="align-items: center">
-            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
-          </div>
-
-          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
-            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
-              <a-input />
-            </a-form-item>
-          </a-form>
+          <BasicForm @register="registerFormHighSetting">
+            <template #checkBox="{ model, field }">
+              <Checkbox v-model:checked="model[field]">传递报警</Checkbox>
+            </template>
+          </BasicForm>
         </CollapseContainer>
-        <p style="color: #3c3c3c">创建报警规则</p>
-        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
-          <div class="alarm-rule mb-4">
-            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
-              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
-                <span style="color: #305680; margin-left: 10px">严重程度</span>
-                <a-select :options="options" style="width: 100px; margin-left: 10px" />
-              </div>
-              <div style="width: 70%; height: 100%">
+        <p>创建报警规则</p>
+        <template v-for="(createItem, createIndex) in item.createRule" :key="createItem.id">
+          <div class="aic mb-4" style="border: 1px solid #bfbfbf">
+            <div class="w-3/4">
+              <BasicForm @register="registerFormCreateAlarm" />
+              <div>
                 <p style="color: #f5594e" class="mt-4 ml-4"
                   >请添加报警规则条件
                   <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
@@ -47,68 +31,29 @@
                   <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                 /></p>
                 <p class="mt-4 ml-4"
-                  >详情：1
-                  <EditOutlined
-                    @click="editCreateDetail(index, index1)"
-                    class="cursor-pointer ml-4"
-                    style="font-size: 20px"
+                  >详情：<EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                 /></p>
-                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
+                <p class="mt-4 ml-4">dashboard:</p>
               </div>
             </div>
-            <div style="width: 10%" class="alarm-remove">
-              <a-tooltip title="移除">
+            <div class="w-1/4 flex justify-center">
+              <Tooltip title="移除">
                 <MinusCircleOutlined
-                  style="font-size: 25px color:#305680"
+                  style="font-size: 25px; color: #305680"
                   class="cursor-pointer"
-                  @click="handleDeleteCondition(index, index1)"
+                  @click="deleteCondition(index, createIndex)"
                 />
-              </a-tooltip>
+              </Tooltip>
             </div>
           </div>
         </template>
         <a-button class="mt-5" @click="addCreateRole(index)"
           ><PlusCircleOutlined />添加创建条件</a-button
         >
-        <!-- 创建报警规则的弹框 -->
-        <a-modal v-model:visible="visible" title="详情" centered>
-          <a-textarea placeholder="报警详细信息" :rows="4" />
-        </a-modal>
-
-        <p style="color: #3c3c3c">清除报警规则</p>
-        <template v-for="(item2, index2) in item.removeRule" :key="item2">
-          <div class="alarm-rule mb-4">
-            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
-              <div style="width: 70%; height: 100%">
-                <p style="color: #f5594e" class="mt-4 ml-4"
-                  >请添加报警规则条件
-                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >启用规则：始终启用
-                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
-                <p class="mt-4 ml-4"
-                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px" />
-                </p>
-
-                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
-              </div>
-            </div>
-            <div style="width: 10%" class="alarm-remove">
-              <a-tooltip title="移除">
-                <MinusCircleOutlined
-                  style="font-size: 25px color:#305680"
-                  class="cursor-pointer"
-                  @click="handleDeleteRemoveCondition(index, index2)"
-                />
-              </a-tooltip>
-            </div>
-          </div>
-        </template>
-        <a-button class="mt-5" @click="addRemoveRule(index)"
-          ><PlusCircleOutlined />添加清除条件</a-button
-        >
+        <p>清除报警规则</p>
+        <BasicForm @register="registerFormClearAlarm">
+          <template #formHeader> </template>
+        </BasicForm>
       </CollapseContainer>
     </template>
     <div class="flex justify-start">
@@ -117,163 +62,156 @@
     </div>
   </div>
 </template>
+
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import {
-    Alert,
-    Divider,
-    Descriptions,
-    Input,
-    Form,
-    Button,
-    Select,
-    Tooltip,
-    Modal,
-    Textarea,
-  } from 'ant-design-vue';
+  import { defineComponent, ref, unref } from 'vue';
+  import type { alarmListItem } from '../types/index';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { step3Schemas, step3HighSetting, step3CreateAlarm, step3ClearAlarm } from './data';
   import {
     DeleteOutlined,
     MinusCircleOutlined,
     PlusCircleOutlined,
     PlusOutlined,
     EditOutlined,
+    CloseOutlined,
   } from '@ant-design/icons-vue';
-
-  import { CollapseContainer } from '/@/components/Container/index';
-  interface alarmListItem {
-    alarmType: string;
-    isPass: boolean;
-    alarmRule: [];
-    removeRule: [];
-  }
+  import { Tooltip, Checkbox } from 'ant-design-vue';
   export default defineComponent({
     components: {
+      BasicForm,
+      CollapseContainer,
       DeleteOutlined,
       MinusCircleOutlined,
       PlusCircleOutlined,
-      CollapseContainer,
-      EditOutlined,
       PlusOutlined,
-      [Modal.name]: Modal,
-      [Textarea.name]: Textarea,
-      [Tooltip.name]: Tooltip,
-      [Button.name]: Button,
-      [Input.name]: Input,
-      [Select.name]: Select,
-      [Form.name]: Form,
-      [Form.Item.name]: Form.Item,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
+      EditOutlined,
+      CloseOutlined,
+      Checkbox,
+      Tooltip,
     },
     emits: ['prev'],
     setup(_, { emit }) {
-      const alarmList = ref<alarmListItem[]>([]);
-      const visible = ref(false);
-      const options = ref([
-        {
-          value: '1',
-          label: '危险',
-        },
-
-        {
-          value: '2',
-          label: '重要',
-        },
-        {
-          value: '3',
-          label: '次要',
-        },
-        {
-          value: '4',
-          label: '警告',
-        },
-        {
-          value: '5',
-          label: '不确定',
-        },
-      ]);
-      const rules = {
-        alarmType: [
-          {
-            required: true,
-            message: '报警类型必填',
-            trigger: 'blur',
-          },
-        ],
+      //告警列表
+      let alarmList = ref<alarmListItem[]>([]);
+      // 添加和删除告警配置
+      const deleteAlarmRule = (index: number) => {
+        unref(alarmList).splice(index, 1);
       };
-
+      // 上一步
       const prevStep = () => {
         emit('prev');
       };
-      // 添加报警规则
       const addAlarmRule = () => {
-        alarmList.value.push({
+        unref(alarmList).push({
+          id: Date.now(),
           alarmType: '',
           isPass: false,
-          alarmRule: [],
-          removeRule: [],
+          createRule: [
+            {
+              id: Date.now() + Math.random(),
+              alarmVisible: false,
+              addKeyFilterVisible: false,
+              detailVisible: false,
+              detail: '',
+              filterList: [],
+            },
+          ],
+          clearRule: [],
         });
       };
-      const handleDeleteAlarm = (index) => {
-        alarmList.value.splice(index, 1);
-      };
-      // 添加创建条件
-      const addCreateRole = (index) => {
-        alarmList.value[index].alarmRule.push({
+
+      // 表单部分 报警类型
+      const [registerForm] = useForm({
+        labelWidth: 120,
+        schemas: step3Schemas,
+        showResetButton: false,
+        showSubmitButton: false,
+      });
+
+      // 高级设置
+      const [registerFormHighSetting] = useForm({
+        labelWidth: 120,
+        schemas: step3HighSetting,
+        showResetButton: false,
+        showSubmitButton: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      // 添加创建条件表单
+      const [registerFormCreateAlarm] = useForm({
+        labelWidth: 120,
+        schemas: step3CreateAlarm,
+        showResetButton: false,
+        showSubmitButton: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      // 清除条件表单
+      const [registerFormClearAlarm] = useForm({
+        labelWidth: 120,
+        schemas: step3ClearAlarm,
+        showResetButton: false,
+        showSubmitButton: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      // 添加‘创建条件’
+      const addCreateRole = (index: number) => {
+        unref(alarmList)[index].createRule.push({
+          id: Date.now() + Math.random(),
+          alarmVisible: false,
+          addKeyFilterVisible: false,
+          detailVisible: false,
           detail: '',
+          filterList: [],
         });
       };
-      const handleDeleteCondition = (index, index1) => {
-        alarmList.value[index].alarmRule.splice(index1, 1);
-      };
-
-      // 清除报警规则
-      const addRemoveRule = (index) => {
-        alarmList.value[index].removeRule.push('1');
-      };
-      const handleDeleteRemoveCondition = (index, index1) => {
-        alarmList.value[index].removeRule.splice(index1, 1);
+      // 删除‘创建条件’
+      const deleteCondition = (index: number, createIndex: number) => {
+        alarmList.value[index].createRule.splice(createIndex, 1);
       };
-
-      // 编辑创建规则的详情
-      const editCreateDetail = (index, index1) => {
-        visible.value = true;
-        console.log(alarmList.value[index].alarmRule[index1].detail);
-      };
-
       return {
-        rules,
         alarmList,
-        options,
-        visible,
+        deleteAlarmRule,
         prevStep,
         addAlarmRule,
+
+        registerForm,
+
+        registerFormHighSetting,
+
+        registerFormCreateAlarm,
         addCreateRole,
-        handleDeleteAlarm,
-        handleDeleteCondition,
-        addRemoveRule,
-        handleDeleteRemoveCondition,
-        editCreateDetail,
-        labelCol: { style: { width: '150px' } },
-        wrapperCol: { span: 18 },
+        deleteCondition,
+
+        registerFormClearAlarm,
       };
     },
   });
 </script>
+
 <style lang="less" scoped>
   .step3 {
-    width: 500px;
-    margin: 0 auto;
+    width: 100%;
   }
-  .alarm-rule {
-    height: 200px;
+  .border {
+    border: 1px solid #bfbfbf;
+  }
+
+  .aic {
     display: flex;
-    .alarm-remove {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    align-items: center;
+  }
+
+  :deep(.vben-collapse-container__header) {
+    border: none;
   }
 </style>

+<template>
+  <div class="step3">
+    <h1 v-if="alarmList.length === 0" style="font-size: 24px" class="text-center"
+      >未配置报警规则</h1
+    >
+
+    <template v-else v-for="(item, index) in alarmList" :key="item">
+      <CollapseContainer :title="item.alarmType" style="border: 1px solid #bfbfbf" class="mb-6">
+        <template #action>
+          <div @click="handleDeleteAlarm(index)" class="cursor-pointer">
+            <DeleteOutlined style="font-size: 20px" class="mr-2" />
+          </div>
+        </template>
+        <a-form :wrapper-col="wrapperCol" labelAlign="left" :model="item" :rules="rules">
+          <a-form-item label="报警类型" :labelCol="{ style: { width: '80px' } }" name="alarmType">
+            <a-input v-model:value="item.alarmType" />
+          </a-form-item>
+        </a-form>
+
+        <CollapseContainer>
+          <template #action> 高级设置 </template>
+          <div class="flex" style="align-items: center">
+            <input type="checkbox" v-model="item.isPass" /> <div class="ml-2">传递警报</div>
+          </div>
+
+          <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
+            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
+              <a-input />
+            </a-form-item>
+          </a-form>
+        </CollapseContainer>
+        <p style="color: #3c3c3c">创建报警规则</p>
+        <template v-for="(item1, index1) in item.alarmRule" :key="item1">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 30%; height: 100%; border-right: 1px solid #e0e0e0">
+                <span style="color: #305680; margin-left: 10px">严重程度</span>
+                <a-select :options="options" style="width: 100px; margin-left: 10px" />
+              </div>
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                    @click="editAlarmCondition(index, index1)"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：{{ item1.detail }}
+                  <EditOutlined
+                    @click="item1.detailVisible = true"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteCondition(index, index1)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+          <!-- 编辑报警规则条件 -->
+          <a-modal
+            v-model:visible="item1.alarmVisible"
+            title="编辑报警规则条件"
+            centered
+            width="800px"
+            @cancel="handleAlarmCancel(index, index1)"
+            @ok="item1.alarmVisible = false"
+          >
+            <CollapseContainer title="键名筛选器" style="border: 1px solid #bfbfbf" class="mb-6">
+              <a-modal
+                v-model:visible="item1.addKeyFilterVisible"
+                title="添加键名筛选器"
+                centered
+                width="600px"
+                @ok="item1.addKeyFilterVisible = false"
+              >
+                <a-form
+                  :wrapper-col="wrapperCol"
+                  :labelCol="{ style: { width: '80px' } }"
+                  labelAlign="right"
+                >
+                  <a-form-item label="键类型">
+                    <a-select :options="keyTypeOptions" default-value="Timeseries" />
+                  </a-form-item>
+                  <a-form-item label="键名">
+                    <a-input />
+                  </a-form-item>
+                  <a-form-item label="值类型">
+                    <a-select :options="valueTypeOptions" />
+                  </a-form-item>
+                </a-form>
+                <collapseContainer title="筛选器">
+                  <template v-for="filterItem in item1.filterList" :key="filterItem">
+                    <div class="flex justify-between mb-4" style="align-items: center">
+                      <a-select
+                        style="width: 150px"
+                        :options="operatorOptions"
+                        default-value="="
+                      /><a-input style="width: 350px" />
+                      <a-tooltip title="删除筛选器">
+                        <CloseOutlined @click="deleteFilter(index, index1)" />
+                      </a-tooltip>
+                    </div>
+                  </template>
+                  <div class="flex">
+                    <a-button type="primary" class="mr-4" @click="addFilter(index, index1)"
+                      >添加</a-button
+                    >
+                    <a-button type="primary">添加复合</a-button>
+                  </div>
+                </collapseContainer>
+              </a-modal>
+              <div class="flex justify-start">
+                <a-button type="primary" @click="item1.addKeyFilterVisible = true"
+                  >添加键名筛选器</a-button
+                >
+              </div>
+            </CollapseContainer>
+            <CollapseContainer title="筛选器预览" style="border: 1px solid #bfbfbf" class="mb-6" />
+          </a-modal>
+          <!-- 启用规则-->
+          <!-- <a-modal
+            v-model:visible="visible"
+            title="编辑报警规则条件"
+            centered
+            @cancel="handleCancel(index, index1)"
+            @ok="visible = false"
+          >
+            编辑报警规则条件123
+          </a-modal> -->
+
+          <!-- 创建报警规则详情的弹框 -->
+          <a-modal
+            v-model:visible="item1.detailVisible"
+            title="详情"
+            centered
+            @cancel="handleCancel(index, index1)"
+            @ok="item1.detailVisible = false"
+          >
+            <a-textarea v-model:value="item1.detail" placeholder="报警详细信息" :rows="4" />
+          </a-modal>
+        </template>
+        <a-button class="mt-5" @click="addCreateRole(index)"
+          ><PlusCircleOutlined />添加创建条件</a-button
+        >
+        <p style="color: #3c3c3c">清除报警规则</p>
+        <template v-for="(item2, index2) in item.removeRule" :key="item2">
+          <div class="alarm-rule mb-4">
+            <div style="width: 90%; border: 2px solid #8c8c8c; border-radius: 5px" class="flex">
+              <div style="width: 70%; height: 100%">
+                <p style="color: #f5594e" class="mt-4 ml-4"
+                  >请添加报警规则条件
+                  <PlusOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >启用规则：始终启用
+                  <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                /></p>
+                <p class="mt-4 ml-4"
+                  >详情：{{ item2.detail }}
+                  <EditOutlined
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
+                    @click="editRemoveVisible = true"
+                  />
+                </p>
+
+                <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
+              </div>
+            </div>
+            <div style="width: 10%" class="alarm-remove">
+              <a-tooltip title="移除">
+                <MinusCircleOutlined
+                  style="font-size: 25px color:#305680"
+                  class="cursor-pointer"
+                  @click="handleDeleteRemoveCondition(index, index2)"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+          <a-modal
+            v-model:visible="editRemoveVisible"
+            title="详情"
+            centered
+            @cancel="handleCancel1(index, index2)"
+            @ok="editRemoveVisible = false"
+          >
+            <a-textarea v-model:value="item2.detail" placeholder="报警详细信息" :rows="4" />
+          </a-modal>
+        </template>
+        <a-button class="mt-5" @click="addRemoveRule(index)"
+          ><PlusCircleOutlined />添加清除条件</a-button
+        >
+      </CollapseContainer>
+    </template>
+    <div class="flex justify-start">
+      <a-button class="mr-5" @click="prevStep">上一步</a-button>
+      <a-button type="primary" @click="addAlarmRule">添加报警规则</a-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import {
+    Alert,
+    Divider,
+    Descriptions,
+    Input,
+    Form,
+    FormItem,
+    Button,
+    Select,
+    Tooltip,
+    Textarea,
+    Modal,
+  } from 'ant-design-vue';
+  import {
+    DeleteOutlined,
+    MinusCircleOutlined,
+    PlusCircleOutlined,
+    PlusOutlined,
+    EditOutlined,
+    CloseOutlined,
+  } from '@ant-design/icons-vue';
+  import { CollapseContainer } from '/@/components/Container/index';
+  import { alarmListItem } from '../types/index';
+  export default defineComponent({
+    components: {
+      DeleteOutlined,
+      MinusCircleOutlined,
+      PlusCircleOutlined,
+      CollapseContainer,
+      EditOutlined,
+      PlusOutlined,
+      CloseOutlined,
+      [Form.name]: Form,
+      [FormItem.name]: FormItem,
+      [Modal.name]: Modal,
+      [Textarea.name]: Textarea,
+      [Tooltip.name]: Tooltip,
+      [Button.name]: Button,
+      [Input.name]: Input,
+      [Select.name]: Select,
+      [Form.name]: Form,
+      [Form.Item.name]: Form.Item,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['prev'],
+    setup(_, { emit }) {
+      const alarmList = ref<alarmListItem[]>([]);
+
+      const options = ref([
+        {
+          value: '1',
+          label: '危险',
+        },
+
+        {
+          value: '2',
+          label: '重要',
+        },
+        {
+          value: '3',
+          label: '次要',
+        },
+        {
+          value: '4',
+          label: '警告',
+        },
+        {
+          value: '5',
+          label: '不确定',
+        },
+      ]);
+      const keyTypeOptions = ref([
+        {
+          value: 'properties',
+          label: '属性',
+        },
+
+        {
+          value: 'Timeseries',
+          label: 'Timeseries',
+        },
+        {
+          value: 'constant',
+          label: '常量',
+        },
+      ]);
+      const valueTypeOptions = ref([
+        {
+          value: 'string',
+          label: '字符串',
+        },
+        {
+          value: 'number',
+          label: '数字',
+        },
+        {
+          value: 'boolean',
+          label: '布尔值',
+        },
+        {
+          value: 'dateTime',
+          label: '日期时间',
+        },
+      ]);
+      const operatorOptions = ref([
+        {
+          value: '=',
+          label: '等于',
+        },
+        {
+          value: '!=',
+          label: '不等于',
+        },
+        {
+          value: '>',
+          label: '大于',
+        },
+        {
+          value: '<',
+          label: '小于',
+        },
+        {
+          value: '>=',
+          label: '大于或等于',
+        },
+        {
+          value: '<=',
+          label: '小于或等于',
+        },
+      ]);
+      const rules = {
+        alarmType: [
+          {
+            required: true,
+            message: '报警类型必填',
+            trigger: 'blur',
+          },
+        ],
+      };
+
+      const prevStep = () => {
+        emit('prev');
+      };
+      // 添加报警规则
+      const addAlarmRule = () => {
+        alarmList.value.push({
+          alarmType: '',
+          isPass: false,
+          createRule: [],
+          clearRule: [],
+        });
+      };
+      const handleDeleteAlarm = (index: number) => {
+        alarmList.value.splice(index, 1);
+      };
+      // 添加‘创建条件’
+      const addCreateRole = (index: number) => {
+        alarmList.value[index].createRule.push({
+          alarmVisible: false,
+          addKeyFilterVisible: false,
+          detailVisible: false,
+          detail: '',
+          filterList: [],
+        });
+      };
+      const handleDeleteCondition = (index: number, index1: number) => {
+        alarmList.value[index].createRule.splice(index1, 1);
+      };
+
+      // 添加‘清除报警规则’
+      const addRemoveRule = (index: number) => {
+        alarmList.value[index].clearRule.push({
+          detail: '',
+        });
+      };
+      const handleDeleteRemoveCondition = (index: number, index1: number) => {
+        alarmList.value[index].clearRule.splice(index1, 1);
+      };
+
+      // 弹框取消事件 --2个
+      const visible = ref(false);
+      const editRemoveVisible = ref(false);
+      const handleCancel = (index: number, index1: number) => {
+        alarmList.value[index].createRule[index1].detail = '';
+        alarmList.value[index].createRule[index1].detailVisible = false;
+      };
+
+      const handleCancel1 = (index: number, index2: number) => {
+        alarmList.value[index].clearRule[index2].detail = '';
+        editRemoveVisible.value = false;
+      };
+
+      const handleAlarmCancel = (index, index1) => {
+        alarmList.value[index].createRule[index1].alarmVisible = false;
+        console.log('object---');
+      };
+      const editAlarmCondition = (index, index1) => {
+        alarmList.value[index].createRule[index1].alarmVisible = true;
+        console.log('object');
+      };
+      // 添加键名筛选器
+      const addFilter = (index, index1) => {
+        console.log(index, index1);
+        alarmList.value[index].createRule[index1].filterList?.push({
+          operator: '=',
+          value: '',
+        });
+      };
+      const deleteFilter = (index: number, index1: number) => {
+        alarmList.value[index].createRule[index1].filterList?.splice(index1, 1);
+      };
+      return {
+        rules,
+        alarmList,
+        options,
+        visible,
+        editRemoveVisible,
+        prevStep,
+        addAlarmRule,
+        addCreateRole,
+        handleDeleteAlarm,
+        handleDeleteCondition,
+        addRemoveRule,
+        handleDeleteRemoveCondition,
+        handleCancel,
+        handleCancel1,
+        handleAlarmCancel,
+        editAlarmCondition,
+        keyTypeOptions,
+        valueTypeOptions,
+        operatorOptions,
+        deleteFilter,
+        addFilter,
+        labelCol: { style: { width: '150px' } },
+        wrapperCol: { span: 18 },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .step3 {
+    width: 500px;
+    margin: 0 auto;
+  }
+  .alarm-rule {
+    height: 200px;
+    display: flex;
+    .alarm-remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+</style>

@@ -46,11 +46,73 @@ export const step2Schemas: FormSchema[] = [
 export const step3Schemas: FormSchema[] = [
   {
     field: 'transportType',
+    component: 'Input',
+    label: '报警类型',
+    required: true,
+    componentProps: {
+      placeholder: '请输入报警类型',
+    },
+  },
+];
+
+export const step3HighSetting: FormSchema[] = [
+  {
+    field: 'isPass',
+    component: 'Checkbox',
+    label: '',
+    slot: 'checkBox',
+  },
+  {
+    field: 'associationType',
+    component: 'Input',
+    label: '关联类型',
+    componentProps: {
+      placeholder: '要传递的关联类型',
+    },
+    ifShow: ({ values }) => !!values.isPass,
+  },
+];
+
+export const step3CreateAlarm: FormSchema[] = [
+  {
+    field: 'severity',
     component: 'Select',
-    label: '报警规则',
-    defaultValue: 'DEFAULT',
+    label: '严重程度',
     componentProps: {
-      options: [{ label: '默认', value: 'DEFAULT' }],
+      placeholder: '请选择严重程度',
+      options: [
+        {
+          value: '1',
+          label: '危险',
+        },
+        {
+          value: '2',
+          label: '重要',
+        },
+        {
+          value: '3',
+          label: '次要',
+        },
+        {
+          value: '4',
+          label: '警告',
+        },
+        {
+          value: '5',
+          label: '不确定',
+        },
+      ],
     },
   },
 ];
+
+export const step3ClearAlarm: FormSchema[] = [
+  // {
+  //   field: 'associationType',
+  //   component: 'Input',
+  //   label: '关联类型',
+  //   componentProps: {
+  //     placeholder: '要传递的关联类型',
+  //   },
+  // },
+];

+interface alarmRuleFilter {
+  operator: string;
+  value: string;
+}
+interface createRule {
+  id: number;
+  alarmVisible: boolean;
+  addKeyFilterVisible: boolean;
+  detailVisible: boolean;
+  detail: string;
+  filterList?: alarmRuleFilter[];
+}
+interface clearRule {
+  detail: string;
+}
+export interface alarmListItem {
+  id: number;
+  alarmType: string;
+  isPass: boolean;
+  createRule: createRule[];
+  clearRule: clearRule[];
+}