简柏林 / thingskit-front · Commits

Commit 96b74e63afa8b1f1f0db755c35f237680f9bc5ee

Authored by loveumiko
2 parents 2fa05fe7 2cc73ce7

Merge branch 'main_dev' of http://git.yunteng.com/yunteng/thingskit-front into f… 

…eat/device-new-protocol
Inline Side-by-side
Showing 46 changed files with 1676 additions and 71 deletions
@@ -8,10 +8,10 @@ VITE_GLOB_PUBLIC_PATH = / @@ -8,10 +8,10 @@ VITE_GLOB_PUBLIC_PATH = /
8 # Please note that no line breaks 8 # Please note that no line breaks
9 9
10 # 本地 10 # 本地
11 -VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]] 11 +VITE_PROXY = [["/api","http://10.0.152.126:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
12 12
13 # 实时数据的ws地址 13 # 实时数据的ws地址
14 -VITE_GLOB_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token= 14 +VITE_GLOB_WEB_SOCKET = ws://10.152.126:8080/api/ws/plugins/telemetry?token=
15 15
16 # Delete console 16 # Delete console
17 VITE_GLOB_DROP_CONSOLE = true 17 VITE_GLOB_DROP_CONSOLE = true
@@ -2,6 +2,7 @@ import { DeviceProfileModel } from '../../device/model/deviceModel'; @@ -2,6 +2,7 @@ import { DeviceProfileModel } from '../../device/model/deviceModel';
2 import { HistoryData } from './model'; 2 import { HistoryData } from './model';
3 import { defHttp } from '/@/utils/http/axios'; 3 import { defHttp } from '/@/utils/http/axios';
4 import { isString } from '/@/utils/is'; 4 import { isString } from '/@/utils/is';
  5 +import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
5 6
6 // 获取设备配置 7 // 获取设备配置
7 export const getDeviceProfile = (deviceType?: string) => { 8 export const getDeviceProfile = (deviceType?: string) => {
@@ -12,11 +13,11 @@ export const getDeviceProfile = (deviceType?: string) => { @@ -12,11 +13,11 @@ export const getDeviceProfile = (deviceType?: string) => {
12 }; 13 };
13 14
14 // 获取历史数据 15 // 获取历史数据
15 -export const getDeviceHistoryInfo = (params: Recordable, orderBy?: string) => { 16 +export const getDeviceHistoryInfo = (params: Recordable, orderBy = OrderByEnum.DESC) => {
16 return defHttp.get<HistoryData>( 17 return defHttp.get<HistoryData>(
17 { 18 {
18 url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`, 19 url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
19 - params: { ...params, entityId: null, orderBy: orderBy || 'DESC' }, 20 + params: { orderBy, ...params, entityId: null },
20 }, 21 },
21 { 22 {
22 joinPrefix: false, 23 joinPrefix: false,
@@ -14,6 +14,7 @@ export interface ConfigurationCenterItemsModal { @@ -14,6 +14,7 @@ export interface ConfigurationCenterItemsModal {
14 export type queryPageParams = BasicPageParams & { 14 export type queryPageParams = BasicPageParams & {
15 name?: Nullable<string>; 15 name?: Nullable<string>;
16 organizationId?: Nullable<number>; 16 organizationId?: Nullable<number>;
  17 + isTemplate?: number;
17 }; 18 };
18 19
19 export interface ConfigurationModal { 20 export interface ConfigurationModal {
@@ -151,6 +151,7 @@ @@ -151,6 +151,7 @@
151 defineExpose({ 151 defineExpose({
152 get, 152 get,
153 set, 153 set,
  154 + handleFormat,
154 }); 155 });
155 </script> 156 </script>
156 157
@@ -41,6 +41,7 @@ import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue'; @@ -41,6 +41,7 @@ import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
41 import InputGroup from './components/InputGroup.vue'; 41 import InputGroup from './components/InputGroup.vue';
42 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue'; 42 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
43 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue'; 43 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
  44 +import DeviceProfileForm from '/@/components/Form/src/externalCompns/components/DeviceProfileForm/index.vue';
44 45
45 const componentMap = new Map<ComponentType, Component>(); 46 const componentMap = new Map<ComponentType, Component>();
46 47
@@ -89,6 +90,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad); @@ -89,6 +90,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
89 componentMap.set('InputGroup', InputGroup); 90 componentMap.set('InputGroup', InputGroup);
90 componentMap.set('RegisterAddressInput', RegisterAddressInput); 91 componentMap.set('RegisterAddressInput', RegisterAddressInput);
91 componentMap.set('ExtendDesc', ExtendDesc); 92 componentMap.set('ExtendDesc', ExtendDesc);
  93 +componentMap.set('DeviceProfileForm', DeviceProfileForm);
92 94
93 export function add(compName: ComponentType, component: Component) { 95 export function add(compName: ComponentType, component: Component) {
94 componentMap.set(compName, component); 96 componentMap.set(compName, component);
@@ -22,11 +22,13 @@ @@ -22,11 +22,13 @@
22 value?: string; 22 value?: string;
23 disabled?: boolean; 23 disabled?: boolean;
24 validateStatus?: boolean; 24 validateStatus?: boolean;
  25 + scriptType?: string;
25 }>(), 26 }>(),
26 { 27 {
27 functionName: 'method', 28 functionName: 'method',
28 paramsName: () => [], 29 paramsName: () => [],
29 height: 200, 30 height: 200,
  31 + scriptType: 'filter',
30 value: '', 32 value: '',
31 } 33 }
32 ); 34 );
  1 +<template>
  2 + <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
  3 + <a-input placeholder="产品" v-model:value="param.label" :disabled="true" />
  4 + <Select
  5 + placeholder="请选择设备"
  6 + v-model:value="param.value"
  7 + style="width: 100%"
  8 + v-bind="createPickerSearch()"
  9 + mode="multiple"
  10 + labelInValue
  11 + />
  12 + <MinusCircleOutlined
  13 + v-if="dynamicInput.params.length > min && !disabled"
  14 + class="dynamic-delete-button"
  15 + @click="remove(param)"
  16 + style="width: 50px"
  17 + />
  18 + </div>
  19 +</template>
  20 +<script lang="ts" name="DeviceProfileForm">
  21 + import { MinusCircleOutlined } from '@ant-design/icons-vue';
  22 + import { defineComponent, reactive, UnwrapRef, watchEffect } from 'vue';
  23 + import { propTypes } from '/@/utils/propTypes';
  24 + import { isEmpty } from '/@/utils/is';
  25 + import { Select } from 'ant-design-vue';
  26 + import { createPickerSearch } from '/@/utils/pickerSearch';
  27 +
  28 + interface Params {
  29 + label: string;
  30 + value: string;
  31 + }
  32 +
  33 + export default defineComponent({
  34 + name: 'DeviceProfileForm',
  35 + components: {
  36 + MinusCircleOutlined,
  37 + Select,
  38 + },
  39 + //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
  40 + inheritAttrs: false,
  41 + props: {
  42 + value: propTypes.object.def({}),
  43 + //自定义删除按钮多少才会显示
  44 + min: propTypes.integer.def(0),
  45 + disabled: {
  46 + type: Boolean,
  47 + default: false,
  48 + },
  49 + },
  50 + emits: ['change', 'update:value'],
  51 + setup(props, { emit }) {
  52 + //input动态数据
  53 + const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
  54 +
  55 + //删除Input
  56 + const remove = (item: Params) => {
  57 + let index = dynamicInput.params.indexOf(item);
  58 + if (index !== -1) {
  59 + dynamicInput.params.splice(index, 1);
  60 + }
  61 + emitChange();
  62 + };
  63 +
  64 + //监听传入数据value
  65 + watchEffect(() => {
  66 + initVal();
  67 + });
  68 +
  69 + /**
  70 + * 初始化数值
  71 + */
  72 + function initVal() {
  73 + dynamicInput.params = [];
  74 + if (props.value) {
  75 + let jsonObj = props.value;
  76 + Object.keys(jsonObj).forEach((key) => {
  77 + dynamicInput.params.push({ label: key, value: jsonObj[key] });
  78 + });
  79 + }
  80 + }
  81 +
  82 + /**
  83 + * 数值改变
  84 + */
  85 + function emitChange() {
  86 + let obj = {};
  87 + if (dynamicInput.params.length > 0) {
  88 + dynamicInput.params.forEach((item) => {
  89 + obj[item.label] = item.value;
  90 + });
  91 + }
  92 + emit('change', isEmpty(obj) ? '' : obj);
  93 + emit('update:value', isEmpty(obj) ? '' : obj);
  94 + }
  95 +
  96 + return {
  97 + dynamicInput,
  98 + emitChange,
  99 + remove,
  100 + createPickerSearch,
  101 + };
  102 + },
  103 + });
  104 +</script>
  105 +<style scoped>
  106 + .dynamic-delete-button {
  107 + cursor: pointer;
  108 + position: relative;
  109 + top: 4px;
  110 + font-size: 24px;
  111 + color: #999;
  112 + transition: all 0.3s;
  113 + }
  114 +
  115 + .dynamic-delete-button:hover {
  116 + color: #777;
  117 + }
  118 +
  119 + .dynamic-delete-button[disabled] {
  120 + cursor: not-allowed;
  121 + opacity: 0.5;
  122 + }
  123 +</style>
@@ -137,4 +137,5 @@ export type ComponentType = @@ -137,4 +137,5 @@ export type ComponentType =
137 | 'CorrelationFilters' 137 | 'CorrelationFilters'
138 | 'RelationsQuery' 138 | 'RelationsQuery'
139 | 'CredentialsCard' 139 | 'CredentialsCard'
140 - | 'ApiComplete'; 140 + | 'ApiComplete'
  141 + | 'DeviceProfileForm';
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { QuestionCircleOutlined } from '@ant-design/icons-vue'; 2 import { QuestionCircleOutlined } from '@ant-design/icons-vue';
3 import { Tooltip } from 'ant-design-vue'; 3 import { Tooltip } from 'ant-design-vue';
  4 + import { usePermission } from '/@/hooks/web/usePermission';
  5 + import { UserDropDownItemEnum } from './user-dropdown/config';
4 6
5 const handleJump = () => { 7 const handleJump = () => {
6 open('https://docs.thingskit.com'); 8 open('https://docs.thingskit.com');
7 }; 9 };
  10 +
  11 + const { hasPermission } = usePermission();
8 </script> 12 </script>
9 13
10 <template> 14 <template>
11 <Tooltip title="帮助文档"> 15 <Tooltip title="帮助文档">
12 - <QuestionCircleOutlined class="text-base cursor-pointer" @click="handleJump" /> 16 + <QuestionCircleOutlined
  17 + v-if="hasPermission(UserDropDownItemEnum.ABOUT_SOFTWARE)"
  18 + class="text-base cursor-pointer"
  19 + @click="handleJump"
  20 + />
13 </Tooltip> 21 </Tooltip>
14 </template> 22 </template>
  1 +/**
  2 + * 系统右上角下拉选择项权限标识key枚举值
  3 + */
  4 +
  5 +export const enum UserDropDownItemEnum {
  6 + FORGOT_PASSWORD = 'system:password:view', //忘记密码权限标识key
  7 + ABOUT_SOFTWARE = 'system:about_software:view', //关于软件权限标识key
  8 +}
@@ -17,12 +17,13 @@ @@ -17,12 +17,13 @@
17 icon="ion:document-text-outline" 17 icon="ion:document-text-outline"
18 /> 18 />
19 <MenuItem 19 <MenuItem
20 - v-if="hasPermission('system:password:view')" 20 + v-if="hasPermission(UserDropDownItemEnum.FORGOT_PASSWORD)"
21 key="changePassword" 21 key="changePassword"
22 :text="t('layout.header.dropdownItemChangePassword')" 22 :text="t('layout.header.dropdownItemChangePassword')"
23 icon="ant-design:unlock-twotone" 23 icon="ant-design:unlock-twotone"
24 /> 24 />
25 <MenuItem 25 <MenuItem
  26 + v-if="hasPermission(UserDropDownItemEnum.ABOUT_SOFTWARE)"
26 key="aboutSoftware" 27 key="aboutSoftware"
27 :text="handleDecode(t('routes.aboutSoftware.aboutSoftware'))" 28 :text="handleDecode(t('routes.aboutSoftware.aboutSoftware'))"
28 icon="ant-design:message-outline" 29 icon="ant-design:message-outline"
@@ -68,6 +69,7 @@ @@ -68,6 +69,7 @@
68 import AboutSoftwareModal from '../AboutSoftwareModal.vue'; 69 import AboutSoftwareModal from '../AboutSoftwareModal.vue';
69 import { AesEncryption } from '/@/utils/cipher'; 70 import { AesEncryption } from '/@/utils/cipher';
70 import { cacheCipher } from '/@/settings/encryptionSetting'; 71 import { cacheCipher } from '/@/settings/encryptionSetting';
  72 + import { UserDropDownItemEnum } from './config';
71 73
72 type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal' | 'changePassword' | 'aboutSoftware'; 74 type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal' | 'changePassword' | 'aboutSoftware';
73 75
@@ -188,6 +190,7 @@ @@ -188,6 +190,7 @@
188 getUseLockPage, 190 getUseLockPage,
189 hasPermission, 191 hasPermission,
190 registerModal, 192 registerModal,
  193 + UserDropDownItemEnum,
191 }; 194 };
192 }, 195 },
193 }); 196 });
@@ -7,36 +7,97 @@ @@ -7,36 +7,97 @@
7 width="30%" 7 width="30%"
8 @ok="handleSubmit" 8 @ok="handleSubmit"
9 > 9 >
10 - <BasicForm @register="registerForm" /> 10 + <BasicForm @register="registerForm">
  11 + <!-- 模板选择 -->
  12 + <template #templateId="{ model }">
  13 + <Select
  14 + v-model:value="model['templateId']"
  15 + placeholder="请选择模板"
  16 + style="width: 100%"
  17 + :options="selectTemplateOptions"
  18 + @change="handleTemplateChange"
  19 + v-bind="createPickerSearch()"
  20 + :disabled="templateDisabled"
  21 + />
  22 + </template>
  23 + <!-- 产品选择 -->
  24 + <template #productIds="{ model }">
  25 + <SelectDeviceProfile
  26 + v-if="model['templateId']"
  27 + ref="selectDeviceProfileRef"
  28 + :selectOptions="selectOptions"
  29 + :organizationId="model?.['organizationId']"
  30 + />
  31 + </template>
  32 + </BasicForm>
11 </BasicDrawer> 33 </BasicDrawer>
12 </template> 34 </template>
13 <script lang="ts"> 35 <script lang="ts">
14 - import { defineComponent, ref, computed, unref } from 'vue'; 36 + import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick } from 'vue';
15 import { BasicForm, useForm } from '/@/components/Form'; 37 import { BasicForm, useForm } from '/@/components/Form';
  38 + import { Select } from 'ant-design-vue';
16 import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data'; 39 import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
17 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; 40 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
18 import { useMessage } from '/@/hooks/web/useMessage'; 41 import { useMessage } from '/@/hooks/web/useMessage';
19 - import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter'; 42 + import {
  43 + saveOrUpdateConfigurationCenter,
  44 + getPage,
  45 + } from '/@/api/configuration/center/configurationCenter';
20 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; 46 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
21 import { buildUUID } from '/@/utils/uuid'; 47 import { buildUUID } from '/@/utils/uuid';
  48 + import SelectDeviceProfile from './components/SelectDeviceProfile.vue';
  49 + import { createPickerSearch } from '/@/utils/pickerSearch';
  50 + import type { queryPageParams } from '/@/api/configuration/center/model/configurationCenterModal';
  51 + import { getDeviceProfile } from '/@/api/alarm/position';
22 52
23 export default defineComponent({ 53 export default defineComponent({
24 name: 'ConfigurationDrawer', 54 name: 'ConfigurationDrawer',
25 - components: { BasicDrawer, BasicForm }, 55 + components: { BasicDrawer, BasicForm, SelectDeviceProfile, Select },
26 emits: ['success', 'register'], 56 emits: ['success', 'register'],
27 setup(_, { emit }) { 57 setup(_, { emit }) {
28 const isUpdate = ref(true); 58 const isUpdate = ref(true);
29 59
30 - const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ 60 + const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>();
  61 +
  62 + const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
31 labelWidth: 120, 63 labelWidth: 120,
32 schemas: formSchema, 64 schemas: formSchema,
33 showActionButtonGroup: false, 65 showActionButtonGroup: false,
34 }); 66 });
35 67
  68 + const updateEnableTemplate = async (enable: number, disabled: boolean) => {
  69 + await setFieldsValue({
  70 + enableTemplate: enable,
  71 + });
  72 + await updateSchema({
  73 + field: 'enableTemplate',
  74 + componentProps: ({ formActionType }) => {
  75 + return {
  76 + disabled,
  77 + checkedValue: 1,
  78 + unCheckedValue: 0,
  79 + checkedChildren: '开',
  80 + unCheckedChildren: '关',
  81 + onChange: () => {
  82 + formActionType.setFieldsValue({
  83 + productIds: [],
  84 + templateId: null,
  85 + productId: undefined,
  86 + });
  87 + },
  88 + };
  89 + },
  90 + });
  91 + };
  92 +
36 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { 93 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  94 + await nextTick();
37 await resetFields(); 95 await resetFields();
38 setDrawerProps({ confirmLoading: false }); 96 setDrawerProps({ confirmLoading: false });
39 isUpdate.value = !!data?.isUpdate; 97 isUpdate.value = !!data?.isUpdate;
  98 + selectDeviceProfileRef.value?.retValue();
  99 + await updateEnableTemplate(0, false);
  100 + templateDisabled.value = false;
40 if (unref(isUpdate)) { 101 if (unref(isUpdate)) {
41 if (data.record.thumbnail) { 102 if (data.record.thumbnail) {
42 data.record.thumbnail = [ 103 data.record.thumbnail = [
@@ -49,9 +110,66 @@ @@ -49,9 +110,66 @@
49 Reflect.deleteProperty(data.record, 'organizationId'); 110 Reflect.deleteProperty(data.record, 'organizationId');
50 await setFieldsValue(data.record); 111 await setFieldsValue(data.record);
51 } 112 }
  113 + // 业务 编辑如果有templateId 则启用模板开关禁用,模板不能选择，产品和设备可以选择
  114 + if (Reflect.get(data.record, 'templateId')) {
  115 + await updateEnableTemplate(1, true);
  116 + templateDisabled.value = true;
  117 + //回显产品和设备
  118 + const { productAndDevice } = data.record;
  119 + selectOptions.value = productAndDevice?.map((item) => ({
  120 + label: item.name,
  121 + value: item.profileId,
  122 + }));
  123 + selectDeviceProfileRef.value?.setValue(productAndDevice);
  124 + } else {
  125 + const productAndDevice = data.record['productAndDevice'];
  126 + setFieldsValue({
  127 + productId: productAndDevice?.map((item) => item.profileId),
  128 + });
  129 + }
52 } 130 }
53 }); 131 });
54 132
  133 + //新增修改
  134 + const templateDisabled = ref(false);
  135 + onMounted(() => {
  136 + getTemplate({
  137 + page: 1,
  138 + pageSize: 30,
  139 + });
  140 + });
  141 +
  142 + const selectTemplateOptions: Ref<any[]> = ref([]);
  143 + const getTemplate = async (params: queryPageParams) => {
  144 + const { items } = await getPage({ ...params, isTemplate: 1 });
  145 + selectTemplateOptions.value = items.map((item) => ({
  146 + ...item,
  147 + label: item.name,
  148 + value: item.id,
  149 + }));
  150 + };
  151 + const selectOptions: Ref<any[]> = ref([]);
  152 +
  153 + const handleTemplateChange = async (_, option) => {
  154 + const { productAndDevice } = option;
  155 + // if (!productAndDevice) return;
  156 + // selectOptions.value = productAndDevice?.map((item) => ({
  157 + // label: item.profileName || item.name,
  158 + // value: item.profileId,
  159 + // }));
  160 + await nextTick();
  161 + // 赋值
  162 + selectDeviceProfileRef.value?.setFieldsValue(
  163 + productAndDevice?.map((item) => ({
  164 + label: item.profileName || item.name,
  165 + value: item.profileId,
  166 + transportType: item?.transportType,
  167 + deviceType: item?.deviceType,
  168 + }))
  169 + );
  170 + };
  171 + //
  172 +
55 const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心')); 173 const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心'));
56 174
57 const getDefaultContent = (platform: Platform) => { 175 const getDefaultContent = (platform: Platform) => {
@@ -61,10 +179,49 @@ @@ -61,10 +179,49 @@
61 return PHONE_DEFAULT_CONTENT; 179 return PHONE_DEFAULT_CONTENT;
62 }; 180 };
63 181
  182 + // 获取产品
  183 + const getCurrentAllProduct = async (products: string[]) => {
  184 + const resp = (await getDeviceProfile()) as any;
  185 + if (!resp) return;
  186 + const values = resp?.map((item) => ({
  187 + name: item.name,
  188 + profileId: item.id,
  189 + deviceType: item.deviceType,
  190 + transportType: item.transportType,
  191 + }));
  192 + return values.filter((item) => products?.includes(item.profileId));
  193 + };
  194 +
64 async function handleSubmit() { 195 async function handleSubmit() {
65 try { 196 try {
66 const { createMessage } = useMessage(); 197 const { createMessage } = useMessage();
67 const values = await validate(); 198 const values = await validate();
  199 + if (!values) return;
  200 + const selectDevice = selectDeviceProfileRef.value?.getSelectDevice();
  201 + if (values['enableTemplate'] === 1) {
  202 + if (!values['templateId']) return createMessage.error('未选择模板');
  203 + // 业务 启用模板，产品和设备必填
  204 + if (values['templateId']) {
  205 + values.templateId = values['templateId'];
  206 + if (Array.isArray(selectDevice) && selectDevice.length == 0)
  207 + return createMessage.error('您已经选择了模板，但产品或者设备未选择');
  208 + if (
  209 + selectDevice?.some(
  210 + (item) =>
  211 + !item.name ||
  212 + item.deviceList.includes('' || undefined) ||
  213 + item.deviceList.length == 0
  214 + )
  215 + ) {
  216 + return createMessage.error('您已经选择了模板，但产品或者设备未选择');
  217 + }
  218 + values.productAndDevice = selectDevice;
  219 + }
  220 + } else {
  221 + const { productId } = values;
  222 + values.productAndDevice = await getCurrentAllProduct(productId);
  223 + Reflect.deleteProperty(values, 'productId');
  224 + }
68 if (Reflect.has(values, 'thumbnail')) { 225 if (Reflect.has(values, 'thumbnail')) {
69 const file = (values.thumbnail || []).at(0) || {}; 226 const file = (values.thumbnail || []).at(0) || {};
70 values.thumbnail = file.url || null; 227 values.thumbnail = file.url || null;
@@ -87,6 +244,12 @@ @@ -87,6 +244,12 @@
87 registerDrawer, 244 registerDrawer,
88 registerForm, 245 registerForm,
89 handleSubmit, 246 handleSubmit,
  247 + selectOptions,
  248 + selectTemplateOptions,
  249 + handleTemplateChange,
  250 + createPickerSearch,
  251 + selectDeviceProfileRef,
  252 + templateDisabled,
90 }; 253 };
91 }, 254 },
92 }); 255 });
@@ -5,6 +5,7 @@ import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter @@ -5,6 +5,7 @@ import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter
5 import { useComponentRegister } from '/@/components/Form'; 5 import { useComponentRegister } from '/@/components/Form';
6 import { OrgTreeSelect } from '../../common/OrgTreeSelect'; 6 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
7 import { getDeviceProfile } from '/@/api/alarm/position'; 7 import { getDeviceProfile } from '/@/api/alarm/position';
  8 +import { buildUUID } from '/@/utils/uuid';
8 9
9 useComponentRegister('OrgTreeSelect', OrgTreeSelect); 10 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
10 export enum Platform { 11 export enum Platform {
@@ -22,11 +23,9 @@ export enum ConfigurationPermission { @@ -22,11 +23,9 @@ export enum ConfigurationPermission {
22 UN_SHARE = 'api:yt:configuration:center:monopoly', 23 UN_SHARE = 'api:yt:configuration:center:monopoly',
23 } 24 }
24 25
25 -export const PC_DEFAULT_CONTENT =  
26 - '<mxfile><diagram>dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>'; 26 +export const PC_DEFAULT_CONTENT = `<mxfile><diagram id="${buildUUID()}">dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>`;
27 27
28 -export const PHONE_DEFAULT_CONTENT =  
29 - '<mxfile><diagram>dZHBEoIgEEC/hru6lXU2q0snD50Z2YQZdB2k0fr6dMCMsU4sb9+ysDDI6uFseCuvJFCzJBIDgyNLkjjdw7hM5OnIYRc5UBklvLSAQr3Qw1l7KIFdIFoibVUbwpKaBksbMG4M9aF2Jx12bXmFK1CUXK/pTQkrHd3E24VfUFXSd04hdYmaz65/SCe5oP4LQc4gM0TWRfWQoZ5mN4/F1Z3+ZD/3MtjYHwVjsJw9boIPgvwN</diagram></mxfile>'; 28 +export const PHONE_DEFAULT_CONTENT = `<mxfile><diagram id="${buildUUID()}">dZHBEoIgEEC/hru6lXU2q0snD50Z2YQZdB2k0fr6dMCMsU4sb9+ysDDI6uFseCuvJFCzJBIDgyNLkjjdw7hM5OnIYRc5UBklvLSAQr3Qw1l7KIFdIFoibVUbwpKaBksbMG4M9aF2Jx12bXmFK1CUXK/pTQkrHd3E24VfUFXSd04hdYmaz65/SCe5oP4LQc4gM0TWRfWQoZ5mN4/F1Z3+ZD/3MtjYHwVjsJw9boIPgvwN</diagram></mxfile>`;
30 // 表格列数据 29 // 表格列数据
31 export const columns: BasicColumn[] = [ 30 export const columns: BasicColumn[] = [
32 { 31 {
@@ -83,6 +82,7 @@ export const searchFormSchema: FormSchema[] = [ @@ -83,6 +82,7 @@ export const searchFormSchema: FormSchema[] = [
83 }, 82 },
84 ]; 83 ];
85 84
  85 +// 表单
86 export const formSchema: FormSchema[] = [ 86 export const formSchema: FormSchema[] = [
87 { 87 {
88 field: 'thumbnail', 88 field: 'thumbnail',
@@ -112,14 +112,9 @@ export const formSchema: FormSchema[] = [ @@ -112,14 +112,9 @@ export const formSchema: FormSchema[] = [
112 onPreview: (fileList: FileItem) => { 112 onPreview: (fileList: FileItem) => {
113 createImgPreview({ imageList: [fileList.url!] }); 113 createImgPreview({ imageList: [fileList.url!] });
114 }, 114 },
115 - // showUploadList: {  
116 - // showDownloadIcon: true,  
117 - // showRemoveIcon: true,  
118 - // },  
119 }; 115 };
120 }, 116 },
121 }, 117 },
122 -  
123 { 118 {
124 field: 'name', 119 field: 'name',
125 label: '组态名称', 120 label: '组态名称',
@@ -137,17 +132,72 @@ export const formSchema: FormSchema[] = [ @@ -137,17 +132,72 @@ export const formSchema: FormSchema[] = [
137 component: 'OrgTreeSelect', 132 component: 'OrgTreeSelect',
138 }, 133 },
139 { 134 {
  135 + field: 'platform',
  136 + label: '平台',
  137 + required: true,
  138 + component: 'RadioGroup',
  139 + defaultValue: Platform.PC,
  140 + componentProps: {
  141 + defaultValue: Platform.PC,
  142 + options: [
  143 + { label: 'PC端', value: Platform.PC },
  144 + { label: '移动端', value: Platform.PHONE },
  145 + ],
  146 + },
  147 + },
  148 + {
  149 + field: 'enableTemplate', //前端控制
  150 + label: '启用模版',
  151 + component: 'Switch',
  152 + defaultValue: 0,
  153 + componentProps: ({ formActionType }) => {
  154 + const { setFieldsValue } = formActionType;
  155 +
  156 + return {
  157 + checkedValue: 1,
  158 + unCheckedValue: 0,
  159 + checkedChildren: '开',
  160 + unCheckedChildren: '关',
  161 + onChange: () => {
  162 + setFieldsValue({
  163 + productIds: [],
  164 + templateId: null,
  165 + productId: undefined,
  166 + });
  167 + },
  168 + };
  169 + },
  170 + },
  171 + {
140 field: 'isTemplate', 172 field: 'isTemplate',
141 - label: '模版', 173 + label: '默认启用模版',
142 component: 'Switch', 174 component: 'Switch',
143 defaultValue: 0, 175 defaultValue: 0,
144 componentProps: { 176 componentProps: {
145 checkedValue: 1, 177 checkedValue: 1,
146 unCheckedValue: 0, 178 unCheckedValue: 0,
147 }, 179 },
  180 + show: false,
  181 + },
  182 + {
  183 + field: 'templateId', //暂且使用插槽形式
  184 + label: '模板',
  185 + component: 'Input',
  186 + required: true,
  187 + slot: 'templateId',
  188 + colProps: { span: 24 },
  189 + ifShow: ({ values }) => values['enableTemplate'] === 1,
  190 + },
  191 + {
  192 + field: 'productIds', //暂且使用插槽形式
  193 + label: '产品',
  194 + component: 'Input',
  195 + slot: 'productIds',
  196 + colProps: { span: 24 },
  197 + ifShow: ({ values }) => values['enableTemplate'] === 1 && values['templateId'],
148 }, 198 },
149 { 199 {
150 - field: 'productIds', 200 + field: 'productId',
151 label: '产品', 201 label: '产品',
152 component: 'ApiSelect', 202 component: 'ApiSelect',
153 required: true, 203 required: true,
@@ -155,22 +205,18 @@ export const formSchema: FormSchema[] = [ @@ -155,22 +205,18 @@ export const formSchema: FormSchema[] = [
155 api: getDeviceProfile, 205 api: getDeviceProfile,
156 mode: 'multiple', 206 mode: 'multiple',
157 labelField: 'name', 207 labelField: 'name',
158 - valueField: 'tbProfileId',  
159 - },  
160 - },  
161 - {  
162 - field: 'platform',  
163 - label: '平台',  
164 - required: true,  
165 - component: 'RadioGroup',  
166 - defaultValue: Platform.PC,  
167 - componentProps: {  
168 - defaultValue: Platform.PC,  
169 - options: [  
170 - { label: 'PC端', value: Platform.PC },  
171 - { label: '移动端', value: Platform.PHONE },  
172 - ], 208 + valueField: 'id',
  209 + placeholder: '请选择产品',
  210 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
  211 + filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
  212 + let { label, value } = option;
  213 + label = label.toLowerCase();
  214 + value = value.toLowerCase();
  215 + inputValue = inputValue.toLowerCase();
  216 + return label.includes(inputValue) || value.includes(inputValue);
  217 + },
173 }, 218 },
  219 + ifShow: ({ values }) => values['enableTemplate'] === 0,
174 }, 220 },
175 { 221 {
176 field: 'remark', 222 field: 'remark',
  1 +<template>
  2 + <div v-for="param in dynamicInput.params" :key="param.name" class="mt-4 flex gap-2">
  3 + <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
  4 + <Select
  5 + placeholder="请选择设备"
  6 + v-model:value="param.deviceList"
  7 + class="!w-1/2"
  8 + :options="selectOptions"
  9 + v-bind="createPickerSearch()"
  10 + @change="emitChange"
  11 + mode="multiple"
  12 + allowClear
  13 + />
  14 + </div>
  15 +</template>
  16 +<script lang="ts">
  17 + export default {
  18 + inheritAttrs: false,
  19 + };
  20 +</script>
  21 +<script lang="ts" setup name="SelectAttributes">
  22 + import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
  23 + import { propTypes } from '/@/utils/propTypes';
  24 + import { Select } from 'ant-design-vue';
  25 + import { createPickerSearch } from '/@/utils/pickerSearch';
  26 + import { byOrganizationIdGetMasterDevice } from '/@/api/ruleengine/ruleengineApi';
  27 +
  28 + const props = defineProps({
  29 + value: propTypes.object.def({}),
  30 + organizationId: {
  31 + type: String,
  32 + required: true,
  33 + },
  34 + });
  35 +
  36 + const selectOptions: any = ref([]);
  37 +
  38 + //动态数据
  39 + const dynamicInput: UnwrapRef<{ params: any[] }> = reactive({ params: [] });
  40 +
  41 + const initVal = async () => {
  42 + if (props.value) {
  43 + if (props.organizationId) {
  44 + const resp = await byOrganizationIdGetMasterDevice({
  45 + organizationId: props.organizationId,
  46 + deviceProfileId: props.value.value,
  47 + });
  48 + selectOptions.value = resp.map((item) => ({
  49 + ...item,
  50 + label: item.alias || item.name,
  51 + value: item.tbDeviceId,
  52 + }));
  53 + }
  54 + dynamicInput.params.push({
  55 + name: props.value.label,
  56 + profileId: props.value.value,
  57 + deviceType: props.value?.deviceType,
  58 + transportType: props.value?.transportType,
  59 + deviceList: props.value.deviceList?.filter(Boolean)?.map((item) => item.deviceId),
  60 + });
  61 + }
  62 + };
  63 +
  64 + //数值改变
  65 + const valEffect = watchEffect(() => {
  66 + initVal();
  67 + });
  68 +
  69 + valEffect();
  70 +
  71 + //chang改变
  72 + const emitChange = () => {
  73 + const tempDeviceList: Recordable[] = []; // fix: 修改选择设备顺序问题
  74 + dynamicInput.params[0].deviceList?.forEach((item) => {
  75 + selectOptions.value?.forEach((newItem) => {
  76 + if (item === newItem.value) {
  77 + tempDeviceList.push({
  78 + name: newItem.label,
  79 + deviceId: newItem.value,
  80 + codeType: newItem.codeType,
  81 + });
  82 + }
  83 + });
  84 + });
  85 + return {
  86 + ...dynamicInput.params[0],
  87 + deviceList: tempDeviceList.filter(Boolean), // 过滤假值
  88 + };
  89 + };
  90 + defineExpose({
  91 + emitChange,
  92 + });
  93 +</script>
  94 +<style scoped lang="css">
  95 + .dynamic-delete-button {
  96 + cursor: pointer;
  97 + position: relative;
  98 + top: 4px;
  99 + font-size: 24px;
  100 + color: #999;
  101 + transition: all 0.3s;
  102 + }
  103 +
  104 + .dynamic-delete-button:hover {
  105 + color: #777;
  106 + }
  107 +
  108 + .dynamic-delete-button[disabled] {
  109 + cursor: not-allowed;
  110 + opacity: 0.5;
  111 + }
  112 +</style>
  1 +<template>
  2 + <Select
  3 + placeholder="请选择产品"
  4 + v-model:value="selectValue"
  5 + style="width: 100%"
  6 + :options="selectOptions"
  7 + v-bind="createPickerSearch()"
  8 + @change="handleDeviceProfileChange"
  9 + mode="multiple"
  10 + labelInValue
  11 + />
  12 + <template v-for="(item, index) in profileList" :key="item.value">
  13 + <SelectDevice
  14 + :ref="bindDeviceRef.deviceAttrRef"
  15 + :value="item"
  16 + :index="index"
  17 + :organizationId="organizationId"
  18 + />
  19 + </template>
  20 +</template>
  21 +<script lang="ts" setup name="SelectDevice">
  22 + import { ref, Ref, PropType, unref, nextTick, onMounted } from 'vue';
  23 + import { Select } from 'ant-design-vue';
  24 + import SelectDevice from './SelectDevice.vue';
  25 + import { createPickerSearch } from '/@/utils/pickerSearch';
  26 +
  27 + import { getDeviceProfile } from '/@/api/alarm/position';
  28 +
  29 + defineProps({
  30 + selectOptions: {
  31 + type: Array as PropType<any[]>,
  32 + required: true,
  33 + },
  34 + organizationId: {
  35 + type: String,
  36 + required: true,
  37 + },
  38 + });
  39 +
  40 + const selectValue = ref([]);
  41 + const selectOptions = ref<any>([]);
  42 +
  43 + const bindDeviceRef = {
  44 + deviceAttrRef: ref([]),
  45 + };
  46 +
  47 + const profileList: Ref<any[]> = ref([]);
  48 +
  49 + const handleDeviceProfileChange = (_, options) => {
  50 + profileList.value = options;
  51 + };
  52 +
  53 + const getSelectDevice = () => {
  54 + return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
  55 + };
  56 +
  57 + const setFieldsValue = async (productIds) => {
  58 + await nextTick();
  59 + selectValue.value = productIds || [];
  60 + profileList.value = productIds || [];
  61 + };
  62 +
  63 + const setValue = (value: any) => {
  64 + selectValue.value = value.map((item) => ({
  65 + label: item.name,
  66 + key: item.profileId,
  67 + }));
  68 + profileList.value = value.map((item) => {
  69 + return {
  70 + label: item.name,
  71 + value: item.profileId,
  72 + deviceList: item.deviceList,
  73 + };
  74 + });
  75 + };
  76 + const retValue = () => {
  77 + selectValue.value = [];
  78 + profileList.value = [];
  79 + };
  80 +
  81 + onMounted(async () => {
  82 + const values = await getDeviceProfile();
  83 + selectOptions.value = values.map((item) => ({
  84 + label: item.name,
  85 + value: item.id,
  86 + }));
  87 + });
  88 +
  89 + defineExpose({
  90 + getSelectDevice,
  91 + setValue,
  92 + retValue,
  93 + setFieldsValue,
  94 + });
  95 +</script>
  96 +<style scoped lang="css"></style>
@@ -77,6 +77,7 @@ @@ -77,6 +77,7 @@
77 const { items, total } = await getPage({ 77 const { items, total } = await getPage({
78 organizationId: unref(organizationId), 78 organizationId: unref(organizationId),
79 ...value, 79 ...value,
  80 + isTemplate: 0,
80 page: pagination.current!, 81 page: pagination.current!,
81 pageSize, 82 pageSize,
82 }); 83 });
  1 +<template>
  2 + <BasicDrawer
  3 + v-bind="$attrs"
  4 + @register="registerDrawer"
  5 + showFooter
  6 + :title="getTitle"
  7 + width="30%"
  8 + @ok="handleSubmit"
  9 + >
  10 + <BasicForm @register="registerForm" />
  11 + </BasicDrawer>
  12 +</template>
  13 +<script lang="ts">
  14 + import { defineComponent, ref, computed, unref } from 'vue';
  15 + import { BasicForm, useForm } from '/@/components/Form';
  16 + import { formSchema } from './center.data';
  17 + import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  18 + import { useMessage } from '/@/hooks/web/useMessage';
  19 + import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
  20 + import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  21 + import { buildUUID } from '/@/utils/uuid';
  22 + import { getDeviceProfile } from '/@/api/alarm/position';
  23 + import { PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from '../center/center.data';
  24 +
  25 + export default defineComponent({
  26 + name: 'ConfigurationDrawer',
  27 + components: { BasicDrawer, BasicForm },
  28 + emits: ['success', 'register'],
  29 + setup(_, { emit }) {
  30 + const isUpdate = ref(true);
  31 +
  32 + const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
  33 + labelWidth: 120,
  34 + schemas: formSchema,
  35 + showActionButtonGroup: false,
  36 + });
  37 +
  38 + const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  39 + await resetFields();
  40 + setDrawerProps({ confirmLoading: false });
  41 + isUpdate.value = !!data?.isUpdate;
  42 + if (unref(isUpdate)) {
  43 + if (data.record.thumbnail) {
  44 + data.record.thumbnail = [
  45 + { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
  46 + ];
  47 + }
  48 + if (data.record.organizationDTO) {
  49 + await setFieldsValue(data.record);
  50 + } else {
  51 + Reflect.deleteProperty(data.record, 'organizationId');
  52 + await setFieldsValue(data.record);
  53 + }
  54 + if (!data.record?.productAndDevice) return;
  55 + const productAndDevice = data.record['productAndDevice'];
  56 + setFieldsValue({
  57 + productIds: productAndDevice.map((item) => item.profileId),
  58 + });
  59 + }
  60 + });
  61 +
  62 + const getTitle = computed(() => (!unref(isUpdate) ? '新增模板' : '编辑模板'));
  63 +
  64 + const getDefaultContent = (platform: Platform) => {
  65 + if (platform === Platform.PC) {
  66 + return PC_DEFAULT_CONTENT;
  67 + }
  68 + return PHONE_DEFAULT_CONTENT;
  69 + };
  70 +
  71 + // 获取产品
  72 + const getCurrentAllProduct = async (products: string[]) => {
  73 + const resp = (await getDeviceProfile()) as any;
  74 + if (!resp) return;
  75 + const values = resp.map((item) => ({
  76 + name: item.name,
  77 + profileId: item.id,
  78 + deviceType: item.deviceType,
  79 + transportType: item.transportType,
  80 + }));
  81 + return values.filter((item) => products.includes(item.profileId));
  82 + };
  83 +
  84 + async function handleSubmit() {
  85 + try {
  86 + const { createMessage } = useMessage();
  87 + const values = await validate();
  88 + if (!values) return;
  89 + const reflectProduct = await getCurrentAllProduct(values['productIds']);
  90 + if (Reflect.has(values, 'thumbnail')) {
  91 + const file = (values.thumbnail || []).at(0) || {};
  92 + values.thumbnail = file.url || null;
  93 + }
  94 + setDrawerProps({ confirmLoading: true });
  95 + let saveMessage = '添加成功';
  96 + let updateMessage = '修改成功';
  97 + values.defaultContent = getDefaultContent(values.platform);
  98 + values.productAndDevice = reflectProduct;
  99 + Reflect.deleteProperty(values, 'productIds');
  100 + await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
  101 + closeDrawer();
  102 + emit('success');
  103 + createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
  104 + } finally {
  105 + setDrawerProps({ confirmLoading: false });
  106 + }
  107 + }
  108 +
  109 + return {
  110 + getTitle,
  111 + registerDrawer,
  112 + registerForm,
  113 + handleSubmit,
  114 + };
  115 + },
  116 + });
  117 +</script>
  1 +<template>
  2 + <div>
  3 + <PageWrapper dense contentFullHeight contentClass="flex">
  4 + <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
  5 + <BasicTable
  6 + style="flex: auto"
  7 + :clickToRowSelect="false"
  8 + @register="registerTable"
  9 + :searchInfo="searchInfo"
  10 + class="w-3/4 xl:w-4/5"
  11 + >
  12 + <template #platform="{ record }">
  13 + <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
  14 + {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
  15 + </Tag>
  16 + </template>
  17 + <template #toolbar>
  18 + <Authority value="api:yt:configuration:center:post">
  19 + <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
  20 + </Authority>
  21 + <Authority value="api:yt:configuration:center:delete">
  22 + <Popconfirm
  23 + title="您确定要批量删除数据"
  24 + ok-text="确定"
  25 + cancel-text="取消"
  26 + @confirm="handleDeleteOrBatchDelete(null)"
  27 + >
  28 + <a-button type="primary" color="error" :disabled="hasBatchDelete">
  29 + 批量删除
  30 + </a-button>
  31 + </Popconfirm>
  32 + </Authority>
  33 + </template>
  34 + <template #action="{ record }">
  35 + <TableAction
  36 + :actions="[
  37 + {
  38 + label: '设计',
  39 + auth: 'api:yt:configuration:center:get_configuration_info:get',
  40 + icon: 'clarity:note-edit-line',
  41 + onClick: handleDesign.bind(null, record),
  42 + },
  43 + {
  44 + label: '预览',
  45 + auth: 'api:yt:configuration:center:get_configuration_info:get',
  46 + icon: 'ant-design:eye-outlined',
  47 + onClick: handlePreview.bind(null, record),
  48 + },
  49 + {
  50 + label: '编辑',
  51 + auth: 'api:yt:configuration:center:update',
  52 + icon: 'clarity:note-edit-line',
  53 + onClick: handleCreateOrEdit.bind(null, record),
  54 + },
  55 + {
  56 + label: '删除',
  57 + auth: 'api:yt:configuration:center:delete',
  58 + icon: 'ant-design:delete-outlined',
  59 + color: 'error',
  60 + popConfirm: {
  61 + title: '是否确认删除',
  62 + confirm: handleDeleteOrBatchDelete.bind(null, record),
  63 + },
  64 + },
  65 + ]"
  66 + />
  67 + </template>
  68 + </BasicTable>
  69 + </PageWrapper>
  70 + <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
  71 + </div>
  72 +</template>
  73 +
  74 +<script lang="ts">
  75 + import { defineComponent, reactive, nextTick } from 'vue';
  76 + import { BasicTable, useTable, TableAction } from '/@/components/Table';
  77 + import { PageWrapper } from '/@/components/Page';
  78 + import { useDrawer } from '/@/components/Drawer';
  79 + import ContactDrawer from './ConfigurationCenterDrawer.vue';
  80 + import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
  81 + import { searchFormSchema, columns } from './center.data';
  82 + import { Platform } from '../center/center.data';
  83 + import {
  84 + getPage,
  85 + deleteConfigurationCenter,
  86 + } from '/@/api/configuration/center/configurationCenter';
  87 + import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  88 + import { isDevMode } from '/@/utils/env';
  89 + import { Authority } from '/@/components/Authority';
  90 + import { Popconfirm } from 'ant-design-vue';
  91 + import { Tag } from 'ant-design-vue';
  92 + import { useGlobSetting } from '/@/hooks/setting';
  93 + export default defineComponent({
  94 + components: {
  95 + PageWrapper,
  96 + OrganizationIdTree,
  97 + BasicTable,
  98 + TableAction,
  99 + ContactDrawer,
  100 + Authority,
  101 + Popconfirm,
  102 + Tag,
  103 + },
  104 + setup() {
  105 + const { configurationPrefix } = useGlobSetting();
  106 + const isDev = isDevMode();
  107 + const searchInfo = reactive<Recordable>({});
  108 + const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  109 + // 表格hooks
  110 + const [registerTable, { reload, setProps }] = useTable({
  111 + title: '组态中心列表',
  112 + api: getPage,
  113 + columns,
  114 + clickToRowSelect: false,
  115 + formConfig: {
  116 + labelWidth: 120,
  117 + schemas: searchFormSchema,
  118 + resetFunc: resetFn,
  119 + },
  120 + showIndexColumn: false,
  121 + useSearchForm: true,
  122 + showTableSetting: true,
  123 + bordered: true,
  124 + rowKey: 'id',
  125 + actionColumn: {
  126 + width: 200,
  127 + title: '操作',
  128 + dataIndex: 'action',
  129 + slots: { customRender: 'action' },
  130 + fixed: 'right',
  131 + },
  132 + });
  133 + const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
  134 + deleteConfigurationCenter,
  135 + handleSuccess,
  136 + setProps
  137 + );
  138 + nextTick(() => {
  139 + setProps(selectionOptions);
  140 + });
  141 +
  142 + // 弹框
  143 + const [registerDrawer, { openDrawer }] = useDrawer();
  144 +
  145 + // 刷新
  146 + function handleSuccess() {
  147 + reload();
  148 + }
  149 + // 新增或编辑
  150 + const handleCreateOrEdit = (record: Recordable | null) => {
  151 + if (record) {
  152 + openDrawer(true, {
  153 + isUpdate: true,
  154 + record,
  155 + });
  156 + } else {
  157 + openDrawer(true, {
  158 + isUpdate: false,
  159 + });
  160 + }
  161 + };
  162 + // 树形选择器
  163 + const handleSelect = (organizationId: string) => {
  164 + searchInfo.organizationId = organizationId;
  165 + handleSuccess();
  166 + };
  167 +
  168 + const handlePreview = (record: Recordable | null) => {
  169 + window.open(
  170 + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
  171 + record!.id
  172 + }&lightbox=1`
  173 + );
  174 + };
  175 + const handleDesign = (record: Recordable | null) => {
  176 + window.open(
  177 + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
  178 + );
  179 + };
  180 +
  181 + return {
  182 + Platform,
  183 + searchInfo,
  184 + hasBatchDelete,
  185 + handleCreateOrEdit,
  186 + handleDeleteOrBatchDelete,
  187 + handleSelect,
  188 + handleSuccess,
  189 + handlePreview,
  190 + handleDesign,
  191 + registerTable,
  192 + registerDrawer,
  193 + organizationIdTreeRef,
  194 + };
  195 + },
  196 + });
  197 +</script>
  1 +import { BasicColumn, FormSchema } from '/@/components/Table';
  2 +import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
  3 +import { createImgPreview } from '/@/components/Preview';
  4 +import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
  5 +import { useComponentRegister } from '/@/components/Form';
  6 +import { OrgTreeSelect } from '../../common/OrgTreeSelect';
  7 +import { getDeviceProfile } from '/@/api/alarm/position';
  8 +import { Platform } from '../center/center.data';
  9 +
  10 +useComponentRegister('OrgTreeSelect', OrgTreeSelect);
  11 +
  12 +export enum ConfigurationTemplatePermission {
  13 + CREATE = 'api:yt:configuration:template:center:post',
  14 + UPDATE = 'api:yt:configuration:template:center:update',
  15 + DELETE = 'api:yt:configuration:template:center:delete',
  16 + DESIGN = 'api:yt:configuration:template:center:get_configuration_info:design',
  17 + PREVIEW = 'api:yt:configuration:template:center:get_configuration_info:preview',
  18 +}
  19 +// 表格列数据
  20 +export const columns: BasicColumn[] = [
  21 + {
  22 + title: '模板名称',
  23 + dataIndex: 'name',
  24 + width: 120,
  25 + },
  26 + {
  27 + title: '所属组织',
  28 + dataIndex: 'organizationDTO.name',
  29 + width: 160,
  30 + },
  31 + {
  32 + title: '平台',
  33 + dataIndex: 'platform',
  34 + width: 100,
  35 + slots: { customRender: 'platform' },
  36 + },
  37 + {
  38 + title: '备注',
  39 + dataIndex: 'remark',
  40 + width: 200,
  41 + },
  42 + {
  43 + title: '创建时间',
  44 + dataIndex: 'createTime',
  45 + width: 120,
  46 + },
  47 + {
  48 + title: '更新时间',
  49 + dataIndex: 'updateTime',
  50 + width: 120,
  51 + },
  52 + {
  53 + title: '操作',
  54 + dataIndex: 'action',
  55 + flag: 'ACTION',
  56 + width: 260,
  57 + slots: { customRender: 'action' },
  58 + },
  59 +];
  60 +
  61 +// 查询字段
  62 +export const searchFormSchema: FormSchema[] = [
  63 + {
  64 + field: 'name',
  65 + label: '模板名称',
  66 + component: 'Input',
  67 + colProps: { span: 8 },
  68 + componentProps: {
  69 + maxLength: 36,
  70 + placeholder: '请输入模板名称',
  71 + },
  72 + },
  73 +];
  74 +
  75 +export const formSchema: FormSchema[] = [
  76 + {
  77 + field: 'thumbnail',
  78 + label: '缩略图',
  79 + component: 'ApiUpload',
  80 + changeEvent: 'update:fileList',
  81 + valueField: 'fileList',
  82 + componentProps: () => {
  83 + return {
  84 + listType: 'picture-card',
  85 + maxFileLimit: 1,
  86 + accept: '.png,.jpg,.jpeg,.gif',
  87 + api: async (file: File) => {
  88 + try {
  89 + const formData = new FormData();
  90 + formData.set('file', file);
  91 + const { fileStaticUri, fileName } = await uploadThumbnail(formData);
  92 + return {
  93 + uid: fileStaticUri,
  94 + name: fileName,
  95 + url: fileStaticUri,
  96 + } as FileItem;
  97 + } catch (error) {
  98 + return {};
  99 + }
  100 + },
  101 + onPreview: (fileList: FileItem) => {
  102 + createImgPreview({ imageList: [fileList.url!] });
  103 + },
  104 + // showUploadList: {
  105 + // showDownloadIcon: true,
  106 + // showRemoveIcon: true,
  107 + // },
  108 + };
  109 + },
  110 + },
  111 +
  112 + {
  113 + field: 'name',
  114 + label: '模板名称',
  115 + required: true,
  116 + component: 'Input',
  117 + componentProps: {
  118 + placeholder: '请输入模板名称',
  119 + maxLength: 36,
  120 + },
  121 + },
  122 + {
  123 + field: 'organizationId',
  124 + label: '所属组织',
  125 + required: true,
  126 + component: 'OrgTreeSelect',
  127 + },
  128 + {
  129 + field: 'productIds',
  130 + label: '产品',
  131 + component: 'ApiSelect',
  132 + required: true,
  133 + componentProps: {
  134 + api: getDeviceProfile,
  135 + mode: 'multiple',
  136 + labelField: 'name',
  137 + valueField: 'id',
  138 + },
  139 + },
  140 + {
  141 + field: 'isTemplate',
  142 + label: '',
  143 + component: 'Switch',
  144 + required: true,
  145 + defaultValue: 1,
  146 + componentProps: {
  147 + disabled: true,
  148 + checkedValue: 1,
  149 + unCheckedValue: 0,
  150 + },
  151 + show: false,
  152 + },
  153 + {
  154 + field: 'platform',
  155 + label: '平台',
  156 + required: true,
  157 + component: 'RadioGroup',
  158 + defaultValue: Platform.PC,
  159 + componentProps: {
  160 + defaultValue: Platform.PC,
  161 + options: [
  162 + { label: 'PC端', value: Platform.PC },
  163 + { label: '移动端', value: Platform.PHONE },
  164 + ],
  165 + },
  166 + },
  167 + {
  168 + field: 'remark',
  169 + label: '备注',
  170 + component: 'InputTextArea',
  171 + componentProps: {
  172 + placeholder: '请输入备注',
  173 + maxLength: 255,
  174 + },
  175 + },
  176 + {
  177 + field: 'id',
  178 + label: '',
  179 + component: 'Input',
  180 + show: false,
  181 + componentProps: {
  182 + maxLength: 36,
  183 + placeholder: 'id',
  184 + },
  185 + },
  186 +];
  1 +import { Platform } from './center.data';
  2 +import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
  3 +import { useGlobSetting } from '/@/hooks/setting';
  4 +
  5 +export enum ScadaModeEnum {
  6 + LIGHTBOX = 'lightbox',
  7 + DESIGN = 'design',
  8 + SHARE = 'share',
  9 +}
  10 +
  11 +interface ScadaLinkParamsType {
  12 + configurationId: string;
  13 + organizationId: string;
  14 + mode: ScadaModeEnum;
  15 + platform: Platform;
  16 + publicId?: string;
  17 +}
  18 +
  19 +const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
  20 +
  21 +export const encode = (record: Recordable) => {
  22 + let hash = JSON.stringify(record);
  23 + const mixinString = getRandomString()
  24 + .slice(0, 10)
  25 + .padEnd(10, getRandomString())
  26 + .split('')
  27 + .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))
  28 + .join('');
  29 + hash = window.btoa(hash);
  30 + hash = hash.substring(0, 6) + mixinString + hash.substring(6);
  31 + hash = window.btoa(hash);
  32 + return hash;
  33 +};
  34 +
  35 +export const createScadaPageLink = (
  36 + record: ConfigurationCenterItemsModal,
  37 + mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
  38 + open = true
  39 +) => {
  40 + const { configurationPrefix } = useGlobSetting();
  41 + const params: ScadaLinkParamsType = {
  42 + configurationId: record.id,
  43 + organizationId: record.organizationId!,
  44 + mode: mode,
  45 + platform: record.platform as Platform,
  46 + };
  47 +
  48 + if (mode === ScadaModeEnum.SHARE) {
  49 + params.publicId = record.publicId;
  50 + }
  51 +
  52 + const href = new URL(location.origin);
  53 + href.pathname = configurationPrefix;
  54 + href.hash = encode(params);
  55 + open && window.open(href.href);
  56 + return href.href;
  57 +};
  1 +<script setup lang="ts">
  2 + import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
  3 + import { ReloadOutlined } from '@ant-design/icons-vue';
  4 + import { computed, onMounted, reactive, ref, unref } from 'vue';
  5 + import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
  6 + import {
  7 + deleteConfigurationCenter,
  8 + getPage,
  9 + } from '/@/api/configuration/center/configurationCenter';
  10 + import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
  11 + import { PageWrapper } from '/@/components/Page';
  12 + import { BasicForm, useForm } from '/@/components/Form';
  13 + import { searchFormSchema, ConfigurationTemplatePermission } from './center.data';
  14 + import { useMessage } from '/@/hooks/web/useMessage';
  15 + import { Authority } from '/@/components/Authority';
  16 + import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
  17 + import { useDrawer } from '/@/components/Drawer';
  18 + import { getBoundingClientRect } from '/@/utils/domUtils';
  19 + import configurationSrc from '/@/assets/icons/configuration.svg';
  20 + import { cloneDeep } from 'lodash';
  21 + import { usePermission } from '/@/hooks/web/usePermission';
  22 + import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
  23 + import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
  24 + import { useRole } from '/@/hooks/business/useRole';
  25 + import { Icon } from '/@/components/Icon';
  26 + import { createScadaPageLink, ScadaModeEnum } from './help';
  27 + import { Platform } from '../center/center.data';
  28 +
  29 + const listColumn = ref(5);
  30 +
  31 + const { createMessage } = useMessage();
  32 +
  33 + const { isCustomerUser } = useRole();
  34 +
  35 + const organizationId = ref<Nullable<number>>(null);
  36 +
  37 + const pagination = reactive<PaginationProps>({
  38 + size: 'small',
  39 + showTotal: (total: number) => `共 ${total} 条数据`,
  40 + current: 1,
  41 + pageSize: unref(listColumn) * 2,
  42 + onChange: (page: number) => {
  43 + pagination.current = page;
  44 + getListData();
  45 + },
  46 + });
  47 +
  48 + const loading = ref(false);
  49 +
  50 + const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
  51 +
  52 + const [registerForm, { getFieldsValue }] = useForm({
  53 + schemas: searchFormSchema,
  54 + showAdvancedButton: true,
  55 + labelWidth: 100,
  56 + compact: true,
  57 + resetFunc: () => {
  58 + resetFn();
  59 + organizationId.value = null;
  60 + return getListData();
  61 + },
  62 + submitFunc: async () => {
  63 + const value = getFieldsValue();
  64 + getListData(value);
  65 + },
  66 + });
  67 +
  68 + async function getListData(value: Recordable = {}) {
  69 + try {
  70 + loading.value = true;
  71 + const pageSize = unref(listColumn) * 2;
  72 + const { items, total } = await getPage({
  73 + organizationId: unref(organizationId),
  74 + ...value,
  75 + page: pagination.current!,
  76 + pageSize,
  77 + isTemplate: 1,
  78 + });
  79 +
  80 + dataSource.value = items;
  81 + Object.assign(pagination, { total, pageSize });
  82 + } catch (error) {
  83 + } finally {
  84 + loading.value = false;
  85 + }
  86 + }
  87 +
  88 + onMounted(() => {
  89 + getListData();
  90 + });
  91 +
  92 + const searchInfo = reactive<Recordable>({});
  93 + const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  94 + const handleSelect = (orgId: number) => {
  95 + organizationId.value = orgId;
  96 + getListData();
  97 + };
  98 +
  99 + const [registerDrawer, { openDrawer }] = useDrawer();
  100 +
  101 + const { hasPermission } = usePermission();
  102 +
  103 + const getPreviewFlag = computed(() => {
  104 + return hasPermission(ConfigurationTemplatePermission.PREVIEW);
  105 + });
  106 +
  107 + const getDesignFlag = computed(() => {
  108 + return hasPermission(ConfigurationTemplatePermission.DESIGN);
  109 + });
  110 +
  111 + const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
  112 + if (record) {
  113 + openDrawer(true, {
  114 + isUpdate: true,
  115 + record: cloneDeep(record),
  116 + });
  117 + } else {
  118 + openDrawer(true, {
  119 + isUpdate: false,
  120 + });
  121 + }
  122 + };
  123 +
  124 + const handlePreview = (record: ConfigurationCenterItemsModal) => {
  125 + if (!unref(getPreviewFlag)) return;
  126 + createScadaPageLink(record, ScadaModeEnum.LIGHTBOX);
  127 + };
  128 +
  129 + const handleDesign = (record: ConfigurationCenterItemsModal) => {
  130 + if (!unref(getDesignFlag)) return;
  131 +
  132 + createScadaPageLink(record, ScadaModeEnum.DESIGN);
  133 + };
  134 +
  135 + const handleDelete = async (record: ConfigurationCenterItemsModal) => {
  136 + try {
  137 + await deleteConfigurationCenter([record.id]);
  138 + createMessage.success('删除成功');
  139 + await getListData();
  140 + } catch (error) {}
  141 + };
  142 +
  143 + const handleCardLayoutChange = () => {
  144 + pagination.current = 1;
  145 + getListData();
  146 + };
  147 +
  148 + const listEl = ref<Nullable<ComponentElRef>>(null);
  149 +
  150 + onMounted(() => {
  151 + const clientHeight = document.documentElement.clientHeight;
  152 + const rect = getBoundingClientRect(unref(listEl)!.$el! as HTMLElement) as DOMRect;
  153 + // margin-top 24 height 24
  154 + const paginationHeight = 24 + 24 + 8;
  155 + // list pading top 8 maring-top 8 extra slot 56
  156 + const listContainerMarginBottom = 8 + 8 + 56;
  157 + const listContainerHeight =
  158 + clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
  159 + const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
  160 + '.ant-spin-container'
  161 + ) as HTMLElement;
  162 + listContainerEl &&
  163 + (listContainerEl.style.height = listContainerHeight + 'px') &&
  164 + (listContainerEl.style.overflowY = 'auto') &&
  165 + (listContainerEl.style.overflowX = 'hidden');
  166 + });
  167 +</script>
  168 +
  169 +<template>
  170 + <PageWrapper dense contentFullHeight contentClass="flex">
  171 + <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
  172 + <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
  173 + <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
  174 + <BasicForm @register="registerForm" />
  175 + </div>
  176 + <List
  177 + ref="listEl"
  178 + :loading="loading"
  179 + class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
  180 + position="bottom"
  181 + :pagination="pagination"
  182 + :data-source="dataSource"
  183 + :grid="{ gutter: 4, column: listColumn }"
  184 + >
  185 + <template #header>
  186 + <div class="flex gap-3 justify-end">
  187 + <Authority v-if="!isCustomerUser" :value="ConfigurationTemplatePermission.CREATE">
  188 + <Button type="primary" @click="handleCreateOrUpdate()">新增模板</Button>
  189 + </Authority>
  190 + <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
  191 + <Tooltip title="刷新">
  192 + <Button type="primary" @click="getListData">
  193 + <ReloadOutlined />
  194 + </Button>
  195 + </Tooltip>
  196 + </div>
  197 + </template>
  198 + <template #renderItem="{ item }">
  199 + <List.Item>
  200 + <Card
  201 + :style="{
  202 + '--viewType': '#1890ff',
  203 + }"
  204 + hoverable
  205 + class="card-container"
  206 + >
  207 + <template #cover>
  208 + <div
  209 + class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
  210 + >
  211 + <img
  212 + class="w-full h-36"
  213 + alt="example"
  214 + :src="item.thumbnail || configurationSrc"
  215 + @click="handlePreview(item)"
  216 + />
  217 + <span
  218 + class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
  219 + >
  220 + 母版
  221 + </span>
  222 + </div>
  223 + </template>
  224 + <template class="ant-card-actions" #actions>
  225 + <Tooltip v-if="!isCustomerUser" title="设计">
  226 + <AuthIcon
  227 + :auth="ConfigurationTemplatePermission.DESIGN"
  228 + class="!text-lg"
  229 + icon="ant-design:edit-outlined"
  230 + @click="handleDesign(item)"
  231 + />
  232 + </Tooltip>
  233 + <AuthDropDown
  234 + v-if="!isCustomerUser"
  235 + :dropMenuList="[
  236 + {
  237 + text: '编辑',
  238 + auth: ConfigurationTemplatePermission.UPDATE,
  239 + icon: 'clarity:note-edit-line',
  240 + event: '',
  241 + onClick: handleCreateOrUpdate.bind(null, item),
  242 + },
  243 + {
  244 + text: '删除',
  245 + auth: ConfigurationTemplatePermission.DELETE,
  246 + icon: 'ant-design:delete-outlined',
  247 + event: '',
  248 + popconfirm: {
  249 + title: '是否确认删除操作?',
  250 + onConfirm: handleDelete.bind(null, item),
  251 + },
  252 + },
  253 + ]"
  254 + :trigger="['hover']"
  255 + />
  256 + </template>
  257 + <Card.Meta>
  258 + <template #title>
  259 + <span class="truncate">{{ item.name }}</span>
  260 + </template>
  261 + <template #description>
  262 + <div class="truncate h-11">
  263 + <div class="truncate flex justify-between items-center">
  264 + <div>{{ item.organizationDTO?.name }}</div>
  265 + <Icon
  266 + :icon="
  267 + item.platform === Platform.PC
  268 + ? 'ri:computer-line'
  269 + : 'clarity:mobile-phone-solid'
  270 + "
  271 + />
  272 + </div>
  273 + <div class="truncate">{{ item.remark || '' }} </div>
  274 + </div>
  275 + </template>
  276 + </Card.Meta>
  277 + </Card>
  278 + </List.Item>
  279 + </template>
  280 + </List>
  281 + </section>
  282 + <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
  283 + </PageWrapper>
  284 +</template>
  285 +
  286 +<style lang="less" scoped>
  287 + .configuration-list:deep(.ant-list-header) {
  288 + border-bottom: none !important;
  289 + }
  290 +
  291 + .configuration-list:deep(.ant-list-pagination) {
  292 + height: 24px;
  293 + }
  294 +
  295 + .configuration-list:deep(.ant-card-body) {
  296 + padding: 16px !important;
  297 + }
  298 +
  299 + .configuration-list:deep(.ant-list-empty-text) {
  300 + @apply w-full h-full flex justify-center items-center;
  301 + }
  302 +
  303 + .card-container {
  304 + // background-color: red;
  305 + .img-container {
  306 + border-top-left-radius: 80px;
  307 + background-color: #fff;
  308 +
  309 + img {
  310 + border-top-left-radius: 80px;
  311 + }
  312 + }
  313 + }
  314 +
  315 + .card-container:deep(.ant-card-cover) {
  316 + background-color: var(--viewType);
  317 + }
  318 +</style>
