You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1281 lines
34 KiB
1281 lines
34 KiB
<template>
|
|
<div>
|
|
<div class="card h292">
|
|
<screen-title-red>
|
|
<div slot="left" class="screen-title-left">组织建设</div>
|
|
<div slot="right" class="screen-title-right" @click="handelClickOrg">
|
|
<span>组织架构</span>
|
|
</div>
|
|
</screen-title-red>
|
|
<div class="card-item-zzjs">
|
|
<div class="top">
|
|
<div class="item" v-for="(item, index) in typeList" :key="index">
|
|
<div class="imgBox">
|
|
<img :src="item.imgSrc" alt="" />
|
|
</div>
|
|
<div class="num">{{ item.num }}</div>
|
|
<div
|
|
class="agency"
|
|
style="color: #fbe9c5 !important; margin-top: 8px"
|
|
>
|
|
{{ item.type }}
|
|
</div>
|
|
<div class="bubbles">
|
|
<span
|
|
class="bubble"
|
|
v-for="(item, index) in bubbleList"
|
|
:key="index"
|
|
:style="{
|
|
'--w': item.w,
|
|
'--c': item.c,
|
|
'--x': item.x,
|
|
'--d':
|
|
parseInt(bubbleList.length / 2) +
|
|
1 -
|
|
Math.abs(index - parseInt(bubbleList.length / 2)),
|
|
}"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bot">
|
|
<div class="bot-item">
|
|
<div>
|
|
<img :src="require('@/assets/images/icon/dyzxhRed.png')" />
|
|
</div>
|
|
<div class="bot-item-val">
|
|
<div class="bot-item-val-num">{{ 692 }}</div>
|
|
<div class="bot-item-val-title">党员中心户</div>
|
|
</div>
|
|
</div>
|
|
<div class="bot-item">
|
|
<div>
|
|
<img :src="require('@/assets/images/icon/dysRed.png')" />
|
|
</div>
|
|
<div class="bot-item-val">
|
|
<div class="bot-item-val-num">{{ 4127 }}</div>
|
|
<div class="bot-item-val-title">党员数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h292" style="margin-top: 8px">
|
|
<screen-title-red>
|
|
<div slot="left" class="screen-title-left">微网格</div>
|
|
</screen-title-red>
|
|
<div class="card-item-tag">
|
|
<!-- <p class="tag" v-for="(item, index) in tagList" :key="index">
|
|
<span class="tag-name">{{ item.name }}</span>
|
|
<span class="tag-value">{{ item.value }}</span>
|
|
</p> -->
|
|
<div class="wwgCenter">
|
|
<div class="wwgCenterZhuan"></div>
|
|
<div class="wwgCenterWjx"></div>
|
|
<div class="wwgCenterTitle">移风店镇</div>
|
|
</div>
|
|
<div class="wwgBot">
|
|
<div class="cundian" v-for="(item, index) in tagList" :key="index">
|
|
<div class="wwgdd">
|
|
<img :src="require('@/assets/images/common/wwgdd.png')" />
|
|
</div>
|
|
<div class="cunTitle">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card h292 m-top12">
|
|
<screen-title-red>
|
|
<div slot="left" class="screen-title-left">党员分析</div>
|
|
</screen-title-red>
|
|
<div class="card-item-dyfx">
|
|
<div class="card-item-dyfx-left">
|
|
<div class="top-title">
|
|
<div>
|
|
<img :src="require('@/assets/images/icon/dyfxDian.png')" />
|
|
</div>
|
|
<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 class="card-item-dyfx-right">
|
|
<div class="top-title">
|
|
<div>
|
|
<img :src="require('@/assets/images/icon/dyfxDian.png')" />
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from "vuex";
|
|
import { partyOrgCategoryAndQuantity } 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;
|
|
}
|
|
|
|
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度
|
|
}
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
agencyList: [
|
|
{ num: 11, agency: "党委" },
|
|
{ num: 97, agency: "党支部" },
|
|
{ num: 235, agency: "党小组" },
|
|
{ num: 3496, agency: "党员" },
|
|
],
|
|
typeList: [
|
|
{
|
|
imgSrc: require("@/assets/images/icon/zdwRed.png"),
|
|
type: "镇党委",
|
|
num: 12,
|
|
},
|
|
{
|
|
imgSrc: require("@/assets/images/icon/xcdwRed.png"),
|
|
type: "新村党委",
|
|
num: 36,
|
|
},
|
|
{
|
|
imgSrc: require("@/assets/images/icon/zrcdzbRed.png"),
|
|
type: "自然村党支部",
|
|
num: 14,
|
|
},
|
|
{
|
|
imgSrc: require("@/assets/images/icon/wgdxzRed.png"),
|
|
type: "网格党小组",
|
|
num: 14,
|
|
},
|
|
],
|
|
|
|
peiOption: null,
|
|
optionData: [
|
|
{
|
|
name: "20-40岁", // 名称
|
|
value: 19, // 值
|
|
itemStyle: {
|
|
// 颜色 紫色
|
|
color: "rgba(227,235,45,1)",
|
|
},
|
|
},
|
|
{
|
|
name: "40-60岁", // 蓝色
|
|
value: 13,
|
|
itemStyle: {
|
|
color: "rgba(19,141,255,1)",
|
|
},
|
|
},
|
|
{
|
|
name: "60-80岁", // 绿色
|
|
value: 15,
|
|
itemStyle: {
|
|
color: "rgba(253, 112, 0, 1)",
|
|
},
|
|
},
|
|
{
|
|
name: "80岁以上", // 橙色
|
|
value: 16,
|
|
itemStyle: {
|
|
color: "rgba(21, 214, 131, 1)",
|
|
},
|
|
},
|
|
],
|
|
barOption: null,
|
|
optionDataB: [
|
|
{
|
|
name: "移风村",
|
|
value: 1242,
|
|
},
|
|
{
|
|
name: "上泊新村",
|
|
value: 986,
|
|
},
|
|
{
|
|
name: "河流新村",
|
|
value: 744,
|
|
},
|
|
{
|
|
name: "滨河村",
|
|
value: 653,
|
|
},
|
|
{
|
|
name: "大坝新村",
|
|
value: 498,
|
|
},
|
|
],
|
|
tagworpList: [
|
|
{
|
|
label: "上泊新村",
|
|
id: "1697533359860244481",
|
|
},
|
|
{
|
|
label: "滨河村",
|
|
id: "1704030137514287105",
|
|
},
|
|
{
|
|
label: "湍湾新村",
|
|
id: "1704036500462198786",
|
|
},
|
|
{
|
|
label: "七级村",
|
|
id: "1704313950756757506",
|
|
},
|
|
{
|
|
label: "沽河村",
|
|
id: "1704324481563582466",
|
|
},
|
|
{
|
|
label: "太祉庄村",
|
|
id: "1704327114084933633",
|
|
},
|
|
{
|
|
label: "河流新村",
|
|
id: "1704331366425518081",
|
|
},
|
|
{
|
|
label: "大坝新村",
|
|
id: "1704396342955696130",
|
|
},
|
|
{
|
|
label: "双塔村",
|
|
id: "1704331366425518081",
|
|
},
|
|
{
|
|
label: "移风村",
|
|
id: "1704331366425518081",
|
|
},
|
|
],
|
|
tagList: [
|
|
{
|
|
name: "上泊新村委员会",
|
|
id: "1697533359860244481",
|
|
},
|
|
{
|
|
name: "滨河村委员会",
|
|
id: "1704030137514287105",
|
|
},
|
|
{
|
|
name: "湍湾新村委员会",
|
|
id: "1704036500462198786",
|
|
},
|
|
{
|
|
name: "七级村委员会",
|
|
id: "1704313950756757506",
|
|
},
|
|
{
|
|
name: "沽河村委员会",
|
|
id: "1704324481563582466",
|
|
},
|
|
{
|
|
name: "太祉庄村委员会",
|
|
id: "1704327114084933633",
|
|
},
|
|
{
|
|
name: "河流新村委员会",
|
|
id: "1704331366425518081",
|
|
},
|
|
{
|
|
name: "大坝新村委员会",
|
|
id: "1704396342955696130",
|
|
},
|
|
{
|
|
name: "双塔村委员会",
|
|
id: "1704331366425518081",
|
|
},
|
|
{
|
|
name: "移风村委员会",
|
|
id: "1704331366425518081",
|
|
},
|
|
],
|
|
tempList: [],
|
|
bubbleList: [
|
|
{
|
|
w: 8,
|
|
x: 10,
|
|
},
|
|
{
|
|
w: 9,
|
|
x: 50,
|
|
},
|
|
{
|
|
w: 4,
|
|
x: 30,
|
|
},
|
|
{
|
|
w: 5,
|
|
x: 80,
|
|
},
|
|
{
|
|
w: 4,
|
|
x: 30,
|
|
},
|
|
{
|
|
w: 4,
|
|
x: 70,
|
|
},
|
|
{
|
|
w: 6,
|
|
x: 20,
|
|
},
|
|
{
|
|
w: 8,
|
|
x: 50,
|
|
},
|
|
{
|
|
w: 4,
|
|
x: 60,
|
|
},
|
|
{
|
|
w: 6,
|
|
x: 65,
|
|
},
|
|
],
|
|
yfgfList: [
|
|
{ companyName: "青岛益成河农业科技有限公司" },
|
|
{ companyName: "青岛滨源农产品有限公司" },
|
|
{ companyName: "青岛上泊建晟建设发展有限公司" },
|
|
{ companyName: "青岛圆可方诚工贸有限公司" },
|
|
],
|
|
yfzdList: [
|
|
{ jdName: "大欧鸟笼乡村记忆馆" },
|
|
{ jdName: "七彩田园" },
|
|
{ jdName: "中共即墨县委纪念馆" },
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.bubbleList.forEach((i, index) => {
|
|
this.$set(
|
|
i,
|
|
"c",
|
|
this.forArrayValue(["#00BABC", "#009FA4", "#00FFC0"], index)
|
|
);
|
|
});
|
|
this.getData();
|
|
},
|
|
mounted() {
|
|
this.$nextTick(function () {
|
|
this.initTag();
|
|
this.animate();
|
|
this.initBarAge();
|
|
this.initBar();
|
|
});
|
|
},
|
|
beforeDestroy() {},
|
|
methods: {
|
|
...mapActions({
|
|
// set_garden: 'SET_GARDEN',
|
|
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) {
|
|
return array[sort % array.length];
|
|
},
|
|
handelClickOrg() {
|
|
this.set_organization(true);
|
|
},
|
|
|
|
initTag() {
|
|
const tags = document.querySelectorAll(".tag");
|
|
const wrap = document.querySelector(".card-item-tag");
|
|
const len = tags.length;
|
|
// let valueList = Array.from(new Set(this.tagList.map(i => i.value)));
|
|
// let min = Math.min(...valueList);
|
|
CX = wrap.offsetWidth / 2;
|
|
CY = wrap.offsetHeight / 2;
|
|
tags.forEach((i, index) => {
|
|
// let fontScale = this.tagList[index].value / min * 16;
|
|
// i.style.fontSize = fontScale > 30 ? '30px' : fontScale + 'px';
|
|
// i.style.color = colors[parseInt(Math.random() * 10)];
|
|
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);
|
|
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;
|
|
});
|
|
},
|
|
rotateY() {
|
|
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;
|
|
});
|
|
},
|
|
animate() {
|
|
this.rotateX();
|
|
this.rotateY();
|
|
this.tempList.forEach((i) => {
|
|
i.move();
|
|
});
|
|
requestAnimationFrame(this.animate);
|
|
},
|
|
initBarAge() {
|
|
// eslint-disable-next-line no-undef
|
|
const myChart = echarts.init(document.getElementById("charts"));
|
|
const option = {
|
|
grid: {
|
|
left: "2%",
|
|
right: "2%",
|
|
top: "15%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: function (params, ticket, callback) {
|
|
var res = params.name + " : " + params.value;
|
|
return res;
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#174489",
|
|
width: "3",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: "#BDCEEA",
|
|
fontSize: "10",
|
|
rotate: 45, // 旋转角度，单位为度
|
|
},
|
|
data: ["20-40岁", "40-60岁", "60-80岁", "80岁以上"],
|
|
},
|
|
|
|
yAxis: {
|
|
show: false,
|
|
},
|
|
series: [
|
|
{
|
|
name: "leftA",
|
|
type: "bar",
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 1, color: "rgb(83, 180, 255,0)" }, // 底部颜色
|
|
{ offset: 0, color: "#5098fb" }, // 顶部颜色
|
|
],
|
|
},
|
|
barBorderRadius: [0, 0, 0, 0],
|
|
},
|
|
},
|
|
data: [220, 182, 191, 234],
|
|
},
|
|
{
|
|
name: "rightA",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
type: "bar",
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 1, color: "rgb(83, 180, 255,0)" }, // 底部颜色
|
|
{ offset: 0, color: "#207dfb" }, // 顶部颜色
|
|
],
|
|
},
|
|
barBorderRadius: [0, 0, 0, 0],
|
|
},
|
|
},
|
|
data: [220, 182, 191, 234],
|
|
barGap: 0,
|
|
},
|
|
{
|
|
name: "topA",
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
type: "pictorialBar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#53b4ff",
|
|
// borderWidth: 1,
|
|
// borderColor: '#00183F',
|
|
opacity: "1",
|
|
shadowColor: "rgb(0,0,0,0.1)",
|
|
shadowOffsetX: "0.5",
|
|
shadowOffsetY: "0.5",
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
color: "#04F9FD",
|
|
offset: [0, 0],
|
|
position: "top",
|
|
fontSize: "16",
|
|
fontWeight: "normal",
|
|
},
|
|
symbol: "diamond",
|
|
symbolRotate: 0,
|
|
symbolSize: ["25", "12"],
|
|
symbolOffset: ["0", "-8"],
|
|
symbolPosition: "end",
|
|
data: [220, 182, 191, 234],
|
|
z: 3,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
},
|
|
initBar() {
|
|
// eslint-disable-next-line no-undef
|
|
const myChart = echarts.init(document.getElementById("chartsBar"));
|
|
this.barOption = this.getBar(this.optionDataB);
|
|
myChart.setOption(this.barOption);
|
|
},
|
|
getBar(data) {
|
|
const symbolData = data.map((item) => ({
|
|
symbolPosition: "end",
|
|
value: item.value,
|
|
}));
|
|
const arrByKey = data.map((item) => item.value);
|
|
const option = {
|
|
// backgroundColor: '#000000',
|
|
grid: {
|
|
top: 10,
|
|
bottom: -0.5,
|
|
// right: 0,
|
|
left: 0,
|
|
},
|
|
xAxis: {
|
|
show: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
triggerEvent: true,
|
|
show: true,
|
|
inverse: true,
|
|
data: symbolData,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
triggerEvent: true,
|
|
show: true,
|
|
inverse: true,
|
|
data: arrByKey,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
shadowOffsetX: "-50px",
|
|
color: ["#DBE9FF"],
|
|
align: "right",
|
|
verticalAlign: "bottom",
|
|
// lineHeight: 40,
|
|
fontSize: 14,
|
|
formatter: function (value, index) {
|
|
// return (data[index].value / data[index].sum) * 100
|
|
return value;
|
|
},
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "XXX",
|
|
type: "pictorialBar",
|
|
symbol:
|
|
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==",
|
|
symbolSize: [10, 2, 10, 2],
|
|
symbolRotate: 45,
|
|
symbolOffset: [5, 0],
|
|
z: 12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#cde0ef",
|
|
// image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==',
|
|
},
|
|
},
|
|
data: symbolData,
|
|
},
|
|
{
|
|
name: "条",
|
|
type: "bar",
|
|
showBackground: true,
|
|
barBorderRadius: 30,
|
|
yAxisIndex: 0,
|
|
data: data,
|
|
barWidth: 5,
|
|
// align: left,
|
|
itemStyle: {
|
|
normal: {
|
|
// eslint-disable-next-line no-undef
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#1f4889",
|
|
},
|
|
|
|
{
|
|
offset: 1,
|
|
color: "#2caffd",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
// barBorderRadius: 10
|
|
},
|
|
// color: '#A71A2B',
|
|
// barBorderRadius: 4,
|
|
},
|
|
label: {
|
|
normal: {
|
|
color: "#DBE9FF",
|
|
show: true,
|
|
position: [0, "-15px"],
|
|
textStyle: {
|
|
fontSize: 14,
|
|
},
|
|
formatter: function (a, b) {
|
|
return a.name;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
return option;
|
|
},
|
|
},
|
|
components: {},
|
|
computed: {},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "~@/views/next/screen-content-left/hsyf-left/index.scss";
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
} /* 初始状态，角度为0度 */
|
|
100% {
|
|
transform: rotate(360deg);
|
|
} /* 结束状态，角度为360度 */
|
|
}
|
|
|
|
.card {
|
|
width: 100%;
|
|
background: url("~@/assets/images/common/cardBgRed.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #fff;
|
|
@include flex(column);
|
|
|
|
&-item-zzjs {
|
|
@include flex(column);
|
|
padding: 32px 25px 30px 20px;
|
|
box-sizing: border-box;
|
|
// height: 100%;
|
|
|
|
// .top {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// padding: 0 10px;
|
|
|
|
// :nth-child(1) > .agency::after {
|
|
// background: #e60000;
|
|
// }
|
|
|
|
// :nth-child(2) > .agency::after {
|
|
// background: #ff6305;
|
|
// }
|
|
|
|
// :nth-child(3) > .agency::after {
|
|
// background: #ffb505;
|
|
// }
|
|
|
|
// :nth-child(4) > .agency::after {
|
|
// background: #fff605;
|
|
// }
|
|
|
|
// > .item {
|
|
// @include flex(column);
|
|
// position: relative;
|
|
|
|
// .num {
|
|
// font-family: pangmenzhengdao;
|
|
// font-size: 20px;
|
|
// position: relative;
|
|
// top: -14px;
|
|
// }
|
|
|
|
// .agency {
|
|
// font-size: 14px;
|
|
// color: #FBE9C5 !important;
|
|
// position: relative;
|
|
|
|
// &::after {
|
|
// content: "";
|
|
// width: 6px;
|
|
// height: 6px;
|
|
// border-radius: 50%;
|
|
// position: absolute;
|
|
// left: -10px;
|
|
// top: 7px;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.top {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.item {
|
|
@include flex(column);
|
|
align-items: center;
|
|
// justify-content: space-around;
|
|
position: relative;
|
|
|
|
.imgBox {
|
|
width: 90px;
|
|
height: 66px;
|
|
background: url("~@/assets/images/common/iconBgRed.png") no-repeat !important;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
img {
|
|
width: 36px;
|
|
height: 36px;
|
|
animation: moveUpDown 3s infinite linear;
|
|
}
|
|
}
|
|
|
|
.num {
|
|
font-family: pangmenzhengdao;
|
|
color: #ebf2fa;
|
|
text-shadow: 0 0 10px #ffc435;
|
|
font-size: 22px;
|
|
margin-top: -3px;
|
|
}
|
|
|
|
.bubbles {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 45%;
|
|
top: -15px;
|
|
left: 0;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bubble {
|
|
position: absolute;
|
|
width: calc(1px * var(--w));
|
|
height: calc(1px * var(--w));
|
|
background: var(--c);
|
|
border-radius: 50%;
|
|
left: calc(50% - calc(1px * calc(var(--w) / 2)));
|
|
opacity: 0;
|
|
bottom: 10%;
|
|
animation: rise 3s infinite linear;
|
|
animation-delay: calc(600ms * var(--d));
|
|
}
|
|
|
|
@keyframes rise {
|
|
0% {
|
|
left: calc(50% - calc(1px * calc(var(--w) / 2)));
|
|
opacity: 0;
|
|
bottom: 10%;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
100% {
|
|
left: calc(1% * var(--x));
|
|
bottom: 90%;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes moveUpDown {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-15px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bot {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding-top: 18px;
|
|
&-item {
|
|
width: 183px;
|
|
height: 60px;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgba(255, 187, 123, 0.1),
|
|
rgba(255, 187, 123, 0)
|
|
);
|
|
display: flex;
|
|
&-val {
|
|
border-left: 1px solid #fef2d5;
|
|
margin-left: 4px;
|
|
margin-top: 12px;
|
|
padding-left: 16px;
|
|
height: 36px;
|
|
&-num {
|
|
font-family: PangMenZhengDao;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
line-height: 13px;
|
|
}
|
|
&-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #fbe9c5;
|
|
line-height: 14px;
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item-tag {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 395px;
|
|
padding-top: 8px;
|
|
|
|
.wwgCenter {
|
|
width: 142px;
|
|
height: 142px;
|
|
background: url("~@/assets/images/common/wwgBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 17px;
|
|
position: relative;
|
|
left: calc(50% - 86px);
|
|
.wwgCenterZhuan {
|
|
width: 142px;
|
|
height: 142px;
|
|
background: url("~@/assets/images/common/wwgzq.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
.wwgCenterWjx {
|
|
width: 44px;
|
|
height: 42px;
|
|
background: url("~@/assets/images/common/wwgxx.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
top: -114px;
|
|
left: calc(50% - 22px);
|
|
}
|
|
.wwgCenterTitle {
|
|
// width: 75px;
|
|
height: 18px;
|
|
font-family: MF LangQian (Noncommercial);
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
position: relative;
|
|
top: -106px;
|
|
left: calc(50% - 36px);
|
|
}
|
|
}
|
|
.wwgBot {
|
|
width: 282px;
|
|
height: 72px;
|
|
background: url("~@/assets/images/common/wwgboty.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
top: -28px;
|
|
left: calc(50% - 141px);
|
|
.cundian {
|
|
position: absolute;
|
|
width: 280px;
|
|
display: flex;
|
|
.cunTitle {
|
|
font-size: 18px;
|
|
color: #fff2d9;
|
|
}
|
|
.wwgdd {
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.cundian:nth-child(1) {
|
|
animation: dian1 8s linear infinite;
|
|
}
|
|
.cundian:nth-child(2) {
|
|
animation: dian2 8s linear infinite;
|
|
}
|
|
.cundian:nth-child(3) {
|
|
animation: dian3 8s linear infinite;
|
|
}
|
|
.cundian:nth-child(4) {
|
|
animation: dian4 8s linear infinite;
|
|
}
|
|
.cundian:nth-child(5) {
|
|
animation: dian5 12s linear infinite;
|
|
}
|
|
.cundian:nth-child(6) {
|
|
animation: dian6 12s linear infinite;
|
|
}
|
|
.cundian:nth-child(7) {
|
|
animation: dian7 12s linear infinite;
|
|
}
|
|
.cundian:nth-child(8) {
|
|
animation: dian8 12s linear infinite;
|
|
}
|
|
.cundian:nth-child(9) {
|
|
animation: dian9 12s linear infinite;
|
|
}
|
|
.cundian:nth-child(10) {
|
|
animation: dian10 12s linear infinite;
|
|
}
|
|
}
|
|
.tag {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
text-decoration: none;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
will-change: transform;
|
|
color: #1dfbf6;
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tag-value {
|
|
// opacity: 0;
|
|
// height: 35px;
|
|
// padding: 0 30px 0 20px;
|
|
// color: #f6f600;
|
|
// line-height: 35px;
|
|
// margin-left: 5px;
|
|
// visibility: middle;
|
|
// font-size: 14px;
|
|
// transition: all 0.2s;
|
|
// background: linear-gradient(90deg,
|
|
// rgba(216, 255, 0, 0.7) 0%,
|
|
// rgba(58, 51, 255, 0) 100%);
|
|
}
|
|
|
|
// &:hover {
|
|
// .tag-value {
|
|
// opacity: 1;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
|
|
// &-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 {
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-left,
|
|
&-right {
|
|
width: 214px;
|
|
background: url("~@/assets/images/home/yfgfLeftBg.png") no-repeat;
|
|
background-size: 100% 14px;
|
|
background-position: center 58px;
|
|
.top-title {
|
|
width: 214px;
|
|
display: flex;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: 2px;
|
|
}
|
|
.title-txt {
|
|
padding-left: 8px;
|
|
height: 16px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 15px 20px;
|
|
&-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 {
|
|
font-weight: 500;
|
|
&-num {
|
|
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 {
|
|
width: 190px;
|
|
background: url("~@/assets/images/home/yfgfRightBg.png") no-repeat;
|
|
background-size: 100% 14px;
|
|
background-position: center 58px;
|
|
.top-title {
|
|
width: 190px;
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|