|
|
@ -89,30 +89,62 @@ |
|
|
<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="pei"> |
|
|
<div class="card-item-dyfx-left"> |
|
|
<div class="echarts-header"> |
|
|
<div class="top-title"> |
|
|
<img src="@/assets/images/common/dto.png" alt="" class="dto" /> |
|
|
<div> |
|
|
<span>年龄统计</span> |
|
|
<img :src="require('@/assets/images/icon/dyfxDian.png')" /> |
|
|
<div></div> |
|
|
</div> |
|
|
<img src="@/assets/images/common/echarts-header.png" alt="" /> |
|
|
<div class="title-txt">移风共富</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div class="content-left"> |
|
|
|
|
|
<div class="content-left-icon"> |
|
|
|
|
|
<img :src="require('@/assets/images/icon/gfgsIcon.png')" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content-left-name">共富公司</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content-right"> |
|
|
|
|
|
<span class="content-right-num">4 </span>家 |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="bottom-list"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="bottom-list-item" |
|
|
|
|
|
v-for="(item, index) in yfgfList" |
|
|
|
|
|
:key="item.companyName + index" |
|
|
|
|
|
> |
|
|
|
|
|
<span>{{ index + 1 }}</span> {{ item.companyName }} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
|
|
|
id="charts" |
|
|
|
|
|
style="width: 201px; height: 203px; z-index: 10" |
|
|
|
|
|
></div> |
|
|
|
|
|
<div class="buttomCharts"></div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="bar"> |
|
|
<div class="card-item-dyfx-right"> |
|
|
<div class="echarts-header"> |
|
|
<div class="top-title"> |
|
|
<img src="@/assets/images/common/dto.png" alt="" class="dto" /> |
|
|
<div> |
|
|
<span>各新村党员统计</span> |
|
|
<img :src="require('@/assets/images/icon/dyfxDian.png')" /> |
|
|
<div></div> |
|
|
</div> |
|
|
<img src="@/assets/images/common/echarts-header.png" alt="" /> |
|
|
<div class="title-txt">移风阵地</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content"> |
|
|
|
|
|
<div class="content-left"> |
|
|
|
|
|
<div class="content-left-icon"> |
|
|
|
|
|
<img :src="require('@/assets/images/icon/gmdIcon.png')" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content-left-name">观摩点</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="content-right"> |
|
|
|
|
|
<span class="content-right-num">3 </span>处 |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="bottom-list"> |
|
|
|
|
|
<div |
|
|
|
|
|
class="bottom-list-item" |
|
|
|
|
|
v-for="(item, index) in yfzdList" |
|
|
|
|
|
:key="item.jdName + index" |
|
|
|
|
|
> |
|
|
|
|
|
<span class="bottom-list-item-span">{{ index + 1 }}</span |
|
|
|
|
|
>{{ item.jdName }} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
|
|
|
id="chartsBar" |
|
|
|
|
|
style="width: 100%; height: 100%; z-index: 10" |
|
|
|
|
|
></div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -121,6 +153,7 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { mapActions } from "vuex"; |
|
|
import { mapActions } from "vuex"; |
|
|
|
|
|
import { partyOrgCategoryAndQuantity } from "@/api/hsyf"; |
|
|
const RADIUS = 100; // 3d球的半径 |
|
|
const RADIUS = 100; // 3d球的半径 |
|
|
const FALLLENGTH = 500; |
|
|
const FALLLENGTH = 500; |
|
|
let CX = null; |
|
|
let CX = null; |
|
|
@ -358,6 +391,17 @@ export default { |
|
|
x: 65, |
|
|
x: 65, |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
|
|
|
yfgfList: [ |
|
|
|
|
|
{ companyName: "青岛益成河农业科技有限公司" }, |
|
|
|
|
|
{ companyName: "青岛滨源农产品有限公司" }, |
|
|
|
|
|
{ companyName: "青岛上泊建晟建设发展有限公司" }, |
|
|
|
|
|
{ companyName: "青岛圆可方诚工贸有限公司" }, |
|
|
|
|
|
], |
|
|
|
|
|
yfzdList: [ |
|
|
|
|
|
{ jdName: "大欧鸟笼乡村记忆馆" }, |
|
|
|
|
|
{ jdName: "七彩田园" }, |
|
|
|
|
|
{ jdName: "中共即墨县委纪念馆" }, |
|
|
|
|
|
], |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
created() { |
|
|
created() { |
|
|
@ -368,6 +412,7 @@ export default { |
|
|
this.forArrayValue(["#00BABC", "#009FA4", "#00FFC0"], index) |
|
|
this.forArrayValue(["#00BABC", "#009FA4", "#00FFC0"], index) |
|
|
); |
|
|
); |
|
|
}); |
|
|
}); |
|
|
|
|
|
this.getData(); |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.$nextTick(function () { |
|
|
this.$nextTick(function () { |
|
|
@ -383,6 +428,16 @@ export default { |
|
|
// set_garden: 'SET_GARDEN', |
|
|
// set_garden: 'SET_GARDEN', |
|
|
set_organization: "SET_ORGANIZATION", |
|
|
set_organization: "SET_ORGANIZATION", |
|
|
}), |
|
|
}), |
|
|
|
|
|
getData() { |
|
|
|
|
|
// fetch( |
|
|
|
|
|
// "https://yifengdian-smps.elinkservice.cn/api/resi/partymember/yifengScreen/partyOrgCategoryAndQuantity" |
|
|
|
|
|
// ).then((res) => { |
|
|
|
|
|
// console.log('res::', res); |
|
|
|
|
|
// }); |
|
|
|
|
|
partyOrgCategoryAndQuantity().then((res) => { |
|
|
|
|
|
console.log("tongle?", res); |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
forArrayValue(array, sort) { |
|
|
forArrayValue(array, sort) { |
|
|
return array[sort % array.length]; |
|
|
return array[sort % array.length]; |
|
|
}, |
|
|
}, |
|
|
@ -1001,22 +1056,22 @@ export default { |
|
|
animation: dian4 8s linear infinite; |
|
|
animation: dian4 8s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(5) { |
|
|
.cundian:nth-child(5) { |
|
|
animation: dian5 8s linear infinite; |
|
|
animation: dian5 12s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(6) { |
|
|
.cundian:nth-child(6) { |
|
|
animation: dian6 8s linear infinite; |
|
|
animation: dian6 12s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(7) { |
|
|
.cundian:nth-child(7) { |
|
|
animation: dian7 8s linear infinite; |
|
|
animation: dian7 12s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(8) { |
|
|
.cundian:nth-child(8) { |
|
|
animation: dian8 8s linear infinite; |
|
|
animation: dian8 12s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(9) { |
|
|
.cundian:nth-child(9) { |
|
|
animation: dian9 8s linear infinite; |
|
|
animation: dian9 12s linear infinite; |
|
|
} |
|
|
} |
|
|
.cundian:nth-child(10) { |
|
|
.cundian:nth-child(10) { |
|
|
animation: dian10 8s linear infinite; |
|
|
animation: dian10 12s linear infinite; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.tag { |
|
|
.tag { |
|
|
@ -1057,48 +1112,169 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// &-item-dyfx { |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// padding: 16px; |
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
|
|
|
|
|
|
// .pei, |
|
|
|
|
|
// .bar { |
|
|
|
|
|
// .echarts-header { |
|
|
|
|
|
// display: flex; |
|
|
|
|
|
// align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
// :nth-child(1) { |
|
|
|
|
|
// width: 18px; |
|
|
|
|
|
// height: 18px; |
|
|
|
|
|
// margin-right: 8px; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// :nth-child(2) { |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// :nth-child(3) { |
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
// height: 1px; |
|
|
|
|
|
// border-top: 2px dotted #2e8bbd; |
|
|
|
|
|
// margin: 0 3px; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// :nth-child(4) { |
|
|
|
|
|
// width: 12px; |
|
|
|
|
|
// height: 12px; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// .pei { |
|
|
|
|
|
// width: 47%; |
|
|
|
|
|
// @include flex(column); |
|
|
|
|
|
// margin-right: 50px; |
|
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
// .bar { |
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
&-item-dyfx { |
|
|
&-item-dyfx { |
|
|
|
|
|
padding: 16px 20px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
padding: 16px; |
|
|
justify-content: space-between; |
|
|
flex: 1; |
|
|
&-left, |
|
|
|
|
|
&-right { |
|
|
.pei, |
|
|
width: 214px; |
|
|
.bar { |
|
|
background: url("~@/assets/images/home/yfgfLeftBg.png") no-repeat; |
|
|
.echarts-header { |
|
|
background-size: 100% 14px; |
|
|
|
|
|
background-position: center 58px; |
|
|
|
|
|
.top-title { |
|
|
|
|
|
width: 214px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
img { |
|
|
|
|
|
|
|
|
:nth-child(1) { |
|
|
|
|
|
width: 18px; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
height: 18px; |
|
|
margin-right: 8px; |
|
|
margin-top: 2px; |
|
|
} |
|
|
} |
|
|
|
|
|
.title-txt { |
|
|
:nth-child(2) { |
|
|
padding-left: 8px; |
|
|
|
|
|
height: 16px; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
color: #ffffff; |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
:nth-child(3) { |
|
|
.content { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
height: 1px; |
|
|
justify-content: space-between; |
|
|
border-top: 2px dotted #2e8bbd; |
|
|
padding: 15px 20px; |
|
|
margin: 0 3px; |
|
|
&-left { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
&-icon { |
|
|
|
|
|
width: 26px; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 26px; |
|
|
|
|
|
height: 26px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
&-name { |
|
|
|
|
|
padding-left: 8px; |
|
|
|
|
|
width: 90px; |
|
|
|
|
|
height: 26px; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
line-height: 26px; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
&-right { |
|
|
:nth-child(4) { |
|
|
font-weight: 500; |
|
|
width: 12px; |
|
|
&-num { |
|
|
height: 12px; |
|
|
height: 13px; |
|
|
|
|
|
font-family: PangMenZhengDao; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
font-size: 20px; |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.bottom-list { |
|
|
|
|
|
padding-top: 12px; |
|
|
|
|
|
&-item { |
|
|
|
|
|
margin-top: 3px; |
|
|
|
|
|
&-span { |
|
|
|
|
|
padding-left: 10px; |
|
|
|
|
|
padding-right: 12px; |
|
|
|
|
|
} |
|
|
|
|
|
// width: 180px; |
|
|
|
|
|
height: 30px; |
|
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
color: #fbe9c5; |
|
|
|
|
|
line-height: 30px; |
|
|
|
|
|
border-bottom: 1px dashed #bb7053; |
|
|
|
|
|
} |
|
|
|
|
|
&-item:hover { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #ffffff; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
&-right { |
|
|
.pei { |
|
|
width: 190px; |
|
|
width: 47%; |
|
|
background: url("~@/assets/images/home/yfgfRightBg.png") no-repeat; |
|
|
@include flex(column); |
|
|
background-size: 100% 14px; |
|
|
margin-right: 50px; |
|
|
background-position: center 58px; |
|
|
} |
|
|
.top-title { |
|
|
|
|
|
width: 190px; |
|
|
.bar { |
|
|
} |
|
|
flex: 1; |
|
|
.content { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 15px 20px; |
|
|
|
|
|
&-left { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
&-name { |
|
|
|
|
|
width: 60px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.bottom-list { |
|
|
|
|
|
&-item { |
|
|
|
|
|
width: 190px; |
|
|
|
|
|
height: 29px; |
|
|
|
|
|
background: rgba(187, 112, 83, 0.2); |
|
|
|
|
|
border-radius: 2px; |
|
|
|
|
|
border: 1px solid #bb7053; |
|
|
|
|
|
} |
|
|
|
|
|
&-item:hover { |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #ffffff; |
|
|
|
|
|
background: url("~@/assets/images/home/gmdListBg.png") no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
