Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite --mode develop",
+    "dev:force": "vite --force --mode develop",
     "build": "node --max_old_space_size=1024000 ./node_modules/vite/bin/vite.js build",
     "preview": "vite preview",
     "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
@@ -23,7 +24,7 @@
     "event-source-polyfill": "^1.0.31",
     "global": "^4.4.0",
     "jetlinks-store": "^0.0.3",
-    "jetlinks-ui-components": "^1.0.0",
+    "jetlinks-ui-components": "^1.0.1",
     "js-cookie": "^3.0.1",
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
@@ -42,7 +43,8 @@
     "vue-router": "^4.1.6",
     "vue3-json-viewer": "^2.2.2",
     "vue3-markdown-it": "^1.0.10",
-    "vue3-ts-jsoneditor": "^2.7.1"
+    "vue3-ts-jsoneditor": "^2.7.1",
+    "vue3-video-play": "^1.3.1-beta.6"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.1",

src/api/device/instance.ts

@@ -85,6 +85,7 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
  */
 export const deviceTemplateDownload = (productId: string, type: string) => `${BASE_API_PATH}/device-instance/${productId}/template.${type}`
 
+export const templateDownload = (productId: string, type: string) => server.get(`/device-instance/${productId}/template.${type}`,{},{responseType: 'blob'})
 /**
  * 设备导入
  * @param productId 产品id

src/api/iot-card/cardManagement.ts

@@ -99,6 +99,12 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
  */
 export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, { responseType: 'blob' });
 
+/**
+ * 下载模板
+ * @param format 类型 xlsx、csv
+ */
+export const exportCard = (format: string) => server.get(`/network/card/template.${format}`,{},{responseType: 'blob'});
+
 /**
  * 验证iccid
  * @param id

src/api/media/cascade.ts

@@ -36,5 +36,7 @@ export default {
     updateGbChannelId: (id: string, data: any): any => server.put(`/media/gb28181-cascade/binding/${id}`, data),
     // 查询通道分页列表
     queryChannelList: (data: any): any => server.post(`media/channel/_query`, data),
+    // 推送
+    publish: (id: string, params: any) => server.get(`/media/gb28181-cascade/${id}/bindings/publish`, params)
 
 }

src/api/media/channel.ts

@@ -1,4 +1,6 @@
-import server from '@/utils/request'
+import server from '@/utils/request';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 
 export default {
     // 列表
@@ -12,5 +14,54 @@ export default {
     // 修改
     update: (id: string, data: any) => server.put(`/media/channel/${id}`, data),
     // 删除
-    del: (id: string) => server.remove(`media/channel/${id}`),
+    del: (id: string) => server.remove(`/media/channel/${id}`),
+
+    // ========== 视频播放 ==========
+    // 开始直播
+    ptzStart: (deviceId: string, channelId: string, type: string) =>
+        `/media/device/${deviceId}/${channelId}/live.${type}?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`,
+
+    // 云台控制-停止
+    ptzStop: (deviceId: string, channelId: string) => server.post(`/media/device/${deviceId}/${channelId}/_ptz/STOP`),
+
+    // 云台控制-缩放、转向等
+    ptzTool: (deviceId: string, channelId: string, direct: string, speed: number = 90) =>
+        server.post(`/media/device/${deviceId}/${channelId}/_ptz/${direct}/${speed}`),
+
+    // 重置
+    mediaStop: (deviceId: string, channelId: string) => server.post(`/media/device/${deviceId}/${channelId}/_stop`),
+
+    // 查询是否正在录像
+    ptzIsRecord: (deviceId: string, channelId: string) => server.get(`/media/device/${deviceId}/${channelId}/live/recording`),
+
+    // 开始录像
+    recordStart: (deviceId: string, channelId: string, data: any) =>
+        server.post(`/media/device/${deviceId}/${channelId}/_record`, data),
+
+    // 停止录像
+    recordStop: (deviceId: string, channelId: string, data: any) =>
+        server.post(`/media/device/${deviceId}/${channelId}/_stop-record`, data),
+
+    // 查询本地回放记录
+    queryRecordLocal: (deviceId: string, channelId: string, data: any) =>
+        server.post(`/media/device/${deviceId}/${channelId}/records/in-local`, data),
+
+    // 播放本地回放
+    playbackLocal: (deviceId: string, channelId: string, suffix: string) =>
+        server.get(`/media/device/${deviceId}/${channelId}/playback.${suffix}`),
+
+    // 本地录像播放控制
+    playbackControl: (deviceId: string, channelId: string) =>
+        server.post(`/media/device/${deviceId}/${channelId}/stream-control`),
+
+    // 查询云端回放记录
+    recordsInServer: (deviceId: string, channelId: string) =>
+        server.post(`/media/device/${deviceId}/${channelId}/records/in-server`),
+
+    // 查询云端回放文件信息
+    recordsInServerFiles: (deviceId: string, channelId: string) =>
+        server.post(`/media/device/${deviceId}/${channelId}/records/in-server/files`),
+
+    // 播放云端回放
+    playbackStart: (recordId: string) => server.get(`/media/record/${recordId}.mp4`),
 }

src/api/rule-engine/log.ts

@@ -23,4 +23,19 @@ export const query = (data:any) => server.post('/alarm/record/_query/',data);
 /**
  * 告警处理
  */
-export const handleLog = (data:any) => server.post('/alarm/record/_handle',data)
+export const handleLog = (data:any) => server.post('/alarm/record/_handle',data);
+
+/**
+ * 告警记录
+ */
+export const detail = (id:string) => server.get(`/alarm/record/${id}`);
+
+/**
+ * 告警历史记录
+ */
+export const queryHistoryList = (data:any) => server.post('/alarm/history/_query',data);
+
+/**
+ * 获取告警处理结果
+ */
+export const queryHandleHistory = (data:any) => server.post('/alarm/record/handle-history/_query',data);

src/components/MonacoEditor/index.vue

@@ -74,6 +74,10 @@ watchEffect(() => {
     }, 300);
 });
 
+/**
+ * 光标位置插入内容
+ * @param {String} val
+ */
 const insert = (val) => {
     if (!instance) return;
     const position = instance.getPosition();
@@ -90,12 +94,18 @@ const insert = (val) => {
     ]);
 };
 
