设备信息管理模块

riku

2024-08-13 1a0e4972f80278bfa9e53283374b745b6c968341

设备信息管理模块

1. 完成监测设备信息的新增和更新逻辑
2. 编写中设备状态信息的更新功能

 app.json

@@ -34,7 +34,8 @@
    "pages/inspection/scene/index",
    "pages/inspection/scene/search/index",
    "pages/inspection/scene/info/index",
    "pages/inspection/scene/info/device-info/index"
    "pages/inspection/scene/info/device-info/index",
    "pages/inspection/scene/info/device-status/index"
  ],
  "tabBar": {
    "custom": true,

 common/dataMonitorDeviceType.js

@@ -39,23 +39,38 @@

// ç›‘测设备类型
function monitorDevices(sceneType) {
  switch (sceneType) {
  switch (parseInt(sceneType)) {
    // å·¥åœ°,码头,搅拌站,堆场
    case '1':
    case '2':
    case '3':
    case '14':
    case 1:
    case 2:
    case 3:
    case 14:
      return dustDeviceType;
    // é¤é¥®
    case '5':
    case 5:
      return fumeDeviceType;
    // å·¥ä¸šä¼ä¸š,汽修
    case '4':
    case '6':
    case 4:
    case 6:
      return vocDeviceType;
    default:
      return dustDeviceType;
  }
}

export { monitorDevices };
function toLabel(sceneType, valueArr) {
  const labelArr = [];
  let options = monitorDevices(sceneType);
  valueArr.forEach(v => {
    if (options) {
      const op = options.find(o => {
        return o.value == v;
      });
      labelArr.push(op.label);
      options = options[0].children;
    }
  });
  return labelArr;
}

export { monitorDevices, toLabel };

 common/dataProductionDeviceType.js

@@ -58,4 +58,19 @@
  }
}

export { productionDevices };
function toLabel(sceneType, valueArr) {
  const labelArr = [];
  let options = productionDevices(sceneType);
  valueArr.forEach(v => {
    if (options) {
      const op = options.find(o => {
        return o.value == v;
      });
      labelArr.push(op.label);
      options = options.children;
    }
  });
  return labelArr;
}

export { productionDevices, toLabel };

 common/dataTreatmentDeviceType.js

@@ -58,4 +58,19 @@
  }
}

export { treatmentDevices };
function toLabel(sceneType, valueArr) {
  const labelArr = [];
  let options = treatmentDevices(sceneType);
  valueArr.forEach(v => {
    if (options) {
      const op = options.find(o => {
        return o.value == v;
      });
      labelArr.push(op.label);
      options = options.children;
    }
  });
  return labelArr;
}

export { treatmentDevices, toLabel };

 components/form/form-util.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,119 @@
/**
 * ç”Ÿæˆä¸€æ¡è¡¨å•æ¡ç›®
 * @param {String} _label æ ‡ç­¾åç§°
 * @param {String} _name å­—段名称
 * @param {String} _type è¾“入类型 ï¼ˆtext: è¾“入框; switch: åˆ‡æ¢æŒ‰é’®; picker: ä¸‹æ‹‰æ¡†é€‰é¡¹; cascader: çº§è”选择）
 * @param {Boolean} _required æ˜¯å¦ä¸ºå¿…填项
 * @param {Array} _options å½“输入类型为picker或cascader时，提供可选项
 * @param {Array} cascaderTitles å½“输入类型为cascader时，提供每层选项的标题
 * @param {Array} referItems å½“输入类型为cascader时，提供关联的属性name
 */
function baseInputItem(
  _label,
  _name,
  _required,
  _type = 'text',
  _options = [],
  cascaderTitles,
  referItems,
) {
  return {
    required: _required,
    label: _label,
    placeholder: (_type == 'text' ? '请输入' : '请选择') + _label,
    name: _name,
    value: null,
    status: 'success',
    tips: _label + '不能为空',
    inputType: _type,
    options: _options,
    cascaderTitles: cascaderTitles,
    referItems: referItems,
    visible: false,
  };
}

/**
 * éšè—æ¡ç›®ï¼Œä¸€èˆ¬æ˜¯ä¸Šä¼ æ—¶çš„必要条目信息，但是不需要展示给用户做修改
 * @param {String} _label
 * @param {String} _name
 */
