Merge branch 'feat/board-control-add-password' into 'main_dev'

feat: 看板控制组件添加操作密码等逻辑 和修改teambition上的问题

See merge request yunteng/thingskit-front!948

@@ -6,6 +6,7 @@
       v-model:value="param.attributes"
       class="!w-1/2"
       :options="selectOptions"
+      v-bind="createPickerSearch()"
       :disabled="disabled"
       @change="emitChange"
       mode="multiple"
@@ -24,6 +25,7 @@
   import { Select } from 'ant-design-vue';
   import { Params } from '../type/';
   import { useHooks } from '../hooks/index.hooks';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
 
   const props = defineProps({
     value: propTypes.object.def({}),

@@ -32,12 +32,10 @@
                   class="min-w-25"
                   v-model:value="item.active"
                   @change="(value) => handleChangeChars(value, item.device, item)"
+                  v-bind="createPickerSearch()"
                   placeholder="请选择设备属性"
-                >
-                  <Select.Option v-for="attr in item.attributes" :key="attr" :value="attr">
-                    {{ attr }}
-                  </Select.Option>
-                </Select>
+                  :options="item?.attributes?.map((item1) => ({ label: item1, value: item1 }))"
+                />
               </div>
               <div class="w-full h-full flex justify-center items-center">
                 <Empty v-show="item.notFoundData" description="暂无数据" class="text-dark-50" />
@@ -65,6 +63,7 @@
   import moment from 'moment';
   import { ExecuteReportRecord } from '/@/api/export/model/exportModel';
   import { Select, Spin, Empty } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
 
   interface ResponsData {
     attr: string;

@@ -8,6 +8,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
 // import { unref } from 'vue';
 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
 import { MasterDeviceList } from '/@/api/dataBoard/model';
+import { createPickerSearch } from '/@/utils/pickerSearch';
 
 export const formSchemas = (): FormSchema[] => {
   // const mode = useSelectWidgetMode();
@@ -150,7 +151,6 @@ export const formSchemas = (): FormSchema[] => {
             return [];
           },
           onChange(_value, record: MasterDeviceList) {
-            console.log(record, 'record');
             setFieldsValue({
               [DataSourceField.DEVICE_NAME]: record?.label,
               deviceIds: record?.id,
@@ -158,6 +158,7 @@ export const formSchemas = (): FormSchema[] => {
           },
           placeholder: '请选择设备',
           getPopupContainer: () => document.body,
+          ...createPickerSearch(),
         };
       },
     },

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.PASS_WORD]: '',
   // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 

@@ -14,10 +14,10 @@
       //   defaultValue: option.fontColor,
       // },
       {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
       },
       {
         field: ComponentConfigFieldEnum.FONT_SIZE,
@@ -25,6 +25,12 @@
         component: 'InputNumber',
         defaultValue: 14,
       },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -9,6 +9,8 @@
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { getSendValues } from '../config';
+  import { useModal } from '/@/components/Modal';
+  import PasswordModal from '../component/PasswordModal.vue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -31,11 +33,13 @@
       deviceCode,
       customCommand,
     } = option;
-    const { fontSize: persetFontSize } = persetOption || {};
-    const { fontSize } = componentInfo || {};
+
+    const { fontSize: persetFontSize, password: persetPassword } = persetOption || {};
+    const { fontSize, password } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       fontSize: fontSize || persetFontSize || 14,
+      password: password || persetPassword,
       extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
       commandType,
       codeType,
@@ -45,7 +49,31 @@
   });
 
   const { sendCommand, loading } = useSendCommand();
+
+  const handleSendCommand = async (data) => {
+    const { control: event } = data || {};
+    const target = event.target as HTMLInputElement;
+    const value = !target.checked;
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
+    if (flag) currentValue.value = value;
+    flag ? (currentValue.value = value) : (target.checked = !value);
+  };
+
   const handleChange = async (event: Event) => {
+    if (unref(getDesign).password) {
+      const target = event.target as HTMLInputElement;
+      const value = target.checked;
+      target.checked = !value;
+      currentValue.value = !value;
+      openModal(true, { password: unref(getDesign).password, control: event });
+      return;
+    }
+
     const target = event.target as HTMLInputElement;
     const value = target.checked;
     const { option } = props.config || {};
@@ -66,6 +94,8 @@
   };
 
   useDataFetch(props, updateFn);
