魔改一波

src/pages/A6_1ques/A6QInfo/EchBox/index.tsx

@@ -1,10 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
-import styles from "./index.module.scss";
-import {
-  DataResTabListTabCutType,
-  DataResTabListType,
-  columnsObj,
-} from "../data";
+import React, { useEffect, useRef } from "react";
 
 import * as echarts from "echarts/core";
 import { TitleComponent } from "echarts/components";
@@ -22,6 +16,14 @@ import {
 } from "echarts/components";
 import { BarChart } from "echarts/charts";
 import { CanvasRenderer } from "echarts/renderers";
+import {
+  DataResTabListTabCutType,
+  DataResTabListType,
+  DataResType,
+  colorRes,
+  echResData,
+  echResMax,
+} from "./data";
 
 echarts.use([
   ToolboxComponent,
@@ -37,31 +39,12 @@ echarts.use([
   LabelLayout,
 ]);
 
-type DataResType = {
-  name: string;
-  value: number;
-  index: string;
-  bai: string;
-  customDesc: string[];
-};
-
 type Props = {
   type: DataResTabListTabCutType;
   info: DataResTabListType;
+  hidden: boolean;
 };
 
-const colorRes = [
-  "#5470c6",
-  "#91cc75",
-  "#fac858",
-  "#ee6666",
-  "#73c0de",
-  "#3ba272",
-  "#fc8452",
-  "#9a60b4",
-  "#ea7ccc",
-];
-
 const optionObjFu = (type: DataResTabListTabCutType, arr: DataResType[]) => {
   const arr1 = arr.map((v) => v.index);
   const arr2 = arr.map((v) => v.value);
@@ -145,14 +128,9 @@ const optionObjFu = (type: DataResTabListTabCutType, arr: DataResType[]) => {
   }
 };
 
-function EchBox({ type, info }: Props) {
-  const [dataRes, setDataRes] = useState<DataResType[]>([]);
-
+function EchBox({ type, info, hidden }: Props) {
   const oldDataFlagId = useRef(0);
 
-  // 总得分 和 总数
-  const [maxNum, setMaxNum] = useState(0);
-
   useEffect(() => {
     // 防止多次渲染
     if (oldDataFlagId.current === info.id) return;
@@ -164,27 +142,10 @@ function EchBox({ type, info }: Props) {
     const flag = info.type === "排序";
 
     // 获取总数
-    const max = lodArr
-      .map((v) => (flag ? v.score || 0 : v.pcs))
-      .reduce(function (prev, curr) {
-        return prev + curr;
-      });
-
-    setMaxNum(max);
-
-    const arr: DataResType[] = lodArr.map((v, i) => ({
-      name: v.name,
-      value: flag ? v.score || 0 : v.pcs,
-      index: v.name === "其他" ? "自定义回答" : Reflect.get(columnsObj, i),
-      bai: Math.round(((flag ? v.score || 0 : v.pcs) / max) * 100) + "%",
-      customDesc:
-        v.name === "其他"
-          ? (v.customDesc || "").split(";").filter((v) => v)
-          : ([] as string[]),
-    }));
-
-    setDataRes(arr);
-    // console.log(arr);
+    const max = echResMax(lodArr, flag);
+
+    const arr: DataResType[] = echResData(lodArr, flag, max);
+    // console.log("11111111111", arr);
 
     const dom = EchBox1.current;
     if (dom) {
@@ -197,48 +158,14 @@ function EchBox({ type, info }: Props) {
   const EchBox1 = useRef<HTMLDivElement>(null);
 
   return (
-    <div className={styles.EchBox}>
-      <div className="EchBox1" ref={EchBox1}></div>
+    <div
+      hidden={hidden}
+      className="EchBox1"
+      ref={EchBox1}
+      style={{ width: "600px", height: "300px" }}
+    >
       {/* 右侧的数据 */}
-      <div className="EchBox2">
-        <div
-          className="EchBox2Num"
-          hidden={dataRes.length <= 0 || maxNum === 0}
-        >
-          {info.type === "排序" ? "总得分" : "总数"}：{maxNum}
-        </div>
-        {dataRes.map((v, i) => (
-          <div key={i} className="EchBox2Son">
-            {v.name === "其他" ? (
-              <div className="EchBox2Son1">
-                <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
-                  自定义回答：
-                </div>
-                <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
-                  {v.value}({v.bai})
-                </div>
-                <div className="EchBox2Son1_3">
-                  {v.customDesc.map((v2, i2) => (
-                    <div key={i2}>
-                      {i2 + 1}：{v2}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : (
-              <div className="EchBox2Son1">
-                <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
-                  {v.index}：
-                </div>
-                <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
-                  {v.value}({v.bai})
-                </div>
-                <div className="EchBox2Son1_3">{v.name}</div>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
+      <div className="EchBox2"></div>
     </div>
   );
 }

src/pages/A6_1ques/A6QInfo/EchBox/index.module.scss

@@ -1,56 +0,0 @@
-.EchBox {
-  width: 100%;
-  display: flex;
-
-  :global {
-    .EchBox1 {
-      width: 600px;
-      height: 300px;
-    }
-
-    .EchBox2 {
-      width: calc(100% - 600px);
-      min-height: 300px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .EchBox2Num {
-        margin-bottom: 6px;
-        font-weight: 700;
-        padding-left: 80px;
-      }
-
-      .EchBox2Son {
-        .EchBox2Son1 {
-          display: flex;
-
-          &>div {
-            margin-bottom: 6px;
-          }
-
-          .EchBox2Son1_1 {
-            font-weight: 700;
-            width: 110px;
-            text-align: right;
-          }
-
-          .EchBox2Son1_2 {
-            font-weight: 700;
-            width: 80px;
-            text-align: center;
-          }
-
-          .EchBox2Son1_3 {
-            width: calc(100% - 200px);
-            margin-left: 10px;
-
-            &>div {
-              margin-bottom: 6px;
-            }
-          }
-        }
-      }
-    }
-  }
-}

src/pages/A6_1ques/A6QInfo/EchTxt/index.module.scss

@@ -0,0 +1,46 @@
+.EchTxt {
+  width: calc(100% - 600px);
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  :global {
+    .EchBox2Num {
+      margin-bottom: 6px;
+      font-weight: 700;
+      padding-left: 80px;
+    }
+
+    .EchBox2Son {
+      .EchBox2Son1 {
+        display: flex;
+
+        &>div {
+          margin-bottom: 6px;
+        }
+
+        .EchBox2Son1_1 {
+          font-weight: 700;
+          width: 110px;
+          text-align: right;
+        }
+
+        .EchBox2Son1_2 {
+          font-weight: 700;
+          width: 80px;
+          text-align: center;
+        }
+
+        .EchBox2Son1_3 {
+          width: calc(100% - 200px);
+          margin-left: 10px;
+
+          &>div {
+            margin-bottom: 6px;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/A6_1ques/A6QInfo/EchTxt/index.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useState } from "react";
+import styles from "./index.module.scss";
+import {
+  DataResTabListType,
+  DataResType,
+  colorRes,
+  echResData,
+  echResMax,
+} from "../data";
+
+type Props = {
+  info: DataResTabListType;
+  hidden: boolean;
+};
+
+function EchTxt({ info, hidden }: Props) {
+  const [dataRes, setDataRes] = useState<DataResType[]>([]);
+
+  // 总得分 和 总数
+  const [maxNum, setMaxNum] = useState(0);
+
+  const oldDataFlagId = useRef(0);
+
+  useEffect(() => {
+    // 防止多次渲染
+    if (oldDataFlagId.current === info.id || info.tabAc === "表格") return;
+
+    oldDataFlagId.current = info.id;
+
+    // console.log("222222222222", info);
+
+    const lodArr = info.optionsCount || [];
+
+    const flag = info.type === "排序";
+    // 获取总数
+
+    const max = echResMax(lodArr, flag);
+
+    setMaxNum(max);
+
+    const arr: DataResType[] = echResData(lodArr, flag, max);
+
+    setDataRes(arr);
+  }, [info]);
+
+  return (
+    <div className={styles.EchTxt} hidden={hidden}>
+      <div className="EchBox2Num" hidden={dataRes.length <= 0 || maxNum === 0}>
+        {info.type === "排序" ? "总得分" : "总数"}：{maxNum}
+      </div>
+      {dataRes.map((v, i) => (
+        <div key={i} className="EchBox2Son">
+          {v.name === "其他" ? (
+            <div className="EchBox2Son1">
+              <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
+                自定义回答：
+              </div>
+              <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
+                {v.value}({v.bai})
+              </div>
+              <div className="EchBox2Son1_3">
+                {v.customDesc.map((v2, i2) => (
+                  <div key={i2}>
+                    {i2 + 1}：{v2}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="EchBox2Son1">
+              <div className="EchBox2Son1_1" style={{ color: colorRes[i] }}>
+                {v.index}：
+              </div>
+              <div className="EchBox2Son1_2" style={{ color: colorRes[i] }}>
+                {v.value}({v.bai})
+              </div>
+              <div className="EchBox2Son1_3">{v.name}</div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const MemoEchTxt = React.memo(EchTxt);
+
+export default MemoEchTxt;

src/pages/A6_1ques/A6QInfo/data.ts

@@ -35,3 +35,53 @@ export type DataResTabListType = {
   tabAc: DataResTabListTabCutType;
   optionsCount: DataResTabListOptionsType[];
 };
+
+// ech Type
+export type DataResType = {
+  name: string;
+  value: number;
+  index: string;
+  bai: string;
+  customDesc: string[];
+};
+
+export const colorRes = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc",
+];
+
+// ech数据获取总数
+export const echResMax = (arr: DataResTabListOptionsType[], flag: boolean) => {
+  const max = arr
+    .map((v) => (flag ? v.score || 0 : v.pcs))
+    .reduce(function (prev, curr) {
+      return prev + curr;
+    });
+  return max;
+};
+
+// ech数据整理
+export const echResData = (
+  arr: DataResTabListOptionsType[],
+  flag: boolean,
+  max: number
+) => {
+  const newArr: DataResType[] = arr.map((v, i) => ({
+    name: v.name,
+    value: flag ? v.score || 0 : v.pcs,
+    index: v.name === "其他" ? "自定义回答" : Reflect.get(columnsObj, i),
+    bai: Math.round(((flag ? v.score || 0 : v.pcs) / max) * 100) + "%",
+    customDesc:
+      v.name === "其他"
+        ? (v.customDesc || "").split(";").filter((v) => v)
+        : ([] as string[]),
+  }));
+  return newArr;
+};

src/pages/A6_1ques/A6QInfo/index.module.scss

@@ -136,6 +136,11 @@
                   background: #fafafa;
                 }
               }
+
+              .A6FechBox {
+                width: 100%;
+                display: flex;
+              }
             }
 
             .A6QC2None {

src/pages/A6_1ques/A6QInfo/index.tsx

@@ -17,6 +17,7 @@ import {
   DataResTabListType,
   columnsObj,
 } from "./data";
+import EchTxt from "./EchTxt";
 
 type DataType = {
   id: number;
@@ -124,11 +125,7 @@ function A6QInfo({ sId, closeFu }: Props) {
             },
             {
               title: "选项描述",
-              render: (
-                item: DataResTabListOptionsType,
-                _: any,
-                index: number
-              ) => (
+              render: (item: DataResTabListOptionsType) => (
                 <div className="tab2LookBox">
                   {item.customDesc
                     ? item.customDesc
@@ -368,25 +365,31 @@ function A6QInfo({ sId, closeFu }: Props) {
                       )}
                     </div>
 
-                    {/* 柱状图 */}
-                    {v.tabCut.find((v) => v.name === "柱状图")?.done ? (
-                      <div hidden={v.tabAc !== "柱状图"}>
-                        <EchBox type={v.tabAc} info={v} />
-                      </div>
-                    ) : null}
+                    <div className="A6FechBox">
+                      {v.tabCut.find((v) => v.name === "柱状图")?.done ? (
+                        <EchBox
+                          hidden={v.tabAc !== "柱状图"}
+                          type={v.tabAc}
+                          info={v}
+                        />
+                      ) : null}
+                      {v.tabCut.find((v) => v.name === "折线图")?.done ? (
+                        <EchBox
+                          hidden={v.tabAc !== "折线图"}
+                          type={v.tabAc}
+                          info={v}
+                        />
+                      ) : null}
+                      {v.tabCut.find((v) => v.name === "饼图")?.done ? (
+                        <EchBox
+                          hidden={v.tabAc !== "饼图"}
+                          type={v.tabAc}
+                          info={v}
+                        />
+                      ) : null}
 
-                    {/* 折线图 */}
-                    {v.tabCut.find((v) => v.name === "折线图")?.done ? (
-                      <div hidden={v.tabAc !== "折线图"}>
-                        <EchBox type={v.tabAc} info={v} />
-                      </div>
-                    ) : null}
-                    {/* 饼图 */}
-                    {v.tabCut.find((v) => v.name === "饼图")?.done ? (
-                      <div hidden={v.tabAc !== "饼图"}>
-                        <EchBox type={v.tabAc} info={v} />
-                      </div>
-                    ) : null}
+                      <EchTxt info={v} hidden={v.tabAc === "表格"} />
+                    </div>
                   </div>
                 ))
               ) : (

src/pages/A6_1ques/index.tsx

@@ -10,7 +10,6 @@ import { Button, Input } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import A6Qadd from "./A6Qadd";
 import { A6QInfoType } from "./data";
-import A6QInfo from "./A6QInfo";
 import A6Qtopic from "./A6Qtopic";
 import { A6Q_APIdel, A6Q_APIgetList } from "@/store/action/A6_1ques";
 import MyTable from "@/components/MyTable";
@@ -19,6 +18,7 @@ import { A6QtableC } from "@/utils/tableData";
 import { A6QtableType } from "@/types";
 import MyPopconfirm from "@/components/MyPopconfirm";
 import { MessageFu } from "@/utils/message";
+import A6QInfo from "./A6QInfo";
 
 function A6_1ques() {
   const dispatch = useDispatch();

src/utils/http.ts

@@ -7,8 +7,8 @@ import { domShowFu } from "./domShow";
 
 const envFlag = process.env.NODE_ENV === "development";
 
-// const baseUrlTemp = "https://sit-chaozhoubwg.4dage.com"; // 测试环境
-const baseUrlTemp = "http://192.168.20.61:8064"; // 线下环境
+const baseUrlTemp = "https://sit-chaozhoubwg.4dage.com"; // 测试环境
+// const baseUrlTemp = "http://192.168.20.61:8064"; // 线下环境
 
 const baseFlag = baseUrlTemp.includes("https://");