ipanel-rnapp-ajb-base 1.0.0

package/app/components/iot/ViewDeviceActionSheet/index.js

@@ -0,0 +1,834 @@
+import React, { useState, useEffect } from "react";
+import { View, Text, StyleSheet, Alert, ScrollView } from "react-native";
+import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import { Icon, Button } from "@rneui/themed";
+import { Cell, Picker } from "../../index";
+import {
+  adjustDevice,
+  moveDevice,
+  getRoomDeviceStatuses,
+  taskNotify,
+} from "../../../api";
+
+const { storage, navigate } = global.base;
+
+const switchUsages = [
+  {
+    name: "控制灯",
+    value: "IGOT_LIGHT",
+  },
+  {
+    name: "控制排气风扇",
+    value: "IGOT_FAN",
+  },
+  {
+    name: "默认",
+    value: "",
+  },
+];
+
+const lightUsages = [
+  {
+    name: "吊灯",
+    value: "PENDENT_LAMP",
+  },
+  {
+    name: "吸顶灯",
+    value: "CEILING_LIGHT",
+  },
+  {
+    name: "筒灯",
+    value: "DOWN_LIGHT",
+  },
+  {
+    name: "灯带",
+    value: "LIGHT_BELT",
+  },
+  {
+    name: "床头灯",
+    value: "BEDSIDE_LAMP",
+  },
+  {
+    name: "镜前灯",
+    value: "MIRROR_LIGHT",
+  },
+  {
+    name: "过道灯",
+    value: "CORRIDOR_LAMP",
+  },
+  {
+    name: "玄关灯",
+    value: "PORCH_LIGHT",
+  },
+  {
+    name: "台灯",
+    value: "DESK_LAMP",
+  },
+  {
+    name: "壁灯",
+    value: "WALL_LAMP",
+  },
+  {
+    name: "餐厅灯",
+    value: "RESTAURANT_LIGHT",
+  },
+  {
+    name: "浴室灯",
+    value: "BATHROOM_LIGHT",
+  },
+  {
+    name: "厨房灯",
+    value: "KITCHEN_LIGHT",
+  },
+  {
+    name: "默认",
+    value: "",
+  },
+];
+
+// 公共设备类型，只能添加到“储物间”（room_type === "STORAGEROOM"）
+const publicDeviceTypes = ["scale", "hematometer"];
+
+// 跳转到设备功能页前需要初始化该参数对象，并传递过去
+let currentPageOptions = {};
+
+function isStorageRoom(room) {
+  return room.room_type === "STORAGEROOM";
+}
+
+function iteeConfigureNetwork(barcode) {
+  const screen = "Itee";
+
+  navigate(screen, currentPageOptions);
+}
+
+function iteeStudyMode() {
+  const screen = "IteeStudy"; // todo 填写实际的screen name
+
+  currentPageOptions.itee_id = currentPageOptions.device_id;
+  navigate(screen, currentPageOptions);
+}
+
+function wxdLightReset() {
+  const screen = "WuXianDao";
+
+  currentPageOptions.reset = 1;
+  navigate(screen, currentPageOptions);
+}
+
+function wxdLightRepair() {
+  const screen = "WuXianDao";
+
+  navigate(screen, currentPageOptions);
+}
+
+function supportSub1gGroup(device_type, brand, model, emit) {
+  if (emit !== "sub1g") {
+    return false;
+  }
+
+  if (device_type === "igot" && brand === "kingserry" && model === "IGRL0012") {
+    return true;
+  }
+
+  return false;
+}
+
+function supportBleGroup(device_type, brand, model, emit) {
+  if (emit !== "blebc") {
+    return false;
+  }
+
+  if (device_type === "light" && brand === "YHWL") {
+    return true;
+  }
+
+  return false;
+}
+
+function supportCodeGroup(device_type, brand, model, emit) {
+  return (
+    supportSub1gGroup(device_type, brand, model, emit) ||
+    supportBleGroup(device_type, brand, model, emit)
+  );
+}
+
+function isDef(val) {
+  return typeof val !== "undefined";
+}
+
+function getDeviceStatusStructure(deviceStatusStructures, device) {
+  for (let i = 0; i < deviceStatusStructures.length; i++) {
+    const item = deviceStatusStructures[i];
+
+    for (let j = 0; j < item.match.length; j++) {
+      const matchItem = item.match[j];
+
+      let isMatch = true;
+      const device_type_CompareFlag = isDef(matchItem.device_type);
+      const extend_brand_CompareFlag =
+        matchItem.extend && isDef(matchItem.extend.brand);
+      const extend_model_CompareFlag =
+        matchItem.extend && isDef(matchItem.extend.model);
+      const extend_device_type_CompareFlag =
+        matchItem.extend && isDef(matchItem.extend.device_type);
+
+      if (
+        (device_type_CompareFlag &&
+          matchItem.device_type !== device.device_type) ||
+        (extend_brand_CompareFlag &&
+          matchItem.extend.brand !== device.extend.brand) ||
+        (extend_model_CompareFlag &&
+          matchItem.extend.model !== device.extend.model) ||
+        (extend_device_type_CompareFlag &&
+          matchItem.extend.device_type !== device.extend.device_type)
+      ) {
+        isMatch = false;
+      }
+
+      if (isMatch) {
+        return item.structure;
+      }
+    }
+  }
+}
+
+const DeviceActionSheet = ({ sheetId, payload }) => {
+  let title = "设备信息";
+  const submitBtnText = "保存";
+
+  const curDevice = payload.device;
+  // console.log(curDevice);
+
+  // 设备类型
+  const targetDeviceType = payload.deviceTypeList.find(
+    (item) => item.class === curDevice.device_type
+  );
+  const curDeviceType = targetDeviceType.class;
+  const deviceTypeName = targetDeviceType.title;
+
+  const statusStructure = getDeviceStatusStructure(
+    payload.deviceStatusStructures,
+    curDevice
+  );
+  const [deviceStatus, setDeviceStatus] = useState({});
+
+  const updateDeviceStatus = async (data) => {
+    console.log(data);
+    setDeviceStatus(data);
+
+    const activeAddr = await storage.get("activeAddr");
+
+    const result = await taskNotify({
+      room_id: payload.room.room_id,
+      user_id: activeAddr.user_id,
+      data: {
+        [curDevice.extend.id]: data,
+      },
+      trigger: {
+        immediate: 1, // 立即执行
+      },
+    });
+    if (result && result.code === 0) {
+      global.toast.showToast("指令已发送，看看设备状态吧");
+    } else {
+      global.toast.showToast(result ? result.message : "网络异常");
+    }
+  };
+
+  useEffect(() => {
+    getRoomDeviceStatuses({
+      room_id: payload.room.room_id,
+    }).then((res) => {
+      if (res.code === 0) {
+        const status = res.result[curDevice.extend.id] || {};
+        setDeviceStatus(status);
+      }
+    });
+  }, []);
+
+  // 品牌型号
+  let brandModelText = "未知";
+  let selectedBrand = {};
+  let selectedModel = {};
+  if (curDevice.extend.brand && curDevice.extend.model) {
+    const brand = targetDeviceType.brands.find(
+      (brand) => brand.code === curDevice.extend.brand
+    );
+    if (brand) {
+      selectedBrand = brand;
+      const model = selectedBrand.models.find(
+        (model) => model.code === curDevice.extend.model
+      );
+      if (model) {
+        selectedModel = model;
+        brandModelText = `${selectedBrand.name} ${selectedModel.name}`;
+      } else {
+        brandModelText = `${selectedBrand.name} ${curDevice.extend.model}`;
+      }
+    } else {
+      brandModelText = curDevice.extend.brand;
+    }
+  }
+
+  let tvid = "";
+  if (curDeviceType === "tv") {
+    tvid = curDevice.device_mac;
+  }
+
+  let barcode = "";
+  if (curDevice.extend.barcode) {
+    barcode = curDevice.extend.barcode;
+  }
+
+  // 设备名称
+  const [deviceName, setDeviceName] = useState(curDevice.device_name);
+
+  // 开关用途
+  let defaultSwitchUsageIndex = switchUsages.findIndex(
+    (item) => item.value === (curDevice.extend.switch_usage || "")
+  );
+  let defaultSwitchUsageName = switchUsages[defaultSwitchUsageIndex]
+    ? switchUsages[defaultSwitchUsageIndex].name
+    : "";
+  const [switchUsageIndex, setSwitchUsageIndex] = useState(
+    defaultSwitchUsageIndex
+  );
+  const [switchUsage, setSwitchUsage] = useState(defaultSwitchUsageName);
+  const handleShowSwitchUsagePicker = async () => {
+    const result = await SheetManager.show("action-picker", {
+      context: "global",
+      payload: {
+        title: "选择开关用途",
+        defaultIndex: switchUsageIndex,
+        columns: switchUsages,
+        nameProp: "name",
+      },
+    });
+    if (result) {
+      setSwitchUsageIndex(result.index);
+      setSwitchUsage(result.data.name);
+    }
+  };
+
+  // 灯光用途
+  let defaultLightUsageIndex = lightUsages.findIndex(
+    (item) => item.value === (curDevice.extend.light_usage || "")
+  );
+  let defaultLightUsageName = lightUsages[defaultLightUsageIndex]
+    ? lightUsages[defaultLightUsageIndex].name
+    : "";
+  const [lightUsageIndex, setLightUsageIndex] = useState(
+    defaultLightUsageIndex
+  );
+  const [lightUsage, setLightUsage] = useState(defaultLightUsageName);
+  const handleShowLightUsagePicker = async () => {
+    const result = await SheetManager.show("action-picker", {
+      context: "global",
+      payload: {
+        title: "选择灯光用途",
+        defaultIndex: lightUsageIndex,
+        columns: lightUsages,
+        nameProp: "name",
+      },
+    });
+    if (result) {
+      setLightUsageIndex(result.index);
+      setLightUsage(result.data.name);
+
+      if (!deviceName) {
+        setDeviceName(result.data.name);
+      }
+    }
+  };
+
+  // 选择房间
+  let defaultRoomIndex = payload.roomList.findIndex(
+    (room) => room.room_id === payload.room.room_id
+  );
+  let defaultRoomName = payload.roomList[defaultRoomIndex]
+    ? payload.roomList[defaultRoomIndex].room_name
+    : "";
+  const [roomIndex, setRoomIndex] = useState(defaultRoomIndex);
+  const [roomName, setRoomName] = useState(defaultRoomName);
+  const handleShowRoomPicker = async () => {
+    const result = await SheetManager.show("action-picker", {
+      context: "global",
+      payload: {
+        title: "选择房间",
+        defaultIndex: roomIndex,
+        columns: payload.roomList,
+        nameProp: "room_name",
+      },
+    });
+
+    if (result) {
+      if (curDeviceType) {
+        const isPickingStorageRoom = isStorageRoom(result.data);
+        if (
+          publicDeviceTypes.includes(curDeviceType) &&
+          !isPickingStorageRoom
+        ) {
+          Alert.alert("公共设备不能加入储物间以外的房间");
+          return;
+        }
+        if (
+          !publicDeviceTypes.includes(curDeviceType) &&
+          isPickingStorageRoom
+        ) {
+          Alert.alert("非公共设备不能加入储物间");
+          return;
+        }
+      }
+
+      setRoomIndex(result.index);
+      setRoomName(result.data.room_name);
+    }
+  };
+
+  const curBrand = selectedBrand.code;
+  const curModel = selectedModel.code;
+
+  // 支持根据条码生成码值的通断器
+  const hasBarcodeSwitch = (() => {
+    if (curDeviceType === "igot") {
+      if (
+        (curBrand === "kingserry" && curModel === "IGRL0012") ||
+        (curBrand === "yibailong" && curModel === "IGRL0021") ||
+        (curBrand === "shengbiao" && curModel === "IGRLN041")
+      ) {
+        return true;
+      }
+    }
+    return false;
+  })();
+  // 易百珑随意贴
+  const isYblSyt = (() => {
+    if (curDeviceType === "ifree") {
+      if (curBrand === "yibailong" && curModel === "ITFKE101W") {
+        return true;
+      }
+    }
+    return false;
+  })();
+  // 当前要添加的设备是否为需要学习码值的433随意贴
+  const isSub1gLearningSuiyitieSelected = (() => {
+    if (curDeviceType === "ifree") {
+      if (
+        (curBrand === "kingserry" && curModel === "ITFBT101W") ||
+        (curBrand === "lingpu" && curModel === "ITFKR101W")
+      ) {
+        return true;
+      }
+    }
+    return false;
+  })();
+
+  const hasChanged = (() => {
+    const oldSwitchUsage = curDevice.extend.switch_usage || "";
+    const oldLightUsage = curDevice.extend.light_usage || "";
+    if (
+      deviceName !== curDevice.device_name ||
+      switchUsages[switchUsageIndex].value !== oldSwitchUsage ||
+      lightUsages[lightUsageIndex].value !== oldLightUsage ||
+      payload.roomList[roomIndex].room_id !== payload.room.room_id
+    ) {
+      return true;
+    }
+
+    return false;
+  })();
+
+  currentPageOptions = {
+    device_type: curDeviceType,
+    brand: curBrand,
+    model: curModel,
+    room_id: payload.room.room_id,
+    device_id: curDevice.device_id,
+  };
+
+  const handleThermostatControl = () => {
+    navigate("ThermostatControlScreen", {
+      room_id: currentPageOptions.room_id,
+      extend_key: curDevice.extend.id,
+      device_status: deviceStatus,
+    });
+    SheetManager.hide(sheetId);
+  };
+
+  const [isSaveBtnDisabled, setIsSaveBtnDisabled] = useState(false);
+  const handleSaveDevice = async () => {
+    if (deviceName === "") {
+      Alert.alert("请输入设备名称");
+      return;
+    }
+    if (roomName === "") {
+      Alert.alert("请选择设备位置");
+      return;
+    }
+    setIsSaveBtnDisabled(true);
+
+    let res1, res2;
+
+    const adjustParams = {};
+
+    if (deviceName !== curDevice.device_name) {
+      adjustParams.device_name = deviceName;
+    }
+    const oldSwitchUsage = curDevice.extend.switch_usage || "";
+    if (switchUsages[switchUsageIndex].value !== oldSwitchUsage) {
+      adjustParams.extend = {
+        switch_usage: switchUsages[switchUsageIndex].value,
+      };
+    }
+    const oldLightUsage = curDevice.extend.light_usage || "";
+    if (lightUsages[lightUsageIndex].value !== oldLightUsage) {
+      adjustParams.extend = {
+        light_usage: lightUsages[lightUsageIndex].value,
+        ...(adjustParams.extend || {}),
+      };
+    }
+
+    if (Object.keys(adjustParams).length > 0) {
+      res1 = await adjustDevice({
+        room_id: payload.room.room_id,
+        device_id: curDevice.device_id,
+        ...adjustParams,
+      });
+    }
+
+    if (payload.roomList[roomIndex].room_id !== payload.room.room_id) {
+      res2 = await moveDevice({
+        room_id: payload.room.room_id,
+        device_id: curDevice.device_id,
+        new_room_id: payload.roomList[roomIndex].room_id,
+      });
+    }
+
+    if ((res1 && res1.code === 0) || (res2 && res2.code === 0)) {
+      SheetManager.hide(sheetId, {
+        payload: {
+          room_id: payload.room.room_id,
+        },
+      });
+    }
+    setIsSaveBtnDisabled(false);
+  };
+
+  return (
+    <>
+      <ActionSheet id={sheetId} isModal={false} useBottomSafeAreaPadding>
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{title}</Text>
+          <View style={styles.closeBtn}>
+            <Icon
+              name="close"
+              type="ionicon"
+              size={28}
+              color="#999"
+              onPress={() => {
+                SheetManager.hide(sheetId);
+              }}
+            />
+          </View>
+        </View>
+
+        <ScrollView keyboardShouldPersistTaps="handled">
+          <View style={styles.contentBlock}>
+            <View style={styles.contentBlockHeader}>
+              <Text style={styles.contentBlockTitle}>基础信息</Text>
+            </View>
+
+            {/* 不可修改属性 */}
+            <Cell
+              style={styles.disabledCell}
+              type="text"
+              label="智能设备"
+              value={deviceTypeName}
+            />
+            {targetDeviceType &&
+              targetDeviceType.brands &&
+              targetDeviceType.brands.length > 0 &&
+              curDeviceType !== "itee" && (
+                <Cell
+                  style={styles.disabledCell}
+                  type="text"
+                  label="品牌型号"
+                  value={brandModelText}
+                />
+              )}
+
+            {curDeviceType === "tv" && (
+              <Cell
+                type="text"
+                label="电视ID"
+                value={tvid}
+                style={styles.disabledCell}
+              />
+            )}
+            {(curDeviceType === "itee" || hasBarcodeSwitch || isYblSyt) && (
+              <Cell
+                type="text"
+                label="机身条码"
+                value={barcode}
+                style={styles.disabledCell}
+              />
+            )}
+
+            {/* 可修改属性 */}
+            <Cell
+              type="input"
+              label="设备名称"
+              value={deviceName}
+              placeholder="请输入设备名称"
+              onChangeText={(text) => setDeviceName(text)}
+            />
+            {curDeviceType === "igot" && (
+              <Cell
+                type="link"
+                label="开关用途"
+                value={switchUsage}
+                onRightPress={handleShowSwitchUsagePicker}
+              />
+            )}
+            {((curDeviceType === "igot" &&
+              switchUsages[switchUsageIndex].value === "IGOT_LIGHT") ||
+              curDeviceType === "light") && (
+              <Cell
+                type="link"
+                label="灯光用途"
+                value={lightUsage}
+                onRightPress={handleShowLightUsagePicker}
+              />
+            )}
+            <Cell
+              type="link"
+              label="设备位置"
+              value={roomName}
+              onRightPress={handleShowRoomPicker}
+            />
+
+            {hasChanged && (
+              <View>
+                <Button
+                  title={submitBtnText}
+                  disabled={isSaveBtnDisabled}
+                  size="lg"
+                  onPress={handleSaveDevice}
+                />
+              </View>
+            )}
+          </View>
+
+          {statusStructure && (
+            <View style={styles.contentBlock}>
+              <View style={styles.contentBlockHeader}>
+                <Text style={styles.contentBlockTitle}>远程控制</Text>
+                {curDeviceType === "thermostat" &&
+                  Object.keys(deviceStatus).length > 0 && (
+                    <Button
+                      title="高级控制"
+                      size="sm"
+                      onPress={handleThermostatControl}
+                    />
+                  )}
+              </View>
+
+              {Object.keys(deviceStatus).length === 0 && (
+                <Text style={{ textAlign: "center" }}>
+                  设备状态未知，请控制一次进行状态记录
+                </Text>
+              )}
+
+              {Object.entries(statusStructure).map(
+                ([statusKey, descriptor]) => {
+                  switch (descriptor.type) {
+                    case "switch":
+                      return (
+                        <Cell
+                          type="switch"
+                          label={descriptor.name}
+                          key={statusKey}
+                          value={!!deviceStatus[statusKey]}
+                          onValueChange={(val) => {
+                            updateDeviceStatus({
+                              ...deviceStatus,
+                              [statusKey]: val ? 1 : 0,
+                            });
+                          }}
+                        />
+                      );
+                    case "range":
+                      return deviceStatus.power ? (
+                        <Cell
+                          type="slider"
+                          label={descriptor.name}
+                          key={statusKey}
+                          value={deviceStatus[statusKey]}
+                          sliderOptions={{
+                            min: descriptor.min,
+                            max: descriptor.max,
+                            onSlidingComplete: (val) => {
+                              updateDeviceStatus({
+                                ...deviceStatus,
+                                [statusKey]: val,
+                              });
+                            },
+                          }}
+                        />
+                      ) : null;
+                    case "enum":
+                      const selectedIndex = descriptor.list.findIndex(
+                        (item) => item.value === deviceStatus[statusKey]
+                      );
+                      return deviceStatus.power ? (
+                        <Cell
+                          type="enum"
+                          label={descriptor.name}
+                          key={statusKey}
+                          value={selectedIndex}
+                          enumButtons={descriptor.list.map((item) => item.name)}
+                          onValueChange={(index) => {
+                            updateDeviceStatus({
+                              ...deviceStatus,
+                              [statusKey]: descriptor.list[index].value,
+                            });
+                          }}
+                        />
+                      ) : null;
+                  }
+                }
+              )}
+            </View>
+          )}
+
+          {supportCodeGroup(
+            curDeviceType,
+            curBrand,
+            curModel,
+            curDevice.extend.emit
+          ) && (
+            <View style={styles.contentBlock}>
+              <View style={styles.contentBlockHeader}>
+                <Text style={styles.contentBlockTitle}>控制分组</Text>
+              </View>
+            </View>
+          )}
+
+          {(curDeviceType === "itee" ||
+            (curDeviceType === "light" && curBrand === "WXD")) && (
+            <View style={styles.contentBlock}>
+              <View style={styles.contentBlockHeader}>
+                <Text style={styles.contentBlockTitle}>更多功能</Text>
+              </View>
+
+              {curDeviceType === "itee" && (
+                <>
+                  <View style={styles.featureBtnGroup}>
+                    <Button
+                      containerStyle={styles.featureBtn}
+                      title="配网"
+                      size="md"
+                      onPress={() => {
+                        iteeConfigureNetwork();
+                        SheetManager.hide(sheetId);
+                      }}
+                    />
+                    <Button
+                      containerStyle={styles.featureBtn}
+                      title="学习模式（开发测试用）"
+                      size="md"
+                      onPress={() => {
+                        iteeStudyMode();
+                        SheetManager.hide(sheetId);
+                      }}
+                    />
+                  </View>
+                </>
+              )}
+
+              {curDeviceType === "light" && curBrand === "WXD" && (
+                <>
+                  <View style={styles.featureBtnGroup}>
+                    <Button
+                      containerStyle={styles.featureBtn}
+                      title="恢复出厂设置"
+                      size="md"
+                      onPress={() => {
+                        wxdLightReset();
+                        SheetManager.hide(sheetId);
+                      }}
+                    />
+                    <Button
+                      containerStyle={styles.featureBtn}
+                      title="重新配对"
+                      size="md"
+                      onPress={() => {
+                        wxdLightRepair();
+                        SheetManager.hide(sheetId);
+                      }}
+                    />
+                  </View>
+                </>
+              )}
+            </View>
+          )}
+        </ScrollView>
+      </ActionSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    position: "relative",
+    height: 50,
+    paddingHorizontal: 60,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  titleText: {
+    fontSize: 18,
+    color: "#333",
+  },
+  closeBtn: {
+    position: "absolute",
+    height: "100%",
+    top: 0,
+    right: 0,
+    width: 60,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  contentBlock: {
+    marginBottom: 20,
+  },
+  contentBlockHeader: {
+    height: 40,
+    paddingHorizontal: 10,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    borderBottomColor: "#eee",
+    marginBottom: 3,
+  },
+  contentBlockTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "#999",
+  },
+  disabledCell: {
+    backgroundColor: "#eee",
+  },
+  featureBtnGroup: {
+    flexDirection: "row",
+    marginTop: 10,
+  },
+  featureBtn: {
+    marginHorizontal: 10,
+  },
+});
+
+export default DeviceActionSheet;