-// watch(
-//     () => props.modelValue,
-//     (val) => {
-//         instance.setValue(val);
-//     },
-// );
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (!instance) return;
+        // setValue之前获取光标位置
+        const position = instance.getPosition();
+        // setValue之后光标位置改变
+        instance.setValue(val);
+        // 设置光标位置为setValue之前的位置
+        instance.setPosition(position);
+    },
+);
 
 defineExpose({
     editorFormat,

src/components/NormalUpload/index.vue

@@ -36,8 +36,8 @@
 import { FILE_UPLOAD } from '@/api/comm'
 import { TOKEN_KEY  } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
-import { downloadFile } from '@/utils/utils';
-import { deviceImport, deviceTemplateDownload } from '@/api/device/instance'
+import { downloadFile, downloadFileByUrl } from '@/utils/utils';
+import { deviceImport, deviceTemplateDownload ,templateDownload} from '@/api/device/instance'
 import { EventSourcePolyfill } from 'event-source-polyfill'
 import { message } from 'ant-design-vue';
 
@@ -72,8 +72,20 @@ const flag = ref<boolean>(false)
 const count = ref<number>(0)
 const errMessage = ref<string>('')
 
-const downFile = (type: string) => {
-    downloadFile(deviceTemplateDownload(props.product, type));
+const downFile =async (type: string) => {
+    // downloadFile(deviceTemplateDownload(props.product, type));
+    const res:any =await templateDownload(props.product, type)
+    if(res){
+        const blob = new Blob([res], { type: type });
+            const url = URL.createObjectURL(blob);
+            console.log(url);
+            downloadFileByUrl(
+                url,
+                `设备导入模版`,
+                type,
+            );
+    }
+
 }
 
 const submitData = async (fileUrl: string) => {

src/components/Player/index.vue

@@ -0,0 +1,41 @@
+<!-- 视频播放 -->
+<template>
+    <vue3videoPlay
+        v-bind="options"
+        poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
+    />
+</template>
+
+<script setup lang="ts">
+import 'vue3-video-play/dist/style.css';
+import vue3videoPlay from 'vue3-video-play';
+
+const options = reactive({
+    width: '800px', //播放器高度
+    height: '450px', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: 'https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4', //视频源
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: false, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+        'audioTrack',
+        'quality',
+        'speedRate',
+        'volume',
+        'setting',
+        'pip',
+        'pageFullScreen',
+        'fullScreen',
+    ], //显示所有按钮,
+});
+</script>
+
+<style lang="less" scoped></style>

src/components/Player/mediaTool.vue

@@ -0,0 +1,8 @@
+<!-- 视频播放工具栏 -->
+<template>
+    <div class="page-container">视频播放工具栏</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="less" scoped></style>

src/components/Table/index.tsx

@@ -337,6 +337,14 @@ const JTable = defineComponent<JTableProps>({
                                         rowSelection={props.rowSelection}
                                         scroll={props.scroll}
                                         v-slots={{
+                                            headerCell: (dt: Record<string, any>) => {
+                                                const { column, title } = dt;
+                                                if (column?.headerCell) {
+                                                    return slots?.[column?.headerCell]!(column.title)
+                                                } else {
+                                                    return title || ''
+                                                }
+                                            },
                                             bodyCell: (dt: Record<string, any>) => {
                                                 const { column, record } = dt;
                                                 if ((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {

src/utils/encodeQuery.ts

@@ -1,4 +1,14 @@
-import { isObject } from 'lodash-es'
+import { isObject, isArray } from 'lodash-es'
+
+const encodeParams = (params: Record<string, any>) => {
+  const _params = new URLSearchParams()
+  for (const key in params) {
+    const _value = params[key]
+    const isArrOrObj = isObject(_value) || isArray(_value)
+    _params.set(key, isArrOrObj ? encodeParams(_value) : _value)
+  }
+  return _params.toString()
+}
 
 export default function encodeQuery(params: any) {
   if (!params) return {};

src/views/device/Instance/Detail/Parsing/index.vue

@@ -146,12 +146,6 @@ const rest = async () => {
         getDeviceCode();
         message.success('操作成功')
     }
-    // service.delDeviceCode(productId, deviceId).then((res) => {
-    //   if (res.status === 200) {
-    //     getDeviceCode(productId, deviceId);
-    //     onlyMessage('操作成功');
-    //   }
-    // });
 };
 //获取topic
 const getTopic = async () => {
@@ -285,7 +279,7 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     padding: 10px;
-    background-color: '#f7f7f7';
+    background-color: #f7f7f7;
 
     .bottom-title {
         display: flex;

src/views/device/Product/Detail/DataAnalysis/index.vue

@@ -60,7 +60,7 @@
     </a-card>
 </template>
 
-<script setup lang='ts' name="Parsing">
+<script setup lang='ts' name="DataAnalysis">
 import AIcon from '@/components/AIcon'
 import PermissionButton from '@/components/PermissionButton/index.vue'
 import MonacoEditor from '@/components/MonacoEditor/index.vue';
@@ -225,7 +225,7 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     padding: 10px;
-    background-color: '#f7f7f7';
+    background-color: #f7f7f7;
 
     .bottom-title {
         display: flex;

src/views/device/Product/Detail/index.vue

@@ -205,7 +205,9 @@ const getProtocol = async () => {
         }
     }
 };
-getProtocol();
+onMounted(()=>{
+    getProtocol();
+})
 </script>
 <style scoped lang="less">
 .ant-switch-loading,

src/views/iot-card/CardManagement/Import.vue

@@ -80,8 +80,8 @@
 import { FILE_UPLOAD } from '@/api/comm';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 import { LocalStore } from '@/utils/comm';
-import { downloadFile } from '@/utils/utils';
-import { queryPlatformNoPage, _import } from '@/api/iot-card/cardManagement';
+import { downloadFile, downloadFileByUrl } from '@/utils/utils';
+import { queryPlatformNoPage, _import ,exportCard} from '@/api/iot-card/cardManagement';
 import { message } from 'ant-design-vue';
 
 const emit = defineEmits(['close']);
@@ -136,9 +136,21 @@ const fileChange = (info: any) => {
     }
 };
 
-const downFileFn = (type: string) => {
-    const url = `${BASE_API_PATH}/network/card/template.${type}`;
-    downloadFile(url);
+const downFileFn =async (type: string) => {
+    // const url = `${BASE_API_PATH}/network/card/template.${type}`;
+    // downloadFile(url);
+    const res:any = await exportCard(type)
+    if(res){
+        const blob = new Blob([res], { type: type });
+            const url = URL.createObjectURL(blob);
+            console.log(url);
+            downloadFileByUrl(
+                url,
+                `物联卡导入模版`,
+                type,
+            );
+    }
+
 };
 
 const handleCancel = () => {

src/views/iot-card/CardManagement/index.vue

@@ -1,24 +1,12 @@
 <!-- 物联卡管理 -->
 <template>
     <page-container>
-        <Search
-            :columns="columns"
-            target="iot-card-management-search"
-            @search="handleSearch"
-        />
-        <JTable
-            ref="cardManageRef"
-            :columns="columns"
-            :request="query"
-            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
-            :rowSelection="{
+        <Search :columns="columns" target="iot-card-management-search" @search="handleSearch" />
+        <JTable ref="cardManageRef" :columns="columns" :request="query"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :rowSelection="{
                 selectedRowKeys: _selectedRowKeys,
                 onChange: onSelectChange,
-            }"
-            @cancelSelect="cancelSelect"
-            :params="params"
-            :gridColumn="3"
-        >
+            }" @cancelSelect="cancelSelect" :params="params" :gridColumn="3">
             <template #headerTitle>
                 <a-space>
                     <a-button type="primary" @click="handleAdd">
@@ -32,72 +20,62 @@
                         <template #overlay>
                             <a-menu>
                                 <a-menu-item>
-                                    <a-button @click="exportVisible = true">
+                                    <PermissionButton @click="exportVisible = true"
+                                        :hasPermission="'iot-card/CardManagement:export'">
                                         <AIcon type="ExportOutlined" />
                                         批量导出
-                                    </a-button>
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item>
-                                    <a-button @click="importVisible = true"
-                                        ><AIcon
-                                            type="ImportOutlined"
-                                        />批量导入</a-button
-                                    >
+                                    <PermissionButton @click="importVisible = true"
+                                        :hasPermission="'iot-card/CardManagement:import'">
+                                        <AIcon type="ImportOutlined" />批量导入
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item>
-                                    <a-popconfirm
-                                        @confirm="handleActive"
-                                        title="确认激活吗？"
-                                    >
-                                        <a-button>
-                                            <AIcon type="CheckCircleOutlined" />
-                                            批量激活
-                                        </a-button>
-                                    </a-popconfirm>
+                                    <PermissionButton :popConfirm="{
+                                        title: '确认激活吗？',
+                                        onConfirm: handleActive,
+                                    }" :hasPermission="'iot-card/CardManagement:active'">
+                                        <AIcon type="CheckCircleOutlined" />
+                                        批量激活
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item>
-                                    <a-popconfirm
-                                        @confirm="handleStop"
-                                        title="确认停用吗？"
-                                    >
-                                        <a-button type="primary" ghost>
-                                            <AIcon type="StopOutlined" />
+                                    <PermissionButton :popConfirm="{
+                                        title: '确认停用吗？',
+                                        onConfirm: handleStop,
+                                    }" ghost type="primary" :hasPermission="'iot-card/CardManagement:action'">
+                                        <AIcon type="StopOutlined" />
                                             批量停用
-                                        </a-button>
-                                    </a-popconfirm>
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item>
-                                    <a-popconfirm
-                                        @confirm="handleResumption"
-                                        title="确认复机吗？"
-                                    >
-                                        <a-button type="primary" ghost>
-                                            <AIcon type="PoweroffOutlined" />
+                                    <PermissionButton :popConfirm="{
+                                        title: '确认复机吗？',
+                                        onConfirm: handleResumption,
+                                    }" ghost type="primary" :hasPermission="'iot-card/CardManagement:action'">
+                                         <AIcon type="PoweroffOutlined" />
                                             批量复机
-                                        </a-button>
-                                    </a-popconfirm>
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item>
-                                    <a-popconfirm
-                                        @confirm="handleSync"
-                                        title="确认同步状态吗？"
-                                    >
-                                        <a-button type="primary" ghost>
-                                            <AIcon type="SwapOutlined" />
+                                    <PermissionButton :popConfirm="{
+                                        title: '确认同步状态吗？',
+                                        onConfirm: handleSync,
+                                    }" ghost type="primary" :hasPermission="'iot-card/CardManagement:sync'">
+                                         <AIcon type="SwapOutlined" />
                                             同步状态
-                                        </a-button>
-                                    </a-popconfirm>
+                                    </PermissionButton>
                                 </a-menu-item>
                                 <a-menu-item v-if="_selectedRowKeys.length > 0">
-                                    <a-popconfirm
-                                        @confirm="handelRemove"
-                                        title="确认删除吗？"
-                                    >
-                                        <a-button>
-                                            <AIcon type="DeleteOutlined" />
-                                            批量删除
-                                        </a-button>
-                                    </a-popconfirm>
+                                    <PermissionButton :popConfirm="{
+                                        title: '确认删除吗？',
+                                        onConfirm: handelRemove,
+                                    }"  ghost type="primary" :hasPermission="'iot-card/CardManagement:delete'">
+                                         <AIcon type="SwapOutlined" />
+                                         批量删除
+                                    </PermissionButton>
                                 </a-menu-item>
                             </a-menu>
                         </template>
@@ -105,20 +83,13 @@
                 </a-space>
             </template>
             <template #card="slotProps">
-                <CardBox
-                    :value="slotProps"
-                    @click="handleClick"
-                    :actions="getActions(slotProps, 'card')"
-                    v-bind="slotProps"
-                    :active="_selectedRowKeys.includes(slotProps.id)"
-                    :status="slotProps.cardStateType.value"
-                    :statusText="slotProps.cardStateType.text"
-                    :statusNames="{
+                <CardBox :value="slotProps" @click="handleClick" :actions="getActions(slotProps, 'card')" v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)" :status="slotProps.cardStateType.value"
+                    :statusText="slotProps.cardStateType.text" :statusNames="{
                         using: 'success',
                         toBeActivated: 'default',
                         deactivate: 'error',
-                    }"
-                >
+                    }">
                     <template #img>
                         <slot name="img">
                             <img :src="getImage('/iot-card/iot-card-bg.png')" />
@@ -150,8 +121,7 @@
                                 {{ slotProps.totalFlow }}
                             </span>
                             <span class="card-item-content-text">
-                                M 使用流量</span
-                            >
+                                M 使用流量</span>
                         </div>
                         <div v-else>
                             <div class="progress-text">
@@ -165,17 +135,22 @@
                                     总共 {{ slotProps.totalFlow }} M
                                 </div>
                             </div>
-                            <a-progress
-                                :strokeColor="'#ADC6FF'"
-                                :showInfo="false"
-                                :percent="
-                                    slotProps.totalFlow - slotProps.usedFlow
-                                "
-                            />
+                            <a-progress :strokeColor="'#ADC6FF'" :showInfo="false" :percent="
+                                slotProps.totalFlow - slotProps.usedFlow
+                            " />
                         </div>
                     </template>
                     <template #actions="item">
-                        <a-tooltip
+                        <PermissionButton :disabled="item.disabled" :popConfirm="item.popConfirm" :tooltip="{
+                            ...item.tooltip,
+                        }" @click="item.onClick" :hasPermission="'iot-card/CardManagement:' + item.key">
+                            <AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
+                            <template v-else>
+                                <AIcon :type="item.icon" />
+                                <span>{{ item?.text }}</span>
+                            </template>
+                        </PermissionButton>
+                    <!-- <a-tooltip
                             v-bind="item.tooltip"
                             :title="item.disabled && item.tooltip.title"
                         >
@@ -210,7 +185,7 @@
                                     </template>
                                 </a-button>
                             </template>
-                        </a-tooltip>
+                                    </a-tooltip> -->
                     </template>
                 </CardBox>
             </template>
@@ -221,8 +196,8 @@
                 <div>
                     {{
                         slotProps.totalFlow
-                            ? slotProps.totalFlow.toFixed(2) + ' M'
-                            : ''
+                        ? slotProps.totalFlow.toFixed(2) + ' M'
+                        : ''
                     }}
                 </div>
             </template>
@@ -230,8 +205,8 @@
                 <div>
                     {{
                         slotProps.usedFlow
-                            ? slotProps.usedFlow.toFixed(2) + ' M'
-                            : ''
+                        ? slotProps.usedFlow.toFixed(2) + ' M'
+                        : ''
                     }}
                 </div>
             </template>
@@ -239,8 +214,8 @@
                 <div>
                     {{
                         slotProps.residualFlow
-                            ? slotProps.residualFlow.toFixed(2) + ' M'
-                            : ''
+                        ? slotProps.residualFlow.toFixed(2) + ' M'
+                        : ''
                     }}
                 </div>
             </template>
@@ -253,74 +228,52 @@
             <template #activationDate="slotProps">
                 {{
                     slotProps.activationDate
-                        ? moment(slotProps.activationDate).format(
-                              'YYYY-MM-DD HH:mm:ss',
-                          )
-                        : ''
+                    ? moment(slotProps.activationDate).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                    : ''
                 }}
             </template>
             <template #updateTime="slotProps">
                 {{
                     slotProps.updateTime
-                        ? moment(slotProps.updateTime).format(
-                              'YYYY-MM-DD HH:mm:ss',
-                          )
-                        : ''
+                    ? moment(slotProps.updateTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                    : ''
                 }}
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip
-                        v-for="i in getActions(slotProps, 'table')"
+                    <template
+                        v-for="i in getActions(slotProps,'table')"
                         :key="i.key"
-                        v-bind="i.tooltip"
                     >
-                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-popconfirm>
-                        <a-button
-                            style="padding: 0"
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
                             type="link"
-                            v-else
-                            @click="i.onClick && i.onClick(slotProps)"
+                            style="padding: 0px"
+                            :hasPermission="'iot-card/CardManagement:' + i.key"
                         >
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-button>
-                    </a-tooltip>
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
                 </a-space>
             </template>
         </JTable>
         <!-- 批量导入 -->
         <Import v-if="importVisible" @close="importVisible = false" />
         <!-- 批量导出 -->
-        <Export
-            v-if="exportVisible"
-            @close="exportVisible = false"
-            :data="_selectedRowKeys"
-        />
+        <Export v-if="exportVisible" @close="exportVisible = false" :data="_selectedRowKeys" />
         <!-- 绑定设备 -->
-        <BindDevice
-            v-if="bindDeviceVisible"
-            :cardId="cardId"
-            @change="bindDevice"
-        />
+        <BindDevice v-if="bindDeviceVisible" :cardId="cardId" @change="bindDevice" />
         <!-- 新增、编辑 -->
-        <Save
-            v-if="visible"
-            :type="saveType"
-            :data="current"
-            @change="saveChange"
-        />
+        <Save v-if="visible" :type="saveType" :data="current" @change="saveChange" />
     </page-container>
 </template>
 
@@ -516,7 +469,21 @@ const getActions = (
     if (!data) return [];
     return [
         {
-            key: 'edit',
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {
+                // router.push({
+                //     path: `/iot-card/CardManagement/detail/${data.id}`,
+                // });
+                menuStory.jumpPage('iot-card/CardManagement/Detail', { id: data.id })
+            },
+        },
+        {
+            key: 'update',
             text: '编辑',
             tooltip: {
                 title: '编辑',
@@ -529,21 +496,7 @@ const getActions = (
             },
         },
         {
-            key: 'view',
-            text: '查看',
-            tooltip: {
-                title: '查看',
-            },
-            icon: 'EyeOutlined',
-            onClick: () => {
-                // router.push({
-                //     path: `/iot-card/CardManagement/detail/${data.id}`,
-                // });
-                menuStory.jumpPage('iot-card/CardManagement/Detail',{id:data.id})
-            },
-        },
-        {
-            key: 'bindDevice',
+            key: 'bind',
             text: data.deviceId ? '解绑设备' : '绑定设备',
             tooltip: {
                 title: data.deviceId ? '解绑设备' : '绑定设备',
@@ -551,18 +504,18 @@ const getActions = (
             icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
             popConfirm: data.deviceId
                 ? {
-                      title: '确认解绑设备？',
-                      okText: '确定',
-                      cancelText: '取消',
-                      onConfirm: async () => {
-                          unbind(data.id).then((resp: any) => {
-                              if (resp.status === 200) {
-                                  message.success('操作成功');
-                                  cardManageRef.value?.reload();
-                              }
-                          });
-                      },
-                  }
+                    title: '确认解绑设备？',
+                    okText: '确定',
+                    cancelText: '取消',
+                    onConfirm: async () => {
+                        unbind(data.id).then((resp: any) => {
+                            if (resp.status === 200) {
+                                message.success('操作成功');
+                                cardManageRef.value?.reload();
+                            }
+                        });
+                    },
+                }
                 : undefined,
             onClick: () => {
                 if (!data.deviceId) {
@@ -572,34 +525,34 @@ const getActions = (
             },
         },
         {
-            key: 'activation',
+            key: data.cardStateType?.value === 'toBeActivated' ? 'active' : 'action',
             text:
                 data.cardStateType?.value === 'toBeActivated'
                     ? '激活'
                     : data.cardStateType?.value === 'deactivate'
-                    ? '复机'
-                    : '停用',
+                        ? '复机'
+                        : '停用',
             tooltip: {
                 title:
                     data.cardStateType?.value === 'toBeActivated'
                         ? '激活'
                         : data.cardStateType?.value === 'deactivate'
-                        ? '复机'
-                        : '停用',
+                            ? '复机'
+                            : '停用',
             },
             icon:
                 data.cardStateType?.value === 'toBeActivated'
                     ? 'CheckCircleOutlined'
                     : data.cardStateType?.value === 'deactivate'
-                    ? 'PoweroffOutlined'
-                    : 'StopOutlined',
+                        ? 'PoweroffOutlined'
+                        : 'StopOutlined',
             popConfirm: {
                 title:
                     data.cardStateType?.value === 'toBeActivated'
                         ? '确认激活？'
                         : data.cardStateType?.value === 'deactivate'
-                        ? '确认复机？'
-                        : '确认停用?',
+                            ? '确认复机？'
+                            : '确认停用?',
                 okText: '确定',
                 cancelText: '取消',
                 onConfirm: async () => {
@@ -793,14 +746,17 @@ const handelRemove = async () => {
     font-size: 20px;
     font-weight: 600;
 }
+
 .progress-text {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
+
 :deep(.ant-progress-inner) {
     border-radius: 0px;
 }
+
 :deep(.ant-progress-bg) {
     border-radius: 0px;
 }

src/views/iot-card/Platform/index.vue

@@ -56,42 +56,15 @@
                         </a-row>
                     </template>
                     <template #actions="item">
-                        <a-tooltip
-                            v-bind="item.tooltip"
-                            :title="item.disabled && item.tooltip.title"
-                        >
-                            <a-popconfirm
-                                v-if="item.popConfirm"
-                                v-bind="item.popConfirm"
-                                :disabled="item.disabled"
-                            >
-                                <a-button :disabled="item.disabled">
-                                    <AIcon
-                                        type="DeleteOutlined"
-                                        v-if="item.key === 'delete'"
-                                    />
-                                    <template v-else>
-                                        <AIcon :type="item.icon" />
-                                        <span>{{ item.text }}</span>
-                                    </template>
-                                </a-button>
-                            </a-popconfirm>
+                        <PermissionButton :disabled="item.disabled" :popConfirm="item.popConfirm" :tooltip="{
+                            ...item.tooltip,
+                        }" @click="item.onClick" :hasPermission="'iot-card/Platform:' + item.key">
+                            <AIcon type="DeleteOutlined" v-if="item.key === 'delete'" />
                             <template v-else>
-                                <a-button
-                                    :disabled="item.disabled"
-                                    @click="item.onClick"
-                                >
-                                    <AIcon
-                                        type="DeleteOutlined"
-                                        v-if="item.key === 'delete'"
-                                    />
-                                    <template v-else>
-                                        <AIcon :type="item.icon" />
-                                        <span>{{ item.text }}</span>
-                                    </template>
-                                </a-button>
+                                <AIcon :type="item.icon" />
+                                <span>{{ item?.text }}</span>
                             </template>
-                        </a-tooltip>
+                        </PermissionButton>
                     </template>
                 </CardBox>
             </template>
@@ -107,33 +80,24 @@
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip
-                        v-for="i in getActions(slotProps, 'table')"
+                    <template
+                        v-for="i in getActions(slotProps,'table')"
                         :key="i.key"
-                        v-bind="i.tooltip"
                     >
-                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-popconfirm>
-                        <a-button
-                            style="padding: 0"
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
                             type="link"
-                            v-else
-                            @click="i.onClick && i.onClick(slotProps)"
+                            style="padding: 0px"
+                            :hasPermission="'iot-card/Platform:' + i.key"
                         >
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-button>
-                    </a-tooltip>
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
                 </a-space>
             </template>
         </JTable>
@@ -218,7 +182,7 @@ const getActions = (
     if (!data) return [];
     return [
         {
-            key: 'edit',
+            key: 'update',
             text: '编辑',
             tooltip: {
                 title: '编辑',

src/views/iot-card/Recharge/index.vue

@@ -1,24 +1,14 @@
 <!-- 充值管理 -->
 <template>
     <page-container>
-        <Search
-            :columns="columns"
-            target="recharge-search"
-            @search="handleSearch"
-        />
-        <JTable
-            ref="rechargeRef"
-            :columns="columns"
-            :request="queryRechargeList"
-            model="TABLE"
-            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
-            :params="params"
-        >
+        <Search :columns="columns" target="recharge-search" @search="handleSearch" />
+        <JTable ref="rechargeRef" :columns="columns" :request="queryRechargeList" model="TABLE"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }" :params="params">
             <template #headerTitle>
                 <a-space>
-                    <a-button type="primary" @click="visible = true">
+                    <PermissionButton @click="visible = true" :hasPermission="'iot-card/Recharge:pay'" type="primary">
                         充值
-                    </a-button>
+                    </PermissionButton>
                     <div class="tips-text">
                         <span style="margin-right: 8px; font-size: 16px">
                             <AIcon type="ExclamationCircleOutlined"></AIcon>
@@ -30,41 +20,32 @@
             <template #createTime="slotProps">
                 {{
                     slotProps.createTime
-                        ? moment(slotProps.createTime).format(
-                              'YYYY-MM-DD HH:mm:ss',
-                          )
-                        : ''
+                    ? moment(slotProps.createTime).format(
+                        'YYYY-MM-DD HH:mm:ss',
+                    )
+                    : ''
                 }}
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip
+                    <template
                         v-for="i in getActions(slotProps)"
                         :key="i.key"
-                        v-bind="i.tooltip"
                     >
-                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-popconfirm>
-                        <a-button
-                            style="padding: 0"
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
                             type="link"
-                            v-else
-                            @click="i.onClick && i.onClick(slotProps)"
+                            style="padding: 0px"
+                            :hasPermission="'iot-card/Recharge:' + i.key"
                         >
-                            <a-button
-                                :disabled="i.disabled"
-                                style="padding: 0"
-                                type="link"
-                                ><AIcon :type="i.icon"
-                            /></a-button>
-                        </a-button>
-                    </a-tooltip>
+                            <template #icon><AIcon :type="i.icon" /></template>
+                        </PermissionButton>
+                    </template>
                 </a-space>
             </template>
         </JTable>
@@ -145,8 +126,8 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             },
             icon: 'EyeOutlined',
             onClick: () => {
-              detailVisible.value = true;
-              current.value = data;
+                detailVisible.value = true;
+                current.value = data;
             },
         },
     ];

src/views/media/Cascade/Channel/index.vue

@@ -40,6 +40,16 @@
                     </a-popconfirm>
                 </a-space>
             </template>
+            <template #gbChannelIdHeader="title">
+                <a-tooltip
+                    title="国标级联有16位、20位两种格式。在当前页面修改不会修改视频设备-通道页面中的国标ID"
+                >
+                    <a-space>
+                        <span>{{ title }}</span>
+                        <AIcon type="InfoCircleOutlined" />
+                    </a-space>
+                </a-tooltip>
+            </template>
             <template #gbChannelId="slotProps">
                 <a-space>
                     <Ellipsis>
@@ -172,6 +182,7 @@ const columns = [
         dataIndex: 'gbChannelId',
         key: 'gbChannelId',
         scopedSlots: true,
+        headerCell: 'gbChannelIdHeader', // 表头单元格插槽
         search: {
             type: 'string',
         },
@@ -298,6 +309,10 @@ const getActions = (
  * 批量解绑
  */
 const handleMultipleUnbind = async () => {
+    if (!_selectedRowKeys.value.length) {
+        message.error('请先选择需要解绑的通道列表');
+        return;
+    }
     const channelIds = listRef.value?._dataSource
         .filter((f: any) => _selectedRowKeys.value.includes(f.id))
         .map((m: any) => m.channelId);

src/views/media/Cascade/Publish/index.vue

@@ -0,0 +1,103 @@
+<!-- 国标级联-推送 -->
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="推送"
+        cancelText="取消"
+        okText="确定"
+        width="900px"
+        @ok="_vis = false"
+        @cancel="_vis = false"
+    >
+        <a-row :gutter="20">
+            <a-col :span="8">
+                <p>成功：{{ successCount }}</p>
+                <a-space>
+                    <p>失败：{{ failCount }}</p>
+                    <a
+                        v-if="errMessage.length"
+                        @click="
+                            downloadObject(
+                                errMessage || '',
+                                data.name + '-推送失败',
+                            )
+                        "
+                        >下载</a
+                    >
+                </a-space>
+            </a-col>
+            <a-col :span="8">
+                <p>推送通道数量：{{ data.count }}</p>
+            </a-col>
+            <a-col :span="8">
+                <p>已推送通道数量：{{ successCount + failCount }}</p>
+            </a-col>
+        </a-row>
+        <div v-if="flag">
+            <a-textarea :rows="10" v-model:value="errStr" />
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { LocalStore } from '@/utils/comm';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { PropType } from 'vue';
+import { downloadObject } from '@/utils/utils';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val: boolean) => {
+        if (val) publish();
+    },
+);
+
+/**
+ * 推送
+ */
+const successCount = ref(0);
+const failCount = ref(0);
+const flag = ref(false);
+const errMessage = ref<any[]>([]);
+const errStr = computed(() => JSON.stringify(errMessage.value));
+const publish = () => {
+    const activeAPI = `${BASE_API_PATH}/media/gb28181-cascade/${
+        props.data.id
+    }/bindings/publish?:X_Access_Token=${LocalStore.get(TOKEN_KEY)}`;
+    const source = new EventSourcePolyfill(activeAPI);
+    source.onmessage = (e: any) => {
+        const res = JSON.parse(e.data);
+        if (res.successful) {
+            successCount.value += 1;
+        } else {
+            failCount.value += 1;
+            if (errMessage.value.length <= 5) {
+                errMessage.value.push({ ...res });
+            }
+        }
+    };
+    source.onerror = () => {
+        source.close();
+    };
+    source.onopen = () => {};
+};
+</script>

src/views/media/Cascade/index.vue

@@ -193,6 +193,8 @@
                 </a-space>
             </template>
         </JTable>
+
+        <Publish v-model:visible="publishVis" :data="currentData" />
     </page-container>
 </template>
 
@@ -201,6 +203,7 @@ import CascadeApi from '@/api/media/cascade';
 import type { ActionsType } from '@/components/Table/index.vue';
 import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
+import Publish from './Publish/index.vue';
 
 import { useMenuStore } from 'store/menu';
 
@@ -314,6 +317,13 @@ const handleAdd = () => {
     menuStory.jumpPage('media/Cascade/Save');
 };
 
+const publishVis = ref(false);
+const currentData = ref();
+/**
+ * 按钮
+ * @param data
+ * @param type
+ */
 const getActions = (
     data: Partial<Record<string, any>>,
     type: 'card' | 'table',
@@ -366,7 +376,8 @@ const getActions = (
             disabled: data.status?.value === 'disabled',
             icon: 'ShareAltOutlined',
             onClick: () => {
-                // updateChannel()
+                publishVis.value = true;
+                currentData.value = data;
             },
         },
         {

src/views/media/Device/Channel/Live/index.less

@@ -0,0 +1,58 @@
+.media-live {
+    display: flex;
+
+    .live-player-tools {
+        flex-basis: 230px;
+
+        .direction-item {
+            font-size: 30px !important;
+        }
+
+        .zoom-item {
+            font-size: 20px !important;
+        }
+    }
+
+    .media-live-video {
+        position: relative;
+        flex-grow: 1;
+        width: 0;
+
+        .media-tool {
+            position: absolute;
+            top: 4px;
+            right: 0;
+            z-index: 2;
+            display: flex;
+            opacity: 0;
+            transition: opacity 0.3s;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            .tool-item {
+                margin-right: 6px;
+                padding: 4px;
+                color: #fff;
+                font-size: 14px;
+                background-color: hsla(0, 0%, 50.2%, 0.8);
+                border-radius: 2px;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: hsla(0, 0%, 50.2%, 0.85);
+                }
+
+                &:active {
+                    background-color: hsla(0, 0%, 50.2%, 0.9);
+                }
+            }
+        }
+    }
+}
+
+.media-live-tool {
+    display: flex;
+    margin-top: 24px;
+}

src/views/media/Device/Channel/Live/index.vue

@@ -0,0 +1,75 @@
+<!-- 视频设备 - 播放 -->
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        title="播放"
+        cancelText="取消"
+        okText="确定"
+        width="800px"
+        @ok="_vis = false"
+        @cancel="_vis = false"
+    >
+        <div class="media-live">
+            <div class="media-live-video">
+                <div class="media-tool">
+                    <div class="tool-item">
+                        {{
+                            isRecord === 0
+                                ? '开始录像'
+                                : isRecord === 1
+                                ? '请求录像中'
+                                : '停止录像'
+                        }}
+                    </div>
+                    <div class="tool-item">刷新</div>
+                    <div class="tool-item">重置</div>
+                </div>
+                <LivePlayer :url="url" />
+            </div>
+            <MediaTool />
+        </div>
+        <div class="media-live-tool">
+            <a-radio-group v-model:value="mediaType" button-style="solid">
+                <a-radio-button value="mp4">MP4</a-radio-button>
+                <a-radio-button value="flv">FLV</a-radio-button>
+                <a-radio-button value="hls">HLS</a-radio-button>
+            </a-radio-group>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import LivePlayer from '@/components/Player/index.vue';
+import MediaTool from '@/components/Player/mediaTool.vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    data: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+watch(
+    () => _vis.value,
+    (val: boolean) => {},
+);
+
+const isRecord = ref(0);
+const url = ref('');
+const mediaType = ref('mp4');
+</script>
+<style lang="less" scoped>
+@import './index.less';
+</style>

src/views/media/Device/Channel/index.vue

@@ -83,6 +83,7 @@
             :channelData="channelData"
             @submit="listRef.reload()"
         />
+        <Live v-model:visible="playerVis" />
     </page-container>
 </template>
 
@@ -92,6 +93,7 @@ import type { ActionsType } from '@/components/Table/index.vue';
 import { useMenuStore } from 'store/menu';
 import { message } from 'ant-design-vue';
 import Save from './Save.vue';
+import Live from './Live/index.vue';
 import { cloneDeep } from 'lodash-es';
 
 const menuStory = useMenuStore();
@@ -169,7 +171,7 @@ const handleAdd = () => {
 };
 
 const listRef = ref();
-const playVis = ref(false);
+const playerVis = ref(false);
 const channelData = ref();
 
 /**
@@ -203,7 +205,7 @@ const getActions = (
             },
             icon: 'VideoCameraOutlined',
             onClick: () => {
-                playVis.value = true;
+                playerVis.value = true;
             },
         },
         {

src/views/rule-engine/Alarm/Configuration/index.vue

@@ -10,6 +10,7 @@
                 :columns="columns"
                 :request="queryList"
                 :gridColumn="3"
+                :gridColumns="[1,2,3]"
                 ref="tableRef"
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],

src/views/rule-engine/Alarm/Log/Detail/index.vue

@@ -1,37 +1,182 @@
 <template>
-  <page-container>
-    <Search :columns="columns" target="alarm-log-detail"></Search>
-    <JTable :columns="columns" model="TABLE" :request="queryList"></JTable>
-  </page-container>
+    <page-container>
+        <Search
+            :columns="columns"
+            target="alarm-log-detail"
+            @search="handleSearch"
+        ></Search>
+        <JTable
+            :columns="columns"
+            model="TABLE"
+            :request="queryList"
+            :params="params"
+            :defaultParams="{
+                terms,
+                sorts: [{ name: 'alarmTime', order: 'desc' }],
+            }"
+        >
+            <template #alarmTime="slotProps">{{
+                moment(slotProps.alarmTime).format('YYYY-MM-DD HH:mm:ss')
+            }}</template>
+            <template #action="slotProps">
+                <a-space
+                    ><template
+                        v-for="i in getActions(slotProps, 'table')"
+                        :key="i.key"
+                    >
+                        <PermissionButton
+                            :disabled="i.disabled"
+                            :popConfirm="i.popConfirm"
+                            :tooltip="{
+                                ...i.tooltip,
+                            }"
+                            @click="i.onClick"
+                            type="link"
+                            style="padding: 0px"
+                        >
+                            <template #icon><AIcon :type="i.icon"/></template>
+                        </PermissionButton>
+                    </template>
+                </a-space>
+            </template>
+        </JTable>
+        <Info v-if="visiable"  :data="current" @close="close"/>
+    </page-container>
 </template>
 
 <script lang="ts" setup>
-const columns = [{
-  title:'告警时间',
-  dataIndex:'alarmTime',
-  key:'alarmTime',
-  search:{
-    type:'date'
-  }
-},{
-  title:'告警名称',
-  dataIndex:'alarmConfigName',
-  key:'alarmConfigName',
-},{
-  title:'说明',
-  dataIndex:'description',
-  key:'description'
-},{
-  title:'操作',
-  dataIndex:'action',
-  key:'action'
-}]
-
+import { detail, queryHistoryList } from '@/api/rule-engine/log';
+import { useRoute } from 'vue-router';
+import moment from 'moment';
+import type { ActionsType } from '@/components/Table/index.vue';
+import { message } from 'ant-design-vue';
+import { useAlarmStore } from '@/store/alarm';
+import Info from './info.vue';
+import { storeToRefs } from 'pinia';
+const route = useRoute();
+const id = route.params?.id;
+let visiable = ref(false);
+const columns = [
+    {
+        title: '告警时间',
+        dataIndex: 'alarmTime',
+        key: 'alarmTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '告警名称',
+        dataIndex: 'alarmConfigName',
+        key: 'alarmConfigName',
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        key: 'action',
+        scopedSlots: true,
+    },
+];
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type?: 'table',
+): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    const actions = [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'SearchOutlined',
+            onClick: () => {
+                current.value = data;
+                visiable.value = true;
+            },
+        },
+    ];
+    return actions;
+};
+const terms = [
+    {
+        column: 'alarmRecordId',
+        termType: 'eq$not',
+        value: id,
+        type: 'and',
+    },
+];
+let params = ref({});
+const alarmStore = useAlarmStore();
+const { data } = alarmStore;
+let current = ref(); // 当前告警记录信息
+let details = ref(); // 告警记录的详情
 /**
  * 获取详情列表
  */
-const queryList = () =>{
-  
+const queryList = async (params: any) => {
+    const res = await queryHistoryList({
+        ...params,
+        // sorts: [{ name: 'alarmTime', order: 'desc' }],
+    });
+    if (res.status === 200) {
+
+        return {
+            code: res.message,
+            result: {
+                data: res.result.data,
+                pageIndex: res.result.pageIndex,
+                pageSize: res.result.pageSize,
+                total: res.result.total,
+            },
+            status: res.status,
+        };
+    } else {
+        return {
+            code: 200,
+            result: {
+                data: [],
+                pageIndex: 0,
+                pageSize: 0,
+                total: 0,
+            },
+            status: 200,
+        };
+    }
+};
+/**
+ * 根据id初始化数据
+ */
+watchEffect(async () => {
+    const res = await detail(id);
+    if (res.status === 200) {
+        data.current = res.result;
+        if (res.result.targetType === 'device') {
+            columns.splice(2, 0, {
+                dataIndex: 'targetName',
+                title: '告警设备',
+                key: 'targetName',
+            });
+        }
+    }
+});
+const handleSearch = (_params: any) => {
+    params.value = _params;
+};
+
+/**
+ * 关闭模态弹窗
+ */
+const close = () => {
+  visiable.value = false
 }
 </script>
 <style lang="less" scoped>

src/views/rule-engine/Alarm/Log/Detail/info.vue

@@ -0,0 +1,59 @@
+<template>
+    <a-modal visible title="详情" okText="确定" cancelText="取消" :width="1000" @ok="closeModal" @cancel="closeModal">
+        <a-descriptions bordered :column="2">
+            <a-descriptions-item v-if="props.data.targetType==='device'" label="告警设备" :span="1">{{props.data?.targetName || ''}}</a-descriptions-item>
+            <a-descriptions-item v-if="props.data.targetType==='device'" label="设备ID" :span="1">{{props.data?.targetId || ''}}</a-descriptions-item>
+            <a-descriptions-item label="告警名称" :span="1">{{
+                props.data?.alarmConfigName
+            }}</a-descriptions-item>
+            <a-descriptions-item label="告警时间" :span="1">{{
+                moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss')
+            }}</a-descriptions-item>
+            <a-descriptions-item label="告警级别" :span="1">
+                <a-tooltip
+                    placement="topLeft"
+                    :title="(Store.get('default-level') || []).find((item: any) => item?.level === data?.level)
+                ?.title || props.data?.level"
+                >
+                    <Ellipsis>
+                        <span>
+                            {{(Store.get('default-level') || []).find((item: any) => item?.level === data?.level)
+                ?.title || props.data?.level}}
+                        </span>
+                    </Ellipsis>
+                </a-tooltip>
+            </a-descriptions-item>
+            <a-descriptions-item label="告警说明" :span="1"
+                ><a-tooltip
+                    placement="topLeft"
+                    :title="data?.description || ''"
+                >
+                    <Ellipsis>
+                        <span>
+                            {{ data?.description || '' }}
+                        </span> </Ellipsis
+                    >
+                </a-tooltip></a-descriptions-item
+            >
+            <a-descriptions-item
+                label="告警流水"
+                :span="2"
+            ><div style="max-height: 500px; overflow-y: auto;"><JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" :expand-depth="5"></JsonViewer></div></a-descriptions-item>
+        </a-descriptions>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import moment from 'moment';
+import { Store } from 'jetlinks-store';
+import JsonViewer from 'vue-json-viewer';
+const props = defineProps({
+    data: Object,
+});
+const emit = defineEmits(['close'])
+const closeModal = () => {
+    emit('close');
+}
+</script>
+<style lang="less" scoped>
+</style>

src/views/rule-engine/Alarm/Log/SolveComponent/index.vue

@@ -0,0 +1,79 @@
+<template>
+    <a-modal
+        title="告警处理"
+        okText="确定"
+        cancelText="取消"
+        visible
+        @cancel="handleCancel"
+        @ok="handleSave"
+        destroyOnClose
+        :confirmLoading="loading"
+    >
+        <a-form :rules="rules" layout="vertical" ref="formRef" :model="form">
+            <a-form-item label="处理结果" name="describe">
+                <a-textarea
+                    :rows="8"
+                    :maxlength="200"
+                    showCount
+                    placeholder="请输入处理结果"
+                    v-model:value="form.describe"
+                ></a-textarea>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { handleLog } from '@/api/rule-engine/log';
+import { onlyMessage } from '@/utils/comm';
+const props = defineProps({
+    data: {
+        type: Object,
+    },
+});
+const loading = ref<boolean>(false);
+const formRef = ref();
+const rules = {
+    describe: [
+        {
+            required: true,
+            message: '请输入处理结果',
+        },
+    ],
+};
+const form = reactive({
+    describe: '',
+});
+let visible = ref(true);
+const emit = defineEmits(['closeSolve'])
+const handleCancel = () => {
+    emit('closeSolve');
+};
+const handleSave = () => {
+    loading.value = true;
+    formRef.value
+        .validate()
+        .then(async () => {
+            const res = await handleLog({
+                describe: form.describe,
+                type: 'user',
+                state: 'normal',
+                alarmRecordId: props.data?.current?.id || '',
+                alarmConfigId: props.data?.current?.alarmConfigId || '',
+                alarmTime: props?.data?.current?.alarmTime || '',
+            });
+            if (res.status === 200) {
+                onlyMessage('操作成功！');
+            } else {
+                onlyMessage('操作失败！', 'error');
+            }
+            loading.value = false;
+        })
+        .catch((error) => {
+            console.log(error);
+            loading.value = false;
+        });
+};
+</script>
+<style lang="less" scoped>
+</style>

src/views/rule-engine/Alarm/Log/SolveLog/index.vue

@@ -1,78 +1,130 @@
 <template>
     <a-modal
-        title="告警处理"
-        okText="确定"
-        cancelText="取消"
         visible
-        @cancel="handleCancel"
-        @ok="handleSave"
-        destroyOnClose
-        :confirmLoading="loading"
+        title="处理记录"
+        :width="1200"
+        cancelText="取消"
+        okText="确定"
+        @ok="clsoeModal"
+        @cancel="clsoeModal"
     >
-        <a-form :rules="rules" layout="vertical" ref="formRef" :model="form">
-            <a-form-item label="处理结果" name="describe">
-                <a-textarea
-                    :rows="8"
-                    :maxlength="200"
-                    showCount
-                    placeholder="请输入处理结果"
-                    v-model:value="form.describe"
-                ></a-textarea>
-            </a-form-item>
-        </a-form>
+        <Search
+            :columns="columns"
+            target="bind-channel"
+            @search="handleSearch"
+        ></Search>
+        <JTable
+            model="TABLE"
+            :columns="columns"
+            :defaultParams="{
+                sorts: [{ name: 'createTime', order: 'desc' }],
+                terms,
+            }"
+            :request="queryHandleHistory"
+            :params="params"
+        >
+            <template #headerTitle>
+                <h3>记录列表</h3>
+            </template>
+            <template #handleTime="slotsProps">
+                <span>
+                    {{
+                        moment(slotsProps.handleTime).format(
+                            'YYYY-MM-DD HH:mm:ss'
+                        )
+                    }}
+                </span>
+            </template>
+            <template #handleType="slotProps">
+                <span>{{ slotProps.handleType.text }}</span>
+            </template>
+            <template #alarmTime="slotProps">
+                <span>
+                    {{
+                        moment(slotProps.alarmTime).format(
+                            'YYYY-MM-DD HH:mm:ss',
+                        )
+                    }}
+                </span>
+            </template>
+        </JTable>
     </a-modal>
 </template>
 
 <script lang="ts" setup>
-import { handleLog } from '@/api/rule-engine/log';
-import { onlyMessage } from '@/utils/comm';
+import { queryHandleHistory } from '@/api/rule-engine/log';
+import moment from 'moment';
 const props = defineProps({
     data: {
         type: Object,
     },
 });
-const loading = ref<boolean>(false);
-const formRef = ref();
-const rules = {
-    describe: [
-        {
-            required: true,
-            message: '请输入处理结果',
+const terms = [
+    {
+        column: 'alarmRecordId',
+        termType: 'eq',
+        value: props.data.id,
+        type: 'and',
+    },
+];
+const columns = [
+    {
+        title: '处理时间',
+        dataIndex: 'handleTime',
+        key: 'handleTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
         },
-    ],
+    },
+    {
+        dataIndex: 'handleType',
+        title: '处理类型',
+        key: 'handleType',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '系统',
+                    value: 'system',
+                },
+                {
+                    label: '人工',
+                    value: 'user',
+                },
+            ],
+        },
+    },
+    {
+        title: '告警时间',
+        dataIndex: 'alarmTime',
+        key: 'alarmTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '告警处理',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+];
+const params = ref();
+const emit = defineEmits(['closeLog']);
+/**
+ * 关闭弹窗
+ */
+const clsoeModal = () => {
+    emit('closeLog');
 };
-const form = reactive({
-    describe: '',
-});
-let visible = ref(true);
-const emit = defineEmits(['closeSolve'])
-const handleCancel = () => {
-    emit('closeSolve');
-};
-const handleSave = () => {
-    loading.value = true;
-    formRef.value
-        .validate()
-        .then(async () => {
-            const res = await handleLog({
-                describe: form.describe,
-                type: 'user',
-                state: 'normal',
-                alarmRecordId: props.data?.current?.id || '',
-                alarmConfigId: props.data?.current?.alarmConfigId || '',
-                alarmTime: props?.data?.current?.alarmTime || '',
-            });
-            if (res.status === 200) {
-                onlyMessage('操作成功！');
-            } else {
-                onlyMessage('操作失败！', 'error');
-            }
-            loading.value = false;
-        })
-        .catch((error) => {
-            console.log(error);
-            loading.value = false;
-        });
+
+const handleSearch = (e: any) => {
+    params.value = e;
 };
 </script>
 <style lang="less" scoped>

src/views/rule-engine/Alarm/Log/TabComponent/indev.vue

@@ -28,6 +28,7 @@
             :columns="columns"
             :request="handleSearch"
             :params="params"
+            :gridColumns="[1,1,2]"
             :gridColumn="2"
             model="CARD"
         >
@@ -115,7 +116,8 @@
                 </CardBox>
             </template>
         </JTable>
-        <SolveLog :data="data" v-if="data.solveVisible" @closeSolve="closeSolve"/>
+        <SolveComponent :data="data" v-if="data.solveVisible" @closeSolve="closeSolve"/>
+        <SolveLog :data="data.current" v-if="data.logVisible" @closeLog="closeLog"/>
     </div>
 </template>
 
@@ -134,6 +136,7 @@ import { storeToRefs } from 'pinia';
 import { Store } from 'jetlinks-store';
 import moment from 'moment';
 import type { ActionsType } from '@/components/Table';
+import SolveComponent from '../SolveComponent/index.vue';
 import SolveLog from '../SolveLog/index.vue'
 import { useMenuStore } from '@/store/menu';
 const menuStory = useMenuStore();
@@ -390,12 +393,25 @@ const getActions = (
                 title: '处理记录',
             },
             icon: 'FileTextOutlined',
+            onClick:() =>{
+                data.value.current = currentData;
+                data.value.logVisible = true;
+            }
         },
     ];
     return actions;
 };
+/**
+ * 关闭告警日志
+ */
 const closeSolve = () =>{
-    data.value.solveVisible = false
+    data.value.solveVisible = false;
+}
+/**
+ * 关闭处理记录
+ */
+const closeLog = () =>{
+    data.value.logVisible = false;
 }
 </script>
 <style lang="less" scoped>

src/views/rule-engine/Instance/index.vue

@@ -105,7 +105,6 @@
                                 @click="i.onClick"
                                 type="link"
                                 style="padding: 0px"
-                                :hasPermission="'device/Instance:' + i.key"
                             >
                                 <template #icon
                                     ><AIcon :type="i.icon"

src/views/rule-engine/Scene/Save/Device/AddModal.vue

@@ -29,6 +29,7 @@
         v-model:selectorValues='addModel.selectorValues'
       />
       <Type
+        ref='typeRef'
         v-else-if='addModel.stepNumber === 2'
         :metadata='addModel.metadata'
       />
@@ -46,7 +47,7 @@
 
 <script setup lang='ts' name='AddModel'>
 import type { PropType } from 'vue'
-import type { metadataType, TriggerDevice } from '@/views/rule-engine/Scene/typings'
+import type { metadataType, TriggerDevice, TriggerDeviceOptions } from '@/views/rule-engine/Scene/typings'
 import { onlyMessage } from '@/utils/comm'
 import { detail as deviceDetail  } from '@/api/device/instance'
 import Product from './Product.vue'
@@ -69,6 +70,7 @@ interface AddModelType extends Omit<TriggerDevice, 'selectorValues'> {
 }
 
 const emit = defineEmits<Emit>()
+const typeRef = ref()
 
 const props = defineProps({
   value: {
@@ -81,9 +83,7 @@ const props = defineProps({
   },
   options: {
     type: Object as PropType<any>,
-    default: () => ({
-
-    })
+    default: () => ({})
   }
 })
 
@@ -100,7 +100,7 @@ const addModel = reactive<AddModelType>({
 
 Object.assign(addModel, props.value)
 
-const handleOptions = () => {
+const handleOptions = (data: TriggerDeviceOptions) => {
 
 }
 
@@ -138,10 +138,12 @@ const save = async (step?: number) => {
     }
     addModel.stepNumber = 2
   } else {
-
+    const typeData = await typeRef.value.vail()
+    console.log(typeData)
+    if (typeData) {
+      const _options = handleOptions(typeData);
+    }
   }
-  // handleOptions()
-  // emit('update:value', {})
 }
 
 const saveClick = () => save()

src/views/rule-engine/Scene/Save/Device/InvokeFunction.vue

@@ -1,52 +1,57 @@
 <template>
-  <a-row :gutter='24'>
-    <a-col :span='10'>
-      <a-form-item
-        name='functionId'
-        :rules="[{ required: true, message: '请选择功能' }]"
-      >
-        <a-select
-          showSearch
-          allowClear
-          v-model='functionId'
-          style='width: 100%'
-          placeholder='请选择功能'
-          :filterOption='filterSelectNode'
-          @select='onSelect'
-        />
-      </a-form-item>
-    </a-col>
-    <a-col :span='14'>
-      <a-form-item>定时调用所选功能</a-form-item>
-    </a-col>
-    <a-col :span='24'>
-      <a-form-item
-        style='margin-top: 24px'
-        name='functionParameters'
-      >
+  <a-form ref='invokeForm' :model='formModel' layout='vertical' :colon='false'>
+    <a-row :gutter='24'>
+      <a-col :span='10'>
+        <a-form-item
+          name='functionId'
+          :rules="[{ required: true, message: '请选择功能' }]"
+        >
+          <a-select
+            showSearch
+            allowClear
+            v-model:value='formModel.functionId'
+            style='width: 100%'
+            placeholder='请选择功能'
+            :options='functions'
+            :filterOption='filterSelectNode'
+            @select='onSelect'
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span='14'>
+        <a-form-item>定时调用所选功能</a-form-item>
+      </a-col>
+      <a-col :span='24'>
         <FunctionCall
-          v-model:value='_value'
-          :data='callDataOptions'
+          :value='_value'
+          :data='functionData'
           @change='callDataChange'
         />
-      </a-form-item>
-    </a-col>
-  </a-row>
+      </a-col>
+    </a-row>
+  </a-form>
 </template>
 
 <script setup lang='ts' name='InvokeFunction'>
 import { filterSelectNode } from '@/utils/comm'
 import { FunctionCall } from '../components'
+import type { PropType } from 'vue'
+import { defineExpose } from 'vue'
 
 type Emit = {
-  (e: 'update:value', data: Record<string, any>): void
+  (e: 'update:functionParameters', data: Array<Record<string, any>>): void
+  (e: 'update:functionId', data: string): void
   (e: 'update:action', data: string): void
 }
 
 const props = defineProps({
-  value: {
-    type: Object,
-    default: () => ({})
+  functionId: {
+    type: String,
+    default: undefined
+  },
+  functionParameters: {
+    type: Array as PropType<Record<string, any>[]>,
+    default: () => []
   },
   action: {
     type: String,
@@ -59,46 +64,53 @@ const props = defineProps({
 })
 
 const emit = defineEmits<Emit>()
+const invokeForm = ref()
+const formModel = reactive({
+  functionId: props.functionId
+})
+const _value = ref<any[]>(props.functionParameters)
 
-const functionId = ref()
-const _value = ref([])
+/**
+ * 获取当前选择功能属性
+ */
+const functionData = computed(() => {
+  const functionItem: any = props.functions.find((f: any) => f.id === formModel.functionId)
+  const arrCache = []
 
-const callDataOptions = computed(() => {
-  const _valueKeys = Object.keys(props.value)
-  if (_valueKeys.length) {
-    return _valueKeys.map(key => {
-      const item: any = props.functions.find((p: any) => p.id === key)
-      if (item) {
-        return {
-          id: item.id,
-          name: item.name,
-          type: item.valueType ? item.valueType.type : '-',
-          format: item.valueType ? item.valueType.format : undefined,
-          options: item.valueType ? item.valueType.element : undefined,
-          value: props.value[key]
-        }
-      }
-      return {
-        id: key,
-        name: key,
-        type: '',
-        format: undefined,
-        options: undefined,
-        value: props.value[key]
-      }
-    })
+  if (functionItem) {
+    const properties = functionItem.valueType ? functionItem.valueType.properties : functionItem.inputs;
+    for (const datum of properties) {
+      arrCache.push({
+        id: datum.id,
+        name: datum.name,
+        type: datum.valueType ? datum.valueType.type : '-',
+        format: datum.valueType ? datum.valueType.format : undefined,
+        options: datum.valueType ? datum.valueType.elements : undefined,
+        value: undefined,
+      });
+    }
   }
-  return []
+
+  return arrCache
 })
 
 const onSelect = (v: string, item: any) => {
   emit('update:action', `执行${item.name}`)
+  emit('update:functionId', v)
 }
 
-const callDataChange = () => {
-
+const callDataChange = (v: any[]) => {
+  _value.value = v
+  emit('update:functionParameters', v)
 }
 
+defineExpose({
+  validateFields: () => new Promise(async (resolve)  => {
+    const data = await invokeForm.value?.validateFields()
+    resolve(data)
+  })
+})
+
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/Device/Product.vue

@@ -14,6 +14,7 @@
     :params='params'
     :request='productQuery'
     :gridColumn='2'
+    :gridColumns='[2,2,2]'
     :bodyStyle='{
       paddingRight: 0,
       paddingLeft: 0

src/views/rule-engine/Scene/Save/Device/Type.vue

@@ -11,15 +11,22 @@
           v-model:value='formModel.operator'
         />
       </a-form-item>
-      <Timer v-if='showTimer' v-model:value='formModel.timer' />
-      <ReadProperties v-if='showReadProperty' v-model:value='formModel.readProperties' v-model:action='optionCache.action' :properties='readProperties' />
-      <a-form-item
+      <template v-if='showTimer'>
+        <Timer ref='timerRef' v-model:value='formModel.timer' />
+      </template>
+      <ReadProperties
+        v-if='showReadProperty'
+        v-model:value='formModel.readProperties'
+        v-model:action='optionCache.action'
+        :properties='readProperties'
+      />
+      <WriteProperty
+        ref='writeRef'
         v-if='showWriteProperty'
-        name='writeProperties'
-        :rules="[{ required: true, message: '请输入修改值' }]"
-      >
-        <WriteProperty v-model:value='formModel.writeProperties' v-model:action='optionCache.action' :properties='writeProperties' />
-      </a-form-item>
+        v-model:value='formModel.writeProperties'
+        v-model:action='optionCache.action'
+        :properties='writeProperties'
+      />
       <a-form-item
         v-if='showReportEvent'
         name='eventId'
@@ -34,6 +41,14 @@
           @select='eventSelect'
         />
       </a-form-item>
+      <template v-if='showInvokeFunction'>
+        <InvokeFunction
+          ref='invokeRef'
+          v-model:type='formModel.functionId'
+          v-model:functionParameters='formModel.functionParameters'
+          :functions='functionOptions'
+        />
+      </template>
     </a-form>
   </div>
 </template>
@@ -47,6 +62,9 @@ import type { PropType } from 'vue'
 import { TypeEnum } from '@/views/rule-engine/Scene/Save/Device/util'
 import ReadProperties from './ReadProperties.vue'
 import WriteProperty from './WriteProperty.vue'
+import InvokeFunction from './InvokeFunction.vue'
+import { defineExpose } from 'vue'
+import { cloneDeep, omit } from 'lodash-es'
 
 const props = defineProps({
   metadata: {
@@ -72,19 +90,25 @@ const optionCache = reactive({
 const readProperties = ref<any[]>([])
 const writeProperties = ref<any[]>([])
 const eventOptions = ref<any[]>([])
+const functionOptions = ref<any[]>([])
+
+const typeForm = ref()
+const timerRef = ref()
+const writeRef = ref()
+const invokeRef = ref()
 
 const topOptions = computed(() => {
   const baseOptions = [
     {
       label: '设备上线',
       value: 'online',
-      img: getImage('/scene/online.png'),
+      img: getImage('/scene/online.png')
     },
     {
       label: '设备离线',
       value: 'offline',
-      img: getImage('/scene/offline.png'),
-    },
+      img: getImage('/scene/offline.png')
+    }
   ]
 
   if (props.metadata.events?.length) {
@@ -94,9 +118,21 @@ const topOptions = computed(() => {
 
   if (props.metadata.properties?.length) {
     const _properties = props.metadata.properties
-    readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read')).map(item => ({...item, label: item.name, value: item.id }))
-    writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write')).map(item => ({...item, label: item.name, value: item.id }))
-    const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report')).map(item => ({...item, label: item.name, value: item.id }))
+    readProperties.value = _properties.filter((item: any) => item.expands.type?.includes('read')).map(item => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+    writeProperties.value = _properties.filter((item: any) => item.expands.type?.includes('write')).map(item => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
+    const reportProperties = _properties.filter((item: any) => item.expands.type?.includes('report')).map(item => ({
+      ...item,
+      label: item.name,
+      value: item.id
+    }))
 
     if (readProperties.value.length) {
       baseOptions.push(TypeEnum.readProperty)
@@ -109,11 +145,11 @@ const topOptions = computed(() => {
     if (reportProperties.length) {
       baseOptions.push(TypeEnum.reportProperty)
     }
-
   }
 
   if (props.metadata.functions?.length) {
     baseOptions.push(TypeEnum.invokeFunction)
+    functionOptions.value = props.metadata.functions.map(item => ({ ...item, label: item.name, value: item.id }))
   }
 
   return baseOptions
@@ -147,6 +183,50 @@ const eventSelect = (_: string, eventItem: any) => {
   optionCache.action = `${eventItem.name}上报`
 }
 
+defineExpose({
+  vail: () => {
+    return new Promise(async (resolve, reject) => {
+
+      const cloneModel = cloneDeep(formModel)
+      const filterKey: string[] = []
+      const typeData = await typeForm.value?.validateFields()
+
+      if (!typeData) return resolve(false)
+
+      if (!showReadProperty.value) {
+        filterKey.push('readProperties')
+      }
+
+      if (showInvokeFunction.value) {
+        const invokeData = await invokeRef.value?.validateFields()
+        if (!invokeData) return resolve(false)
+      } else {
+        filterKey.push('functionId')
+        filterKey.push('functionParameters')
+      }
+
+      if (showTimer.value) {
+        const timerData = await timerRef.value?.validateFields()
+        if (!timerData) return resolve(false)
+      } else {
+        filterKey.push('timer')
+      }
+
+      if (!showReportEvent.value) {
+        filterKey.push('eventId')
+      }
+      if (showWriteProperty.value) {
+        const writeData = await writeRef.value?.validateFields()
+        if (!writeData) return resolve(false)
+      } else {
+        filterKey.push('writeProperties')
+      }
+
+      resolve(omit(cloneModel, filterKey))
+    })
+  }
+})
+
 </script>
 
 <style scoped lang='less'>

src/views/rule-engine/Scene/Save/Device/WriteProperty.vue

@@ -1,37 +1,43 @@
 <template>
-  <a-row :futter='[24, 24]'>
-    <a-col :span='10'>
-      <a-select
-        showSearch
-        style='width: 100%'
-        placeholder='请选择属性'
-        v-model:value='reportKey'
-        :options='properties'
-        :filter-option='filterSelectNode'
-        @change='change'
-      />
-    </a-col>
-    <a-col :span='14'>
-      <span style='line-height: 32px;padding-left: 24px'>
-        定时调用所选属性
-      </span>
-    </a-col>
-    <a-col :span='24' v-if='showTable'>
-      <div style='margin-top: 24px'>
+  <a-form ref='writeForm' :model='formModel' layout='vertical' :colon='false'>
+    <a-row :futter='[24, 24]'>
+      <a-col :span='10'>
+        <a-form-item
+          name='reportKey'
+          :rules="[{ required: true, message: '请输入修改值' }]"
+        >
+          <a-select
+            showSearch
+            style='width: 100%'
+            placeholder='请选择属性'
+            v-model:value='formModel.reportKey'
+            :options='properties'
+            :filter-option='filterSelectNode'
+            @change='change'
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span='14'>
+        <span style='line-height: 32px;padding-left: 24px'>
+          定时调用所选属性
+        </span>
+      </a-col>
+      <a-col :span='24' v-if='showTable'>
         <FunctionCall
           :value='_value'
           :data='callDataOptions'
           @change='callDataChange'
         />
-      </div>
-    </a-col>
-  </a-row>
+      </a-col>
+    </a-row>
+  </a-form>
 </template>
 
 <script setup lang='ts' name='WriteProperties'>
 import { filterSelectNode } from '@/utils/comm'
 import { FunctionCall } from '../components'
 import type { PropType } from 'vue'
+import { defineExpose } from 'vue'
 
 type Emit = {
   (e: 'update:value', data: Record<string, any>): void
@@ -55,8 +61,12 @@ const props = defineProps({
 
 const emit = defineEmits<Emit>()
 
-const reportKey = ref<string>()
+const formModel = reactive<{ reportKey: string | undefined }>({
+  reportKey: undefined
+})
+
 const callData = ref<Array<{ id: string, value: string | undefined }>>()
+const writeForm = ref()
 const _value = ref([])
 
 const callDataOptions = computed(() => {
@@ -88,11 +98,10 @@ const callDataOptions = computed(() => {
 })
 
 const showTable = computed(() => {
-  return !!reportKey.value
+  return !!formModel.reportKey
 })
 
 const change = (v: string, option: any) => {
-  console.log(v, option)
   const _data = {
     [v]: undefined
   }
@@ -103,17 +112,24 @@ const change = (v: string, option: any) => {
 
 const callDataChange = (v: any[]) => {
   emit('update:value', {
-    [reportKey.value!]: v[0]?.value
+    [formModel.reportKey!]: v[0]?.value
   })
 }
 
 const initRowKey = () => {
   if (props.value.length) {
     const keys = Object.keys(props.value)
-    reportKey.value = keys[0]
+    formModel.reportKey = keys[0]
   }
 }
 
+defineExpose({
+  validateFields: () => new Promise(async (resolve)  => {
+    const data = await writeForm.value?.validateFields()
+    resolve(data)
+  })
+})
+
 </script>
 
 <style scoped>

src/views/rule-engine/Scene/Save/components/FunctionCall/FunctionCall.vue

@@ -1,7 +1,10 @@
 <template>
-  <a-table
+  <j-table
+    model='TABLE'
+    :noPagination='true'
     :data-source='dataSource.value'
     :columns='columns'
+    :bodyStyle='{ padding: 0}'
   >
     <template #bodyCell="{ column, record, index }">
       <template v-if='column.dataIndex === "name"'>
@@ -33,7 +36,7 @@
         />
       </template>
     </template>
-  </a-table>
+  </j-table>
 </template>
 
 <script setup lang='ts' name='FunctionCall'>
@@ -61,13 +64,6 @@ const dataSource = reactive<{value: any[]}>({
   value: []
 })
 
-watch(() => props.data, () => {
-  dataSource.value = props.data.map((item: any) => {
-    const oldValue = props.value.find((oldItem: any) => oldItem.name === item.id)
-    return oldValue ? { ...item, value: oldValue.value } : item
-  })
-}, { immediate: true })
-
 const columns = [
   {
     title: '参数名称',
@@ -99,6 +95,13 @@ const handleOptions = (record: any) => {
   }
 }
 
+watch(() => props.data, () => {
+  dataSource.value = props.data.map((item: any) => {
+    const oldValue = props.value.find((oldItem: any) => oldItem.name === item.id)
+    return oldValue ? { ...item, value: oldValue.value } : item
+  })
+}, { immediate: true })
+
 watch(() => dataSource.value, () => {
   const _value = dataSource.value.map(item => ({
     name: item.id, value: item.value

src/views/rule-engine/Scene/Save/components/Timer/index.vue

@@ -108,6 +108,7 @@ import WhenOption from './WhenOption.vue'
 import { cloneDeep } from 'lodash-es'
 import type { OperationTimer } from '../../../typings'
 import { isCron } from '@/utils/regular'
+import { defineExpose } from 'vue'
 
 type NameType = string[] | string
 
@@ -143,6 +144,7 @@ const formModel = reactive<OperationTimer>({
     unit: 'seconds'
   }
 })
+const timerForm = ref()
 
 Object.assign(formModel, props.value)
 
@@ -174,6 +176,13 @@ watch(() => formModel, () => {
   emit('update:value', cloneValue)
 }, { deep: true })
 
+defineExpose({
+  validateFields: () => new Promise(async (resolve)  => {
+    const data = await timerForm.value?.validateFields()
+    resolve(data)
+  })
+})
+
 </script>
 
 <style scoped lang='less'>

yarn.lock

@@ -3167,6 +3167,11 @@ highlight.js@^11.3.1:
   resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.7.0.tgz"
   integrity sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==
 
+hls.js@^1.0.10:
+  version "1.3.4"
+  resolved "https://registry.jetlinks.cn/hls.js/-/hls.js-1.3.4.tgz#8212a3f95c3321f64a586f20e67876f3a9d09488"
+  integrity sha512-iFEwVqtEDk6sKotcTwtJ5OMo/nuDTk9PrpB8FI2J2WYf8EriTVfR4FaK0aNyYtwbYeRSWCXJKlz23xeREdlNYg==
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
@@ -3637,10 +3642,10 @@ jetlinks-store@^0.0.3:
   resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
   integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
 
-jetlinks-ui-components@^1.0.0:
+jetlinks-ui-components@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz"
-  integrity sha512-3ob70nhthamptw/qW2qVP3hhhXXfNVbLjvvoBzCVVBbPwYypTlGND2ezWfRsI+cHfppPiOAIwusCJJKeOkVXgA==
+  resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz#12fe9a193af14b859e1baf02fbd706a2be5b31cf"
+  integrity sha512-4hdEJUaKNMSIcmbn4qKcG8oK7h6VSYP3X3fCNndBm6WhHh+9ONf8f+3OSrUy1PvxdenmqO0VN2QdWV0KupByKQ==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"
@@ -6250,6 +6255,11 @@ three@0.143.0:
   resolved "https://registry.npmjs.org/three/-/three-0.143.0.tgz"
   integrity sha512-oKcAGYHhJ46TGEuHjodo2n6TY2R6lbvrkp+feKZxqsUL/WkH7GKKaeu6RHeyb2Xjfk2dPLRKLsOP0KM2VgT8Zg==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.jetlinks.cn/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through2@^4.0.0:
   version "4.0.2"
   resolved "https://registry.npmmirror.com/through2/-/through2-4.0.2.tgz"
@@ -6797,7 +6807,27 @@ vue3-ts-jsoneditor@^2.7.1:
     vanilla-jsoneditor "^0.7.9"
     vue "^3.2.37"
 
-vue@^3.2.25, vue@^3.2.37, vue@^3.2.45:
+vue3-video-play@^1.3.1-beta.6:
+  version "1.3.1-beta.6"
+  resolved "https://registry.jetlinks.cn/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz#bca3f55a11053eaa37053835e4610c04d9cc509e"
+  integrity sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==
+  dependencies:
+    hls.js "^1.0.10"
+    throttle-debounce "^3.0.1"
+    vue "^3.2.2"
+
+vue@^3.2.2, vue@^3.2.25:
+  version "3.2.47"
+  resolved "https://registry.jetlinks.cn/vue/-/vue-3.2.47.tgz#3eb736cbc606fc87038dbba6a154707c8a34cff0"
+  integrity sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==
+  dependencies:
+    "@vue/compiler-dom" "3.2.47"
+    "@vue/compiler-sfc" "3.2.47"
+    "@vue/runtime-dom" "3.2.47"
+    "@vue/server-renderer" "3.2.47"
+    "@vue/shared" "3.2.47"
+
+vue@^3.2.37, vue@^3.2.45:
   version "3.2.45"
   resolved "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz"
   integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==