代码提交

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -5,12 +5,34 @@
         <div slot="left" class="screen-title-left">移风党建</div>
       </screen-title-red>
       <div class="card-item-dyfx">
-        <div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',4)">
+        <div
+          class="card-item-dyfx-item"
+          @click="handelClickOrg('hsyf_attractions', 4)"
+        >
+          <div>干部队伍建设</div>
           <div>干部队伍建设</div>
         </div>
-        <div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',5)"><div>战斗堡垒筑牢</div></div>
-        <div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',6)"><div>强村共富先行</div></div>
-        <div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',7)"><div>党建品牌打造</div></div>
+        <div
+          class="card-item-dyfx-item"
+          @click="handelClickOrg('hsyf_attractions', 5)"
+        >
+          <div>战斗堡垒筑牢</div>
+          <div>战斗堡垒筑牢</div>
+        </div>
+        <div
+          class="card-item-dyfx-item"
+          @click="handelClickOrg('hsyf_attractions', 6)"
+        >
+          <div>强村共富先行</div>
+          <div>强村共富先行</div>
+        </div>
+        <div
+          class="card-item-dyfx-item"
+          @click="handelClickOrg('hsyf_attractions', 7)"
+        >
+          <div>党建品牌打造</div>
+          <div>党建品牌打造</div>
+        </div>
       </div>
     </div>
     <div class="card h292" style="margin-top: 8px">
@@ -172,146 +194,146 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
-import { partyOrgCategoryAndQuantity, partyPlacePage } from '@/api/hsyf'
-const RADIUS = 100 // 3d球的半径
-const FALLLENGTH = 500
-let CX = null
-let CY = null
+import { mapActions, mapGetters } from "vuex";
+import { partyOrgCategoryAndQuantity, partyPlacePage } from "@/api/hsyf";
+const RADIUS = 100; // 3d球的半径
+const FALLLENGTH = 500;
+let CX = null;
+let CY = null;
 
 class Tag {
   constructor(el, x, y, z) {
-    this.el = el
-    this.x = x
-    this.y = y
-    this.z = z
+    this.el = el;
+    this.x = x;
+    this.y = y;
+    this.z = z;
   }
 
   move() {
-    const scale = FALLLENGTH / (FALLLENGTH - this.z)
-    const alpha = (this.z + RADIUS) / (3 * RADIUS)
-    const left = this.x + CX - this.el.offsetWidth / 2 + 'px' // 水平偏移
-    const top = this.y + CY - this.el.offsetHeight / 1 + 'px' // 竖直偏移
-    this.el.style.opacity = alpha
-    this.el.style.zIndex = parseInt(scale * 100)
-    this.el.style.transform = `translate(${left},${top}) scale(${scale}) rotate(0deg)` // 将rotate改为0度
+    const scale = FALLLENGTH / (FALLLENGTH - this.z);
+    const alpha = (this.z + RADIUS) / (3 * RADIUS);
+    const left = this.x + CX - this.el.offsetWidth / 2 + "px"; // 水平偏移
+    const top = this.y + CY - this.el.offsetHeight / 1 + "px"; // 竖直偏移
+    this.el.style.opacity = alpha;
+    this.el.style.zIndex = parseInt(scale * 100);
+    this.el.style.transform = `translate(${left},${top}) scale(${scale}) rotate(0deg)`; // 将rotate改为0度
   }
 }
 export default {
   data() {
     return {
       agencyList: [
-        { num: 11, agency: '党委' },
-        { num: 97, agency: '党支部' },
-        { num: 235, agency: '党小组' },
-        { num: 3496, agency: '党员' }
+        { num: 11, agency: "党委" },
+        { num: 97, agency: "党支部" },
+        { num: 235, agency: "党小组" },
+        { num: 3496, agency: "党员" },
       ],
       typeList: [
         {
-          imgSrc: require('@/assets/images/icon/zdwRed.png'),
-          type: '镇党委',
-          num: 1
+          imgSrc: require("@/assets/images/icon/zdwRed.png"),
+          type: "镇党委",
+          num: 1,
         },
         {
-          imgSrc: require('@/assets/images/icon/xcdwRed.png'),
-          type: '新村党委',
-          num: 10
+          imgSrc: require("@/assets/images/icon/xcdwRed.png"),
+          type: "新村党委",
+          num: 10,
         },
         {
-          imgSrc: require('@/assets/images/icon/zrcdzbRed.png'),
-          type: '自然村党支部',
-          num: 100
+          imgSrc: require("@/assets/images/icon/zrcdzbRed.png"),
+          type: "自然村党支部",
+          num: 100,
         },
         {
-          imgSrc: require('@/assets/images/icon/wgdxzRed.png'),
-          type: '网格党小组',
-          num: 368
-        }
+          imgSrc: require("@/assets/images/icon/wgdxzRed.png"),
+          type: "网格党小组",
+          num: 368,
+        },
       ],
       tagList: [
         {
-          name: '上泊新村委员会',
-          id: '1697533359860244481'
+          name: "上泊新村委员会",
+          id: "1697533359860244481",
         },
         {
-          name: '滨河村委员会',
-          id: '1704030137514287105'
+          name: "滨河村委员会",
+          id: "1704030137514287105",
         },
         {
-          name: '湍湾新村委员会',
-          id: '1704036500462198786'
+          name: "湍湾新村委员会",
+          id: "1704036500462198786",
         },
         {
-          name: '七级村委员会',
-          id: '1704313950756757506'
+          name: "七级村委员会",
+          id: "1704313950756757506",
         },
         {
-          name: '沽河村委员会',
-          id: '1704324481563582466'
+          name: "沽河村委员会",
+          id: "1704324481563582466",
         },
         {
-          name: '太祉庄村委员会',
-          id: '1704327114084933633'
+          name: "太祉庄村委员会",
+          id: "1704327114084933633",
         },
         {
-          name: '河流新村委员会',
-          id: '1704331366425518081'
+          name: "河流新村委员会",
+          id: "1704331366425518081",
         },
         {
-          name: '大坝新村委员会',
-          id: '1704396342955696130'
+          name: "大坝新村委员会",
+          id: "1704396342955696130",
         },
         {
-          name: '双塔村委员会',
-          id: '1704331366425518081'
+          name: "双塔村委员会",
+          id: "1704331366425518081",
         },
         {
-          name: '移风村委员会',
-          id: '1704331366425518081'
-        }
+          name: "移风村委员会",
+          id: "1704331366425518081",
+        },
       ],
       tempList: [],
       bubbleList: [
         {
           w: 8,
-          x: 10
+          x: 10,
         },
         {
           w: 9,
-          x: 50
+          x: 50,
         },
         {
           w: 4,
-          x: 30
+          x: 30,
         },
         {
           w: 5,
-          x: 80
+          x: 80,
         },
         {
           w: 4,
-          x: 30
+          x: 30,
         },
         {
           w: 4,
-          x: 70
+          x: 70,
         },
         {
           w: 6,
-          x: 20
+          x: 20,
         },
         {
           w: 8,
-          x: 50
+          x: 50,
         },
         {
           w: 4,
-          x: 60
+          x: 60,
         },
         {
           w: 6,
-          x: 65
-        }
+          x: 65,
+        },
       ],
       // yfgfTotal: 0,
       // yfzdTotal: 0,
