.umirc.ts

@@ -250,6 +250,12 @@ export default defineConfig({
       path: '/smart-ops/chart-page/:projectId',
       component: './SmartOps/ChartPage',
     },
+    // 预测分析图表页面
+    {
+      name: '',
+      path: '/smart-ops/prediction/:projectId',
+      component: './SmartOps/predictionAnalysis/PredictionDetail',
+    },
     // 系统工作日报
     {
       name: '',

src/pages/SmartOps/predictionAnalysis/PredictionAnalysis.js

@@ -1,5 +1,6 @@
+import { queryMembraneList } from '@/services/SmartOps';
 import { RightOutlined } from '@ant-design/icons';
-import SubTitle from '../components/SubTitle';
+import { history, useParams, useRequest } from '@umijs/max';
 import styles from './PredictionAnalysis.less';
 
 const UFList = [
@@ -10,20 +11,36 @@ const UFList = [
 ];
 
 const PredictionAnalysis = () => {
+  const { projectId } = useParams();
+
+  const { data: deviceList } = useRequest(queryMembraneList, {
+    defaultParams: [{ project_id: projectId, type: 'uf' }],
+    formatResult: (result) => {
+      console.log(result.data.list);
+      if (result?.data?.list) {
+        return result.data.list;
+      }
+    },
+  });
+
+  const toDetail = (code) => {
+    history.push(`/smart-ops/prediction/${projectId}?code=${code}`);
+  };
+
   return (
     <>
       <div className="card-box" style={{ padding: '0.2rem' }}>
-        <SubTitle title="超滤工艺单元" />
-        {UFList.map((item, index) => {
+        <div className={styles.title}>超滤工艺单元</div>
+        {deviceList?.map((item, index) => {
           return (
             <div
-              key={item.label}
+              key={item.device_code}
               className={styles.itemContainer}
               onClick={() => {
-                console.log(index);
+                toDetail(item.device_code);
               }}
             >
-              <div>{item.label}</div>
+              <div>{`${item.device_name}（${item.device_code}）`}</div>
               <div className={styles.toDetail}>
                 预测分析
                 <RightOutlined

src/pages/SmartOps/predictionAnalysis/PredictionAnalysis.less

@@ -3,8 +3,37 @@
   display: flex;
   justify-content: space-between;
   font-size: 0.26rem;
-  border-bottom: 1px solid rgb(190, 190, 190);
+  border-bottom: 1px solid #dbdbdb;
   .toDetail {
-    color: #1755ff;
+    color: #4a90e2;
+  }
+}
+
+.title {
+  font-size: 0.3rem;
+  color: #4a90e2;
+  line-height: 0.4rem;
+  padding-left: 0.1rem;
+  padding-top: 0.16rem;
+}
+
+.detailDeviceName {
+  color: #4089ff;
+  background-color: #dce7f9;
+  font-size: 0.26rem;
+  padding: 0.4rem 0.2rem;
+  border-radius: 0.2rem;
+}
+
+.detailDevice {
+  padding: 0.1rem;
+  .detailDeviceTitle {
+    font-size: 0.3rem;
+    font-weight: 500;
+    color: #4089ff;
+    margin: 0.2rem 0;
+  }
+  .detailDeviceRangeSelect > * {
+    margin-right: 0.1rem;
   }
 }

src/pages/SmartOps/predictionAnalysis/PredictionDetail.js

@@ -0,0 +1,81 @@
+import PageContent from '@/components/PageContent';
+import PageTitle from '@/components/PageTitle';
+import { queryMembraneList, queryUFCondition } from '@/services/SmartOps';
+import { useLocation, useParams, useRequest } from '@umijs/max';
+import { Button, DatePicker } from 'antd';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import styles from './PredictionAnalysis.less';
+
+const { RangePicker } = DatePicker;
+
+const PredictionDetail = () => {
+  const { projectId } = useParams();
+  const locationSearch = new URLSearchParams(useLocation().search);
+  const code = locationSearch.get('code');
+
+  const defaultParams = {
+    project_id: projectId,
+    device_code: code,
+    s_time: dayjs().format('YYYY-MM-DD 00:00:00'),
+    e_time: dayjs().format('YYYY-MM-DD 23:59:59'),
+  };
+
+  const [currentDevice, setCurrentDevice] = useState({});
+
+  useRequest(queryMembraneList, {
+    defaultParams: [{ project_id: projectId, type: 'uf' }],
+    formatResult: (result) => {
+      if (result?.data?.list) {
+        console.log(result.data.list.find((item) => item.device_code === code));
+        setCurrentDevice(
+          result.data.list.find((item) => item.device_code === code),
+        );
+        return result.data.list;
+      }
+    },
+  });
+
+  const { run } = useRequest(queryUFCondition, {
+    defaultParams: [defaultParams],
+  });
+
+  const handleRangeChange = ([s_time, e_time]) => {
+    run({
+      ...filter,
+      s_time: dayjs(s_time).format('YYYY-MM-DD 00:00:00'),
+      e_time: dayjs(e_time).format('YYYY-MM-DD 23:59:59'),
+    });
+  };
+
+  return (
+    <PageContent closeable={false}>
+      <PageTitle returnable>预测分析</PageTitle>
+      <div className={styles.detailDeviceName}>
+        超滤工艺单元：{currentDevice.device_name}（{currentDevice.device_code}）
+      </div>
+      <div className={styles.detailDevice}>
+        <div className={styles.detailDeviceTitle}>跨膜压差</div>
+        <div className="card-box">
+          <div
+            className={styles.detailDeviceRangeSelect}
+            style={{ padding: '0.2rem' }}
+          >
+            <RangePicker inputReadOnly onChange={handleRangeChange} />
+            <Button type="primary" shape="round">
+              今日
+            </Button>
+            <Button type="primary" shape="round">
+              本周
+            </Button>
+            <Button type="primary" shape="round">
+              本月
+            </Button>
+          </div>
+          <div className={styles.detailDeviceCharts}></div>
+        </div>
+      </div>
+    </PageContent>
+  );
+};
+export default PredictionDetail;

src/services/SmartOps.js

@@ -399,7 +399,13 @@ export async function queryProjectConfig(params) {
   return { data: { project_categorys, optimizationNumber } };
 }
 
-// 项目膜设计：拉取设计列表  type膜类型 mf | uf | nf | ro
+/**
+ *
+ * @param {object} data
+ * @param {string} data.project_id 项目ID
+ * @param {string} data.type 膜类型 [mf] [uf] [nf] [ro]
+ * @returns
+ */
 export async function queryMembraneList(data) {
   let res = await request(
     `/api/simulations/v1/design/membrane/list?${stringify(data)}`,
@@ -455,7 +461,12 @@ export async function getDeviceRealDataByTime(params, signal) {
 
 /**
  * 获取历史数据
- * @param {{project_id: string, start_time: string, end_time: string, page: string, page_size: string}} params
+ * @param {object} params
+ * @param {string} params.project_id
+ * @param {string} params.start_time
+ * @param {string} params.end_time
+ * @param {string} params.page
+ * @param {string} params.page_size
  * @returns
  */
 export async function getHistoryRecord(params) {
@@ -464,3 +475,34 @@ export async function getHistoryRecord(params) {
     data: params,
   });
 }
+
+/**
+ * 获取超滤膜工况记录
+ * @param {object} params
+ * @param {object} params.project_id 项目ID
+ * @param {object} params.page_size 当前页大小
+ * @param {object} params.page 当前页
+ * @returns
+ */
+export async function queryUFDeviceCodeList(params) {
+  return await request(`/api/simulations/v1/uf/list?${stringify(params)}`, {
+    method: 'GET',
+  });
+}
+
+/**
+ * 获取超滤膜工况记录
+ * @param {object} params
+ * @param {object} params.project_id 项目ID
+ * @param {object} params.device_code 设备编号
+ * @param {object} params.page_size 当前页大小
+ * @param {object} params.page 当前页
+ * @param {object} params.s_time 记录开始时间
+ * @param {object} params.e_time 记录结束时间
+ * @returns
+ */
+export async function queryUFCondition(params) {
+  return await request(
+    `/api/simulations/v1/uf/conditions?${stringify(params)}`,
+  );
+}