ADD：报告界面增加taskname

package.json

@@ -62,6 +62,7 @@
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",
     "dva": "^2.4.0",
+    "echarts": "^5.1.1",
     "gg-editor": "^2.0.2",
     "lodash": "^4.17.11",
     "lodash-decorators": "^6.0.0",

src/components/GlobalHeader/RightContent.jsx

@@ -1,6 +1,6 @@
 import { Tooltip, Tag } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { connect, SelectLang } from 'umi';
 import Avatar from './AvatarDropdown';
 import HeaderSearch from '../HeaderSearch';
@@ -13,28 +13,30 @@ const ENVTagColor = {
 };
 
 const GlobalHeaderRight = (props) => {
-  const { theme, layout } = props;
+  const { theme, layout,dispatch ,taskName} = props;
   let className = styles.right;
 
   if (theme === 'dark' && layout === 'top') {
     className = `${styles.right}  ${styles.dark}`;
   }
 
+  useEffect(()=>{
+    dispatch({
+      type: 'report/getTaskName',
+      payload: { examId: 1945 }
+    });
+  },[dispatch])
   return (
     <div className={className}>
       {/*<NoticeIconView />*/}
-      <Avatar menu />
-      {REACT_APP_ENV && (
-        <span>
-          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
-        </span>
-      )}
-      <SelectLang className={styles.action} />
+      <h3>{taskName}</h3>
+      {/*<SelectLang className={styles.action}/>*/}
     </div>
   );
 };
 
