修改质量任务质量报告 添加图表

src/views/dataQuality/dataSheet/task/qualityReport/data.ts

@@ -256,3 +256,41 @@ export const recommendData: any[] = [
     searchConfig: false,
   },
 ];
+export const columnsGeneral: BasicColumn[] = [
+  {
+    title: '更新时间',
+    dataIndex: 'date',
+    width: 120,
+  },
+  {
+    title: '标准名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '标准类型',
+    dataIndex: 'basicType',
+    width: 120,
+  },
+  {
+    title: '更新类型',
+    dataIndex: 'type',
+    width: 120,
+  },
+];
+export const quotationSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: [],
+      fieldNames: {
+        label: 'workSpaceName',
+        value: 'businessId',
+      },
+      placeholder: '请选择工作区',
+    },
+    colProps: { lg: 24, md: 24 },
+  },
+];

src/views/dataQuality/dataSheet/task/qualityReport/generalViewData.ts

+export const tableChangeData = [
+  { date: '06-14', value: 0 },
+  { date: '06-15', value: 0 },
+  { date: '06-16', value: 0 },
+  { date: '06-17', value: 12 },
+  { date: '06-18', value: 12 },
+  { date: '06-19', value: 15 },
+  { date: '06-20', value: 15 },
+];
+// 假设这是新增的数据
+export const new1Data = [
+  { date: '06-14', value: 0 },
+  { date: '06-15', value: 0 },
+  { date: '06-16', value: 0 },
+  { date: '06-17', value: 12 },
+  { date: '06-18', value: 12 },
+  { date: '06-19', value: 12 },
+  { date: '06-20', value: 12 },
+];
+export const new2Data = [
+  { date: '06-14', value: 0 },
+  { date: '06-15', value: 0 },
+  { date: '06-16', value: 0 },
+  { date: '06-17', value: 12 },
+  { date: '06-18', value: 12 },
+  { date: '06-19', value: 13 },
+  { date: '06-20', value: 13 },
+];
+export const new3Data = [
+  { date: '06-14', value: 0 },
+  { date: '06-15', value: 0 },
+  { date: '06-16', value: 0 },
+  { date: '06-17', value: 11 },
+  { date: '06-18', value: 11 },
+  { date: '06-19', value: 11 },
+  { date: '06-20', value: 11 },
+];
+export const fieldChangeData = [
+  { name: '失败', value: 24, color: '#ea8d8d' },
+  { name: '成功', value: 77, color: '#8ce788' },
+  { name: '进行中', value: 12, color: '#81c9f5' },
+];
+export const partitionData: any[] = [
+  {
+    date: '2024-01-15',
+    name: 'ISO 9001',
+    basicType: '质量管理',
+    type: '修订',
+  },
+  {
+    date: '2023-11-20',
+    name: 'ISO 14001',
+    basicType: '环境管理',
+    type: '新发布',
+  },
+  {
+    date: '2023-07-10',
+    name: 'ISO 45001',
+    basicType: '职业健康安全',
+    type: '修订',
+  },
+  {
+    date: '2024-03-05',
+    name: 'GB/T 22080',
+    basicType: '信息安全',
+    type: '新发布',
+  },
+  {
+    date: '2023-09-25',
+    name: 'ISO 22301',
+    basicType: '组织管理',
+    type: '修订',
+  },
+];
+export const TreeData: any[] = [
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 101,
+    workSpaceName: 'admin个人工作区',
+    parentId: 100,
+    'code:': '002',
+    ancestors: '0,100',
+    orderNum: 1,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 107,
+    workSpaceName: '共享工作区',
+    parentId: 100,
+    'code:': '003',
+    ancestors: '0,100',
+    orderNum: 2,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 102,
+    workSpaceName: '商城工作区',
+    parentId: 100,
+    'code:': '004',
+    ancestors: '0,100,101',
+    orderNum: 1,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 103,
+    workSpaceName: '市场工作区',
+    parentId: 100,
+    'code:': '005',
+    ancestors: '0,100,101',
+    orderNum: 2,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 104,
+    workSpaceName: '测试部工作区',
+    parentId: 100,
+    'code:': '006',
+    ancestors: '0,100,101',
+    orderNum: 3,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 105,
+    workSpaceName: '财务工作区',
+    parentId: 100,
+    'code:': '007',
+    ancestors: '0,100,101',
+    orderNum: 4,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 106,
+    workSpaceName: '运维工作区',
+    parentId: 100,
+    'code:': '008',
+    ancestors: '0,100,101',
+    orderNum: 5,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '1',
+    businessId: 202,
+    workSpaceName: '数据工作区',
+    parentId: 100,
+    'code:': '009',
+    ancestors: '0,100,107',
+    orderNum: 1,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+  {
+    delFlag: '0',
+    flag: '0',
+    businessId: 203,
+    workSpaceName: '检查工作区',
+    parentId: 100,
+    'code:': '010',
+    ancestors: '0,100,107',
+    orderNum: 2,
+    selectType: null,
+    createTime: '2024-10-24 10:04:04',
+    createBy: 'admin',
+  },
+];

