inl-ui 0.0.74 → 0.0.76

package/src/pageComponent/views/pss/components/NewOrder/SelectRelevance.tsx

@@ -0,0 +1,161 @@
+import { defineComponent, ref, watch, reactive } from "vue";
+
+import { cloneDeep } from "lodash";
+
+const columns = [
+  {
+    dataIndex: "name",
+    title: "名称",
+    ellipsis: true,
+  },
+  // {
+  //   dataIndex: "location",
+  //   title: "设备位置",
+  //   ellipsis: true,
+  // },
+  {
+    key: "loops",
+    title: "控制回路",
+    ellipsis: true,
+  },
+  {
+    dataIndex: "relevanceType",
+    title: "关联关系",
+    width: 100,
+  },
+];
+
+export default defineComponent({
+  props: {
+    showRelevance: {
+      type: Boolean,
+      default: false,
+    },
+    selectedRelevanceList: {
+      type: Array,
+      default: () => [],
+    },
+    currentRow: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  emits: ["update:showRelevance", "toUpdate"],
+
+  setup(props, context) {
+    const relevanceList = ref<any>([]);
+
+    watch(
+      () => props.showRelevance,
+      (nval) => {
+        if (nval) {
+          getRelevanceList();
+
+          selectedRow.selectedRows = props.selectedRelevanceList;
+          selectedRow.selectedRowKeys = props.selectedRelevanceList.map(
+            (device: any) => device.id
+          );
+        }
+      }
+    );
+
+    const getRelevanceList = () => {
+      const { upstreamDevices, downstreamDevices } = props.currentRow;
+      const upList = upstreamDevices.map((up) => {
+        up.relevanceType = "上游";
+        return up;
+      });
+
+      const downList = downstreamDevices.map((down) => {
+        down.relevanceType = "下游";
+        return down;
+      });
+
+      relevanceList.value = [...upList, ...downList];
+    };
+
+    const ok = async () => {
+      context.emit("toUpdate", selectedRow.selectedRows);
+      cancelModal();
+    };
+
+    const cancelModal = () => {
+      context.emit("update:showRelevance", false);
+
+      relevanceList.value = [];
+
+      selectedRow.selectedRowKeys = [];
+      selectedRow.selectedRows = [];
+
+      relevanceList.value = [];
+    };
+
+    const selectedRow: any = reactive({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+
+    const onSelect = (selectedRowKeys: any[], selectedRows: any) => {
+      // console.log(selectedRowKeys, selectedRows);
+      selectedRow.selectedRowKeys = selectedRowKeys;
+      selectedRow.selectedRows = selectedRows;
+    };
+
+    return () => (
+      <div class="SelectRelevance">
+        <a-modal
+          v-model={[props.showRelevance, "visible"]}
+          title="添加关联设备"
+          width="1000px"
+          centered
+          wrapClassName="SelectRelevanceModal"
+          onCancel={cancelModal}
+          v-slots={{
+            footer: () => (
+              <div class="modal_footer">
+                <a-button onClick={cancelModal}>取消</a-button>
+                <a-button type="primary" onClick={ok}>
+                  确定
+                </a-button>
+              </div>
+            ),
+          }}
+        >
+          <a-table
+            pagination={false}
+            columns={columns}
+            dataSource={relevanceList.value}
+            // class="cus-table"
+            rowKey="id"
+            rowSelection={{
+              onChange: onSelect,
+              selectedRowKeys: selectedRow.selectedRowKeys,
+              type: "checkbox",
+              // getCheckboxProps: (record: any) => {
+              //   return {
+              //     disabled: props.selectedRelevanceList
+              //       .map((relevance: any) => {
+              //         return relevance.id;
+              //       })
+              //       .includes(record.id),
+              //     name: record.name,
+              //   };
+              // },
+            }}
+            v-slots={{
+              bodyCell: ({ column, record, index }: any) => {
+                // console.log(text, column, record, index);
+
+                // 控制回路
+                if (column.key === "loops") {
+                  return record.loops.join("；");
+                }
+              },
+            }}
+          ></a-table>
+        </a-modal>
+      </div>
+    );
+  },
+});

package/src/pageComponent/views/pss/components/{NewOrder.tsx → NewOrder/index.tsx}

@@ -11,16 +11,16 @@ import {
   Col,
   message,
 } from "ant-design-vue";
-import {
-  PlusOutlined,
-  MinusSquareOutlined,
-  SearchOutlined,
-} from "@ant-design/icons-vue";
-import useTableList from "@/pageComponent/hooks/useTableList";
+import { PlusOutlined, MinusSquareOutlined } from "@ant-design/icons-vue";
+
 import { cloneDeep } from "lodash";
 
 import dayjs, { Dayjs } from "dayjs";
 
+import SelectDevice from "./SelectDevice";
+
+import { getStatus } from "../../utils";
+
 import pssApi from "@/api/pss";
 
 const Format = "YYYY-MM-DD HH:mm";
@@ -101,11 +101,22 @@ export default defineComponent({
       ],
     });
 
+    watch(
+      () => props.showCreate,
+      (val) => {
+        if (val) {
+          formState.value.stopTime = dayjs().format(Format);
+          formState.value.supplyTime = dayjs().format(Format);
+        }
+      }
+    );
+
     const formRef = ref();
     const formState = ref({
       bus: 0,
       attempt: "1", // 1需要 0不需要
       deviceList: [] as any, // 设备列表
+      relevanceList: [] as any, // 关联设备列表
       stopTime: dayjs().format(Format),
       supplyTime: dayjs().format(Format),
       // stopTime: null,
@@ -115,90 +126,27 @@ export default defineComponent({
       causetext: "",
     });
 
-    const selectRows: any = ref([]);
-    const selectedList: any = ref([]);
-
-    const eqModal: any = reactive({
-      visible: false,
-      dataSource: [],
-      columns: [
-        {
-          dataIndex: "name",
-          title: "名称",
-          ellipsis: true,
-        },
-        {
-          dataIndex: "location",
-          title: "设备位置",
-          ellipsis: true,
-        },
-        {
-          dataIndex: "loop",
-          title: "控制回路",
-          ellipsis: true,
-        },
-      ],
-    });
-
-    const searchFormRef = ref();
-    const searchForm = reactive({
-      deviceName: "", // 设备名称
-      deviceCode: "", // 设备编码
-    });
-    const devicesLoading = ref(false);
-
-    // 查询设备
-    const searchDeviceList = async () => {
-      devicesLoading.value = true;
-      const res: any = await pssApi.getDeviceList(searchForm);
-      eqModal.dataSource = res.data.map((item: any) => {
-        item.loop = item.loops.join(",");
-        return item;
-      });
-      devicesLoading.value = false;
-    };
-
-    // 添加设备
-    const addEq = async () => {
-      try {
-        searchDeviceList();
+    const showDevice = ref(false);
+    const currentRow = ref<any>();
 
-        selectRows.value = [];
-        selectedList.value = [];
-        eqModal.visible = true;
-      } catch (error) {
-        console.log(error);
-      }
-    };
+    const toUpdateDevice = async (deviceList, relevanceList) => {
+      formState.value.deviceList = [];
+      deviceList.forEach(async (device: any) => {
+        const { data } = await pssApi.applyLoop(device.id);
+        device.equmentId = device.id;
+        device.list = data;
 
-    const onSelectEq = (selectedRowKeys: any, selectedRows: any) => {
-      // console.log(selectedRowKeys, selectedRows);
-      selectRows.value = selectedRowKeys;
-      selectedList.value = selectedRows;
-    };
+        formState.value.deviceList.push(device);
+      });
 
-    const sureAddEq = async () => {
-      if (selectedList.value.length > 0) {
-        const old = cloneDeep(formState.value.deviceList);
-        formState.value.deviceList = [];
+      formState.value.relevanceList = [];
+      relevanceList.forEach(async (relevance: any) => {
+        const { data } = await pssApi.applyLoop(relevance.id);
+        relevance.equmentId = relevance.id;
+        relevance.list = data;
 
-        nextTick(() => {
-          formState.value.deviceList = [...old, ...selectedList.value];
-          formState.value.deviceList.forEach(async (device: any) => {
-            const { data } = await pssApi.applyLoop(device.id);
-            device.equmentId = device.id;
-            device.list = data;
-          });
-        });
-
-        cancelAddEq();
-      } else {
-        message.info("请选择设备");
-      }
-    };
-
-    const cancelAddEq = () => {
-      eqModal.visible = false;
+        formState.value.relevanceList.push(relevance);
+      });
     };
 
     const ok = async () => {
@@ -209,8 +157,24 @@ export default defineComponent({
         .add(formState.value.duration, "h")
         .format(Format);
 
+      const upstreamEqumentLoopDtos: any = [];
+      const downstreamEqumentLoopDtos: any = [];
+      formState.value.relevanceList.forEach((relevance: any, index: number) => {
+        if (relevance.relevanceType === "上游") {
+          upstreamEqumentLoopDtos.push(relevance);
+        } else {
+          downstreamEqumentLoopDtos.push(relevance);
+        }
+      });
+
+      const equments = {
+        ...formState.value.deviceList[0],
+        upstreamEqumentLoopDtos,
+        downstreamEqumentLoopDtos,
+      };
+
       const param = {
-        equments: formState.value.deviceList, // 设备信息
+        equments, // 所有设备信息
         busId: typeColumns[formState.value.bus].value, // stopSupplyPower(低压停送电) stopPower（低压停电） supplyPower（低压送电）
         busName: typeColumns[formState.value.bus].label, // 业务名称
         attempt: formState.value.attempt, // 试车流程
@@ -229,21 +193,12 @@ export default defineComponent({
       context.emit("refresh");
     };
 
-    watch(
-      () => props.showCreate,
-      (val) => {
-        if (val) {
-          formState.value.stopTime = dayjs().format(Format);
-          formState.value.supplyTime = dayjs().format(Format);
-        }
-      }
-    );
-
     const cancelModal = () => {
       context.emit("update:showCreate", false);
       nextTick(() => {
         formRef.value.resetFields();
         formState.value.deviceList = [];
+        formState.value.relevanceList = [];
       });
     };
 
@@ -254,14 +209,15 @@ export default defineComponent({
           title="新建工单"
           width="850px"
           wrapClassName="newOrder_modal"
+          centered
           onCancel={cancelModal}
           v-slots={{
             footer: () => (
               <div class="modal_footer">
+                <Button onClick={cancelModal}>取消</Button>
                 <Button type="primary" onClick={ok}>
                   保存
                 </Button>
-                <Button onClick={cancelModal}>取消</Button>
               </div>
             ),
           }}
@@ -311,7 +267,11 @@ export default defineComponent({
               >
                 <div class="content flex">
                   <div class="line flex-center">
-                    <Button onClick={addEq}>
+                    <Button
+                      onClick={() => {
+                        showDevice.value = true;
+                      }}
+                    >
                       <PlusOutlined />
                       添加设备
                     </Button>
@@ -319,7 +279,8 @@ export default defineComponent({
                     <div class="all">
                       已选：
                       <span class="num">
-                        {formState.value.deviceList.length}
+                        {formState.value.deviceList.length +
+                          formState.value.relevanceList.length}
                       </span>
                       台设备
                     </div>
@@ -331,15 +292,21 @@ export default defineComponent({
                         (device: any, index: number) => (
                           <div class="device" key={device.id}>
                             <div class="titleLine flex-center">
-                              <span class="title">
-                                {/* {device.code} */}
-                                {device.name}
-                              </span>
+                              <div class="left flex">
+                                <div class="title" title={device.name}>
+                                  主设备：{device.name}
+                                </div>
+                                <div class="state">
+                                  运行信号：
+                                  {getStatus(device.runStatus)}
+                                </div>
+                              </div>
 
                               <Button
                                 type="link"
                                 onClick={() => {
                                   formState.value.deviceList.splice(index, 1);
+                                  formState.value.relevanceList = [];
                                 }}
                               >
                                 <MinusSquareOutlined />
@@ -384,6 +351,75 @@ export default defineComponent({
                       )}
                     </div>
                   )}
+
+                  {formState.value.relevanceList.length > 0 && (
+                    <div class="relevanceBox">
+                      {formState.value.relevanceList.map(
+                        (relevance: any, index: number) => (
+                          <div class="relevance" key={relevance.id}>
+                            <div class="titleLine flex-center">
+                              <div class="left flex">
+                                <div class="title" title={relevance.name}>
+                                  {relevance.relevanceType}设备：
+                                  {relevance.name}
+                                </div>
+                                <div class="state">
+                                  运行信号：
+                                  {getStatus(relevance.runStatus)}
+                                </div>
+                              </div>
+
+                              <Button
+                                type="link"
+                                onClick={() => {
+                                  formState.value.relevanceList.splice(
+                                    index,
+                                    1
+                                  );
+                                }}
+                              >
+                                <MinusSquareOutlined />
+                              </Button>
+                            </div>
+
+                            <div class="loop">
+                              <FormItem
+                                name={["relevanceList", index, "loopIds"]}
+                                rules={{
+                                  required: true,
+                                  message: "请选择",
+                                }}
+                              >
+                                <a-checkbox-group
+                                  v-model={[relevance.loopIds, "value"]}
+                                  style="width: 100%; max-height: 110px; overflow-y: auto;"
+                                >
+                                  <a-row>
+                                    <a-col span="3">
+                                      <div class="title">控制回路</div>
+                                    </a-col>
+                                    {relevance?.list?.map(
+                                      (loop: any, idx: number) => (
+                                        <a-col span="7">
+                                          <a-checkbox
+                                            key={loop.key}
+                                            value={loop.key}
+                                          >
+                                            {/* {loop.key}-{loop.value} */}
+                                            {loop.value}
+                                          </a-checkbox>
+                                        </a-col>
+                                      )
+                                    )}
+                                  </a-row>
+                                </a-checkbox-group>
+                              </FormItem>
+                            </div>
+                          </div>
+                        )
+                      )}
+                    </div>
+                  )}
                 </div>
               </FormItem>
 
@@ -472,143 +508,15 @@ export default defineComponent({
           </div>
         </Modal>
 
-        <Modal
-          v-model={[eqModal.visible, "visible"]}
-          title="添加设备"
-          width="1200px"
-          wrapClassName="newOrder_device_modal"
-          onCancel={cancelAddEq}
-          v-slots={{
-            footer: () => (
-              <div class="modal_footer">
-                <Button type="primary" onClick={sureAddEq}>
-                  确定
-                </Button>
-                <Button onClick={cancelAddEq}>取消</Button>
-              </div>
-            ),
+        <SelectDevice
+          v-model={[showDevice.value, "showDevice"]}
+          currentRow={currentRow.value}
+          oldDeviceList={formState.value.deviceList}
+          oldRelevanceList={formState.value.relevanceList}
+          onToUpdate={(deviceList, relevanceList) => {
+            toUpdateDevice(deviceList, relevanceList);
           }}
-        >
-          <div class="deviceModal_content flex" style="">
-            <div class="left flex flex1">
-              <Form
-                ref={searchFormRef}
-                model={searchForm}
-                labelCol={{ span: 8 }}
-                wrapperCol={{ span: 16 }}
-                labelAlign="right"
-                onSubmit={searchDeviceList}
-              >
-                <Row gutter={24}>
-                  <Col span={8}>
-                    <FormItem label="设备名称" name="deviceName">
-                      <a-input
-                        v-model={[searchForm.deviceName, "value"]}
-                        placeholder="请输入"
-                        allow-clear
-                      ></a-input>
-                    </FormItem>
-                  </Col>
-                  <Col span={8}>
-                    <FormItem label="设备编码" name="deviceCode">
-                      <a-input
-                        v-model={[searchForm.deviceCode, "value"]}
-                        placeholder="请输入"
-                        allow-clear
-                      ></a-input>
-                    </FormItem>
-                  </Col>
-                  <Col span={8} class="align-r">
-                    <a-space>
-                      <a-button type="primary" html-type="submit">
-                        查询
-                      </a-button>
-
-                      <a-button
-                        onClick={() => {
-                          searchFormRef.value.resetFields();
-                          searchDeviceList();
-                        }}
-                      >
-                        重置
-                      </a-button>
-                    </a-space>
-                  </Col>
-                </Row>
-              </Form>
-
-              <div class="tableBox">
-                <Table
-                  pagination={false}
-                  columns={eqModal.columns}
-                  dataSource={eqModal.dataSource}
-                  // class="cus-table"
-                  rowKey="id"
-                  loading={devicesLoading.value}
-                  rowSelection={{
-                    onChange: onSelectEq,
-                    selectedRowKeys: selectRows.value,
-                    type: "checkbox",
-                    getCheckboxProps: (record: any) => {
-                      const oldDeviceIdList = formState.value.deviceList.map(
-                        (device: any) => device.id
-                      );
-
-                      return {
-                        disabled: oldDeviceIdList.includes(record.id),
-                        name: record.name,
-                      };
-                    },
-                  }}
-                ></Table>
-              </div>
-            </div>
-
-            <div class="right flex">
-              <div class="top flex-center">
-                <div>已选{selectedList.value.length}台设备</div>
-                <a-button
-                  type="link"
-                  onClick={() => {
-                    selectRows.value = [];
-                    selectedList.value = [];
-                  }}
-                >
-                  清空
-                </a-button>
-              </div>
-
-              <div class="activedBox">
-                {selectedList.value.map((selected: any, idx: number) => {
-                  // const name = `${selected.code}${selected.name}`;
-                  const name = selected.name;
-                  const textLength = 10;
-                  const title = name.length > textLength ? name : "";
-                  return (
-                    <a-tag
-                      class="tag"
-                      title={title}
-                      key={selected.id}
-                      closable
-                      onClose={() => {
-                        const index = selectedList.value.findIndex(
-                          (item: any) => item.id === selected.id
-                        );
-                        selectRows.value.splice(index, 1);
-
-                        selectedList.value.splice(idx, 1);
-                      }}
-                    >
-                      {name.length > textLength
-                        ? `${name.slice(0, textLength)}...`
-                        : name}
-                    </a-tag>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </Modal>
+        />
       </div>
     );
   },

package/src/pageComponent/views/pss/components/table.tsx

@@ -10,6 +10,8 @@ import Info from "@/pageComponent/views/pss/components/Info";
 
 import dayjs, { Dayjs } from "dayjs";
 
+import { getStatus } from "../utils";
+
 import pssApi from "@/api/pss";
 
 const Format = "YYYY-MM-DD HH:mm";
@@ -220,6 +222,11 @@ export default defineComponent({
           // key: "numAndName",
           width: 200,
         },
+        {
+          key: "runStatus",
+          title: "运行信号",
+          width: 100,
+        },
         {
           title: "回路数量",
           key: "loopsNum",
@@ -747,6 +754,11 @@ export default defineComponent({
                 //   );
                 // }
 
+                // 运行信号
+                if (column.key === "runStatus") {
+                  return getStatus(record.runStatus);
+                }
+
                 // 回路数量
                 if (column.key === "loopsNum") {
                   return <span>{record.loops.length}个</span>;