+
+  const [registerModal, { openModal }] = useModal();
 </script>
 
 <template>
@@ -95,6 +125,8 @@
         </div>
       </Spin>
     </main>
+
+    <PasswordModal @register="registerModal" @success="handleSendCommand" />
   </main>
 </template>
 

@@ -14,6 +14,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.PASS_WORD]: '',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -38,6 +38,12 @@
         component: 'InputNumber',
         defaultValue: option.fontSize,
       },
+      {
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -11,6 +11,8 @@
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { getSendValues } from '../config';
+  import { useModal } from '/@/components/Modal';
+  import PasswordModal from '../component/PasswordModal.vue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -35,8 +37,9 @@
       icon: presetIcon,
       iconColor: presetIconColor,
       fontSize: persetFontSize,
+      password: persetPassword,
     } = persetOption || {};
-    const { icon, iconColor, fontSize } = componentInfo || {};
+    const { icon, iconColor, fontSize, password } = componentInfo || {};
 
     return {
       icon: icon ?? presetIcon,
@@ -44,6 +47,7 @@
       attribute: attributeRename || attributeName || attribute,
       extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
       fontSize: fontSize || persetFontSize || 14,
+      password: password || persetPassword,
       commandType,
       codeType,
       deviceCode,
@@ -54,6 +58,11 @@
   const { sendCommand, loading } = useSendCommand();
 
   const handleChange = async () => {
+    if (unref(getDesign).password) {
+      openModal(true, { password: unref(getDesign).password });
+      checked.value = !unref(checked);
+      return;
+    }
     const { option } = props.config || {};
 
     const { values, isModbusCommand, sendValue } =
@@ -67,6 +76,21 @@
     if (!flag) checked.value = !unref(checked);
   };
 
+  const handleSendCommand = async () => {
+    const { option } = props.config || {};
+    checked.value = !unref(checked);
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), unref(checked))) || {};
+
+    const flag = await sendCommand(
+      values,
+      isModbusCommand ? sendValue : unref(checked),
+      isModbusCommand
+    );
+    if (!flag) checked.value = !unref(checked);
+  };
+
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
@@ -76,6 +100,8 @@
 
   useDataFetch(props, updateFn);
   const { getScale, getRatio } = useComponentScale(props);
+
+  const [registerModal, { openModal }] = useModal();
 </script>
 
 <template>
@@ -105,5 +131,6 @@
         @change="handleChange"
       />
     </main>
+    <PasswordModal @register="registerModal" @success="handleSendCommand" />
   </main>
 </template>

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '../../../enum';
 export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.PASS_WORD]: '',
   // [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
 };
 

@@ -24,6 +24,12 @@
         component: 'InputNumber',
         defaultValue: option.fontSize,
       },
+      {
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -9,6 +9,8 @@
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { getSendValues } from '../config';
+  import PasswordModal from '../component/PasswordModal.vue';
+  import { useModal } from '/@/components/Modal';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -31,11 +33,12 @@
       customCommand,
       componentInfo,
     } = option;
-    const { fontSize: persetFontSize } = persetOption || {};
-    const { fontSize } = componentInfo || {};
+    const { fontSize: persetFontSize, password: persetPassword } = persetOption || {};
+    const { fontSize, password } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      password: password || persetPassword,
       commandType,
       codeType,
       deviceCode,
@@ -46,6 +49,15 @@
 
   const { loading, sendCommand } = useSendCommand();
   const handleChange = async (event: Event) => {
+    if (unref(getDesign).password) {
+      const target = event.target as HTMLInputElement;
+      const value = target.checked;
+      target.checked = !value;
+      currentValue.value = !value;
+      openModal(true, { password: unref(getDesign).password, control: event });
+      return;
+    }
+
     const target = event.target as HTMLInputElement;
     const value = target.checked;
     const { option } = props.config || {};
@@ -57,6 +69,19 @@
     flag ? (currentValue.value = value) : (target.checked = !value);
   };
 
+  const handleSendCommand = async (data) => {
+    const { control: event } = data || {};
+    const target = event.target as HTMLInputElement;
+    const value = !target.checked;
+    const { option } = props.config || {};
+
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(option, unref(getDesign), value)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
+    flag ? (currentValue.value = value) : (target.checked = !value);
+  };
+
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
@@ -65,6 +90,7 @@
   };
 
   useDataFetch(props, updateFn);