src/views/dataQuality/dataSheet/task/qualityReport/index.vue

@@ -12,10 +12,63 @@
       <a-button type="primary" @click="handleExport" class="w-1/10 xl:w-1/10">导出报告</a-button>
     </div>
     <BasicForm @register="registerForm" class="h-1/5 xl:h-1/5" />
-    <div class="h-1/5 xl:h-1/5">图表占位1</div>
-    <div class="h-2/5 xl:h-2/5" contentClass="flex flex-row"
-      ><div class="w-1/3 xl:w-1/3">图表占位2</div>
-      <div class="w-2/3 xl:w-2/3">图表占位3</div>
+    <div class="h-1/5 xl:h-1/5"
+      ><Card title="标准概况">
+        <div class="card_content">
+          <Col :span="4">
+            <div class="card_item">
+              <Icon icon="eos-icons:database" :size="30" :color="'#1091FE'" />
+              <div class="card_itemInfo">
+                <div class="dataNum">12个</div>
+                <div class="dataTitle">基础标准</div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <div class="card_item">
+              <Icon icon="ant-design:fund-outlined" :size="30" :color="'#C737D4'" />
+              <div class="card_itemInfo">
+                <div class="dataNum">0个</div>
+                <div class="dataTitle">指标标准</div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <div class="card_item">
+              <Icon icon="eos-icons:atom-elecson" :size="30" :color="'#17B742'" />
+              <div class="card_itemInfo">
+                <div class="dataNum">4个</div>
+                <div class="dataTitle">公共代码</div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <div class="card_item">
+              <Icon icon="iconoir:color-filter" :size="30" :color="'#155775'" />
+              <div class="card_itemInfo">
+                <div class="dataNum">1个</div>
+                <div class="dataTitle">引用文档管理</div>
+              </div>
+            </div>
+          </Col>
+          <Col :span="4">
+            <div class="card_item">
+              <Icon icon="eos-icons:modified-date-outlined" :size="30" :color="'#33BDCC'" />
+              <div class="card_itemInfo">
+                <div class="dataNum">1个</div>
+                <div class="dataTitle">落标检查</div>
+              </div>
+            </div>
+          </Col>
+        </div>
+      </Card></div
+    >
+    <div
+      class="h-2/5 w-full xl:h-2/5 charts-container"
+      style="display: flex"
+      contentClass="flex flex-row"
+      ><div class="w-1/3 xl:w-1/3 mt-20 chart" id="chart1">图表占位2</div>
+      <div class="w-2/3 xl:w-2/3 mt-20 chart" id="chart2">图表占位3</div>
     </div>
     <div class="h-1/5 xl:h-1/5 height-100">
       <BasicTable @register="registerTableRight" :searchInfo="searchInfo" class="height-100">
@@ -63,14 +116,14 @@
   </PageWrapper>
 </template>
 <script lang="ts" setup>
-  import { reactive } from 'vue';
+  import { onMounted, reactive } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
   import { BasicForm, useForm } from '@/components/Form';
   import { PageWrapper } from '@/components/Page';
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
-  import { Tag, Switch } from 'ant-design-vue';
-  import { columns, columnsRight } from './data';
+  import { Tag, Switch, Card, Col, Row } from 'ant-design-vue';
+  import { columns, columnsGeneral, columnsRight, quotationSchema } from './data';
   import { Data, DataRight, searchFormSchema, formSchemaRight } from './kinshipOperationsData';
   import modEditModal from './modEditModal.vue';
   import ruleModal from './addRuleModal.vue';
@@ -79,6 +132,16 @@
   import { formSchema } from '../mainBody.data';
   import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
   import { downloadByData } from '@/utils/file/download';