function hideInputItem(_label, _name) {
  const item = baseInputItem(_label, _name);
  item.hide = true;
  return item;
}

/**
 * å¡«å……初始数据
 * @param {Array} items è¡¨å•æ¡ç›®æ•°ç»„
 * @param {Object} defaultValue åˆå§‹æ•°æ®
 */
function setDefaultValue(items, defaultValue) {
  if (typeof defaultValue === 'object') {
    items.forEach(e => {
      // æ–‡æœ¬å’Œå¼€å…³ç±»åž‹ç›´æŽ¥èµ‹å€¼
      if (e.inputType == 'text' || e.inputType == 'switch') {
        if (defaultValue.hasOwnProperty(e.name)) {
          e.value = defaultValue[e.name];
        }
      }
      // ä¸‹æ‹‰æ¡†é™¤äº†èµ‹å€¼ï¼Œéœ€è¦é¢å¤–赋值属性_value(数组类型，组件t-picker的特性)
      else if (e.inputType == 'picker') {
        if (defaultValue.hasOwnProperty(e.name)) {
          e.value = defaultValue[e.name] + '';
          e._value = [e.value];
          const op = e.options.find(o=>{
            return o.value == e.value
          })
          e._label = op.label
        }
      }
      // çº§è”选择器，根据属性referItems找到对应的初始数据
      else if (e.inputType == 'cascader') {
        const selectedOptions = [];
        let value,
          note,
          options = e.options;
        e.referItems.forEach(r => {
          if (defaultValue.hasOwnProperty(r)) {
            const o = options.find(v => {
              return v.value == defaultValue[r];
            });
            selectedOptions.push(o);
            options = options[0].children;
          }
        });
        if (selectedOptions.length > 0) {
          value = selectedOptions[selectedOptions.length - 1].value;
          note = cascaderNote(selectedOptions);
          const v = selectedOptions.map(v => {
            return v.value;
          });
          e.value = v;
          e._value = value;
          e.note = note;
        }
      }
    });
  }
}

/**
 * çº§è”选择器选择结果格式化
 * @param {Array} v
 */
function cascaderNote(v) {
  let note = '';
  v.forEach(o => {
    if (note != o.label) {
      if (note != '') {
        note += '/';
      }
      note += o.label;
    }
  });
  return note;
}

export { baseInputItem, hideInputItem, setDefaultValue, cascaderNote };

 components/form/index.js

@@ -1,4 +1,9 @@
import { cascaderNote } from './form-util.js';

