From 9907ed9d4403920cbc88e466283cc1d1be4fec28 Mon Sep 17 00:00:00 2001
From: YCA001 <2915341988@qq.com>
Date: Fri, 10 Jun 2022 14:23:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A1=E7=8C=AE=E8=80=85=E5=88=86=E5=B8=83?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/euler/src/views/company/Index.vue    |  19 +-
 .../contributors/AuthorityManagement.vue      | 260 ++++++++++++++++++
 .../euler/src/views/contributors/Index.vue    | 246 ++---------------
 packages/shared/components/ODiagram.vue       |  10 +-
 packages/shared/components/OEchartTreemap.vue |   1 -
 packages/shared/utils/helper.ts               |  30 +-
 6 files changed, 306 insertions(+), 260 deletions(-)
 create mode 100644 packages/euler/src/views/contributors/AuthorityManagement.vue

diff --git a/packages/euler/src/views/company/Index.vue b/packages/euler/src/views/company/Index.vue
index d00399b..4a3ae40 100644
--- a/packages/euler/src/views/company/Index.vue
+++ b/packages/euler/src/views/company/Index.vue
@@ -6,11 +6,16 @@ import { onMounted, ref, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { ArrowDown } from '@element-plus/icons-vue';
-import { sigsProcessing, treeProcessing } from 'shared/utils/helper';
+import {
+  sigsProcessing,
+  treeProcessing,
+  processing,
+} from 'shared/utils/helper';
 import {
   queryCompanySigDetails,
   queryCompanyUserContribute,
   queryCompanyContribute,
+  queryCompanyUsers,
 } from 'shared/api';
 import OEchartCircularPile from 'shared/components/OEchartCircularPile.vue';
 import OEchartTreemap from 'shared/components/OEchartTreemap.vue';
@@ -64,12 +69,12 @@ const getoechartTreeValue = () => {
     timeRange: 'lastonemonth',
     community: 'openeuler',
   };
-  queryCompanySigDetails(query).then((data) => {
-    const Data = treeProcessing(data?.data || []);
-    contributors.value = getItemListData(Data.sigs, 'D0');
-    oechartData.value.D0 = getItemListData(Data.sigs, 'D0');
-    oechartData.value.D1 = getItemListData(Data.sigs, 'D1');
-    oechartData.value.D2 = getItemListData(Data.sigs, 'D2');
+  queryCompanyUsers(query).then((data) => {
+    const Data = processing(data?.data || []);
+    contributors.value = Data.sigData['0'];
+    oechartData.value.D0 = Data.sigData['0'];
+    oechartData.value.D1 = Data.sigData['1'];
+    oechartData.value.D2 = Data.sigData['2'];
   });
 };
 const param = ref({
diff --git a/packages/euler/src/views/contributors/AuthorityManagement.vue b/packages/euler/src/views/contributors/AuthorityManagement.vue
new file mode 100644
index 0000000..6502955
--- /dev/null
+++ b/packages/euler/src/views/contributors/AuthorityManagement.vue
@@ -0,0 +1,260 @@
+<template>
+  <div>
+    <div class="contributors-panel">
+      <h3 id="groupActive" class="title">
+        {{ t('groupActive') }}
+      </h3>
+      <div class="activation">
+        <span class="sp">{{ t('active') }}</span>
+        <p class="spp">0</p>
+        <span class="liveness"></span>
+        <p class="spp">1</p>
+      </div>
+
+      <the-list></the-list>
+    </div>
+    <div class="contributors-panel">
+      <h3 id="companyRelations" class="title">
+        {{ t('companyRelations') }}
+      </h3>
+      <div class="diagram-legend">
+        <div class="point one-point"></div>
+        <span>{{ t('company') }}</span>
+        <div class="point two-point"></div>
+        <span>{{ t('interestGroup') }}</span>
+      </div>
+      <div class="diagram">
+        <o-diagram></o-diagram>
+      </div>
+    </div>
+    <div class="contributors-panel">
+      <h3 id="groupRelations" class="title">{{ t('groupRelations') }}</h3>
+      <div class="note-caption">{{ t('Note') }}</div>
+      <div class="ranking-list">
+        <div class="ranking-list-item">
+          <el-table v-loading="loading" :data="hightSig" style="width: 100%">
+            <el-table-column
+              align="center"
+              :label="t('Committee')"
+              width="200"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <div class="group-father">
+                  <span class="group-name">{{ scope.row.name }}</span>
+                  <span class="group-email">{{ scope.row.email }}</span>
+                </div>
+              </template></el-table-column
+            >
+            <el-table-column align="left">
+              <template #header
+                ><div class="getheader">
+                  {{ t('interestGroup') }}
+                </div>
+              </template>
+              <template #default="scope">
+                <div class="Sgroup">
+                  <span
+                    v-for="(value, index) in scope.row.group"
+                    :key="index"
+                    class="group-email"
+                    >{{ value }},
+                  </span>
+                </div>
+              </template></el-table-column
+            >
+          </el-table>
+        </div>
+        <div class="ranking-list-item">
+          <el-table v-loading="loading" :data="lowSig" style="width: 100%">
+            <el-table-column
+              align="center"
+              :label="t('Committee')"
+              width="200"
+              show-overflow-tooltip
+              ><template #default="scope">
+                <div class="group-father">
+                  <span class="group-name">{{ scope.row.name }}</span>
+                  <span class="group-email">{{ scope.row.email }}</span>
+                </div>
+              </template></el-table-column
+            >
+            <el-table-column align="left">
+              <template #header
+                ><div class="getheader">
+                  {{ t('interestGroup') }}
+                </div> </template
+              ><template #default="scope">
+                <div class="Sgroup">
+                  <span
+                    v-for="(value, index) in scope.row.group"
+                    :key="index"
+                    class="group-email"
+                    >{{ value }},
+                  </span>
+                </div>
+              </template></el-table-column
+            >
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import TheList from '@/components/TheList.vue';
+import ODiagram from 'shared/components/ODiagram.vue';
+import { useI18n } from 'vue-i18n';
+import { grouprelationsList } from 'shared/utils/groupList';
+import { onMounted, ref, computed, watch } from 'vue';
+const { t } = useI18n();
+const hightSig = computed(() => grouprelationsList.slice(0, number));
+const lowSig = computed(() =>
+  grouprelationsList.slice(number, grouprelationsList.length)
+);
+const number = Math.ceil(grouprelationsList.length / 2);
+</script>
+<style scoped lang="scss">
+@import '@/shared/styles/style.scss';
+.activation {
+  .liveness {
+    display: inline-block;
+    width: 120px;
+    height: 4px;
+    background: linear-gradient(270deg, #002fa7 0%, rgba(0, 47, 167, 0.2) 100%);
+  }
+  .sp {
+    display: inline-block;
+    width: 36px;
+    height: 16px;
+    font-size: 12px;
+    font-family: HarmonyOS_Sans_SC;
+    color: #4e5865;
+    line-height: 16px;
+    text-align: center;
+  }
+  .spp {
+    display: inline-block;
+    width: 7px;
+    height: 16px;
+    font-size: 12px;
+    font-family: HarmonyOS_Sans_SC;
+    color: #8d98aa;
+    line-height: 16px;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}
+.contributors-panel {
+  padding: 24px;
+  background: #fff;
+  margin-top: 60px;
+  .title {
+    font-size: 24px;
+    color: #000;
+    font-weight: normal;
+    margin-bottom: 20px;
+  }
+  .Form-head {
+    display: flex;
+    width: auto;
+    .Form-block {
+      width: 180px;
+      height: 80px;
+      background: #ffffff;
+      margin: 18px;
+      padding: 18px;
+      border: 2px solid #002fa7;
+      align-items: center;
+      line-height: 24px;
+      .Form-block-sp {
+        width: 163px;
+        height: 24px;
+        font-size: 12px;
+        color: #000000;
+        line-height: 24px;
+      }
+    }
+  }
+}
+.diagram-legend {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #555;
+  .point {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  .one-point {
+    background-color: #002fa7;
+  }
+  .two-point {
+    margin-left: 24px;
+    background-color: #feb32a;
+  }
+}
+.note-caption {
+  font-size: 14px;
+  font-family: HarmonyOS_Sans_SC;
+  color: #555555;
+  line-height: 22px;
+  margin-bottom: 16px;
+}
+.ranking-list {
+  display: grid;
+  grid-template-columns: 46% 46%;
+  grid-column-gap: 8%;
+  .caption {
+    font-size: 16px;
+    color: #000;
+    line-height: 24px;
+    margin-bottom: 8px;
+  }
+  .box {
+    display: flex;
+    .num {
+      width: 50px;
+      text-align: right;
+    }
+  }
+}
+.group-father {
+  text-align-last: justify;
+  text-align: justify;
+  width: 60px;
+  margin-left: 35px;
+}
+.group-email {
+  font-size: 14px;
+  font-family: HarmonyOS_Sans_SC_Medium;
+  color: #002fa7;
+  line-height: 22px;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.group-name {
+  width: 42px;
+  height: 22px;
+  font-size: 14px;
+  font-family: HarmonyOS_Sans_SC;
+  color: #000000;
+  line-height: 22px;
+  text-align-last: justify;
+  text-align: justify;
+  padding: 5px;
+}
+.Sgroup {
+  margin-left: 65px;
+}
+.getheader {
+  margin-left: 65px;
+}
+.diagram {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/packages/euler/src/views/contributors/Index.vue b/packages/euler/src/views/contributors/Index.vue
index 04d5312..25027de 100644
--- a/packages/euler/src/views/contributors/Index.vue
+++ b/packages/euler/src/views/contributors/Index.vue
@@ -11,12 +11,10 @@ import FormSearch from './FormSearch.vue';
 import TheForm from '@/components/TheForm.vue';
 import TheBar from '../../components/TheBar.vue';
 import useScroll from 'shared/hooks/useScroll';
-import ODiagram from 'shared/components/ODiagram.vue';
 import OAnchor from 'shared/components/OAnchor.vue';
-import TheList from '@/components/TheList.vue';
 import titleBg from '@/assets/title-bg.png';
 import chevronsUp from '~icons/app/chevrons-up';
-import { grouprelationsList } from 'shared/utils/groupList';
+import AuthorityManagement from './AuthorityManagement.vue';
 const { t, locale } = useI18n();
 const usePersonal = usePersonalStore();
 const useCommon = useCommonStore();
@@ -47,7 +45,6 @@ const formOption = computed(() => {
     },
   ];
 });
-
 // theform组件调用
 const componentName = 'personal';
 const loading = ref(true);
@@ -58,14 +55,8 @@ onMounted(() => {
   usePersonal.getPersonalData();
   loading.value = false;
 });
-
 const hightRanking = computed(() => usePersonal.hightRanking);
 const lowRanking = computed(() => usePersonal.lowRanking);
-const number = Math.ceil(grouprelationsList.length / 2);
-const hightSig = computed(() => grouprelationsList.slice(0, number));
-const lowSig = computed(() =>
-  grouprelationsList.slice(number, grouprelationsList.length)
-);
 const typeLable = ref('');
 const switchType = () => {
   switch (usePersonal.personalForm.contributeType) {
@@ -87,17 +78,14 @@ watch(
     switchType();
   }
 );
-
 // TOP20 index修改
 const indexMethod = (index: number) => {
   return index + 11;
 };
-
 const search404 = ref(false);
 const searchStsate = (item: boolean) => {
   search404.value = item;
 };
-
 const { isScrollUp } = useScroll('up');
 watch(
   () => isScrollUp.value,
@@ -115,7 +103,7 @@ const anchorData = [
   'groupActive',
   'companyRelations',
   'groupRelations',
-]
+];
 </script>
 
 <template>
@@ -213,7 +201,6 @@ const anchorData = [
                   <template #default="scope">
                     <div class="box">
                       <span class="num">{{ scope.row.contribute }}</span>
-
                       <the-progress :item="scope.row.contribute"></the-progress>
                     </div>
                   </template>
@@ -222,109 +209,7 @@ const anchorData = [
             </div>
           </div>
         </div>
-        <div class="contributors-panel">
-          <h3 id="groupActive" class="title">
-            {{ t('groupActive') }}
-          </h3>
-          <div class="activation">
-            <span class="sp">{{ t('active') }}</span>
-            <p class="spp">0</p>
-            <span class="liveness"></span>
-            <p class="spp">1</p>
-          </div>
-
-          <the-list></the-list>
-        </div>
-        <div class="contributors-panel">
-          <h3 id="companyRelations" class="title">
-            {{ t('companyRelations') }}
-          </h3>
-          <div class="diagram-legend">
-            <div class="point one-point"></div>
-            <span>{{ t('company') }}</span>
-            <div class="point two-point"></div>
-            <span>{{ t('interestGroup') }}</span>
-          </div>
-          <div class="diagram">
-            <o-diagram></o-diagram>
-          </div>
-        </div>
-        <div class="contributors-panel">
-          <h3 id="groupRelations" class="title">{{ t('groupRelations') }}</h3>
-          <div class="note-caption">{{ t('Note') }}</div>
-          <div class="ranking-list">
-            <div class="ranking-list-item">
-              <el-table
-                v-loading="loading"
-                :data="hightSig"
-                style="width: 100%"
-              >
-                <el-table-column
-                  align="center"
-                  :label="t('Committee')"
-                  width="200"
-                  show-overflow-tooltip
-                >
-                  <template #default="scope">
-                    <div class="group-father">
-                      <span class="group-name">{{ scope.row.name }}</span>
-                      <span class="group-email">{{ scope.row.email }}</span>
-                    </div>
-                  </template></el-table-column
-                >
-                <el-table-column align="left">
-                  <template #header
-                    ><div class="getheader">
-                      {{ t('interestGroup') }}
-                    </div>
-                  </template>
-                  <template #default="scope">
-                    <div class="Sgroup">
-                      <span
-                        v-for="(value, index) in scope.row.group"
-                        :key="index"
-                        class="group-email"
-                        >{{ value }},
-                      </span>
-                    </div>
-                  </template></el-table-column
-                >
-              </el-table>
-            </div>
-            <div class="ranking-list-item">
-              <el-table v-loading="loading" :data="lowSig" style="width: 100%">
-                <el-table-column
-                  align="center"
-                  :label="t('Committee')"
-                  width="200"
-                  show-overflow-tooltip
-                  ><template #default="scope">
-                    <div class="group-father">
-                      <span class="group-name">{{ scope.row.name }}</span>
-                      <span class="group-email">{{ scope.row.email }}</span>
-                    </div>
-                  </template></el-table-column
-                >
-                <el-table-column align="left">
-                  <template #header
-                    ><div class="getheader">
-                      {{ t('interestGroup') }}
-                    </div> </template
-                  ><template #default="scope">
-                    <div class="Sgroup">
-                      <span
-                        v-for="(value, index) in scope.row.group"
-                        :key="index"
-                        class="group-email"
-                        >{{ value }},
-                      </span>
-                    </div>
-                  </template></el-table-column
-                >
-              </el-table>
-            </div>
-          </div>
-        </div>
+        <authority-management></authority-management>
       </div>
       <footer>
         <app-footer></app-footer>
@@ -352,39 +237,6 @@ const anchorData = [
     font-weight: normal;
     margin-bottom: 20px;
   }
-  .activation {
-    .liveness {
-      display: inline-block;
-      width: 120px;
-      height: 4px;
-      background: linear-gradient(
-        270deg,
-        #002fa7 0%,
-        rgba(0, 47, 167, 0.2) 100%
-      );
-    }
-    .sp {
-      display: inline-block;
-      width: 36px;
-      height: 16px;
-      font-size: 12px;
-      font-family: HarmonyOS_Sans_SC;
-      color: #4e5865;
-      line-height: 16px;
-      text-align: center;
-    }
-    .spp {
-      display: inline-block;
-      width: 7px;
-      height: 16px;
-      font-size: 12px;
-      font-family: HarmonyOS_Sans_SC;
-      color: #8d98aa;
-      line-height: 16px;
-      margin-left: 8px;
-      margin-right: 8px;
-    }
-  }
   .Form-head {
     display: flex;
     width: auto;
@@ -407,31 +259,6 @@ const anchorData = [
     }
   }
 }
-.ranking-list {
-  display: grid;
-  grid-template-columns: 46% 46%;
-  grid-column-gap: 8%;
-  .caption {
-    font-size: 16px;
-    color: #000;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-  .box {
-    display: flex;
-    .num {
-      width: 50px;
-      text-align: right;
-    }
-  }
-}
-.note-caption {
-  font-size: 14px;
-  font-family: HarmonyOS_Sans_SC;
-  color: #555555;
-  line-height: 22px;
-  margin-bottom: 16px;
-}
 .banner-title {
   height: 144px;
   text-align: center;
@@ -461,59 +288,22 @@ const anchorData = [
     color: #555;
   }
 }
-.group-email {
-  font-size: 14px;
-  font-family: HarmonyOS_Sans_SC_Medium;
-  color: #002fa7;
-  line-height: 22px;
-  &:hover {
-    cursor: pointer;
-  }
-}
-.group-name {
-  width: 42px;
-  height: 22px;
-  font-size: 14px;
-  font-family: HarmonyOS_Sans_SC;
-  color: #000000;
-  line-height: 22px;
-  text-align-last: justify;
-  text-align: justify;
-  padding: 5px;
-}
-.group-father {
-  text-align-last: justify;
-  text-align: justify;
-  width: 60px;
-  margin-left: 35px;
-}
-.getheader {
-  margin-left: 65px;
-}
-.Sgroup {
-  margin-left: 65px;
-}
-.diagram-legend {
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  color: #555;
-  .point {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
-  .one-point {
-    background-color: #002fa7;
+.ranking-list {
+  display: grid;
+  grid-template-columns: 46% 46%;
+  grid-column-gap: 8%;
+  .caption {
+    font-size: 16px;
+    color: #000;
+    line-height: 24px;
+    margin-bottom: 8px;
   }
-  .two-point {
-    margin-left: 24px;
-    background-color: #feb32a;
+  .box {
+    display: flex;
+    .num {
+      width: 50px;
+      text-align: right;
+    }
   }
 }
-.diagram {
-  display: flex;
-  justify-content: center;
-}
 </style>
diff --git a/packages/shared/components/ODiagram.vue b/packages/shared/components/ODiagram.vue
index ec6ebe6..91c49ed 100644
--- a/packages/shared/components/ODiagram.vue
+++ b/packages/shared/components/ODiagram.vue
@@ -17,7 +17,8 @@ const props = defineProps({
           name: 'sig',
           children: [
             {
-              name: 'A',
+              name: 'A c',
+              key: 'A',
               imports: [],
             },
             {
@@ -39,8 +40,9 @@ const props = defineProps({
           children: [
             {
               name: 'a',
+              key: '中文',
               imports: [
-                'flare.sig.A',
+                'flare.sig.A c',
                 'flare.sig.B',
                 'flare.sig.C',
                 'flare.sig.D',
@@ -126,7 +128,7 @@ const getTipsHtml = (d: IObject) => {
             <div class="mark" 
                 onclick="window.location.href='${window?.location?.origin}/${
       localStorage?.lang
-    }/company/${d.data.name}'"
+    }/company/${d.data.key}'"
             >${t('viewDetail')} <span style="color: #002fa7">→</span></div>`;
   }
   return `<div>${t('interestGroup')}</div>
@@ -142,7 +144,7 @@ const getTipsHtml = (d: IObject) => {
             <div class="mark"
                 onclick="window.location.href='${window?.location?.origin}/${
     localStorage?.lang
-  }/sig/${d.data.name}'"
+  }/sig/${d.data.key}'"
             >${t('viewDetail')} <span style="color: #002fa7">→</span></div>`;
 };
 const chart = () => {
diff --git a/packages/shared/components/OEchartTreemap.vue b/packages/shared/components/OEchartTreemap.vue
index 21afb85..6e90b08 100644
--- a/packages/shared/components/OEchartTreemap.vue
+++ b/packages/shared/components/OEchartTreemap.vue
@@ -137,7 +137,6 @@ const props = defineProps({
   },
 });
 const getData = () => {
-  console.log('getData', props.value);
   const _data = props.group.map((item) => {
     const children = props.value
       .filter((it) => it.group === item.key)
diff --git a/packages/shared/utils/helper.ts b/packages/shared/utils/helper.ts
index e450e55..fb7c23a 100644
--- a/packages/shared/utils/helper.ts
+++ b/packages/shared/utils/helper.ts
@@ -132,26 +132,6 @@ export const getRGBColor = (value: string) => {
   return value;
 };
 
-/**
- * 格式化返回数据
- */
-//
-
-export const processing = (data) => {
-  const firstKeys = Object.keys(data);
-  const company = firstKeys.find((itme) => itme !== 'metrics');
-  const sigData = data[company as string];
-  const sigs = Object.keys(sigData).map((item) => {
-    const obj = { name: item };
-    data['metrics'].reduce((pre, next, index) => {
-      pre[next] = sigData[item][index];
-      return pre;
-    }, obj);
-    return obj;
-  });
-  return { company, sigs };
-};
-
 /**
  * 格式化SIG返回数据
  */
@@ -185,3 +165,13 @@ export const treeProcessing = (data) => {
   });
   return { company, sigs };
 };
+/**
+ * 格式化users数据
+ */
+//
+export const processing = (data) => {
+  const firstKeys = Object.keys(data);
+  const company = firstKeys.find((itme) => itme !== 'metrics');
+  const sigData = data[company as string];
+  return { company, sigData };
+};
-- 
Gitee