+  import Icon from '@/components/Icon/Icon.vue';
+  import * as echarts from 'echarts';
+  import {
+    fieldChangeData,
+    tableChangeData,
+    partitionData,
+    new1Data,
+    new2Data,
+    new3Data,
+  } from './generalViewData';
 
   defineOptions({ name: 'KnowledgeBase' });
   const state = reactive({
@@ -89,6 +152,33 @@
   const [registerRuleModal, { openModal: openRuleModal }] = useModal();
   const [registerDetailModal, { openModal: openDetailModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
+  const TreeData = [
+    {
+      title: '0-0',
+      value: '0-0',
+      children: [
+        {
+          title: '0-0-0',
+          value: '0-0-0',
+          children: [
+            {
+              title: '0-0-0-0',
+              value: '0-0-0-0',
+            },
+            {
+              title: '0-0-0-1',
+              value: '0-0-0-1',
+            },
+          ],
+        },
+        {
+          title: '0-0-1',
+          value: '0-0-1',
+        },
+      ],
+    },
+  ];
+
   // const [registerTable, { reload }] = useTable({
   //   dataSource: Data,
   //   useSearchForm: true,
@@ -166,4 +256,144 @@
     const data = await exportRoleList(params);
     downloadByData(data, '报告' + '.xlsx');
   }
+  //图表
+  function initCharts() {
+    // 获取图表容器
+    const chart1Container = document.getElementById('chart1');
+    const chart2Container = document.getElementById('chart2');
+
+    // 初始化图表实例
+    const chart1Instance = echarts.init(chart1Container);
+    const chart2Instance = echarts.init(chart2Container);
+
+    chart1Instance.setOption({
+      title: {
+        text: '标准数量变化趋势',
+      },
+      tooltip: {},
+      xAxis: {
+        data: tableChangeData.map((item) => item.date),
+        boundaryGap: false, // 数据点与标签对齐
+      },
+      legend: {
+        orient: 'horizontal', // 图例项水平排列
+        left: 'center', // 图例放置于底部中心位置
+        top: 'bottom', // 图例放置于图表的底部
+      },
+      yAxis: {
+        min: 0, // 设置 Y 轴的最小值
+        max: 18,
+        splitNumber: 3,
+      },
+      series: [
+        {
+          name: '基础标准',
+          type: 'line',
+          color: '#cacaec',
+          areaStyle: { color: '#dcd4ec' },
+          data: tableChangeData.map((item) => item.value),
+        },
+        {
+          name: '指标标准',
+          type: 'line',
+          color: '#ff7f50', // 橙色
+          areaStyle: { color: '#ff7f50' },
+          data: new1Data.map((item) => item.value),
+        },
+        {
+          name: '公共代码',
+          type: 'line',
+          color: '#87cefa', // 天蓝色
+          areaStyle: { color: '#87cefa' },
+          data: new2Data.map((item) => item.value),
+        },
+        {
+          name: '引用文档管理',
+          type: 'line',
+          color: '#cfa3d2', // 青绿色
+          areaStyle: { color: '#cfa3d2' },
+          data: new3Data.map((item) => item.value),
+        },
+      ],
+    });
+
+    chart2Instance.setOption({
+      title: {
+        text: '任务执行概览',
+      },
+      tooltip: {
+        trigger: 'item', // 使用数据项图形触发提示
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'right',
+      },
+      color: fieldChangeData.map((item) => item.color),
+      series: [
+        {
+          type: 'pie',
+          radius: '55%', // 饼图的半径，默认情况下，内圆半径为0，外圆半径为55%
+          center: ['50%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
+          data: fieldChangeData, // 直接使用原始数据，假设每个元素都有 name 和 value 属性
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    });
+  }
+
+  onMounted(() => {
+    initCharts();
+  });
 </script>
+<style scoped lang="scss">
+  .card_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .card_item {
+      display: flex;
+      align-items: center;
+      width: 250px;
+      height: 80px;
+      padding-left: 20px;
+      border-radius: 10px;
+      background-color: #f7f8f9;
+
+      .card_itemInfo {
+        padding-left: 7px;
+
+        .dataNum {
+          font-size: 26px;
+          font-weight: bold;
+          line-height: 26px;
+        }
+
+        .dataTitle {
+          color: #646464;
+          font-size: 16px;
+          line-height: 16px;
+        }
+      }
+    }
+  }
+
+  .charts-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+
+  .chart {
+    width: calc(50% - 10px); /* 确保两个图表并排显示 */
+    height: 400px;
+    margin: 20px 0 0 15px;
+    background-color: white;
+  }
+</style>

src/views/dataStandards/generalView/index.vue

 <template>
-  <div style="background-color: white">
+  <PageWrapper>
+    <div style="display: flex; background-color: white">
       <div
-      style="display: flex; justify-content: space-between; align-items: center; margin-left: 12px"
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-left: 12px;
+        "
       >
         <div
           style="
-          margin-top: 20px;
             display: flex;
-          font-weight: bold;
-          font-size: 25px;
+            margin-top: 20px;
             margin-left: 20px;
+            font-size: 25px;
+            font-weight: bold;
           "
           >标准概览
-        <div style="margin-left: 30px; width: 200px">
+          <div style="width: 200px; margin-left: 30px">
             <BasicForm @register="registerForm" />
           </div>
         </div>
@@ -71,7 +77,7 @@
             </Card>
           </Col>
         </Row>
-      <div class="charts-container">
+        <div class="charts-container" style="display: flex">
           <!-- 图表容器 -->
           <div id="chart1" class="chart"></div>
           <div id="chart2" class="chart"></div>
@@ -83,6 +89,7 @@
         </div>
       </div>
     </div>
+  </PageWrapper>
 </template>
 
 <script lang="ts" setup>
@@ -101,6 +108,7 @@
   import { onMounted } from 'vue';
   import { BasicTable, useTable } from '@/components/Table/index';
   import { BasicForm, useForm } from '@/components/Form';
+  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
 
   const [registerTable] = useTable({
     title: '最近更新标准',
@@ -216,120 +224,150 @@
 
 <style lang="scss" scoped>
   .homePage_module {
-    background-color: #fafbfc;
     padding: 20px;
+    background-color: #fafbfc;
+
     .process_title {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
+
       .title_info {
         display: flex;
         align-items: center;
         font-size: 16px;
         font-weight: 600;
       }
+
       .process_more {
-        font-size: 16px;
-        cursor: pointer;
         color: #4aabfe;
+        font-size: 16px;
         font-weight: 600;
+        cursor: pointer;
       }
     }
+
     .homePage_left {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 20%;
+      height: 100%;
+      padding: 20px 0 0 20px;
+
       .executeStatistics_card {
         margin-top: 20px;
       }
+
       .homePage_img {
         width: 93%;
       }
+
       ::v-deep(.ant-tabs-tab) {
         font-size: 18px;
         font-weight: 600;
       }
+
       .card_content {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+
         .card_item {
-          padding-left: 20px;
           display: flex;
           align-items: center;
-          background-color: #f7f8f9;
           width: 250px;
           height: 80px;
+          padding-left: 20px;
           border-radius: 10px;
+          background-color: #f7f8f9;
+
           .card_itemInfo {
             padding-left: 7px;
+
             .dataNum {
               font-size: 26px;
-              line-height: 26px;
               font-weight: bold;
+              line-height: 26px;
             }
+
             .dataTitle {
+              color: #646464;
               font-size: 16px;
               line-height: 16px;
-              color: #646464;
             }
           }
         }
       }
     }
+
     .homePage_right {
       .notice_card {
         margin-top: 20px;
+
         .notice_content {
           padding: 8px 0;
+
           .notice_contentInfo {
             display: flex;
             align-items: center;
+
             .level {
-              text-align: center;
               width: 20px;
               height: 20px;
+              border-radius: 50px;
               background-color: #f8d0d0;
               color: #dd4c4b;
-              border-radius: 50px;
+              text-align: center;
             }
+
             .levelTwo {
-              text-align: center;
               width: 20px;
               height: 20px;
+              border-radius: 50px;
               background-color: #fcddb8;
               color: #f2a346;
-              border-radius: 50px;
+              text-align: center;
             }
+
             .levelThree {
-              text-align: center;
               width: 20px;
               height: 20px;
+              border-radius: 50px;
               background-color: #e5eeff;
               color: #b0b5c7;
-              border-radius: 50px;
+              text-align: center;
             }
+
             .title {
-              font-weight: bold;
-              font-size: 16px;
               padding-left: 5px;
+              font-size: 16px;
+              font-weight: bold;
             }
           }
+
           .time {
             color: #5e5e5e;
           }
         }
       }
+
       .process_Body {
         height: 160px;
         background-color: #f7f8f9;
         text-align: center;
+
         .process_num {
-          font-weight: bold;
           font-size: 60px;
+          font-weight: bold;
         }
+
         .process_info {
-          font-weight: 300;
           font-size: 25px;
+          font-weight: 300;
         }
       }
+
       .process_content {
         padding-top: 20px;
       }
@@ -338,24 +376,30 @@
 
   .chart_col {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
   }
 
   .status_counts {
     margin-top: 10px;
     text-align: center;
   }
+
   .charts-container {
     display: flex;
+    position: absolute;
     justify-content: space-between;
+    height: 800px;
+    margin-top: 200px;
+    margin-bottom: 200px;
+    transform: translateY(100px);
     gap: 20px;
   }
 
   .chart {
-    margin: 20px 0 0 15px;
     width: calc(50% - 10px); /* 确保两个图表并排显示 */
-    height: 400px;
+    height: 800px;
+    margin: 20px 0 0 15px;
     background-color: white;
   }
 </style>