+  const [registerModal, { openModal }] = useModal();
 </script>
 
 <template>
@@ -94,6 +120,8 @@
         >
       </Spin>
     </main>
+
+    <PasswordModal @register="registerModal" @success="handleSendCommand" />
   </main>
 </template>
 

@@ -18,6 +18,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.PASS_WORD]: '',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -87,6 +87,13 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+
+      {
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -13,6 +13,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
   import { genModbusCommand } from '/@/api/task';
+  import PasswordModal from '../component/PasswordModal.vue';
+  import { useModal } from '/@/components/Modal';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -46,9 +48,18 @@
       textColor: persetTextColor,
       valueSize: persetValueSize,
       fontSize: persetFontSize,
+      password: persetPassword,
     } = persetOption || {};
-    const { controlBarColor, fontColor, minNumber, maxNumber, textColor, valueSize, fontSize } =
-      componentInfo || {};
+    const {
+      controlBarColor,
+      password,
+      fontColor,
+      minNumber,
+      maxNumber,
+      textColor,
+      valueSize,
+      fontSize,
+    } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
@@ -63,6 +74,7 @@
       textColor: textColor || persetTextColor,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
+      password: password || persetPassword,
     };
   });
 
@@ -82,6 +94,7 @@
   const handleAfterChange = async () => {
     unref(sliderEl)?.blur();
     if (unref(sliderValue) == unref(afterValue)) return;
+    if (unref(getDesign).password) return;
     sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
   };
 
@@ -169,6 +182,33 @@
   };
 
   const handleBlur = async () => {
+    if (unref(getDesign).password) {
+      sliderValue.value = oldSliderValue.value;
+      openModal(true, { password: unref(getDesign).password, value: afterValue.value });
+      return;
+    }
+
+    if (unref(oldSliderValue) !== unref(sliderValue)) {
+      const { codeType, customCommand } = unref(getDesign) || {};
+      const { transportType } = customCommand || {};
+      const sendValue = ref<any>(unref(sliderValue));
+      const isModbusCommand = ref<boolean>(false);
+      if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
+        sendValue.value = await getSendValue(unref(sliderValue));
+        isModbusCommand.value = true;
+      }
+      const flag = await sendCommand(props.config.option, unref(sendValue), unref(isModbusCommand));
+      flag
+        ? ((sliderValue.value = unref(sliderValue)),
+          (oldSliderValue.value = sliderValue.value),
+          (index.value = 0))
+        : (sliderValue.value = unref(oldSliderValue));
+    }
+  };
+
+  const handleSendCommand = async (data) => {
+    const { value } = data || {};
+    sliderValue.value = value;
     if (unref(oldSliderValue) !== unref(sliderValue)) {
       const { codeType, customCommand } = unref(getDesign) || {};
       const { transportType } = customCommand || {};
@@ -199,6 +239,7 @@
 
   useDataFetch(props, updateFn);
   const { getScale, getRatio } = useComponentScale(props);
+  const [registerModal, { openModal }] = useModal();
 </script>
 
 <template>
@@ -244,6 +285,7 @@
         </div>
       </Spin>
     </main>
+    <PasswordModal @register="registerModal" @success="handleSendCommand" />
   </main>
 </template>
 <style lang="less" scoped>

@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
+  [ComponentConfigFieldEnum.PASS_WORD]: '',
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -38,6 +38,12 @@
         component: 'Checkbox',
         defaultValue: option.showDeviceName,
       },
+      {
+        field: ComponentConfigFieldEnum.PASS_WORD,
+        label: '操作密码',
+        component: 'InputPassword',
+        defaultValue: '',
+      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -14,6 +14,8 @@
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { DataSource } from '/@/views/visual/palette/types';
   import { getSendValues, CommandTypeEnumLIst } from '../config';
+  import { useModal } from '/@/components/Modal';
+  import PasswordModal from '../component/PasswordModal.vue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -53,10 +55,12 @@
       icon: persetIcon,
       iconColor: persetIconColor,
       fontSize: persetFontSize,
+      password: persetPassword,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { fontColor, icon, iconColor, unit, showDeviceName, fontSize } = item.componentInfo;
+        const { fontColor, icon, iconColor, unit, showDeviceName, password, fontSize } =
+          item.componentInfo;
         const {
           attribute,
           attributeRename,
@@ -86,13 +90,19 @@
           deviceCode,
           customCommand,
           fontSize: fontSize || persetFontSize || 14,
+          password: password || persetPassword,
         };
       }),
     };
   });
 
   const { loading, sendCommand } = useSendCommand();