@@ -320,181 +342,181 @@ export default {
       yfzdList: [],
       zzjsValues: [
         {
-          partyOrgType: '3',
-          name: '镇党委',
-          value: 1
+          partyOrgType: "3",
+          name: "镇党委",
+          value: 1,
         },
         {
-          partyOrgType: '4',
-          name: '新村党委',
-          value: 10
+          partyOrgType: "4",
+          name: "新村党委",
+          value: 10,
         },
         {
-          partyOrgType: '5',
-          name: '自然村党支部',
-          value: 100
+          partyOrgType: "5",
+          name: "自然村党支部",
+          value: 100,
         },
         {
-          partyOrgType: '6',
-          name: '党小组',
-          value: 368
+          partyOrgType: "6",
+          name: "党小组",
+          value: 368,
         },
         {
-          partyOrgType: '7',
-          name: '党员',
-          value: 4106
+          partyOrgType: "7",
+          name: "党员",
+          value: 4106,
         },
         {
-          partyOrgType: '8',
-          name: '党员中心户',
-          value: 692
-        }
-      ]
-    }
+          partyOrgType: "8",
+          name: "党员中心户",
+          value: 692,
+        },
+      ],
+    };
   },
   created() {
     this.bubbleList.forEach((i, index) => {
       this.$set(
         i,
-        'c',
+        "c",
         this.forArrayValue(
           [
-            'rgba(255,255,255,0.2)',
-            'rgba(255,255,255,0.4)',
-            'rgba(255,255,255,0.6)'
+            "rgba(255,255,255,0.2)",
+            "rgba(255,255,255,0.4)",
+            "rgba(255,255,255,0.6)",
           ],
           index
         )
-      )
-    })
-    this.getData()
+      );
+    });
+    this.getData();
   },
   mounted() {
     this.$nextTick(function () {
-      this.initTag()
-      this.animate()
-    })
+      this.initTag();
+      this.animate();
+    });
   },
   beforeDestroy() {},
   methods: {
     // ...mapGetters(['hsyfCompany']),
     ...mapActions({
       // set_garden: 'SET_GARDEN',
-      set_organization: 'SET_ORGANIZATION',
-      set_hsyf_djType: 'SET_HSYF_DJTYPE',
-      set_hsyf_company: 'SET_HSYF_COMPANY',
-      set_zhen_committee: 'SET_ZHEN_COMMITTEE',
-      set_xincun_committee: 'SET_XINCUN_COMMITTEE',
-      set_zirancun_committee: 'SET_ZIRANCUN_COMMITTEE',
-      set_wangge_committee: 'SET_WANGGE_COMMITTEE',
-      set_dyzxh_committee: 'SET_DYZXH_COMMITTEE',
-      set_dangyuan_committee: 'SET_DANGYUAN_COMMITTEE',
-      set_hsyf_attractions: 'SET_HSYF_ATTRACTIONS',
-      set_hsyf_jzfw: 'SET_HSYF_JZFW'
+      set_organization: "SET_ORGANIZATION",
+      set_hsyf_djType: "SET_HSYF_DJTYPE",
+      set_hsyf_company: "SET_HSYF_COMPANY",
+      set_zhen_committee: "SET_ZHEN_COMMITTEE",
+      set_xincun_committee: "SET_XINCUN_COMMITTEE",
+      set_zirancun_committee: "SET_ZIRANCUN_COMMITTEE",
+      set_wangge_committee: "SET_WANGGE_COMMITTEE",
+      set_dyzxh_committee: "SET_DYZXH_COMMITTEE",
+      set_dangyuan_committee: "SET_DANGYUAN_COMMITTEE",
+      set_hsyf_attractions: "SET_HSYF_ATTRACTIONS",
+      set_hsyf_jzfw: "SET_HSYF_JZFW",
     }),
     getData() {
       partyOrgCategoryAndQuantity().then((res) => {
-        this.zzjsValues = res.data
-      })
+        this.zzjsValues = res.data;
+      });
       partyPlacePage({ page: 1, limit: 2, type: 1 }).then((res) => {
-        this.yfgfList = res.data.list
-      })
+        this.yfgfList = res.data.list;
+      });
       partyPlacePage({ page: 1, limit: 3, type: 2 }).then((res) => {
-        this.yfzdList = res.data.list
-      })
+        this.yfzdList = res.data.list;
+      });
       partyPlacePage({ page: 1, limit: 3, type: 3 }).then((res) => {
-        this.jzfwList = res.data.list
-      })
+        this.jzfwList = res.data.list;
+      });
     },
     forArrayValue(array, sort) {
-      return array[sort % array.length]
+      return array[sort % array.length];
     },
     handelClickOrg(type, type1) {
-      if (type === 'organization') {
-        this.set_organization(true)
+      if (type === "organization") {
+        this.set_organization(true);
       }
-      if (type === 'hsyf_company') {
-        this.set_hsyf_company(true)
+      if (type === "hsyf_company") {
+        this.set_hsyf_company(true);
       }
-      if (type === 'hsyf_attractions') {
-        this.set_hsyf_attractions(true)
-        this.set_hsyf_djType(type1)
+      if (type === "hsyf_attractions") {
+        this.set_hsyf_attractions(true);
+        this.set_hsyf_djType(type1);
       }
-      if (type === 'hsyf_jzfw') {
-        this.set_hsyf_jzfw(true)
+      if (type === "hsyf_jzfw") {
+        this.set_hsyf_jzfw(true);
       }
-      if (type === '镇党委') {
-        this.set_zhen_committee(true)
+      if (type === "镇党委") {
+        this.set_zhen_committee(true);
       }
-      if (type === '新村党委') {
-        this.set_xincun_committee(true)
+      if (type === "新村党委") {
+        this.set_xincun_committee(true);
       }
-      if (type === '自然村党支部') {
-        this.set_zirancun_committee(true)
+      if (type === "自然村党支部") {
+        this.set_zirancun_committee(true);
       }
-      if (type === '网格党小组') {
-        this.set_wangge_committee(true)
+      if (type === "网格党小组") {
+        this.set_wangge_committee(true);
       }
-      if (type === '党员中心户') {
-        this.set_dyzxh_committee(true)
+      if (type === "党员中心户") {
+        this.set_dyzxh_committee(true);
       }
-      if (type === '党员数') {
-        this.set_dangyuan_committee(true)
+      if (type === "党员数") {
+        this.set_dangyuan_committee(true);
       }
     },
 
     initTag() {
-      const tags = document.querySelectorAll('.tag')
-      const wrap = document.querySelector('.card-item-tag')
-      const len = tags.length
-      CX = wrap.offsetWidth / 2
-      CY = wrap.offsetHeight / 2
+      const tags = document.querySelectorAll(".tag");
+      const wrap = document.querySelector(".card-item-tag");
+      const len = tags.length;
+      CX = wrap.offsetWidth / 2;
+      CY = wrap.offsetHeight / 2;
       tags.forEach((i, index) => {
-        const k = -1 + (2 * (index + 1) - 1) / len
-        const a = Math.acos(k)
-        const b = a * Math.sqrt(len * Math.PI)
-        const x = RADIUS * 1.15 * Math.sin(a) * Math.cos(b)
-        const y = RADIUS * Math.sin(a) * Math.sin(b)
-        const z = RADIUS * Math.cos(a)
-        const tag = new Tag(i, x, y, z)
-        this.tempList.push(tag)
-      })
+        const k = -1 + (2 * (index + 1) - 1) / len;
+        const a = Math.acos(k);
+        const b = a * Math.sqrt(len * Math.PI);
+        const x = RADIUS * 1.15 * Math.sin(a) * Math.cos(b);
+        const y = RADIUS * Math.sin(a) * Math.sin(b);
+        const z = RADIUS * Math.cos(a);
+        const tag = new Tag(i, x, y, z);
+        this.tempList.push(tag);
+      });
     },
     rotateX() {
-      const angleX = Math.PI / 8000
-      const cos = Math.cos(angleX)
-      const sin = Math.sin(angleX)
+      const angleX = Math.PI / 8000;
+      const cos = Math.cos(angleX);
+      const sin = Math.sin(angleX);
       this.tempList.forEach((i) => {
-        const y1 = i.y * cos - i.z * sin
-        const z1 = i.z * cos + i.y * sin
-        i.y = y1
-        i.z = z1
-      })
+        const y1 = i.y * cos - i.z * sin;
+        const z1 = i.z * cos + i.y * sin;
+        i.y = y1;
+        i.z = z1;
+      });
     },
     rotateY() {
-      const angleY = Math.PI / 200
-      const cos = Math.cos(angleY)
-      const sin = Math.sin(angleY)
+      const angleY = Math.PI / 200;
+      const cos = Math.cos(angleY);
+      const sin = Math.sin(angleY);
       this.tempList.forEach((i) => {
-        const x1 = i.x * cos - i.z * sin
-        const z1 = i.z * cos + i.x * sin
-        i.x = x1
-        i.z = z1
-      })
+        const x1 = i.x * cos - i.z * sin;
+        const z1 = i.z * cos + i.x * sin;
+        i.x = x1;
+        i.z = z1;
+      });
     },
     animate() {
-      this.rotateX()
-      this.rotateY()
+      this.rotateX();
+      this.rotateY();
       this.tempList.forEach((i) => {
-        i.move()
-      })
-      requestAnimationFrame(this.animate)
-    }
+        i.move();
+      });
+      requestAnimationFrame(this.animate);
+    },
   },
   components: {},
   computed: {},
-  watch: {}
-}
+  watch: {},
+};
 </script>
 
 <style lang="scss" scoped>
@@ -802,16 +824,22 @@ export default {
       width: 206px;
       height: 110px;
       text-align: center;
-      font-family: "zaozigongfang";
-      font-weight: 400;
-      font-size: 16px;
       color: #ffffff;
       line-height: 110px;
-      background: url("~@/assets/images/hsyf/yfdj/yfdj1.png") no-repeat;
+      font-size: 16px;
+      font-weight: bold;
+      font-family: "zaozigongfang";
       background-size: 100% 100%;
+      background: url("~@/assets/images/hsyf/yfdj/yfdj1.png") no-repeat;
 
-      div {
-        background: rgba(0, 0, 0, 0.3);
+      div:nth-child(1) {
+        line-height: 110px;
+        text-stroke: 4px #b1210d;
+        -webkit-text-stroke: 4px #b1210d;
+      }
+      div:nth-child(2) {
+        font-weight: 400;
+        margin-top: -110px;
       }
     }
     &-item:nth-child(2) {