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

代码提交

master
juwei001 1 year ago
parent
5369ae48fd
commit
17a3cf58d5
2 changed files with 189 additions and 189 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. 0
      src/components/screen-map-header-home/index.vue
  2. 378
      src/views/next/screen-content-left/hsyf-left/index.vue

0
src/components/screen-map-header copy/index.vue → src/components/screen-map-header-home/index.vue
View File

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

@ -196,146 +196,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,
@ -344,181 +344,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>

Write Preview
Loading…
Cancel
Save