elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

代码提交

master
juwei001 1 year ago
parent
3bd2e7d75b
commit
a10b1496ed
1 changed files with 227 additions and 199 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 426
      src/views/next/screen-content-left/hsyf-left/index.vue

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

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

Write Preview
Loading…
Cancel
Save