@@ -34,7 +34,7 @@ export const columnSchema: BasicColumn[] = [ @@ -34,7 +34,7 @@ export const columnSchema: BasicColumn[] = [
34 { 34 {
35 title: '标识符', 35 title: '标识符',
36 dataIndex: 'eventIdentifier', 36 dataIndex: 'eventIdentifier',
37 - helpMessage: ['标识符格式为模块标识符: 功能定义标识符'], 37 + helpMessage: ['标识符：物模型事件功能定义标识符'],
38 }, 38 },
39 { 39 {
40 title: '事件名称', 40 title: '事件名称',
@@ -5,7 +5,10 @@ @@ -5,7 +5,10 @@
5 import { useECharts } from '/@/hooks/web/useECharts'; 5 import { useECharts } from '/@/hooks/web/useECharts';
6 import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data'; 6 import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
7 import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm'; 7 import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
8 - import { defaultSchemas } from '/@/views/device/localtion/cpns/TimePeriodForm/config'; 8 + import {
  9 + defaultSchemas,
  10 + OrderByEnum,
  11 + } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
9 import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue'; 12 import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
10 import { useGridLayout } from '/@/hooks/component/useGridLayout'; 13 import { useGridLayout } from '/@/hooks/component/useGridLayout';
11 import { ColEx } from '/@/components/Form/src/types'; 14 import { ColEx } from '/@/components/Form/src/types';
@@ -96,7 +99,7 @@ @@ -96,7 +99,7 @@
96 size: 'small', 99 size: 'small',
97 }); 100 });
98 101
99 - const getTableList = async (orderBy?: string) => { 102 + const getTableList = async (orderBy?: OrderByEnum) => {
100 // 表单验证 103 // 表单验证
101 await method.validate(); 104 await method.validate();
102 const value = method.getFieldsValue(); 105 const value = method.getFieldsValue();
@@ -121,9 +124,9 @@ @@ -121,9 +124,9 @@
121 await setColumns(unref(columns)); 124 await setColumns(unref(columns));
122 if (sorter.field == 'ts') { 125 if (sorter.field == 'ts') {
123 if (sorter.order == 'descend') { 126 if (sorter.order == 'descend') {
124 - getTableList('DESC'); 127 + getTableList(OrderByEnum.DESC);
125 } else { 128 } else {
126 - getTableList('ASC'); 129 + getTableList(OrderByEnum.ASC);
127 } 130 }
128 } 131 }
129 }; 132 };
@@ -184,7 +187,6 @@ @@ -184,7 +187,6 @@
184 if (props.attr) { 187 if (props.attr) {
185 method.setFieldsValue({ keys: props.attr }); 188 method.setFieldsValue({ keys: props.attr });
186 const attrInfo = unref(deviceAttrs).find((item) => item.identifier === props.attr); 189 const attrInfo = unref(deviceAttrs).find((item) => item.identifier === props.attr);
187 - console.log({ attrInfo });  
188 if ( 190 if (
189 [DataTypeEnum.IS_STRING, DataTypeEnum.IS_STRUCT].includes( 191 [DataTypeEnum.IS_STRING, DataTypeEnum.IS_STRUCT].includes(
190 attrInfo?.detail.dataType.type as unknown as DataTypeEnum 192 attrInfo?.detail.dataType.type as unknown as DataTypeEnum
@@ -198,7 +200,7 @@ @@ -198,7 +200,7 @@
198 } catch (error) {} 200 } catch (error) {}
199 }; 201 };
200 202
201 - const openHistoryPanel = async (orderBy?: string) => { 203 + const openHistoryPanel = async (orderBy = OrderByEnum.ASC) => {
202 await nextTick(); 204 await nextTick();
203 method.updateSchema({ 205 method.updateSchema({
204 field: 'keys', 206 field: 'keys',
@@ -32,13 +32,14 @@ export function useHistoryData() { @@ -32,13 +32,14 @@ export function useHistoryData() {
32 }; 32 };
33 33
34 function getSearchParams(value: Partial<Record<SchemaFiled, string>>) { 34 function getSearchParams(value: Partial<Record<SchemaFiled, string>>) {
35 - const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value; 35 + const { startTs, endTs, interval, agg, limit, keys, way, deviceId, orderBy } = value;
36 const basicRecord = { 36 const basicRecord = {
37 entityId: deviceId, 37 entityId: deviceId,
38 keys: keys ? keys : unref(getDeviceKeys).join(), 38 keys: keys ? keys : unref(getDeviceKeys).join(),
39 interval, 39 interval,
40 agg, 40 agg,
41 limit, 41 limit,
  42 + orderBy,
42 }; 43 };
43 if (way === QueryWay.LATEST) { 44 if (way === QueryWay.LATEST) {
44 return Object.assign(basicRecord, { 45 return Object.assign(basicRecord, {
@@ -5,6 +5,7 @@ import { copyTransFun } from '/@/utils/fnUtils'; @@ -5,6 +5,7 @@ import { copyTransFun } from '/@/utils/fnUtils';
5 import { getDeviceDataKeys } from '/@/api/alarm/position'; 5 import { getDeviceDataKeys } from '/@/api/alarm/position';
6 import { deviceProfile } from '/@/api/device/deviceManager'; 6 import { deviceProfile } from '/@/api/device/deviceManager';
7 import { EChartsOption } from 'echarts'; 7 import { EChartsOption } from 'echarts';
  8 +import { OrderByEnum, OrderByNameEnum, SchemaFiled } from './cpns/TimePeriodForm/config';
8 9
9 export enum AggregateDataEnum { 10 export enum AggregateDataEnum {
10 MIN = 'MIN', 11 MIN = 'MIN',
@@ -487,6 +488,18 @@ export const selectDeviceAttrSchema: FormSchema[] = [ @@ -487,6 +488,18 @@ export const selectDeviceAttrSchema: FormSchema[] = [
487 getPopupContainer: () => document.body, 488 getPopupContainer: () => document.body,
488 }, 489 },
489 }, 490 },
  491 + {
  492 + field: SchemaFiled.ORDER_BY,
  493 + label: '数据排序',
  494 + component: 'Select',
  495 + defaultValue: OrderByEnum.ASC,
  496 + componentProps: {
  497 + options: Object.values(OrderByEnum).map((value) => ({
  498 + value,
  499 + label: OrderByNameEnum[value],
  500 + })),
  501 + },
  502 + },
490 ]; 503 ];
491 504
492 export const eChartOptions = (series: EChartsOption['series'], keys: string[]): EChartsOption => { 505 export const eChartOptions = (series: EChartsOption['series'], keys: string[]): EChartsOption => {
@@ -21,6 +21,16 @@ export enum SchemaFiled { @@ -21,6 +21,16 @@ export enum SchemaFiled {
21 ORDER_BY = 'orderBy', 21 ORDER_BY = 'orderBy',
22 } 22 }
23 23
  24 +export enum OrderByEnum {
  25 + DESC = 'DESC',
  26 + ASC = 'ASC',
  27 +}
  28 +
  29 +export enum OrderByNameEnum {
  30 + DESC = '降序',
  31 + ASC = '升序',
  32 +}
  33 +
24 export enum AggregateDataEnum { 34 export enum AggregateDataEnum {
25 MIN = 'MIN', 35 MIN = 'MIN',
26 MAX = 'MAX', 36 MAX = 'MAX',
@@ -157,6 +157,21 @@ @@ -157,6 +157,21 @@
157 if (typeof value == 'object') { 157 if (typeof value == 'object') {
158 return Promise.resolve(); 158 return Promise.resolve();
159 } else { 159 } else {
  160 + if (platformType.value !== PlateFormTypeEnum.tencent_cound) {
  161 + // 阿里云不能是以[]开头
  162 + if (
  163 + Object.prototype.toString.call(JSON.parse(value)) === '[object Array]'
  164 + ) {
  165 + return Promise.reject('请输入JSON格式例如{"code":"1234"}');
  166 + }
  167 + } else {
  168 + // 腾讯云只能是[]开头
  169 + if (
  170 + Object.prototype.toString.call(JSON.parse(value)) !== '[object Array]'
  171 + ) {
  172 + return Promise.reject('请输入这种格式["123456"]');
  173 + }
  174 + }
160 if (typeof JSON.parse(value) == 'object') { 175 if (typeof JSON.parse(value) == 'object') {
161 return Promise.resolve(); 176 return Promise.resolve();
162 } 177 }
@@ -13,6 +13,7 @@ export const formSchemas: FormSchema[] = [ @@ -13,6 +13,7 @@ export const formSchemas: FormSchema[] = [
13 javaScriptEditorProps: { 13 javaScriptEditorProps: {
14 functionName: 'Details', 14 functionName: 'Details',
15 paramsName: ['msg', 'metadata', 'msgType'], 15 paramsName: ['msg', 'metadata', 'msgType'],
  16 + scriptType: 'json',
16 }, 17 },
17 buttonName: 'Test details function', 18 buttonName: 'Test details function',
18 }, 19 },
@@ -36,6 +36,7 @@ export const formSchemas: FormSchema[] = [ @@ -36,6 +36,7 @@ export const formSchemas: FormSchema[] = [
36 componentProps: { 36 componentProps: {
37 javaScriptEditorProps: { 37 javaScriptEditorProps: {
38 functionName: 'Details', 38 functionName: 'Details',
  39 + scriptType: 'json',
39 paramsName: ['msg', 'metadata', 'msgType'], 40 paramsName: ['msg', 'metadata', 'msgType'],
40 }, 41 },
41 buttonName: 'Test details function', 42 buttonName: 'Test details function',
@@ -60,6 +60,7 @@ export const formSchemas: FormSchema[] = [ @@ -60,6 +60,7 @@ export const formSchemas: FormSchema[] = [
60 componentProps: { 60 componentProps: {
61 javaScriptEditorProps: { 61 javaScriptEditorProps: {
62 functionName: 'Generate', 62 functionName: 'Generate',
  63 + scriptType: 'generate',
63 paramsName: ['prevMsg', 'prevMetadata', 'prevMsgType'], 64 paramsName: ['prevMsg', 'prevMetadata', 'prevMsgType'],
64 }, 65 },
65 buttonName: 'Test generator function', 66 buttonName: 'Test generator function',
@@ -14,6 +14,7 @@ export const formSchemas: FormSchema[] = [ @@ -14,6 +14,7 @@ export const formSchemas: FormSchema[] = [
14 componentProps: { 14 componentProps: {
15 javaScriptEditorProps: { 15 javaScriptEditorProps: {
16 functionName: 'ToString', 16 functionName: 'ToString',
  17 + scriptType: 'string',
17 paramsName: ['msg', 'metadata', 'msgType'], 18 paramsName: ['msg', 'metadata', 'msgType'],
18 }, 19 },
19 buttonName: 'Test to string function', 20 buttonName: 'Test to string function',
@@ -16,6 +16,7 @@ export const formSchemas: FormSchema[] = [ @@ -16,6 +16,7 @@ export const formSchemas: FormSchema[] = [
16 javaScriptEditorProps: { 16 javaScriptEditorProps: {
17 height: 230, 17 height: 230,
18 functionName: 'Switch', 18 functionName: 'Switch',
  19 + scriptType: 'switch',
19 paramsName: ['msg', 'metadata', 'mstType'], 20 paramsName: ['msg', 'metadata', 'mstType'],
20 }, 21 },
21 }, 22 },
@@ -15,6 +15,7 @@ export const formSchemas: FormSchema[] = [ @@ -15,6 +15,7 @@ export const formSchemas: FormSchema[] = [
15 javaScriptEditorProps: { 15 javaScriptEditorProps: {
16 functionName: 'Transform', 16 functionName: 'Transform',
17 paramsName: ['msg', 'metadata', 'msgType'], 17 paramsName: ['msg', 'metadata', 'msgType'],
  18 + scriptType: 'update',
18 }, 19 },
19 buttonName: 'Test transformer function', 20 buttonName: 'Test transformer function',
20 }, 21 },
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { Card, Select, Tag, Form, Button } from 'ant-design-vue'; 2 import { Card, Select, Tag, Form, Button } from 'ant-design-vue';
3 - import { ref, toRaw, unref, watch } from 'vue'; 3 + import { nextTick, ref, toRaw, unref, watch } from 'vue';
4 import { MessageTypesEnum, MessageTypesNameEnum } from '../../../enum/form'; 4 import { MessageTypesEnum, MessageTypesNameEnum } from '../../../enum/form';
5 import { JSONEditor } from '/@/components/CodeEditor'; 5 import { JSONEditor } from '/@/components/CodeEditor';
6 import { Icon } from '/@/components/Icon'; 6 import { Icon } from '/@/components/Icon';
@@ -8,6 +8,8 @@ @@ -8,6 +8,8 @@
8 import { useJsonParse } from '/@/hooks/business/useJsonParse'; 8 import { useJsonParse } from '/@/hooks/business/useJsonParse';
9 import { useMessage } from '/@/hooks/web/useMessage'; 9 import { useMessage } from '/@/hooks/web/useMessage';
10 import { AttributeConfiguration } from '../AttributeConfiguration'; 10 import { AttributeConfiguration } from '../AttributeConfiguration';
  11 + import { testScript } from '/@/api/ruleChainDesigner';
  12 + import { isString } from '/@/utils/is';
11 13
12 interface Value { 14 interface Value {
13 msg: Recordable; 15 msg: Recordable;
@@ -24,6 +26,7 @@ @@ -24,6 +26,7 @@
24 { 26 {
25 javaScriptEditorProps: () => ({ 27 javaScriptEditorProps: () => ({
26 functionName: 'Filter', 28 functionName: 'Filter',
  29 + scriptType: 'filter',
27 paramsName: ['msg', 'metadata', 'msgType'], 30 paramsName: ['msg', 'metadata', 'msgType'],
28 }), 31 }),
29 } 32 }
@@ -35,6 +38,8 @@ @@ -35,6 +38,8 @@
35 (eventName: 'save', value: Value): void; 38 (eventName: 'save', value: Value): void;
36 }>(); 39 }>();
37 40
  41 + const jsonEditor = ref<InstanceType<typeof JSONEditor>>();
  42 +
38 const messageType = ref(MessageTypesEnum.POST_TELEMETRY_REQUEST); 43 const messageType = ref(MessageTypesEnum.POST_TELEMETRY_REQUEST);
39 const messageTypeOptions = Object.keys(MessageTypesEnum).map((value) => ({ 44 const messageTypeOptions = Object.keys(MessageTypesEnum).map((value) => ({
40 label: MessageTypesNameEnum[value], 45 label: MessageTypesNameEnum[value],
@@ -74,18 +79,34 @@ @@ -74,18 +79,34 @@
74 const msgType = unref(messageType); 79 const msgType = unref(messageType);
75 const javascriptFunction = unref(scriptContent); 80 const javascriptFunction = unref(scriptContent);
76 81
77 - return { msg, msgType, metadata: toRaw(unref(metadata)), javascriptFunction }; 82 + return {
  83 + msg,
  84 + msgType,
  85 + metadata: toRaw(unref(metadata)),
  86 + javascriptFunction,
  87 + };
78 }; 88 };
79 89
80 - function executeTestScript() { 90 + async function executeTestScript() {
81 try { 91 try {
82 const { javaScriptEditorProps } = props; 92 const { javaScriptEditorProps } = props;
83 - const { paramsName } = javaScriptEditorProps;  
84 - const fn = new Function(...(paramsName || [])!, unref(scriptContent));  
85 - const value = getValue();  
86 - const executeParams = paramsName!.map((key) => value[key]); 93 + const { paramsName, scriptType } = javaScriptEditorProps;
  94 + const { msg, msgType, metadata } = getValue();
  95 +
  96 + const { output, error } = await testScript({
  97 + argNames: paramsName,
  98 + scriptType,
  99 + script: unref(scriptContent),
  100 + msg: isString(msg) ? msg : JSON.stringify(msg),
  101 + metadata,
  102 + msgType,
  103 + });
  104 +
  105 + if (error) {
  106 + createMessage.error(error);
  107 + }
87 108
88 - return fn(...executeParams); 109 + return output;
89 } catch (error) { 110 } catch (error) {
90 return error; 111 return error;
91 } 112 }
@@ -96,9 +117,11 @@ @@ -96,9 +117,11 @@
96 117
97 flag && emit('test', getValue()); 118 flag && emit('test', getValue());
98 119
99 - const result = executeTestScript(); 120 + const result = await executeTestScript();
100 121
101 outputContent.value = result; 122 outputContent.value = result;
  123 + await nextTick();
  124 + unref(jsonEditor)?.handleFormat();
102 }; 125 };
103 126
104 const handleSave = async () => { 127 const handleSave = async () => {
@@ -177,6 +200,7 @@ @@ -177,6 +200,7 @@
177 <Card class="w-full h-full"> 200 <Card class="w-full h-full">
178 <JSONEditor 201 <JSONEditor
179 v-model:value="outputContent" 202 v-model:value="outputContent"
  203 + ref="jsonEditor"
180 title="输出" 204 title="输出"
181 class="flex-auto" 205 class="flex-auto"
182 height="100%" 206 height="100%"
@@ -27,6 +27,7 @@ @@ -27,6 +27,7 @@
27 27
28 const handleSaveScript = (value: SaveValueType) => { 28 const handleSaveScript = (value: SaveValueType) => {
29 emit('save', value); 29 emit('save', value);
  30 +
30 closeModal(); 31 closeModal();
31 }; 32 };
32 </script> 33 </script>
@@ -11,11 +11,13 @@ @@ -11,11 +11,13 @@
11 value?: string; 11 value?: string;
12 buttonName?: string; 12 buttonName?: string;
13 javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props']; 13 javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];
  14 + scriptType?: string;
14 }>(), 15 }>(),
15 { 16 {
16 buttonName: 'Test Filter Function', 17 buttonName: 'Test Filter Function',
17 javaScriptEditorProps: () => ({ 18 javaScriptEditorProps: () => ({
18 functionName: 'Filter', 19 functionName: 'Filter',
  20 + scriptType: 'filter',
19 paramsName: ['msg', 'metadata', 'msgType'], 21 paramsName: ['msg', 'metadata', 'msgType'],
20 }), 22 }),
21 } 23 }
@@ -47,3 +47,9 @@ @@ -47,3 +47,9 @@
47 <div ref="javaEditorElRef" class="w-full h-full min-h-96"></div> 47 <div ref="javaEditorElRef" class="w-full h-full min-h-96"></div>
48 </BasicModal> 48 </BasicModal>
49 </template> 49 </template>
  50 +
  51 +<style>
  52 + .ace-github .ace_print-margin {
  53 + width: 0;
  54 + }
  55 +</style>
@@ -250,6 +250,7 @@ export function isType(operationType) { @@ -250,6 +250,7 @@ export function isType(operationType) {
250 field: 'operation', 250 field: 'operation',
251 label: '执行操作', 251 label: '执行操作',
252 component: 'Select', 252 component: 'Select',
  253 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
253 required: true, 254 required: true,
254 componentProps: { 255 componentProps: {
255 options: operationNumber_OR_TIME, 256 options: operationNumber_OR_TIME,
@@ -286,6 +287,7 @@ export function isType(operationType) { @@ -286,6 +287,7 @@ export function isType(operationType) {
286 field: 'operation', 287 field: 'operation',
287 label: '执行操作', 288 label: '执行操作',
288 component: 'Select', 289 component: 'Select',
  290 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
289 required: true, 291 required: true,
290 componentProps: { 292 componentProps: {
291 options: operationString, 293 options: operationString,
@@ -310,6 +312,7 @@ export function isType(operationType) { @@ -310,6 +312,7 @@ export function isType(operationType) {
310 field: 'operation', 312 field: 'operation',
311 label: '执行操作', 313 label: '执行操作',
312 component: 'Select', 314 component: 'Select',
  315 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
313 required: true, 316 required: true,
314 componentProps: { 317 componentProps: {
315 options: operationBoolean, 318 options: operationBoolean,
@@ -322,6 +325,7 @@ export function isType(operationType) { @@ -322,6 +325,7 @@ export function isType(operationType) {
322 field: 'value', 325 field: 'value',
323 label: '操作值', 326 label: '操作值',
324 component: 'Select', 327 component: 'Select',
  328 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
325 required: true, 329 required: true,
326 componentProps: { 330 componentProps: {
327 options: [ 331 options: [
@@ -347,6 +351,7 @@ export function isType(operationType) { @@ -347,6 +351,7 @@ export function isType(operationType) {
347 label: '执行操作', 351 label: '执行操作',
348 required: true, 352 required: true,
349 component: 'Select', 353 component: 'Select',
  354 + getPopupContainer: (triggerNode) => triggerNode.parentNode,
350 componentProps: { 355 componentProps: {
351 options: operationNumber_OR_TIME, 356 options: operationNumber_OR_TIME,
352 }, 357 },
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 :options="options" 31 :options="options"
32 :disabled="disabled" 32 :disabled="disabled"
33 v-model:value="model[field]" 33 v-model:value="model[field]"
  34 + :getPopupContainer="(triggerNode) => triggerNode.parentNode"
34 @change="operationType = model[field]" 35 @change="operationType = model[field]"
35 placeholder="请选择比较类型" 36 placeholder="请选择比较类型"
36 allowClear 37 allowClear
@@ -2,6 +2,14 @@ import { BasicColumn, FormSchema } from '/@/components/Table'; @@ -2,6 +2,14 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
2 import { h } from 'vue'; 2 import { h } from 'vue';
3 import { Tag } from 'ant-design-vue'; 3 import { Tag } from 'ant-design-vue';
4 import moment from 'moment'; 4 import moment from 'moment';
  5 +// import {
  6 +// ClearAlarmFieldsEnum,
  7 +// ClearAlarmFieldsNameEnum,
  8 +// } from '../../designer/enum/formField/action';
  9 +import { useComponentRegister } from '/@/components/Form';
  10 +import { JavascriptEditorWithTestModal } from '../../designer/src/components/JavaScriptFilterModal';
  11 +
  12 +useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);
5 13
6 export enum StatusEnum { 14 export enum StatusEnum {
7 ENABLE = 1, 15 ENABLE = 1,
@@ -129,11 +137,25 @@ export const formSchema: FormSchema[] = [ @@ -129,11 +137,25 @@ export const formSchema: FormSchema[] = [
129 placeholder: '请输入说明', 137 placeholder: '请输入说明',
130 }, 138 },
131 }, 139 },
  140 + // {
  141 + // field: 'function',
  142 + // label: '',
  143 + // component: 'Input',
  144 + // slot: 'function',
  145 + // },
132 { 146 {
133 field: 'function', 147 field: 'function',
134 - label: '',  
135 - component: 'Input',  
136 - slot: 'function', 148 + component: 'JavascriptEditorWithTestModal',
  149 + label: '转换函数',
  150 + changeEvent: 'update:value',
  151 + componentProps: {
  152 + javaScriptEditorProps: {
  153 + functionName: 'Details',
  154 + paramsName: ['msg', 'metadata', 'msgType'],
  155 + scriptType: 'json',
  156 + },
  157 + buttonName: '测试转换功能',
  158 + },
137 }, 159 },
138 { 160 {
139 field: 'id', 161 field: 'id',
@@ -111,6 +111,7 @@ @@ -111,6 +111,7 @@
111 aceEditor.value.setValue( 111 aceEditor.value.setValue(
112 jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};' 112 jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};'
113 ); 113 );
  114 + setFieldsValue({ function: 'return {msg: msg, metadata: metadata, msgType: msgType};' });
114 beautify(aceEditor.value.session); 115 beautify(aceEditor.value.session);
115 }; 116 };
116 117
@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = { @@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
15 [ComponentConfigFieldEnum.SHOW_TIME]: false, 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
16 [ComponentConfigFieldEnum.FONT_SIZE]: 14, 16 [ComponentConfigFieldEnum.FONT_SIZE]: 14,
17 [ComponentConfigFieldEnum.VALUE_SIZE]: 20, 17 [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
  18 + [ComponentConfigFieldEnum.MAX_NUMBER]: 120,
18 }; 19 };
19 20
20 export default class Config extends PublicConfigClass implements CreateComponentType { 21 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -18,16 +18,38 @@ @@ -18,16 +18,38 @@
18 18
19 const time = ref<Nullable<number>>(null); 19 const time = ref<Nullable<number>>(null);
20 20
  21 + const POSITIVE_NUMBER = 6;
  22 +
  23 + const ALL_PART = 7;
  24 +
  25 + const DEFAULT_PART_VALUE = 20;
  26 +
  27 + const partValue = computed(() => {
  28 + const { config } = props;
  29 + const { option } = config;
  30 + const { componentInfo } = option;
  31 + const { maxNumber = 120 } = componentInfo || {};
  32 + let value = maxNumber / POSITIVE_NUMBER;
  33 + return value % 10 > 0 ? Math.floor(value / 10) * 10 + 10 : value + 10;
  34 + });
  35 +
  36 + const maxValueScale = computed(() => unref(partValue) / DEFAULT_PART_VALUE);
  37 +
21 const getValue = computed(() => { 38 const getValue = computed(() => {
22 const maxHeight = 190; 39 const maxHeight = 190;
23 const minHeight = 15; 40 const minHeight = 15;
  41 +
24 const height = maxHeight - minHeight; 42 const height = maxHeight - minHeight;
25 - const rangeNumber = 7;  
26 - const itemRange = 20;  
27 - const itemHeight = height / (rangeNumber * itemRange); 43 +
  44 + const itemHeight = height / (ALL_PART * (DEFAULT_PART_VALUE * unref(maxValueScale)));
  45 +
28 const value = unref(currentValue); 46 const value = unref(currentValue);
29 - const transformValue =  
30 - maxHeight - (value >= 0 ? value + 20 : itemRange - Math.abs(value)) * itemHeight; 47 + let transformValue =
  48 + maxHeight -
  49 + (value >= 0
  50 + ? value + unref(DEFAULT_PART_VALUE * unref(maxValueScale))
  51 + : DEFAULT_PART_VALUE * unref(maxValueScale) - Math.abs(value)) *
  52 + itemHeight;
31 53
32 return transformValue >= maxHeight 54 return transformValue >= maxHeight
33 ? maxHeight 55 ? maxHeight
@@ -184,7 +206,9 @@ @@ -184,7 +206,9 @@
184 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 206 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
185 /> 207 />
186 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 208 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
187 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div> 209 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  210 + {{ partValue * -1 }}
  211 + </div>
188 </foreignObject> 212 </foreignObject>
189 </g> 213 </g>
190 <g class="tick" opacity="1" transform="translate(0,165)"> 214 <g class="tick" opacity="1" transform="translate(0,165)">
@@ -204,7 +228,9 @@ @@ -204,7 +228,9 @@
204 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 228 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
205 /> 229 />
206 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 230 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
207 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div> 231 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  232 + {{ partValue }}
  233 + </div>
208 </foreignObject> 234 </foreignObject>
209 </g> 235 </g>
210 <g class="tick" opacity="1" transform="translate(0,115)"> 236 <g class="tick" opacity="1" transform="translate(0,115)">
@@ -214,7 +240,9 @@ @@ -214,7 +240,9 @@
214 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 240 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
215 /> 241 />
216 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 242 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
217 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div> 243 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  244 + {{ partValue * 2 }}
  245 + </div>
218 </foreignObject> 246 </foreignObject>
219 </g> 247 </g>
220 <g class="tick" opacity="1" transform="translate(0,90)"> 248 <g class="tick" opacity="1" transform="translate(0,90)">
@@ -224,7 +252,9 @@ @@ -224,7 +252,9 @@
224 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 252 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
225 /> 253 />
226 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 254 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
227 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div> 255 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  256 + {{ partValue * 3 }}
  257 + </div>
228 </foreignObject> 258 </foreignObject>
229 </g> 259 </g>
230 <g class="tick" opacity="1" transform="translate(0,65)"> 260 <g class="tick" opacity="1" transform="translate(0,65)">
@@ -234,7 +264,9 @@ @@ -234,7 +264,9 @@
234 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 264 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
235 /> 265 />
236 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 266 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
237 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div> 267 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  268 + {{ partValue * 4 }}
  269 + </div>
238 </foreignObject> 270 </foreignObject>
239 </g> 271 </g>
240 <g class="tick" opacity="1" transform="translate(0,40)"> 272 <g class="tick" opacity="1" transform="translate(0,40)">
@@ -244,7 +276,9 @@ @@ -244,7 +276,9 @@
244 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 276 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
245 /> 277 />
246 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 278 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
247 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div> 279 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  280 + {{ partValue * 5 }}
  281 + </div>
248 </foreignObject> 282 </foreignObject>
249 </g> 283 </g>
250 <g class="tick" opacity="1" transform="translate(0,15)"> 284 <g class="tick" opacity="1" transform="translate(0,15)">
@@ -254,7 +288,9 @@ @@ -254,7 +288,9 @@
254 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px" 288 style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
255 /> 289 />
256 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20"> 290 <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
257 - <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div> 291 + <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
  292 + {{ partValue * 6 }}
  293 + </div>
258 </foreignObject> 294 </foreignObject>
259 </g> 295 </g>
260 </g> 296 </g>
@@ -10,7 +10,7 @@ export function useSendCommand() { @@ -10,7 +10,7 @@ export function useSendCommand() {
10 const loading = ref(false); 10 const loading = ref(false);
11 11
12 const error = () => { 12 const error = () => {
13 - createMessage.error('下发指令失败'); 13 + // createMessage.error('下发指令失败');
14 return false; 14 return false;
15 }; 15 };
16 16
@@ -52,6 +52,7 @@ export function useSendCommand() { @@ -52,6 +52,7 @@ export function useSendCommand() {
52 createMessage.success('命令下发成功'); 52 createMessage.success('命令下发成功');
53 return true; 53 return true;
54 } catch (msg) { 54 } catch (msg) {
  55 + console.error(msg);
55 return error(); 56 return error();
56 } finally { 57 } finally {
57 loading.value = false; 58 loading.value = false;
@@ -8,6 +8,7 @@ import { @@ -8,6 +8,7 @@ import {
8 getPacketIntervalByValue, 8 getPacketIntervalByValue,
9 intervalOption, 9 intervalOption,
10 } from '/@/views/device/localtion/cpns/TimePeriodForm/helper'; 10 } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
  11 +import { OrderByEnum, OrderByNameEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
11 export enum QueryWay { 12 export enum QueryWay {
12 LATEST = 'latest', 13 LATEST = 'latest',
13 TIME_PERIOD = 'timePeriod', 14 TIME_PERIOD = 'timePeriod',
@@ -200,6 +201,18 @@ export const formSchema = (): FormSchema[] => { @@ -200,6 +201,18 @@ export const formSchema = (): FormSchema[] => {
200 getPopupContainer: () => document.body, 201 getPopupContainer: () => document.body,
201 }, 202 },
202 }, 203 },
  204 + {
  205 + field: SchemaFiled.ORDER_BY,
  206 + label: '数据排序',
  207 + component: 'Select',
  208 + defaultValue: OrderByEnum.ASC,
  209 + componentProps: {
  210 + options: Object.values(OrderByEnum).map((value) => ({
  211 + value,
  212 + label: OrderByNameEnum[value],
  213 + })),
  214 + },
  215 + },
203 ]; 216 ];
204 }; 217 };
205 218
@@ -22,6 +22,7 @@ @@ -22,6 +22,7 @@
22 import { ModalParamsType } from '/#/utils'; 22 import { ModalParamsType } from '/#/utils';
23 import { WidgetDataType } from '../../hooks/useDataSource'; 23 import { WidgetDataType } from '../../hooks/useDataSource';
24 import { ExtraDataSource } from '../../types'; 24 import { ExtraDataSource } from '../../types';
  25 + import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
25 26
26 type DeviceOption = Record<'label' | 'value' | 'organizationId', string>; 27 type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
27 28
@@ -211,6 +212,7 @@ @@ -211,6 +212,7 @@
211 endTs: Date.now(), 212 endTs: Date.now(),
212 agg: AggregateDataEnum.NONE, 213 agg: AggregateDataEnum.NONE,
213 limit: 7, 214 limit: 7,
  215 + orderBy: OrderByEnum.ASC,
214 }); 216 });
215 historyData.value = getTableHistoryData(res); 217 historyData.value = getTableHistoryData(res);
216 // 判断对象是否为空 218 // 判断对象是否为空