Component({
  options: {
    multipleSlots: true, // åœ¨ç»„件定义时的选项中启用多slot支持
  },
  properties: {
    /**
     * è¡¨å•è¾“入框采用T-design框架下的Input组件
@@ -10,7 +15,7 @@
     * value: çœŸå®žå€¼,
     * status: è¾“入框状态。可选项：success/warning/error,
     * tips: è¾“入框下方提示文本，会根据不同的 status å‘ˆçŽ°ä¸åŒçš„样式,
     * inputType: è¾“入类型 ï¼ˆtext: è¾“入框；switch：切换按钮; picker: ä¸‹æ‹‰æ¡†é€‰é¡¹; cascader: çº§è”选择）,
     * inputType: è¾“入类型 (text: è¾“入框; switch: åˆ‡æ¢æŒ‰é’®; picker: ä¸‹æ‹‰æ¡†é€‰é¡¹; cascader: çº§è”选择),
     * options: å½“输入类型为picker或cascader时，提供可选项,
     * cascaderTitles: å½“输入类型为cascader时，提供每个选项的标题,
     */
@@ -20,6 +25,14 @@
      observer(v) {
        this.setData({ formArray: v });
      },
    },
    submitText: {
      type: String,
      value: '保存',
    },
    cancelText: {
      type: String,
      value: '取消',
    },
  },

@@ -55,10 +68,8 @@
      this.setData({
        [`formArray[${index}].visible`]: false,
        [`formArray[${index}]._value`]: value,
        [`formArray[${index}].value`]: {
          label: label[0],
          value: value[0],
        },
        [`formArray[${index}]._label`]: label[0],
        [`formArray[${index}].value`]: value[0],
      });
    },
    onPickerCancel(e) {
@@ -75,9 +86,9 @@
    onCascaderChange(e) {
      const { index } = e.currentTarget.dataset;
      const { selectedOptions, value } = e.detail;
      const note = this._note(selectedOptions);
      const note = cascaderNote(selectedOptions);
      const v = selectedOptions.map(v => {
        return { label: v.label, value: v.value };
        return v.value;
      });
      this.setData({
        [`formArray[${index}].visible`]: false,
@@ -92,7 +103,11 @@
      const formObj = {};
      this.data.formArray.forEach(e => {
        if (e.inputType == 'picker') {
          formObj[e.name] = e.value ? e.value.value : e.value;
          formObj[e.name] = e.value;
        } else if (e.inputType == 'cascader') {
          e.referItems.forEach((r, i) => {
            formObj[r] = e.value[i];
          });
        } else {
          formObj[e.name] = e.value;
        }

 components/form/index.wxml

@@ -1,4 +1,5 @@
<block wx:for="{{formArray}}" wx:key="index">
  <block wx:if="{{!item.hide}}">
  <block wx:if="{{item.inputType == 'text'}}">
    <t-input
      label="{{item.label}}"
@@ -11,6 +12,7 @@
  <block wx:elif="{{item.inputType == 'switch'}}">
    <t-cell title="{{item.label}}">
      <t-switch
          defaultValue="{{item.value}}"
        label="{{['是', '否']}}"
        slot="note"
        data-index="{{index}}"
@@ -23,7 +25,7 @@
      title="{{item.label}}"
      arrow
      hover
      note="{{item.value.label || item.placeholder}}"
        note="{{item._label || item.placeholder}}"
      data-index="{{index}}"
      bind:click="showPicker"
    ></t-cell>
@@ -60,8 +62,21 @@
    />
  </block>
</block>

</block>
<slot></slot>
<view class="btn-group">
  <t-button block theme="light" content="取消" size="small" bind:tap="onCancel"></t-button>
  <t-button block theme="primary" content="保存" size="small" bind:tap="onSubmit"></t-button>
  <t-button
    block
    theme="light"
    content="{{cancelText}}"
    size="small"
    bind:tap="onCancel"
  ></t-button>
  <t-button
    block
    theme="primary"
    content="{{submitText}}"
    size="small"
    bind:tap="onSubmit"
  ></t-button>
</view>

 config/index.js

@@ -8,8 +8,8 @@
const baseFileUrl = `${bu}/meeting/file/`;

// çº¿ä¸Šç›‘管
const inspectUrl = 'https://fyami.com.cn:447';
// const inspectUrl = 'http://192.168.0.138:8082';
// const inspectUrl = 'https://fyami.com.cn:447';
const inspectUrl = 'http://192.168.0.138:8082';

const iu = 'https://fyami.com.cn:447';
const inspectPicUrl = `${iu}/images/`;

 model/device.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
import dayjs from 'dayjs';
import { toLabel as toLabelFreq } from '../common/dataMaintainFrequency';
import { toLabel as toLabelOwner } from '../common/dataOwnership';
import { toLabel as toLabelStatus } from '../common/dataRunningStatus';
import { toLabel as toLabelMonitor } from '../common/dataMonitorDeviceType';
import { toLabel as toLabelTreatment } from '../common/dataTreatmentDeviceType';
import { toLabel as toLabelProduction } from '../common/dataProductionDeviceType';

// ç›‘测设备
export function getMonitorDevice(data) {
  data._updateTime = dayjs(data.diUpdateTime).format('YYYYå¹´MM月DD日');
  data._maintainFrequency = toLabelFreq(data.diMaintainFrequency);
  data._ownership = toLabelOwner(data.diOwnership);
  data._runningStatus = toLabelStatus(data.diRunningStatus);
  const labelArr = toLabelMonitor(data.diSceneTypeId, [data.diTypeId, data.diSubtypeId]);
  data._type = labelArr[0];
  data._subType = labelArr[1];
  return data
}

// æ²»ç†è®¾å¤‡
export function getTreatmentDevice(data) {
  data._updateTime = dayjs(data.piUpdateTime).format('YYYYå¹´MM月DD日');
  data._maintainFrequency = toLabelFreq(data.piMaintainFrequency);
  data._ownership = toLabelOwner(data.piOwnership);
  data._runningStatus = toLabelStatus(data.piRunningStatus);
  const labelArr = toLabelTreatment(data.piSceneTypeId, [data.piTypeId, data.piSubtypeId]);
  data._type = labelArr[0];
  data._subType = labelArr[1];
  return data
}

// ç”Ÿäº§è®¾å¤‡
export function getProductionDevice(data) {
  data._updateTime = dayjs(data.wiUpdateTime).format('YYYYå¹´MM月DD日');
  data._ownership = toLabelOwner(data.wiOwnership);
  data._runningStatus = toLabelStatus(data.wiRunningStatus);
  const labelArr = toLabelProduction(data.wiSceneTypeId, [data.wiTypeId, data.wiSubtypeId]);
  data._type = labelArr[0];
  data._subType = labelArr[1];
  return data
}

export function getDeviceList(dataList, deviceType) {
  return dataList.map(item => {
    // ç›‘测设备
    if (deviceType == 0) {
      return getMonitorDevice(item);
    } 
    // æ²»ç†è®¾å¤‡
    else if (deviceType == 1) {
      return getTreatmentDevice(item);
    } 
    // ç”Ÿäº§è®¾å¤‡
    else if (deviceType == 2) {
      return getProductionDevice(item);
    }
  });
}

 pages/inspection/scene/info/device-info-items.js

@@ -1,3 +1,4 @@
import { baseInputItem, hideInputItem, setDefaultValue } from "../../../../components/form/form-util.js";
import { monitorDevices } from '../../../../common/dataMonitorDeviceType';
import { treatmentDevices } from '../../../../common/dataTreatmentDeviceType';
import { productionDevices } from '../../../../common/dataProductionDeviceType';
@@ -6,38 +7,30 @@
import { ownership } from '../../../../common/dataOwnership';

/**
 * ç”Ÿæˆä¸€æ¡è¡¨å•æ¡ç›®
 * @param {String} _label æ ‡ç­¾åç§°
 * @param {String} _name å­—段名称
 * @param {String} _type è¾“入类型 ï¼ˆtext: è¾“入框; switch: åˆ‡æ¢æŒ‰é’®; picker: ä¸‹æ‹‰æ¡†é€‰é¡¹; cascader: çº§è”选择）
 * @param {Boolean} _required æ˜¯å¦ä¸ºå¿…填项
 * @param {Array} _options å½“输入类型为picker时，提供可选项
 */
function baseInputItem(_label, _name, _required, _type = 'text', _options = []) {
  return {
    required: _required,
    label: _label,
    placeholder: (_type == 'text' ? '请输入' : '请选择') + _label,
    name: _name,
    value: null,
    status: 'success',
    tips: _label + '不能为空',
    inputType: _type,
    options: _options,
    cascaderTitles: ['1', '2'],
    visible: false,
  };
}

/**
 * ç›‘测设备表单
 * @param {Number} sceneType åœºæ™¯ç±»åž‹ï¼ˆé£žç¾½ç›‘管系统）
 * @param {Object} defaultValue è¡¨å•é»˜è®¤å€¼
 */
export function monitorDeviceForm(sceneType) {
  return [
export function monitorDeviceForm(sceneType, defaultValue) {
  const items = [
    hideInputItem('id', 'diId'),
    hideInputItem('创建时间', 'diCreateTime'),
    hideInputItem('更新时间', 'diUpdateTime'),
    hideInputItem('场景id', 'diSceneGuid'),
    hideInputItem('场景类型', 'diSceneTypeId'),

    baseInputItem('站点名称', 'diName', true),
    baseInputItem('设备编号', 'diDeviceCode'),
    // è®¾å¤‡ç±»åž‹å’Œè®¾å¤‡å­ç±»åˆå¹¶ç”¨çº§è”选择器展示
    baseInputItem('设备类型', '_type', true, 'cascader', monitorDevices(sceneType)),
    baseInputItem(
      '设备类型',
      '_type',
      true,
      'cascader',
      monitorDevices(sceneType),
      ['选择设备类型', '选择设备子类'],
      ['diTypeId', 'diSubtypeId'],
    ),
    // baseInputItem('设备类型', 'diTypeId', true, 'picker'),
    // baseInputItem('设备子类', 'diSubtypeId', true, 'picker'),
    baseInputItem('供应商', 'diSupplier'),
@@ -54,12 +47,17 @@
    // baseInputItem('标识二维码', 'DI_QR_Code'),
    // baseInputItem('其他第三方或设备自带二维码', 'DI_Other_QR_Code'),
  ];

  // å¡«å……默认数据
  setDefaultValue(items, defaultValue);

  return items;
}

/**
 * æ²»ç†è®¾å¤‡è¡¨å•
 */
export function treatmentDeviceForm(sceneType) {
export function treatmentDeviceForm(sceneType, defaultValue) {
  return [
    baseInputItem('站点名称', 'diName', true),
    baseInputItem('设备编号', 'diDeviceCode'),
@@ -74,7 +72,7 @@
/**
 * ç”Ÿäº§è®¾å¤‡è¡¨å•
 */
export function productionDeviceForm(sceneType) {
export function productionDeviceForm(sceneType, defaultValue) {
  return [
    baseInputItem('站点名称', 'diName', true),
    baseInputItem('设备编号', 'diDeviceCode'),
@@ -85,3 +83,27 @@
    baseInputItem('是否拆除', 'diRemoved', true, 'switch'),
  ];
}

/**
 * è®¾å¤‡çŠ¶æ€è¡¨å•
 */
export function deviceStatusForm(defaultValue) {
  return [
    hideInputItem('id', 'dlId'),
    hideInputItem('设备id', 'dlDeviceId'),
    hideInputItem('设备类型', 'dlDeviceType'),
    hideInputItem('场景id', 'dlSceneGuid'),
    hideInputItem('场景类型', 'dlSceneTypeId'),
    hideInputItem('现场图片', 'dlPicUrl'),
    hideInputItem('现场视频', 'dlVideoUrl'),
    hideInputItem('创建时间', 'dlCreateTime'),
    hideInputItem('更新时间', 'dlUpdateTime'),
    
    baseInputItem('设备位置', 'DL_Location', true),
    baseInputItem('经度', 'DL_Longitude'),
    baseInputItem('维度', 'DL_Latitude', true),
    baseInputItem('是否规范', 'DL_Standard', true, 'switch'),
    baseInputItem('不规范原因', 'DL_UnStandard_Reason'),
    baseInputItem('运行状态', 'DL_Real_Time_Status', true, 'picker', status),
  ];
}

 pages/inspection/scene/info/device-info/index.js

@@ -11,29 +11,39 @@
    deviceType: 0,
    // æ¨¡å¼ï¼Œadd: æ–°å¢žè®¾å¤‡ï¼›update：更新设备
    mode: 'add',
    submitText: '保存',
  },

  onLoad(options) {
    this.getOpenerEventChannel().on('acceptDeviceData', data => {
      if (data) {
        const { scene, type, mode } = data;
        let barTitle, _formArr;
        const { scene, type, mode, deviceInfo } = data;
        let barTitle = mode == 'add' ? '新增':'修改', _formArr;
        switch (type) {
          case 0:
            barTitle = '新增监测设备';
            _formArr = monitorDeviceForm(scene.typeid);
            break;
          case 1:
            barTitle = '新增治理设备';
            _formArr = treatmentDeviceForm(scene.typeid);
            barTitle += '治理设备';
            let defaultValue1 = mode == 'update' ? deviceInfo : {
              piSceneGuid: scene.guid,
              piSceneTypeId: scene.typeid,
            }
            _formArr = treatmentDeviceForm(scene.typeid, defaultValue1);
            break;
          case 2:
            barTitle = '新增生产设备';
            _formArr = productionDeviceForm(scene.typeid);
            barTitle += '生产设备';
            let defaultValue2 = mode == 'update' ? deviceInfo : {
              wiSceneGuid: scene.guid,
              wiSceneTypeId: scene.typeid,
            }
            _formArr = productionDeviceForm(scene.typeid, defaultValue2);
            break;
          case 0:
          default:
            barTitle = '设备信息';
            _formArr = monitorDeviceForm(scene.typeid);
            barTitle += '监测设备';
            let defaultValue0 = mode == 'update' ? deviceInfo : {
              diSceneGuid: scene.guid,
              diSceneTypeId: scene.typeid,
            }
            _formArr = monitorDeviceForm(scene.typeid, defaultValue0);
            break;
        }
        wx.setNavigationBarTitle({
@@ -44,6 +54,7 @@
          scene,
          deviceType: type,
          mode,
          submitText: mode == 'add' ? '保存' : '更新',
        });
      }
    });
@@ -52,11 +63,7 @@
  // æäº¤è¡¨å•
  submit(e) {
    const formObj = e.detail;
    const { mode, scene } = this.data;
    formObj.diSceneGuid = scene.guid;
    formObj.diSceneTypeId = scene.typeid;
    formObj.diTypeId = formObj._type[0].value;
    formObj.diSubtypeId = formObj._type[1].value;
    const { mode } = this.data;
    if (mode == 'add') {
      this.addDevice(formObj);
    } else {
@@ -80,7 +87,7 @@
  },

  // æ›´æ–°è®¾å¤‡ä¿¡æ¯
  updateDevice() {
  updateDevice(formObj) {
    const { deviceType } = this.data;
    updateDevice(formObj, deviceType).then(res => {
      console.log(res);

 pages/inspection/scene/info/device-info/index.wxml

@@ -1,7 +1,12 @@
<view class="page">
  <view class="page-header"> </view>
  <view class="page-container">
    <t-form formArr="{{formArray}}" bind:submit="submit" bind:cancel="cancel"></t-form>
    <t-form
      formArr="{{formArray}}"
      submit-text="{{submitText}}"
      bind:submit="submit"
      bind:cancel="cancel"
    ></t-form>
  </view>
  <view class="page-footer"></view>
</view>

 pages/inspection/scene/info/device-location-proxy.js

ÎļþÒÑɾ³ý

 pages/inspection/scene/info/device-location.wxml

ÎļþÒÑɾ³ý

 pages/inspection/scene/info/device-status/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
import { deviceStatusForm } from '../device-info-items.js';
import {
  fetchDeviceStatus,
  uploadDeviceStatus,
} from '../../../../../services/inspection/fetchDevice';

var defaultForm = deviceStatusForm();

Page({
  data: {
    formArray: [],
    showNewStatus: false,
    deviceStatusList: [],
  },

  onLoad(options) {
    this.getOpenerEventChannel().on('acceptDeviceStatusData', data => {
      if (data) {
        const { scene, type, deviceInfo } = data;
        defaultForm = deviceStatusForm({
          dlDeviceId: deviceInfo.diId,
          dlDeviceType: type,
          dlSceneGuid: scene.guid,
          dlSceneTypeId: scene.typeid,
        });
        // console.log(scene);
        // console.log(type);
        // console.log(deviceInfo);
      }
    });
  },

  onAddStatus() {
    this.setData({
      showNewStatus: true,
      formArray: defaultForm
    });
  },

  saveNewStatus(e) {
    const { deviceStatusList } = this.data;
    const formObj = e.detail;
    deviceStatusList.push(formObj);
    uploadDeviceStatus(formObj);
    this.setData({
      showNewStatus: false,
      deviceStatusList,
    });
  },
  cancelNewStatus() {
    this.setData({
      showNewStatus: false,
    });
  },
});

 pages/inspection/scene/info/device-status/index.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
{
  "navigationBarTitleText": "设备状态",
  "onReachBottomDistance": 10,
  "backgroundTextStyle": "light",
  "navigationBarTextStyle": "white",
  "navigationBarBackgroundColor": "#389AFF",
  "usingComponents": {
    "device-location": "../components/device-location/index",
    "t-form": "/components/form/index"
  }
}

 pages/inspection/scene/info/device-status/index.wxml

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,30 @@
<view class="page">
  <view class="page-header">
    <t-button
      wx:if="{{!showNewStatus}}"
      icon="add"
      theme="primary"
      size="small"
      bind:tap="onAddStatus"
      >添加设备状态</t-button
    >
    <t-form
      wx:if="{{showNewStatus}}"
      formArr="{{formArray}}"
      bind:submit="saveNewStatus"
      bind:cancel="cancelNewStatus"
    >
      <view>sssss</view>
    </t-form>
  </view>
  <view class="page-container">
    <block wx:for="{{deviceStatusList}}">
      <device-location
        index="{{index + 1}}"
        read-only="{{true}}"
        location="{{item}}"
      ></device-location>
    </block>
  </view>
  <view class="page-footer"></view>
</view>

 pages/inspection/scene/info/device-status/index.wxss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
/* pages/inspection/scene/info/device-status/index.wxss */

 pages/inspection/scene/info/devicelist-proxy.js

@@ -1,3 +1,5 @@
import { fetchDevices, fetchDeviceStatus } from '../../../../services/inspection/fetchDevice';

/**
 * è®¾å¤‡ä¿¡æ¯ç®¡ç†
 */
@@ -26,8 +28,17 @@
    ],
  },
  methods: {
    fetchDeviceInfo(deviceTypeId) {
      const { scene } = this.data;
      fetchDevices(scene.guid, deviceTypeId).then(res => {
        this.setData({
          [`categories[${deviceTypeId}].items`]: res.data,
        });
      });
    },
    onSideBarChange(e) {
      const { value } = e.detail;
      this.fetchDeviceInfo(this.data.categories[value].type)
      this.setData({ sideBarIndex: value });
    },
    addNewDevice(e) {
@@ -45,5 +56,41 @@
        },
      });
    },
    updateDevice(e) {
      const { type, index } = e.currentTarget.dataset;
      const { scene, categories } = this.data;
      const [i0, i1] = index;
      const deviceInfo = categories[i0].items[i1];
      wx.navigateTo({
        url: `/pages/inspection/scene/info/device-info/index`,
        success: function (res) {
          // é€šè¿‡ eventChannel å‘被打开页面传送数据
          res.eventChannel.emit('acceptDeviceData', {
            type,
            scene,
            mode: 'update',
            deviceInfo,
          });
        },
      });
    },

    updateStatus(e) {
      const { type, index } = e.currentTarget.dataset;
      const { scene, categories } = this.data;
      const [i0, i1] = index;
      const deviceInfo = categories[i0].items[i1];
      wx.navigateTo({
        url: `/pages/inspection/scene/info/device-status/index`,
        success: function (res) {
          // é€šè¿‡ eventChannel å‘被打开页面传送数据
          res.eventChannel.emit('acceptDeviceStatusData', {
            type,
            scene,
            deviceInfo,
          });
        },
      });
    }
  },
});

 pages/inspection/scene/info/devicelist.wxml

@@ -20,13 +20,65 @@
      show-scrollbar="{{false}}"
    >
      <block wx:if="{{item.items.length > 0}}">
        <view class="title">
          <view>{{item.title || item.label}}</view>
        <view class="title flex-h">
          <span>{{item.title || item.label}}</span>
          <t-button
            t-class="side-btn"
            theme="primary"
            icon="add"
            content="添加"
            size="extra-small"
            data-type="{{item.type}}"
            bind:tap="addNewDevice"
          ></t-button>
        </view>
        <block wx:for="{{item.items}}" wx:key="index1" wx:for-item="device" wx:for-index="index1">
          <view class="scene__item" >
            <view class="flex-h" style="align-items: flex-start">
              <view class="scene__item-name">{{device.diName}} </view>
              <view>
                <t-tag
                  max-width="{{130}}"
                  shape="square"
                  size="small"
                  theme="success"
                  variant="light-outline"
                  >{{device._type}}</t-tag
                >
              </view>
            </view>
            <view class="flex-h">
              <view class="scene__item-abstract">编号：{{device.diDeviceCode}} </view>
              <view class="scene__item-abstract">{{device._runningStatus}} </view>
            </view>
            <view class="scene__item-abstract">更新时间：{{device._updateTime}} </view>
            <t-divider />
            <view class="scene__item-tag__wrap flex-h">
              <t-button
                block
                theme="light"
                content="设备信息"
                size="extra-small"
                data-type="{{item.type}}"
                data-index="{{[index, index1]}}"
                bind:tap="updateDevice"
              ></t-button>
              <t-button
                block
                theme="light"
                content="状态变更"
                size="extra-small"
                data-type="{{item.type}}"
                data-index="{{[index, index1]}}"
                bind:tap="updateStatus"
              ></t-button>
            </view>
          </view>
        </block>
      </block>
      <block wx:else>
        <t-empty-page description="{{'暂无' + item.label + '信息'}}" />
        <view style="display: flex; justify-content: space-between">
        <view class="flex-h">
          <t-button
            theme="primary"
            icon="add"

 pages/inspection/scene/info/devicelist.wxss

@@ -1,6 +1,6 @@
.side-bar-wrapper {
  display: flex;
  height: 90vh;
  height: 80vh;
  overflow: hidden;
}

@@ -16,7 +16,7 @@
}

.side-bar-wrapper .title {
  padding-left: 40rpx;
  padding: 0 10rpx;
  margin-bottom: 8rpx;
}

@@ -25,3 +25,69 @@
  height: 96rpx;
  border: 2rpx solid #e7e7e7;
}

.flex-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-v {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scene__item-tag__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.scene__item {
  margin: 0 10rpx;
  background-color: var(--td-bg-color-fade);
  border-radius: var(--td-border-radius);
  box-shadow: var(--td-shadow-1);
  padding: var(--td-spacer);
  margin-top: var(--td-spacer);
  color: var(--td-text-color-primary);
}

/* .scene__item:active {
  background-color: var(--td-gray-color-1);
} */

.scene__item .scene__item-name {
  --ei-font-size: var(--td-font-size-base);
  --ei-line-height: calc(var(--td-text-line-height) * var(--ei-font-size));
  font-size: var(--ei-font-size);
  line-height: var(--ei-line-height);
  height: calc(var(--ei-line-height) * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scene__item-abstract {
  font-size: var(--td-font-size-s);
  color: var(--td-text-color-secondary);
}

.scene__nav-icon {
  position: relative;
  bottom: 0px;
  right: 0px;
  display: flex;
  justify-content: flex-end;
  /* margin-top: var(--td-spacer); */
  /* background-color: blanchedalmond; */
}

.side-btn {
  margin: initial !important;
}

 pages/inspection/scene/info/index.js

@@ -1,8 +1,7 @@
import { useDeviceList } from './devicelist-proxy.js';
import { useDeviceLocation } from './device-location-proxy.js';

Page({
  behaviors: [useDeviceList, useDeviceLocation],
  behaviors: [useDeviceList],
  data: {
    // åœºæ™¯åŸºæœ¬ä¿¡æ¯
    scene:{},
@@ -20,6 +19,9 @@
        this.setData({
          scene: data.scene,
        });
        [0, 1, 2].forEach(e => {
          this.fetchDeviceInfo(e);
        });
      }
    });
  },

 pages/inspection/scene/info/index.wxml

@@ -14,9 +14,6 @@
      <t-tab-panel label="设备信息" value="{{1}}" class="custom-tab-panel">
        <include src="./devicelist.wxml" />
      </t-tab-panel>
      <!-- <t-tab-panel label="设备位置" value="{{3}}" class="custom-tab-panel">
        <include src="./device-location.wxml" />
      </t-tab-panel> -->
    </t-tabs>
  </view>
  <view class="page-footer"></view>

 pages/inspection/scene/info/index.wxss

@@ -1,5 +1,9 @@
@import './devicelist.wxss';

.page {
  /* background-color: white; */
}

.page .page-container {
  padding: 0;
}

 pages/inspection/scene/util.wxs

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,30 @@
module.exports = {
  // è®¾å¤‡è¿è¡ŒçŠ¶æ€
  runningStatus: function (s) {
    switch (parseInt(s)) {
      case 0:
        return '未联网';
      case 1:
        return '上线中';
      case 2:
        return '已下线';
      case 3:
      default:
        return '已拆除';
    }
  },
  // è®¾å¤‡ç±»åž‹
  runningStatus: function (s) {
    switch (parseInt(s)) {
      case 0:
        return '未联网';
      case 1:
        return '上线中';
      case 2:
        return '已下线';
      case 3:
      default:
        return '已拆除';
    }
  },
};

 services/inspection/fetchDevice.js

@@ -5,6 +5,7 @@
import { get, post, put } from '../baseRequset';
import { inspectUrl, inspectPicUrl } from '../../config/index';
import { transSceneType } from '../../model/sceneType';
import { getDeviceList } from '../../model/device';

/**
 * èŽ·å–场景设备基本信息
@@ -22,6 +23,7 @@
    },
    inspectUrl,
  ).then(res => {
    res.data.data = getDeviceList(res.data.data, deviceTypeId);
    return res.data;
  });
}