中心领导切图完成

src/components/layout/header/mock.js

@@ -20,7 +20,7 @@ export const nav = [
                 name: "机构概况",
                 nameInHeaderNav: "机构概况",
                 index: 0,
-                link: "/Org/Intro",
+                link: "/Org",
                 breadcrumb: [{name: "机构概况", path: "/Org"}, {name: "中心简介"}],
                 children: [
                     {
@@ -35,6 +35,16 @@ export const nav = [
                     },
                     {
                         id: uuid("gs_nav"),
+                        name: "中心简介",
+                        index: 0,
+                        link: "/Org/Leadership",
+                        breadcrumb: [
+                            {name: "机构概况", path: "/Org"},
+                            {name: "中心领导"},
+                        ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
                         name: "机构概况",
                         index: 0,
                         link: "/Org/Departments",

src/router/index.js

@@ -50,6 +50,14 @@ const routes = [
             component: () => import("@/views/Org/Intro.vue"),
           },
           {
+            path: "/Org/Leadership",
+            name: "Leadership",
+            meta: {
+              name: "中心领导",
+            },
+            component: () => import("@/views/Org/Leadership.vue"),
+          },
+          {
             path: "/Org/Departments",
             name: "Departments",
             meta: {

src/utils/utils.js

@@ -35,3 +35,17 @@ export function uuid(prefix) {
     return prefix + '_' + random + unique + String(time);
 }
 
+
+// 一维数组转换成二维数组
+export const groupList = (list, length) => {
+    const pages = [];
+    list.forEach((item, index) => {
+      const page = Math.floor(index / length);
+      if (!pages[page]) {
+        pages[page] = [];
+      }
+      pages[page].push(item);
+    });
+    return pages;
+  };
+  
\ No newline at end of file

src/views/Org/Branch.vue

@@ -22,74 +22,39 @@
     </div>
 
     <ul class="nav nav-tabs" id="myTab" role="tablist">
-      <li class="nav-item" role="presentation">
+      <li
+        class="nav-item"
+        role="presentation"
+        v-for="(tmp, i) in tabs"
+        :key="i"
+      >
         <button
-          class="nav-link active"
-          id="home-tab"
+          :class="['nav-link', { active: i === 0 }]"
+          :id="tmp.id"
           data-bs-toggle="tab"
           data-bs-target="#home"
           type="button"
           role="tab"
           aria-controls="home"
           aria-selected="true"
+          @click="handelTab(i)"
         >
-          华北
-        </button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button
-          class="nav-link"
-          id="profile-tab"
-          data-bs-toggle="tab"
-          data-bs-target="#profile"
-          type="button"
-          role="tab"
-          aria-controls="profile"
-          aria-selected="false"
-        >
-          东北
-        </button>
-      </li>
-      <li class="nav-item" role="presentation">
-        <button
-          class="nav-link"
-          id="contact-tab"
-          data-bs-toggle="tab"
-          data-bs-target="#contact"
-          type="button"
-          role="tab"
-          aria-controls="contact"
-          aria-selected="false"
-        >
-          华东
+          {{ tmp.name }}
         </button>
       </li>
     </ul>
     <div class="tab-content" id="myTabContent">
       <div
-        class="tab-pane fade show active"
+        :class="['tab-pane', 'fade', {'show': i===0}, {'active': i===0}]"
         id="home"
         role="tabpanel"
-        aria-labelledby="home-tab"
-      >
-        <fzzx />
-      </div>
-      <div
-        class="tab-pane fade"
-        id="profile"
-        role="tabpanel"
-        aria-labelledby="profile-tab"
+        :aria-labelledby="tmp.id"
+        v-for="(tmp, i) in tabs"
+        :key="i"
       >
-        <fzzx />
-      </div>
-      <div
-        class="tab-pane fade"
-        id="contact"
-        role="tabpanel"
-        aria-labelledby="contact-tab"
-      >
-        <fzzx />
+        <fzzx :list="currentList" :key="updateKey"/>
       </div>
+      
     </div>
   </div>
 </template>
@@ -101,10 +66,105 @@ export default {
     fzzx,
   },
   data() {
-    return {};
+    return {
+      currentList: [],
+      updateKey: new Date().getTime(),
+      tabs: [
+        {
+          id: "huabei",
+          name: "华北",
+          list: [
+            "北京分中心",
+            "天津分中心",
+            "河北分中心",
+            "山西分中心",
+            "内蒙古分中心",
+          ],
+        },
+        {
+          id: "dongbei",
+          name: "东北",
+          list: [
+            "辽宁分中心",
+            "沈阳分中心",
+            "大连分中心",
+            "吉林分中心",
+            "长春分中心",
+            "黑龙江分中心",
+          ],
+        },
+        {
+          id: "huadong",
+          name: "华东",
+          list: [
+            "上海分中心",
+            "江苏分中心",
+            "南京办事处",
+            "浙江分中心",
+            "杭州分中心",
+            "宁波分中心",
+            "安徽分中心",
+            "福建分中心",
+            "厦门办事处",
+            "江西分中心",
+            "山东分中心",
+            "青岛办事处",
+            "烟台办事处",
+          ],
+        },
+        {
+          id: "huazhongnan",
+          name: "华中、华南",
+          list: [
+            "河南分中心",
+            "湖北分中心",
+            "武汉分中心",
+            "湖南分中心",
+            "广东分中心",
+            "深圳分中心",
+            "广州分中心",
+            "珠海分中心",
+            "广西分中心",
+            "海南分中心",
+          ],
+        },
+        {
+          id: "xinan",
+          name: "西南",
+          list: [
+            "四川分中心",
+            "成都办事处",
+            "重庆分中心",
+            "贵州分中心",
+            "云南分中心",
+            "西藏分中心",
+          ],
+        },
+        {
+          id: "xibei",
+          name: "西北",
+          list: [
+            "陕西分中心",
+            "西安分中心",
+            "甘肃分中心",
+            "青海分中心",
+            "宁夏分中心",
+            "新疆分中心",
+          ],
+        },
+      ],
+    };
   },
   created() {
     console.log(this.$route, "this.$route");
+    this.handelTab(0);
+  },
+  methods: {
+    handelTab(i){
+      console.log(i, 'handelTab');
+      this.currentList = this.tabs[i].list;
+      this.updateKey = new Date().getTime();
+    }
   },
 };
 </script>
@@ -129,6 +189,8 @@ export default {
     .nav-link {
       border: 0;
       color: #454545;
+      padding-left: 30px;
+      padding-right: 30px;
       &.active,
       &:hover {
         border-bottom: 3px solid #f26335;

src/views/Org/Departments.vue

@@ -3,47 +3,47 @@
     <div class="guide-msg container">
       <div class="msg-cont">
         <div class="nsjg">
-          <Title :father="bgsTitle"></Title>
+          <Title :father="departments.title1"></Title>
           <p>承担编码中心日常运行管理、政策研究、相关法律事务等工作，承担文秘、档案、保密、督办、安保及后勤工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="bmglbTitle"></Title>
+          <Title :father="departments.title2"></Title>
           <p>承担对全国商品条码系统成员的注册、续展、注销等业务管理工作，开展对地方分中心（办事处）业务方面的指导、管理及考核相关工作，开展编码管理规章制度研究和制修订等工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="jsyjbTitle"></Title>
+          <Title :father="departments.title3"></Title>
           <p>承担支撑物品编码事业发展的基础性、前瞻性技术研究，开展全球统一标识系统技术体系、物品编码技术、物联网技术、二维码技术、物流与电子商务等方面标准化及应用研究工作，承担编码中心科研管理工作，承担全国物品编码标准化技术委员会秘书处工作和全国物流信息管理标准化技术委员会秘书处工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="yjtgbTitle"></Title>
+          <Title :father="departments.title4"></Title>
           <p>负责对物品编码相关工作的宣传和应用推广，承担与政府部门、行业组织及企业的沟通联络工作，负责全球统一标识系统在各行业、领域的推广应用，负责编码中心国际交流合作与外事工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="xxhbTitle"></Title>
+          <Title :father="departments.title5"></Title>
           <p>负责编码中心信息化工作的统一管理；负责信息化相关的采购工作；负责编码中心网站、公共信息系统、基础数据库、数据中心等公共基础设施的建设、管理与维护工作；负责编码中心网络安全保障与网络保密管理工作；负责信息化领域的技术跟踪与研究工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="cpkfyybTitle"></Title>
+          <Title :father="departments.title6"></Title>
           <p>承担物品编码与自动识别技术研究成果转化，搭建零售商与供应商沟通合作平台，承担商品信息服务产品的开发与市场化运营工作，开展商品相关信息服务和增值服务工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="cyfwbTitle"></Title>
+          <Title :father="departments.title7"></Title>
           <p>承担商品条码工作服务体系建立与维护工作，指导和监督地方分中心（办事处）服务清单执行情况，开展条码及自动识别技术教育培训和咨询工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="zljcbTitle"></Title>
+          <Title :father="departments.title8"></Title>
           <p>统一组织管理全国商品条码质量服务工作，实施服务性检验及市场调查，负责条码、射频识别等检测技术研究及标准化工作，开展条码、射频识别相关检验服务及技术培训。</p>
         </div>
         <div class="nsjg">
-          <Title :father="rlzybTitle"></Title>
+          <Title :father="departments.title9"></Title>
           <p>承担编码中心人力资源规划、管理与人才队伍建设工作，承担干部任免、岗位设置、工资管理、教育培训、职称管理及退休人员管理等工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="cwbTitle"></Title>
+          <Title :father="departments.title10"></Title>
           <p>承担条码收费、财务核算、预决算、内部审计、国有资产管理、分支机构条码经营管理等工作，承担科研项目经费管理工作。</p>
         </div>
         <div class="nsjg">
-          <Title :father="dwbgsTitle"></Title>
+          <Title :father="departments.title11"></Title>
           <p>承担党委日常工作，负责党务、纪检监察、工青妇等工作。</p>
         </div>
       </div>
@@ -59,55 +59,49 @@ export default {
   },
   data() {
     return {
-      bgsTitle: {
-        name: "办公室",
-        ico: "",
-      },
-      bmglbTitle: {
-        name: "编码管理部",
-        ico: "",
-      },
-      jsyjbTitle: {
-        name: "技术研究部",
-        ico: "",
-      },
-      yjtgbTitle: {
-        name: "应用推广部",
-        ico: "",
-      },
-      xxhbTitle: {
-        name: "信息化部",
-        ico: "",
-      },
-      cpkfyybTitle: {
-        name: "产品开发运营部",
-        ico: "",
-      },
-      cyfwbTitle: {
-        name: "成员服务部",
-        ico: "",
-      },
-      zljcbTitle: {
-        name: "质量检测部",
-        ico: "",
-      },
-      rlzybTitle: {
-        name: "人力资源部",
-        ico: "",
-      },
-      cwbTitle: {
-        name: "产品开发运营部",
-        ico: "",
-      },
-      dwbgsTitle: {
-        name: "党委办公室（纪委办公室）",
-        ico: "",
+      departments: {
+        title1: {
+          name: '办公室',
+        },
+        title2: {
+          name: '编码管理部',
+        },
+        title3: {
+          name: '技术研究部',
+        },
+        title4: {
+          name: '应用推广部',
+        },
+        title5: {
+          name: '信息化部',
+        },
+        title6: {
+          name: '产品开发运营部',
+        },
+        title7: {
+          name: '成员服务部',
+        },
+        title8: {
+          name: '质量检测部',
+        },
+        title9: {
+          name: '人力资源部',
+        },
+        title10: {
+          name: '产品开发运营部',
+        },
+        title11: {
+          name: '党委办公室（纪委办公室）',
+        },
+        title12: {
+          name: '办公室',
+        },
       },
     };
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .guide {
   @include module-box;
   .guide-msg {

src/views/Org/Intro.vue

@@ -35,15 +35,15 @@
         </p>
         <p>（九）承办国家市场监督管理总局交办的其他工作。</p>
         <div class="zzjg">
-          <Title :father="zzjgTitle"></Title>
+          <Title :father="intro.title1"></Title>
           <img src="../../assets/image/home/zzjg-tp.jpg" alt="" />
         </div>
         <div class="zzjg">
-          <Title :father="lxdzTitle"></Title>
+          <Title :father="intro.title2"></Title>
           <p>北京东城区安外大街东侧138号皇城国际中心B座3-6层 （邮编：100011)</p>
         </div>
         <div class="map">
-          <Title :father="mapTitle"></Title>
+          <Title :father="intro.title3"></Title>
           <baidu-map class="bm-view" :center="map.center" :zoom="map.zoom" :scroll-wheel-zoom="true" >
             <bm-overview-map
               anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
@@ -81,14 +81,16 @@ export default {
   },
   data() {
     return {
-      zzjgTitle: {
-        name: "组织架构：",
-      },
-      lxdzTitle: {
-        name: "联系地址：",
-      },
-      mapTitle: {
-        name: "乘车及驾车路线图：",
+      intro: {
+        title1: {
+          name: '组织架构：'
+        },
+        title2: {
+          name: '联系地址：'
+        },
+        title3: {
+          name: '乘车及驾车路线图：'
+        },
       },
       map: {
         label: '中国物品编码中心',

src/views/Org/Leadership.vue

+<template>
+  <div class="leadership">
+    <cate :father="zxldCate"></cate>
+    <div class="container leadership-ul">
+      <div class="row" v-for="(tmp, i) in list" :key="i">
+        <div class="col-lg-3 leadership-left">
+          <img :src="tmp.photo" alt="" />
+        </div>
+        <div class="col-lg-9 leadership-right">
+          <div class="leadership-right-nr">
+            <div class="name">{{tmp.name}}：</div>
+            <div class="note">{{tmp.position}}</div>
+          </div>
+          <div class="leadership-right-nr">
+            <div class="name">工作分工：</div>
+            <div class="note">{{tmp.work}}。</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import cate from "../comps/cate.vue";
+
+export default {
+  components: {
+    cate,
+  },
+  data() {
+    return {
+      zxldCate: {
+        name: "中心领导",
+        ico: "",
+      },
+      list: [
+        {
+          photo: require('../../assets/image/org/ZhangChengHai.jpg'),
+          name: '张成海',
+          position: '主任、党委副书记',
+          work: '负责中国物品编码中心全面工作'
+        },
+        {
+          photo: require('../../assets/image/org/luoqiuke.jpg'),
+          name: '罗秋科',
+          position: '副主任',
+          work: '分管办公室、技术研究部、质量检测部、人力资源部、财务部'
+        },
+        {
+          photo: require('../../assets/image/org/LiJianHui.jpg'),
+          name: '李建辉',
+          position: '总工程师',
+          work: '分管编码管理部、应用推广部、信息化部、产品开发运营部、成员服务部'
+        },
+        {
+          photo: require('../../assets/image/org/YueShanYong.jpg'),
+          name: '岳善勇',
+          position: '纪委书记',
+          work: '主持中国物品编码中心纪委工作。分管党委办公室（纪委办公室）'
+        },
+      ]
+    };
+  },
+};
+</script>
+<style lang="scss">
+.leadership {
+  @include module-box;
+  .leadership-ul {
+    > .row {
+      border: 1px dashed #ccc;
+      border-radius: 10px 10px 0;
+      background-color: #ffd;
+      margin: 20px 0;
+      .leadership-left{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .leadership-right{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 20px 0 20px 15px;
+        font-size: 14px;
+        .note{
+          text-indent: 24px;
+          padding: 10px 0;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/Org/comps/fzzx.vue

 <template>
-    <div class="fzzx">
-        <div class="cate-name">分中心名称</div>
-        <div class="fzzx-list">
-            <div class="row">
-                <div class="col-6">北京分中心</div>
-                <div class="col-6">天津分中心</div>
-            </div>
-            <div class="row">
-                <div class="col-6">河北分中心</div>
-                <div class="col-6">山西分中心</div>
-            </div>
-        </div>
+  <div class="fzzx">
+    <div class="cate-name">分中心名称</div>
+    <div class="fzzx-list">
+      <div class="row" v-for="(tmpA, i) in newList" :key="i">
+        <div class="col-6" v-for="(tmpB, ii) in tmpA" :key="ii">{{tmpB}}</div>
+      </div>
     </div>
+  </div>
 </template>
+<script>
+import { groupList } from "../../../utils/utils";
+
+export default {
+  props: ["list"],
+  created() {
+    console.log(this.newList, "list");
+  },
+  computed: {
+    newList() {
+      return groupList(this.list, 2);
+    },
+  },
+};
+</script>
 <style lang="scss">
-.fzzx{
-    width: 90%;
-    margin: 0 auto;
-    padding: 20px 0;
-    font-size: 14px;
-    .cate-name{
-        color: #454545;
+.fzzx {
+  width: 90%;
+  margin: 0 auto;
+  padding: 20px 0;
+  font-size: 14px;
+  .cate-name {
+    color: #454545;
+  }
+  .fzzx-list {
+    margin-top: 20px;
+    .row {
+      line-height: 40px;
+      margin: 0;
+      &:nth-child(odd) {
+        background: rgba(242, 99, 53, 0.04);
+      }
     }
-    .fzzx-list{
-        margin-top: 20px;
-        .row{
-            line-height: 40px;
-            margin: 0;
-            &:nth-child(odd) {
-                background: rgba(242, 99, 53, 0.04);
-            }
-        }
-    }
-} 
+  }
+}
 </style>
\ No newline at end of file