-export default connect(({ settings }) => ({
+export default connect(({ report,settings }) => ({
   theme: settings.navTheme,
   layout: settings.layout,
+  taskName:report.taskName
 }))(GlobalHeaderRight);

src/components/GlobalHeader/index.less

@@ -13,12 +13,14 @@
 
 .right {
   display: flex;
-  float: right;
+  float: left;
   height: 48px;
-  margin-left: auto;
+  width: 100%;
+  margin-left: 0;
   overflow: hidden;
   .action {
     display: flex;
+    float:right;
     align-items: center;
     height: 100%;
     padding: 0 12px;

src/layouts/BasicLayout.jsx

@@ -98,15 +98,15 @@ const BasicLayout = (props) => {
 
           return <Link to={menuItemProps.path}>{defaultDom}</Link>;
         }}
-        // breadcrumbRender={(routers = []) => [
-        //   {
-        //     path: '/',
-        //     breadcrumbName: formatMessage({
-        //       id: 'menu.edit',
-        //     }),
-        //   },
-        //   ...routers,
-        // ]}
+        breadcrumbRender={(routers = []) => [
+          {
+            path: '/',
+            breadcrumbName: formatMessage({
+              id: 'menu.edit',
+            }),
+          },
+          ...routers,
+        ]}
         itemRender={(route, params, routes, paths) => {
           const first = routes.indexOf(route) === 0;
           return first ? (

src/models/report.js

@@ -1,50 +1,25 @@
 import { query } from '@/services/user';
-import { getOsType } from '@/pages/edit/service';
+import { getExamInfo } from '@/pages/edit/service';
 const ReportModel = {
   namespace: 'report',
   state: {
-    report: {},
+    taskName: {},
   },
   effects: {
-    *fetchBugList(_, { call, put }) {
-      const response = yield call(query);
-      console.log(response)
-      // yield put({
-      //   type: 'save',
-      //   payload: response,
-      // });
-    },
-    *getR( { payload },{call,put}){
+    * getTaskName({ payload }, { call, put}){
       const { examId } = payload;
-      let res = yield call(getOsType,examId);
-      let osType = res?.result?.paper_type;
-      osType = JSON.parse(osType)['subTitles'][2]?.value;
+      const res = yield call(getExamInfo, examId);
+      const taskName = res?.result?.name;
       yield put({
-        type:'saveOsType',
-        payload:osType
-      })
+        type: 'saveTaskName',
+        payload: taskName,
+      });
     },
   },
   reducers: {
-    saveCurrentUser(state, action) {
-      return { ...state, currentUser: action.payload || {} };
-    },
-
-    changeNotifyCount(
-      state = {
-        currentUser: {},
-      },
-      action,
-    ) {
-      return {
-        ...state,
-        currentUser: {
-          ...state.currentUser,
-          notifyCount: action.payload.totalCount,
-          unreadCount: action.payload.unreadCount,
-        },
-      };
+    saveTaskName(state, { payload }) {
+      return { ...state, taskName: payload };
     },
-  },
+  }
 };
-export default UserModel;
+export default ReportModel;

src/pages/edit/components/Step2/index.jsx

@@ -10,25 +10,34 @@ import {
   EditOutlined,
   EyeOutlined,
 } from '@ant-design/icons';
-
+import * as echarts from 'echarts'
 import { recurrent, severity, bug_categories } from './const';
+import { timeToString } from '../../utils';
 
 const formItemLayout = {
   labelCol: {
-    span: 5,
+    span: 8,
   },
   wrapperCol: {
     span: 19,
   },
 };
+const images = [
+  '../../assents/noArrived.png',
+  '../../assents/yellowFlag.png',
+  '../../assents/redFlag.png',
+  '../../assents/recPage.png',
+];
 
 const Step2 = (props) => {
   const [reportForm] = Form.useForm();
   const [addCaseForm] = Form.useForm();
   const [addBugForm] = Form.useForm();
-  const { data, dispatch, reportCommonInfo, testCaseList, caseBugList, categories } = props;
 
-  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
+  const { data, dispatch, reportCommonInfo,
+    testCaseList, caseBugList, categories,pathInfo } = props;
+
+  const [showTaskRecommendModal, setTaskRecommendModal] = useState(true);
   const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
   const [showAddBugModal, setAddTestBugModal] = useState(false);
   const currentTestCaseRef = useRef({});
@@ -37,10 +46,192 @@ const Step2 = (props) => {
   const [page2List, setPage2List] = useState([]);
   const [page3List, setPage3List] = useState([]);
 
+  const chartRef = useRef();
+
   if (!data) {
     return null;
   }
 
+  const handleEditReportInfo = ()=>{
+    console.log('sss')
+
+  }
+
+  const initEcharts = () => {
+    let item_color = 'rgba(226,245,240,1)';
+    let border_color = 'rgba(0,0,0,0.9)';
+    // let userPath = this.userPath;
+    let categories = [
+      {
+        'name': '暂无Bug',
+        'icon': images[0],
+        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+      },
+      {
+        'name': '已有Bug',
+        'icon': images[1],
+        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+      },
+      {
+        'name': '我的Bug',
+        'icon': images[2],
+        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+      },
+      {
+        'name': '推荐页面',
+        'icon': images[3],
+        'itemStyle': {'normal': {'color': item_color, 'borderColor': border_color}}
+      }
+    ];
+    let option2 = {
+      legend: {     //配置legend，这里的data，要对应type为‘bar’的series数据项的‘name’名称，作为图例的说明
+        data: categories,
+        selecedMode: false,  //图例禁止点击
+        top: '5%',
+        left: '3%',
+        itemWidth: 10,
+        itemHeight: 10,
+        orient: 'vertical',
+      },
+      tooltip: {
+        trigger: 'item',
+        triggerOn: 'mousemove',
+        formatter: function (params) {
+          if (params.data.category == 1) {
+            return params.name + '<br>' + '我发现/所有: 0/' + params.value;
+          } else {
+            return '还未有人在该页面发现Bug,努力寻找第一个Bug吧!';
+          }
+        }
+      },
+      grid: {
+        z: 1,    //grid作为柱状图的坐标系，其层级要和仪表图层级不同，同时隐藏
+        show: false,
+        left: '-30%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+        splitLine: {
+          show: false    //隐藏分割线
+        },
+
+      },
+
+      xAxis: [   //这里有很多的show，必须都设置成不显示
+        {
+          type: 'category',
+          data: [],
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          splitArea: {
+            interval: 'auto',
+            show: false
+          }
+        }
+      ],
+
+      yAxis: [ //这里有很多的show，必须都设置成不显示
+        {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+        }
+      ],
+      series: [
+        {
+          type: 'tree',
+          name: 'tree1',
+          data: [pathInfo],
+          //categories:categories,
+          top: '5%',
+          left: '9%',
+          bottom: '1%',
+          right: '15%',
+
+          symbolSize: 12,
+
+          label: {
+            normal: {
+              position: 'left',
+              verticalAlign: 'middle',
+              align: 'right',
+              fontSize: 9
+            }
+          },
+
+          leaves: {
+            label: {
+              normal: {
+                position: 'right',
+                verticalAlign: 'middle',
+                align: 'left'
+              }
+            }
+          },
+
+          expandAndCollapse: true,
+          initialTreeDepth: 4,
+          animationDuration: 550,
+          animationDurationUpdate: 750
+        },
+        {
+          name: categories[0].name,
+          type: 'bar',
+          barWidth: '60%',  //不显示，可以随便设置
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: '#41C468',  //这里的图例要注意，颜色设置和仪表盘的颜色对应起来
+            }
+          }
+        },
+        {
+          name: categories[1].name,
+          type: 'bar',
+          barWidth: '60%',
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: '#70C1B3',
+            }
+          }
+        },
+        {
+          name: categories[2].name,
+          type: 'bar',
+          barWidth: '60%',
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: '#00A1E9',
+            }
+          }
+        },
+        {
+          name: categories[3].name,
+          type: 'bar',
+          barWidth: '60%',
+          data: [0],
+          itemStyle: {
+            normal: {
+              color: '#00A1E9',
+            }
+          }
+        }
+      ]
+    }
+    const chart = echarts.init(document.getElementById('myChart'));
+    chart.setOption(option2);
+  }
+
   const handleAddOrEditTestCase = () => {
     addCaseForm.validateFields().then((res) => {
       let formData = new FormData();
@@ -137,6 +328,32 @@ const Step2 = (props) => {
     setAddTestBugModal(true);
   };
 
+  const handleClickRecommendBtn = () => {
+    dispatch({
+      type: 'editReport/getPathInfo',
+      payload: {
+        case_take_id: '1718-1718',
+        report_id: reportCommonInfo.id,
+      },
+    })
+    dispatch({
+      type: 'editReport/getBugRecommendPath',
+      payload: {
+        case_take_id: '1718-1718',
+        report_id: reportCommonInfo.id,
+      },
+    })
+    dispatch({
+      type: 'editReport/getBugRecommendList',
+      payload: {
+        case_take_id: '1718-1718',
+        report_id: reportCommonInfo.id,
+      },
+    })
+    setTaskRecommendModal(true);
+    initEcharts();
+  }
+
   const handleSelectPage1 = (val) =>{
     let item = categories.find(x=>x.item === val);
     setPage2List(item.children)
@@ -175,42 +392,51 @@ const Step2 = (props) => {
 
   return (
     <div>
-      <Form
-        {...formItemLayout}
-        form={reportForm}
-        layout="horizontal"
-        className={styles.stepForm}
-        hideRequiredMark
-        initialValues={data}
-      >
-        <Row gutter={10}>
-          <Col span={5}>
-            <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {'2021.4.12'}
-            </Form.Item>
-          </Col>
-          <Col span={5}>
-            <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
-              {reportCommonInfo.name}
-            </Form.Item>
-          </Col>
-          <Col span={5}>
-            <Form.Item label="设备名称" required>
-              {reportCommonInfo.device_brand}
-            </Form.Item>
-          </Col>
-          <Col span={5}>
-            <Form.Item label="设备品牌" required>
-              {reportCommonInfo.device_model}
-            </Form.Item>
-          </Col>
-          <Col span={4}>
-            <Form.Item label="操作系统" required>
-              {reportCommonInfo.device_os}
-            </Form.Item>
-          </Col>
-        </Row>
-      </Form>
+      <Row gutter={10}>
+        <Col span={23}>
+          <Form
+            {...formItemLayout}
+            form={reportForm}
+            className={styles.stepForm}
+            hideRequiredMark
+            initialValues={data}
+          >
+            <Row gutter={10}>
+              <Col span={5}>
+                <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
+                  {timeToString(reportCommonInfo.create_time_millis)}
+                </Form.Item>
+              </Col>
+              <Col span={5}>
+                <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
+                  {reportCommonInfo.name}
+                </Form.Item>
+              </Col>
+              <Col span={5}>
+                <Form.Item label="设备名称" required>
+                  {reportCommonInfo.device_brand}
+                </Form.Item>
+              </Col>
+              <Col span={5}>
+                <Form.Item label="设备品牌" required>
+                  {reportCommonInfo.device_model}
+                </Form.Item>
+              </Col>
+              <Col span={4}>
+                <Form.Item label="操作系统" required>
+                  {reportCommonInfo.device_os}
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </Col>
+        <Col span={1}>
+          <EditOutlined className={styles.editReportInfoIcon}
+                        onClick={() => handleEditReportInfo()}
+          />
+        </Col>
+      </Row>
+
       <Card>
         <div className={styles.reportContainer}>
           <Row gutter={10}>
@@ -260,16 +486,13 @@ const Step2 = (props) => {
                   </Button>
                 </Col>
                 <Col span={2}>
-                  <Button size="small" onClick={() => setTaskRecommendModal(true)}>
+                  <Button size="small" onClick={() => handleClickRecommendBtn()}>
                     <ForkOutlined className={styles.addIcon} />
                     推荐
                   </Button>
                 </Col>
               </Row>
               <div className={styles.testBugList}>
-                {/*{console.log(props)}*/}
-                {/*{console.log(props.caseBugList)}*/}
-                {/*{console.log(props.caseBugList.length)}*/}
                 {caseBugList && caseBugList.map((item) => {
                   return (
                     <div className={styles.testBugItem} key={item.detail.id}>
@@ -534,10 +757,16 @@ const Step2 = (props) => {
           {/*</Form.Item>*/}
         </Form>
       </Modal>
+      {/*<Modal title="修改报告信息" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}*/}
+      {/*       onCancel={() => setTaskRecommendModal(false)} className="addModal">*/}
+      {/*  <div>*/}
+      {/*    <div id="forceChart"></div>*/}
+      {/*  </div>*/}
+      {/*</Modal>*/}
       <Modal title="任务推荐" visible={showTaskRecommendModal} onOk={() => setTaskRecommendModal(false)}
              onCancel={() => setTaskRecommendModal(false)} className="addModal">
         <div>
-          <div id="forceChart"></div>
+          <div id="myChart" ref={chartRef}></div>
         </div>
       </Modal>
     </div>
@@ -551,4 +780,5 @@ export default connect(({ editReport, loading }) => ({
   testCaseList: editReport.testCaseList,
   caseBugList: editReport.caseBugList,
   categories: editReport.categories,
+  pathInfo:editReport.pathInfo
 }))(Step2);

src/pages/edit/components/Step2/index.less

@@ -41,6 +41,14 @@
     line-height: 22px;
   }
 }
+.editReportInfoIcon{
+  cursor: pointer;
+  margin-top: 20px;
+}
+.editReportInfoIcon:hover {
+  color: #1890ff;
+}
+
 .testCaseList {
   width:100%;
   height: 500px;

src/pages/edit/model.js

@@ -1,5 +1,6 @@
 import {
   fakeSubmitForm,
+  updateReportInfo,
   getExamInfo,
   createReportCommon,
   createTestCase,
@@ -9,6 +10,9 @@ import {
   updateTestCaseList,
   getReportInfo,
   createCaseBug,
+  getRecommendList,
+  getPathInfo,
+  getRecommendPath
 } from './service';
 
 const Model = {
@@ -22,10 +26,13 @@ const Model = {
       receiverName: 'Alex',
       amount: '500',
     },
+    taskName:'',
     reportCommonInfo: {},
     testCaseList: [],
     caseBugList: [],
     categories: [],
+    pathInfo:[],
+    recommendPath:[]
   },
   effects: {
     * submitStepForm({ payload }, { call, put }) {
@@ -41,7 +48,8 @@ const Model = {
     },
     * getOsType({ payload }, { call, put}) {
       const { examId } = payload;
-      let res = yield call(getExamInfo, examId);
+      const res = yield call(getExamInfo, examId);
+      const taskName = res?.result?.name;
       let osType = res?.result?.paper_type;
       osType = JSON.parse(osType)['subTitles'][2]?.value;
       yield put({
@@ -49,6 +57,10 @@ const Model = {
         payload: osType,
       });
     },
+    //todo:更新报告基础信息
+    * updateReportInfo({ payload }, { call, put}) {
+
+    },
     //todo:获取三级菜单信息
     * getCategories({ payload }, { call, put }) {
       const { examId } = payload;
@@ -60,6 +72,7 @@ const Model = {
         payload: categories,
       });
     },
+    //todo:获取报告用例列表
     * getTestCaseList({ payload }, { call, put }) {
       const { report_id } = payload;
       let res = yield call(getTestCaseList, report_id);
@@ -124,11 +137,9 @@ const Model = {
       return res;
     },
     //todo:获取bug列表
-    * getCaseBugList({ payload }, { call, put , take}) {
+    * getCaseBugList({ payload }, { call, put }) {
       let bugIdList = yield call(getCaseBugList, payload);//bug id list
-      // let newBugList = [];
       yield put({ type: 'getBugInfo', payload: { bugIdList } });
-      // yield take('getBugInfo/@@end');
     },
     //todo:获取bug详情
     * getBugInfo({ payload }, { call, put }) {
@@ -154,6 +165,35 @@ const Model = {
       });
       return res;
     },
+    //todo:获取bug 路径
+    * getPathInfo({ payload }, { call, put }) {
+      const { case_take_id , report_id} = payload;
+      let res = yield call(getPathInfo, case_take_id,report_id);
+      yield put({
+        type: 'savePathInfo',
+        payload: res ,
+      });
+    },
+    //todo:获取bug 推荐路径
+    * getBugRecommendPath({ payload }, { call, put }) {
+      const { case_take_id , report_id} = payload;
+      let res = yield call(getRecommendPath, case_take_id,report_id);
+      yield put({
+        type: 'saveRecommendPath',
+        payload: res
+      });
+      return res;
+    },
+    //todo:获取bug推荐列表
+    * getBugRecommendList({ payload }, { call, put }) {
+      const { case_take_id , report_id} = payload;
+      let res = yield call(getRecommendList, case_take_id ,report_id);
+      yield put({
+        type: 'saveBugRecommendList',
+        payload: res
+      });
+      return res;
+    },
   },
   reducers: {
     saveCurrentStep(state, { payload }) {
@@ -177,6 +217,15 @@ const Model = {
     saveCategories(state, { payload }) {
       return { ...state, categories: payload };
     },
+    saveBugRecommendList(state, { payload }) {
+      return { ...state, bugRecommendList: payload };
+    },
+    savePathInfo(state, { payload }) {
+      return { ...state, pathInfo: payload };
+    },
+    saveRecommendPath(state, { payload }) {
+      return { ...state, recommendPath: payload };
+    },
   },
 };
 export default Model;

src/pages/edit/service.js

@@ -6,6 +6,13 @@ export async function fakeSubmitForm(params) {
     data: params,
   });
 }
+//todo:更新报告
+export async function updateReportInfo(data) {
+  return request('/api/extra/updateReport', {
+    method: 'post',
+    data,
+  });
+}
 
 //todo:获取操作系统的类型
 export async function getExamInfo(id) {
@@ -71,10 +78,36 @@ export async function getBugInfo(bugId) {
   });
 }
 
-//todo:返回bug推荐列表
-export async function getCategoriesInfo(case_take_id) {
-  return request(`/api/rec/getList?case_take_id=${case_take_id}`, {
+//todo:返回路径信息
+export async function getPathInfo(case_take_id,report_id) {
+  return request('/api/analyze/path', {
     method: 'get',
+    params: {
+      case_take_id,
+      report_id
+    }
+  });
+}
+
+//todo:返回推荐路径
+export async function getRecommendPath(case_take_id,report_id) {
+  return request('/api/report/pageRec', {
+    method: 'get',
+    params: {
+      case_take_id,
+      report_id
+    }
+  });
+}
+
+//todo:获取bug推荐列表
+export async function getRecommendList(case_take_id,report_id) {
+  return request('/api/rec/getList', {
+    method: 'get',
+    params: {
+      case_take_id,
+      report_id
+    }
   });
 }
 

src/pages/edit/utils.js

@@ -0,0 +1,12 @@
+//todo:转化时间戳为 yyyy-MM-dd hh:mm:ss
+export const timeToString = (time)=>{
+  const date = new Date(Number(time));
+  const Y = date.getFullYear() + '-';
+  const M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
+  const D = date.getDate() + ' ';
+  const h = date.getHours() + ':';
+  const m = date.getMinutes() + ':';
+  const s = date.getSeconds();
+  return Y+M+D+h+m+s;
+}
+