智慧运营报告页面

.umirc.ts

@@ -27,7 +27,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8888/',
-      target: 'http://47.96.12.136:8788/',
+      target: 'http://47.96.12.136:8888/',
       // target: 'http://120.55.44.4:8903/',
       // target: 'https://work.greentech.com.cn/',
       changeOrigin: true,

src/pages/EqSelfInspection/List/index.js

@@ -38,7 +38,6 @@ function List(props) {
   return (
     <PageContent closeable={false}>
       <PageTitle returnable>自检记录</PageTitle>
-
       <div className={styles.list}>
         {list.map((item) => (
           <div className={styles.item} onClick={() => goToDetail(item)}>

src/pages/SmartReport/index.js

@@ -1,96 +1,438 @@
 import ModuleTitle from '@/components/ManagementPage/moduleTitle';
-import { useNavigate, useParams } from '@umijs/max';
+import { queryWorkReport } from '@/services/smartReport';
+import { useNavigate, useParams, useRequest } from '@umijs/max';
+import { ConfigProvider, DatePicker, Select } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
+import dayjs from 'dayjs';
+import * as echarts from 'echarts';
+import { useEffect, useRef, useState } from 'react';
 import styles from './index.less';
+
+const { RangePicker } = DatePicker;
+
 const SmartReport = () => {
   const navigate = useNavigate();
   const { projectId } = useParams();
+  const FORMAT = 'YYYY-MM-DD';
+
+  const [showRange, setShowRange] = useState(false);
+  const [date, setDate] = useState({
+    stime: dayjs().subtract('week', 1).format(FORMAT),
+    etime: dayjs().format(FORMAT),
+  });
+
+  const eqDomRef = useRef(null);
+  const eqChartRef = useRef(null);
+
+  const taskDomRef = useRef(null);
+  const taskChartRef = useRef(null);
+
+  const workDomRef = useRef(null);
+  const workChartRef = useRef(null);
+
+  const workScoreDomRef = useRef(null);
+  const workScoreChartRef = useRef(null);
+
+  // const defaultData = {
+  //   electricity: '1111',
+  //   in_water: '22222',
+  //   maintain_record: '333',
+  //   medicine: '444',
+  //   out_water: '666',
+  //   push_complete_task: '777',
+  //   push_complete_task_per: '888',
+  //   push_task: '555',
+  //   repair_record: '999',
+  //   self_inspection_abnormal_task: '1212',
+  //   self_inspection_normal_task: '13123',
+  //   self_inspection_task: '1414',
+  //   water_electricity: '1515',
+  //   water_medicine: '1616',
+  //   work_order_complete_task: '1717',
+  //   work_order_complete_task_per: '80',
+  //   work_order_task: '123',
+  //   patrol_safe: 2,
+  //   patrol_section: 3,
+  //   push_optimize_task: 6,
+  //   push_complete_task: 4,
+  //   eqData: [
+  //     { name: '安全隐患', value: 2 },
+  //     { name: '工艺异常', value: 3 },
+  //     { name: '设备异常', value: 4 },
+  //   ],
+  //   mandate_type_con: 1,
+  //   mandate_type_group: 2,
+  //   mandate_type_pat: 3,
+  //   mandate_type_pro: 4,
+  //   taskData: [
+  //     { name: '工况任务', value: 2 },
+  //     { name: '集团任务', value: 3 },
+  //     { name: '系统自检', value: 4 },
+  //     { name: '生产任务', value: 5 },
+  //   ],
+  //   chart_check: 1,
+  //   chart_part: 2,
+  //   chart_section: 3,
+  //   repair_record: 4,
+  //   maintain_record: 5,
+  //   patrol_mandate_record: 6,
+  //   reagent_record: 7,
+  //   workOrderData: [
+  //     { name: '盘点', value: 2 },
+  //     { name: '备品备件', value: 3 },
+  //     { name: '工艺工单', value: 4 },
+  //     { name: '维修工单', value: 5 },
+  //     { name: '保养工单', value: 5 },
+  //     { name: '巡检工单', value: 5 },
+  //     { name: '加药工单', value: 5 },
+  //   ],
+  //   con_level_five: 6, //较差
+  //   con_level_four: 1, //一般
+  //   con_level_one: 2, //优秀
+  //   con_level_three: 3, //较好
+  //   con_level_two: 4, //良好
+  //   workScoreData: [
+  //     { name: '较差', value: 2 },
+  //     { name: '一般', value: 3 },
+  //     { name: '优秀', value: 4 },
+  //     { name: '较好', value: 5 },
+  //     { name: '良好', value: 4 },
+  //   ],
+  // };
+
+  const { data = {}, run } = useRequest(
+    (date) =>
+      queryWorkReport({
+        project_id: projectId,
+        ...date,
+      }),
+    {
+      defaultParams: [{ project_id: projectId, ...date }],
+      formatResult: (res) => {
+        const data = res.data;
+        return {
+          ...data,
+          eqData: [
+            { name: '安全隐患', value: data.patrol_safe },
+            { name: '工艺异常', value: data.patrol_section },
+            { name: '设备异常', value: data.push_complete_task },
+          ],
+          taskData: [
+            { name: '工况任务', value: data.mandate_type_con },
+            { name: '集团任务', value: data.mandate_type_group },
+            { name: '系统自检', value: data.mandate_type_pat },
+            { name: '生产任务', value: data.mandate_type_pro },
+          ],
+          workOrderData: [
+            { name: '盘点', value: data.chart_check },
+            { name: '备品备件', value: data.chart_part },
+            { name: '工艺工单', value: data.chart_section },
+            { name: '维修工单', value: data.repair_record },
+            { name: '保养工单', value: data.maintain_record },
+            { name: '巡检工单', value: data.patrol_mandate_record },
+            { name: '加药工单', value: data.reagent_record },
+          ],
+          workScoreData: [
+            { name: '较差', value: data.con_level_five },
+            { name: '一般', value: data.con_level_four },
+            { name: '优秀', value: data.con_level_one },
+            { name: '较好', value: data.con_level_three },
+            { name: '良好', value: data.con_level_two },
+          ],
+        };
+      },
+    },
+  );
+
+  const handleChange = (value) => {
+    const date = { ...date };
+    switch (value) {
+      case '1':
+        date.stime = dayjs().subtract(1, 'week').format(FORMAT);
+        date.etime = dayjs().format(FORMAT);
+        setDate(date);
+        setShowRange(false);
+        run(date);
+        break;
+      case '2':
+        date.stime = dayjs().subtract(1, 'month').format(FORMAT);
+        date.etime = dayjs().format(FORMAT);
+        setDate(date);
+        setShowRange(false);
+        run(date);
+        break;
+      case '3':
+        setShowRange(true);
+        break;
+    }
+  };
+
+  const {
+    electricity,
+    in_water,
+    maintain_record,
+    medicine,
+    out_water,
+    push_optimize_task,
+    push_complete_task,
+    push_complete_task_per,
+    push_task,
+    repair_record,
+    self_inspection_abnormal_task,
+    self_inspection_normal_task,
+    self_inspection_task,
+    water_electricity,
+    water_medicine,
+    work_order_complete_task,
+    work_order_complete_task_per,
+    work_order_task,
+  } = data;
+
+  useEffect(() => {
+    initData();
+  }, [data]);
+
+  useEffect(() => {
+    eqChartRef.current = echarts.init(eqDomRef.current);
+    taskChartRef.current = echarts.init(taskDomRef.current);
+    workChartRef.current = echarts.init(workDomRef.current);
+    workScoreChartRef.current = echarts.init(workScoreDomRef.current);
+
+    return () => {
+      eqChartRef.current.dispose();
+      taskChartRef.current.dispose();
+      workChartRef.current.dispose();
+      workScoreChartRef.current.dispose();
+    };
+  }, []);
+
+  const initData = () => {
+    const eqOption = getPieOption(data.eqData, '异常类型统计');
+    if (eqChartRef.current) eqChartRef.current.setOption(eqOption);
+
+    const taskOption = getPieOption(data.taskData, '任务类型统计');
+    if (taskChartRef.current) taskChartRef.current.setOption(taskOption);
+
+    const workOption = getPieOption(data.workOrderData, '工单类型统计');
+    if (workChartRef.current) workChartRef.current.setOption(workOption);
+
+    const workScoreOption = getPieOption(data.workScoreData, '工单类型统计');
+    if (workScoreChartRef.current)
+      workScoreChartRef.current.setOption(workScoreOption);
+  };
+
+  const onChange = (value) => {
+    if (!value) return;
+    const date = { ...date };
+    date.stime = value[0].format(FORMAT);
+    date.etime = value[1].format(FORMAT);
+    run(date);
+    setDate(date);
+  };
 
   return (
-    <div className={styles.page}>
-      <div className={styles.head}>
-        <div>
-          <div className={styles.name}>智慧运营报告</div>
-          <div className={styles.photo}>11月9日-11月15日</div>
+    <ConfigProvider locale={zhCN}>
+      <div className={styles.page}>
+        <div className={styles.head}>
+          <div>
+            <div className={styles.name}>智慧运营报告</div>
+            <div className={styles.photo}>
+              {dayjs(date.stime).format('MM月DD日')}-
+              {dayjs(date.etime).format('MM月DD日')}
+            </div>
+          </div>
+          <div>
+            时间：
+            <Select
+              defaultValue="1"
+              style={{ width: 120 }}
+              onChange={handleChange}
+              options={[
+                {
+                  value: '1',
+                  label: '近7天',
+                },
+                {
+                  value: '2',
+                  label: '近30天',
+                },
+                {
+                  value: '3',
+                  label: '自定义时间',
+                },
+              ]}
+            />
+            <div>{showRange && <RangePicker onChange={onChange} />}</div>
+          </div>
         </div>
-        <div>时间：</div>
-      </div>
-      <div className={styles.box}>
-        <div className={styles.left}>概览</div>
-        <div className={styles.title}>无锡锡山水厂</div>
-        <div className={styles.content}>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
-          <div className={styles.item}>智慧运营天数：2732天</div>
+        <div className={styles.box}>
+          <div className={styles.left}>概览</div>
+          <div className={styles.title}>无锡锡山水厂</div>
+          <div className={styles.content}>
+            {/* <div className={styles.item}>智慧运营天数：{}天</div>
+          <div className={styles.item}>智慧运营节省金额：{}元</div> */}
+            <div className={styles.item}>累积进水：{in_water}</div>
+            <div className={styles.item}>累积出水：{out_water}</div>
+            <div className={styles.item}>吨水能耗：{water_electricity}</div>
+            <div className={styles.item}>吨水药耗：{water_medicine}元</div>
+            <div className={styles.item}>
+              系统自检次数：{self_inspection_task}次
+            </div>
+            <div className={styles.item}>优化建议： {push_optimize_task}条</div>
+            <div className={styles.item}>任务完成：{push_complete_task}个</div>
+            <div className={styles.item}>
+              工单完成：{work_order_complete_task}个
+            </div>
+            <div className={styles.item}>设备维修：{repair_record}个</div>
+            <div className={styles.item}>设备保养：{maintain_record}个</div>
+          </div>
         </div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="水量" />
-        <div className={styles.content}>
-          <div className={styles.item}>累积进水：12343t</div>
-          <div className={styles.item}>累积出水：12232t</div>
+        <div className={styles.box}>
+          <ModuleTitle title="水量" />
+          <div className={styles.content}>
+            <div className={styles.item}>累积进水：{in_water}</div>
+            <div className={styles.item}>累积出水：{out_water}</div>
+          </div>
         </div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="能耗" />
-        <div className={styles.content}>
-          <div className={styles.item}>吨水电耗：122kwh</div>
-          <div className={styles.item}>累积耗电量：12</div>
+        <div className={styles.box}>
+          <ModuleTitle title="能耗" />
+          <div className={styles.content}>
+            <div className={styles.item}>吨水能耗：{water_electricity}</div>
+            <div className={styles.item}>累积耗能量：{electricity}</div>
+          </div>
         </div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="药耗" />
-        <div className={styles.content}>
-          <div className={styles.item}>吨水药耗：12</div>
-          <div className={styles.item}>累积用药量：122kwh</div>
+        <div className={styles.box}>
+          <ModuleTitle title="药耗" />
+          <div className={styles.content}>
+            <div className={styles.item}>吨水药耗：{water_medicine}</div>
+            <div className={styles.item}>累积用药量：{medicine}</div>
+          </div>
         </div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="系统自检" />
-        <div className={styles.threeContent}>
-          <div className={styles.numItem}>
-            <div>12333</div>
-            <div>自检次数</div>
+        <div className={styles.box}>
+          <ModuleTitle title="系统自检" />
+          <div className={styles.threeContent}>
+            <div className={styles.numItem}>
+              <div>{self_inspection_task}</div>
+              <div>自检次数</div>
+            </div>
+            <div className={styles.numItem}>
+              <div>{self_inspection_abnormal_task}</div>
+              <div>异常次数</div>
+            </div>
+            <div className={styles.numItem}>
+              <div>{self_inspection_normal_task}</div>
+              <div>正常次数</div>
+            </div>
+          </div>
+          <div
+            ref={eqDomRef}
+            style={{ height: '340px', margin: '10px 0 10px 0' }}
+          ></div>
+          {/* <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div> */}
+        </div>
+        <div className={styles.box}>
+          <ModuleTitle title="智慧运营" />
+          <div className={styles.smartText}>
+            优化条数:{push_optimize_task}条
           </div>
-          <div className={styles.numItem}>
-            <div>12333</div>
-            <div>自检次数</div>
+          <div
+            ref={workScoreDomRef}
+            style={{ height: '340px', margin: '10px 0 10px 0' }}
+          ></div>
+          {/* <div className={styles.smartText}>工况分数统计（折线图）</div> */}
+          <div className={styles.smartText}>
+            超滤工况统计（膜寿命、能耗、药耗数据）
           </div>
-          <div className={styles.numItem}>
-            <div>12333</div>
-            <div>自检次数</div>
+          <div className={styles.smartText}>
+            反渗透工况统计（膜寿命、能耗、药耗数据）
           </div>
         </div>
-        <div>异常类型统计（设备异常、工艺异常、安全隐患异常）</div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="智慧运营" />
-        <div className={styles.smartText}>智慧运营本周累计节省金额：234元</div>
-        <div className={styles.smartText}>累积用药量：122kwh</div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="任务工单" />
-        <div className={styles.content}>
-          <div className={styles.item}>任务数量：1234</div>
-          <div className={styles.item}>工单数量：234</div>
-          <div className={styles.item}>任务数量：1234</div>
-          <div className={styles.item}>工单数量：234</div>
-          <div className={styles.item}>任务数量：1234</div>
-          <div className={styles.item}>工单数量：234</div>
+        <div className={styles.box}>
+          <ModuleTitle title="任务工单" />
+          <div className={styles.content}>
+            <div className={styles.item}>任务数量：{push_task}</div>
+            <div className={styles.item}>工单数量：{work_order_task}</div>
+            <div className={styles.item}>
+              任务完成数量：{push_complete_task}
+            </div>
+            <div className={styles.item}>
+              工单完成数量：{work_order_complete_task}
+            </div>
+            <div className={styles.item}>
+              任务完成率：{push_complete_task_per}%
+            </div>
+            <div className={styles.item}>
+              工单完成率：{work_order_complete_task_per}%
+            </div>
+            <div className={styles.item}>
+              <div ref={taskDomRef} style={{ height: '300px' }}></div>
+            </div>
+            <div className={styles.item}>
+              <div ref={workDomRef} style={{ height: '300px' }}></div>
+            </div>
+          </div>
         </div>
-      </div>
-      <div className={styles.box}>
-        <ModuleTitle title="设备维修保养" />
-        <div className={styles.content}>
-          <div className={styles.item}>维修数量：12</div>
-          <div className={styles.item}>保养数量：12</div>
+        <div className={styles.box}>
+          <ModuleTitle title="设备维修保养" />
+          <div className={styles.content}>
+            <div className={styles.item}>维修数量：{repair_record}</div>
+            <div className={styles.item}>保养数量：{maintain_record}</div>
+          </div>
         </div>
       </div>
-    </div>
+    </ConfigProvider>
   );
 };
 export default SmartReport;
+const getPieOption = (chartData, name) => {
+  const option = {
+    title: {
+      text: name,
+      top: '92%',
+      left: '50%',
+      textAlign: 'center',
+      textStyle: {
+        color: '#000000',
+        fontWeight: 'normal',
+        fontSize: 18,
+      },
+    },
+    color: [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc',
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'horizontal',
+      // left: 'left',
+      textStyle: {
+        color: '#000000',
+        fontSize: 18,
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '50%',
+        data: chartData,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  };
+  return option;
+};

src/pages/SmartReport/index.less

@@ -53,7 +53,7 @@
   }
   .content {
     display: flex;
-    padding: 20px;
+    padding: 20px 20px 0 20px;
     flex-wrap: wrap;
     .item {
       width: 50%;

src/services/smartReport.js

@@ -0,0 +1,6 @@
+import { request } from '@umijs/max';
+import { stringify } from 'qs';
+
+export async function queryWorkReport(params) {
+  return await request(`/api/v1/intelligence/work-report?${stringify(params)}`);
+}