feat: 联动规则增加查看

src/pages/Iot/devOps/nowAlert.vue

@@ -21,12 +21,39 @@
       :pagination="queryParams"
       @change="changePage"
     >
+      <template #bodyCell="{column, record}" >
+        <template v-if="column.key === 'action'" >
+          <a @click="openModal(record)" >详情</a>
+        </template>
+      </template>
     </a-table>
   </a-card>
+
+  <modal-pro
+    :label="modelTitle"
+    :visible="state.visible"
+    @cancel="state.visible = false"
+    @ok="state.visible = false"
+  >
+    <a-form  >
+      <a-form-item label="告警级别" >
+        {{state.warnDetail.warnSeverity}}
+      </a-form-item>
+      <a-form-item label="资源类型" >
+        {{state.warnDetail.warnType}}
+      </a-form-item>
+      <a-form-item label="告警描述" >
+        {{state.warnDetail.warnDescription}}
+      </a-form-item>
+      <a-form-item label="发生时间" >
+        {{state.warnDetail.createAt}}
+      </a-form-item>
+    </a-form>
+  </modal-pro>
   </template>
 <script lang='ts' setup >
 import { DevOpsController } from '@/controller/iot/devOps'
-import { onMounted, reactive, watch } from 'vue'
+import { computed, onMounted, reactive, watch } from 'vue'
 
 const durationList = [
   { name: '30分钟', key: 1800000 },
@@ -39,30 +66,33 @@ const durationList = [
 const columns = [
   {
     title: '名称',
-    dateIndex: ''
+    dataIndex: 'warnLabel'
   },
   {
-    title: '级别',
-    dateIndex: ''
+    title: '告警级别',
+    dataIndex: 'warnSeverity'
   },
   {
     title: '资源类型',
-    dateIndex: ''
+    dataIndex: 'warnType'
   },
   {
-    title: '资源名称',
-    dateIndex: ''
+    title: '告警描述',
+    dataIndex: 'warnDescription'
   },
   {
-    title: '告警详情',
-    dateIndex: ''
+    title: '发生时间',
+    dataIndex: 'createAt'
   },
   {
-    title: '发生时间',
-    dateIndex: ''
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action'
   }
 ]
 
+const modelTitle = computed(() => '告警详情-' + state.warnDetail.warnLabel)
+
 const queryParams = reactive({
   page: 1,
   pageSize: 10,
@@ -72,7 +102,9 @@ const queryParams = reactive({
 
 const state = reactive({
   loading: false,
-  dataSource: []
+  dataSource: [],
+  visible: false,
+  warnDetail: {}
 })
 
 watch(
@@ -82,6 +114,11 @@ watch(
   }
 )
 
+const openModal = (record: any) => {
+  state.visible = true
+  state.warnDetail = record
+}
+
 const changePage = ({ current }) => {
   queryParams.page = current
   getWarnPage()
@@ -92,7 +129,7 @@ const getWarnPage = async () => {
   const { data, sum } = await DevOpsController.pageWarn(queryParams)
   state.loading = false
   state.dataSource = data
-  state.dataSource = sum
+  queryParams.total = sum
 }
 
 onMounted(() => {

src/pages/Iot/rule/forwardRule.vue

@@ -2,20 +2,69 @@
 <a-card>
   <a-row justify="space-between" >
     <a-col :span="18" >
-      <form-pro
-        search
-        :formProps="formPropsSearch"
-        layout="inline"
-        itemWidth="170px"
-        @search="search"
-      >
-      </form-pro>
+    <a-form style="width: 100%;"  :label-col="{span: 5}" >
+      <a-row style="width: 100%" :gutter="[8, 8]" >
+
+        <a-col :span="6" >
+          <a-form-item label="规则ID" >
+            <a-input v-model:value="queryParams.ruleId" ></a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item label="规则名称" >
+              <a-input v-model:value="queryParams.ruleLabel" ></a-input>
+            </a-form-item>
+        </a-col>
+        <a-col :span="6" >
+          <a-form-item label="数据来源" >
+              <a-select allowClear v-model:value="queryParams.subjectResource" >
+                <a-select-option
+                  v-for="item in subjectResourceList"
+                  :key="item.key"
+                  :value="item.value"
+                >
+                {{item.name}}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+        </a-col>
+        <a-col :span="6" >
+          <a-form-item label="触发事件" >
+              <a-select allowClear v-model:value="queryParams.subjectEvent" >
+                <a-select-option
+                  v-for="item in subjectEventList"
+                  :key="item.key"
+                  :value="item.value"
+                >
+                {{item.name}}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+        </a-col>
+        <a-col :span="6" >
+          <a-form-item label="状态" >
+              <a-select allowClear v-model:value="queryParams.status" >
+                <a-select-option
+                  v-for="item in statusList"
+                  :key="item.key"
+                  :value="item.value"
+                >
+                {{item.name}}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
     </a-col>
     <a-col>
-      <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
+      <a-space>
+        <a-button  type="primary" @click="search">搜索</a-button>
+        <a-button type="primary" @click="openModal('add', {})" >创建规则</a-button>
+      </a-space>
+
     </a-col>
   </a-row>
-
   <a-table
     style="margin-top: 20px;"
     :columns="columns"
@@ -41,6 +90,7 @@
       </template>
       <template v-if="column.key === 'action'" >
         <a-space>
+              <a @click="openDetailModal(record.id)">详情</a>
               <a @click="openModal('update', record)">编辑</a>
               <a-popconfirm
                   title="确实要删除吗？"
@@ -232,7 +282,7 @@
           <a-switch v-model:checked="forwardState.retainedMessage" checked-children="保留" un-checked-children="不保留" />
         </a-form-item>
         <a-form-item label="清除Session" >
-          <a-switch v-model:checked="forwardState.retainedMessage" checked-children="清除" un-checked-children="不清除" />
+          <a-switch v-model:checked="forwardState.cleanSession" checked-children="清除" un-checked-children="不清除" />
         </a-form-item>
         <a-form-item label="qos" v-bind="validateInfos.qos" >
           <a-input placeholder="请填写qos" v-model:value="forwardState.qos" ></a-input>
@@ -281,14 +331,65 @@
       </span>
     </a-form>
 </modal-pro>
+
+<modal-pro
+  style="width: 1000px"
+  label="详情"
+  :visible="state.detailVisible"
+  @cancel="state.detailVisible = false"
+  @ok="state.detailVisible  = false"
+>
+  <a-form  :label-col="{span: 2}" style="height: 600px;overflow: hidden;overflow-y: scroll;">
+    <a-form-item label="规则名称"> {{detailForwardRef.ruleLabel}} </a-form-item>
+    <a-form-item label="数据来源"> {{RuleController.SubjectResourceMap.get(detailForwardRef.subjectResource)?.name}} </a-form-item>
+    <a-form-item label="触发事件"> {{RuleController.SubjectEventMap.get(detailForwardRef.subjectEvent)?.name}} </a-form-item>
+    <a-form-item label="状态"> {{detailForwardRef.status ?  '运行中' : '已停止'}} </a-form-item>
+    <a-form-item label="HTTP">
+      <a-table
+        :columns="detailColumn['HTTP']"
+        :data-source="detailHTTPList"
+        :pagination="false"
+      />
+
+    </a-form-item>
+    <a-form-item label="Kafka">
+      <a-table
+        :columns="detailColumn['Kafka']"
+        :data-source="detailKAFKAList"
+        :pagination="false"
+      >
+
+      </a-table>
+    </a-form-item>
+    <a-form-item label="MQTT">
+      <a-table
+        :columns="detailColumn['MQTT']"
+        :data-source="detailMQTTList"
+        :pagination="false"
+      >
+
+      </a-table>
+    </a-form-item>
+    <a-form-item label="RabbitMQ">
+      <a-table
+        :columns="detailColumn['RabbitMQ']"
+        :data-source="detailRABBITList"
+        :pagination="false"
+      >
+
+      </a-table>
+    </a-form-item>
+  </a-form>
+</modal-pro>
 </template>
 
 <script lang='ts' setup >
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { RuleController } from '@/controller/index'
 import type { FormItemProps } from '@/components/FormPro/index.vue'
 import { Form, Empty } from 'ant-design-vue'
 import { computed } from '@vue/reactivity'
+
 const columns = [
   {
     title: '规则名称',
@@ -425,6 +526,61 @@ const HttpRequestMethods = [
   { name: 'PUT', key: 'PUT' }
 ]
 
+const subjectResourceList = Array.from(RuleController.SubjectResourceMap, ([key, value]) => ({ ...value, value: value.key }))
+
+const subjectEventList = Array.from(RuleController.SubjectEventMap, ([key, value]) => ({ ...value, value: value.key }))
+
+const statusList = [
+  { name: '所有状态', key: '', value: '' },
+  { name: '运行中', key: 'status', value: true },
+  { name: '未启动', key: 'status', value: false }
+]
+
+const detailColumn = reactive({
+  HTTP: [
+    { title: 'http地址', dataIndex: 'endpointUrl' },
+    { title: 'requestMethod', dataIndex: '请求方法' },
+    { title: 'defaultTimeout', dataIndex: '超时时间' },
+    { title: 'requestHeaders', dataIndex: '请求头' }
+  ],
+  Kafka: [
+    { title: '主题', dataIndex: 'topic' },
+    { title: '地址', dataIndex: 'bootstrapServers' },
+    { title: 'acks', dataIndex: 'acks' },
+    { title: '重试', dataIndex: 'retries' },
+    { title: 'batchSize', dataIndex: 'batchSize' },
+    { title: 'linger', dataIndex: 'linger' },
+    { title: 'bufferMemory', dataIndex: 'bufferMemory' },
+    { title: 'keySerializer', dataIndex: 'keySerializer' },
+    { title: 'valueSerializer', dataIndex: 'valueSerializer' },
+    { title: '其他属性', dataIndex: 'otherProperties' }
+  ],
+  MQTT: [
+    { title: '主题', dataIndex: 'topic' },
+    { title: 'broker服务器', dataIndex: 'broker' },
+    { title: '连接超时时间', dataIndex: 'connectTimeout' },
+    { title: 'clientId', dataIndex: 'clientId' },
+    { title: 'retainedMessage', dataIndex: 'retainedMessage' },
+    { title: 'cleanSession', dataIndex: 'cleanSession' },
+    { title: 'qos', dataIndex: 'qos' },
+    { title: '用户名', dataIndex: 'userName' },
+    { title: '密码', dataIndex: 'password' }
+  ],
+  RabbitMQ: [
+    { title: '主题', dataIndex: 'exchangeName' },
+    { title: '路由密钥', dataIndex: 'routingKey' },
+    { title: '消息属性', dataIndex: 'messageProperties' },
+    { title: '域名', dataIndex: 'host' },
+    { title: '端口', dataIndex: 'port' },
+    { title: '虚拟主机', dataIndex: 'virtualHost' },
+    { title: '自动恢复', dataIndex: 'automaticRecoveryEnabled' },
+    { title: '连接超时', dataIndex: 'connectionTimeout' },
+    { title: '握手超时', dataIndex: 'handshakeTimeout' },
+    { title: '用户名', dataIndex: 'userName' },
+    { title: '密码', dataIndex: 'password' }
+  ]
+})
+
 const useForm = Form.useForm
 
 const formProo = ref('')
@@ -445,6 +601,7 @@ const state = reactive({
   dataSource: [],
   visible: false,
   targetVisible: false,
+  detailVisible: false,
   stepCount: 0,
   opraState: 'add',
   forwardId: ''
@@ -452,6 +609,13 @@ const state = reactive({
 
 const requestHeader = { key: '', value: '' }
 
+const detailForwardRef = ref<Partial<IOT.API.RULE.ForwardRule>>({})
+
+const detailHTTPList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'HTTP') : [])
+const detailRABBITList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'RABBIT') : [])
+const detailKAFKAList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'KAFKA') : [])
+const detailMQTTList = computed(() => detailForwardRef.value && detailForwardRef.value.forwardRuleTargets ? detailForwardRef.value.forwardRuleTargets!.filter(item => item.targetType === 'MQTT') : [])
+
 const initForwardState = {
   targetType: '',
   endpointUrl: '',
@@ -542,6 +706,15 @@ const changePage = ({ current }) => {
   getForwardList()
 }
 
+const openDetailModal = async (id: string) => {
+  state.detailVisible = true
+  const { data } = await RuleController.forwardById(id)
+  detailForwardRef.value = data
+  console.log('detailForwardRef.value :', detailForwardRef.value)
+
+  // const _forwardRuleTargets = data.forwardRuleTargets
+}
+
 const openModal = async (opraState: 'add' | 'update', record) => {
   state.opraState = opraState