-  const handleChange = async (index: number, checked: Boolean) => {
+  const handleChange = async (index: number, checked: Boolean, item: any) => {
+    if (item.password) {
+      openModal(true, { password: item.password, index, checked });
+      controlList.value[index].checked = !checked;
+      return;
+    }
     const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
       props.config.option;
     const data = {
@@ -120,6 +130,25 @@
         })
       : svgList
   );
+  const handleSendCommand = async (modalData) => {
+    const { index, checked } = modalData || {};
+    const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
+      props.config.option;
+    const data = {
+      ...dataSource?.[index],
+      heightPx,
+      itemHeightRatio,
+      itemWidthRatio,
+      mode,
+      widthPx,
+    } as DataSource;
+    controlList.value[index].checked = checked;
+    const { values, isModbusCommand, sendValue } =
+      (await getSendValues(data, unref(getDesign).dataSource[index], checked)) || {};
+
+    const flag = await sendCommand(values, isModbusCommand ? sendValue : checked, isModbusCommand);
+    if (!flag) controlList.value[index].checked = !checked;
+  };
 
   const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
     forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
@@ -133,6 +162,7 @@
 
   useMultipleDataFetch(props, updateFn);
   const { getRatio } = useComponentScale(props);
+  const [registerModal, { openModal }] = useModal();
 </script>
 
 <template>
@@ -166,9 +196,10 @@
       <Switch
         v-model:checked="item.checked"
         :loading="loading"
-        @change="handleChange(index, item.checked)"
+        @change="handleChange(index, item.checked, item)"
         :style="{ transform: `scale(${getRatio || 1})` }"
       />
     </div>
+    <PasswordModal @register="registerModal" @success="handleSendCommand" />
   </main>
 </template>

+<template>
+  <div>
+    <BasicModal
+      destroyOnClose
+      v-bind="$attrs"
+      width="30rem"
+      :height="50"
+      :minHeight="50"
+      @register="register"
+      title="操作密码"
+      @ok="handleSuccess"
+      @cancel="handleClose"
+    >
+      <div>
+        <BasicForm @register="registerForm" />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { formSchema } from './config';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref, unref } from 'vue';
+
+  const emit = defineEmits(['register', 'success', 'cancel']);
+
+  const persetData = ref<{ [key: string]: string | number }>({});
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { getFieldsValue, validate }] = useForm({
+    labelWidth: 70,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    persetData.value = data;
+    setModalProps({ loading: false });
+  });
+
+  const handleClose = () => {
+    emit('cancel');
+    closeModal();
+  };
+
+  const handleSuccess = async () => {
+    await validate();
+    const { password: passwordField } = getFieldsValue();
+    if (unref(persetData).password != passwordField) {
+      createMessage.warning('操作密码不正确');
+      return;
+    }
+    emit('success', unref(persetData));
+    closeModal();
+  };
+</script>
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'password',
+    label: '操作密码',
+    colProps: { span: 16 },
+    component: 'InputPassword',
+    required: true,
+    componentProps: {
+      placeholder: '请输入操作密码',
+      max: 120,
+    },
+  },
+];

@@ -15,6 +15,7 @@ import { TransportTypeEnum } from '/@/views/device/profiles/components/Transport
 import { CommandTypeEnum } from '/@/views/rule/linkedge/config/config.data';
 import { DataActionModeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
+import { createPickerSearch } from '/@/utils/pickerSearch';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -247,6 +248,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           },
           placeholder: '请选择设备',
           getPopupContainer: () => document.body,
+          ...createPickerSearch(),
         };
       },
     },
@@ -387,6 +389,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
               [DataSourceField.EXTENSION_DESC]: value ? JSON.stringify(option.extensionDesc) : '',
             });
           },
+          ...createPickerSearch(),
         };
       },
     },

@@ -35,4 +35,5 @@ export enum ComponentConfigFieldEnum {
   CLOSE_COLOR = 'closeColor',
   MIN_NUMBER = 'minNumber',
   MAX_NUMBER = 'maxNumber',
+  PASS_WORD = 'password', //操作密码
 }