diff --git a/src/assets/images/common/iconBg.png b/src/assets/images/common/iconBg.png
new file mode 100644
index 0000000..2c0e48a
Binary files /dev/null and b/src/assets/images/common/iconBg.png differ
diff --git a/src/assets/images/icon/ljgj.png b/src/assets/images/icon/ljgj.png
index 5d00c16..a32813c 100644
Binary files a/src/assets/images/icon/ljgj.png and b/src/assets/images/icon/ljgj.png differ
diff --git a/src/assets/images/icon/wmfw.png b/src/assets/images/icon/wmfw.png
index b085835..344eca8 100644
Binary files a/src/assets/images/icon/wmfw.png and b/src/assets/images/icon/wmfw.png differ
diff --git a/src/assets/images/icon/ztdr.png b/src/assets/images/icon/ztdr.png
index 8be1376..9740c6d 100644
Binary files a/src/assets/images/icon/ztdr.png and b/src/assets/images/icon/ztdr.png differ
diff --git a/src/assets/images/resource/yfxy/1.png b/src/assets/images/resource/yfxy/1.png
new file mode 100644
index 0000000..96d7752
Binary files /dev/null and b/src/assets/images/resource/yfxy/1.png differ
diff --git a/src/assets/images/resource/yfxy/2.png b/src/assets/images/resource/yfxy/2.png
new file mode 100644
index 0000000..a626546
Binary files /dev/null and b/src/assets/images/resource/yfxy/2.png differ
diff --git a/src/assets/images/resource/yfxy/3.png b/src/assets/images/resource/yfxy/3.png
new file mode 100644
index 0000000..6f2304e
Binary files /dev/null and b/src/assets/images/resource/yfxy/3.png differ
diff --git a/src/assets/images/resource/yfxy/4.png b/src/assets/images/resource/yfxy/4.png
new file mode 100644
index 0000000..1ee07ef
Binary files /dev/null and b/src/assets/images/resource/yfxy/4.png differ
diff --git a/src/views/next/screen-content-left/hsyf-left/index.vue b/src/views/next/screen-content-left/hsyf-left/index.vue
index ee0ebc7..8d2788e 100644
--- a/src/views/next/screen-content-left/hsyf-left/index.vue
+++ b/src/views/next/screen-content-left/hsyf-left/index.vue
@@ -4,25 +4,52 @@
                 <div class='card h292'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">组织建设</div>
-                                <div slot="right" class="screen-title-right"  @click="handelClickOrg"><span>组织架构</span></div>
+                                <div slot="right" class="screen-title-right" @click="handelClickOrg"><span>组织架构</span></div>
                         </screen-title>
                         <div class="card-item-zzjs">
                                 <div class="top">
                                         <div class="item" v-for="(item, index) in agencyList" :key="index">
                                                 <div class="num">{{ item.num }}</div>
                                                 <div class="agency">{{ item.agency }}</div>
+
                                         </div>
                                 </div>
                                 <div class="bot">
                                         <div class="item" v-for="(item, index) in typeList" :key="index">
-                                                <img :src="item.imgSrc" alt="">
+                                                <div class="imgBox">
+                                                        <img :src="item.imgSrc" alt="">
+                                                </div>
                                                 <div class="num">{{ item.num }}</div>
                                                 <div class="agency">{{ 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>
                 </div>
                 <div class='card  h292' style="margin-top: 8px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">微网格</div>
+                        </screen-title>
+                        <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>
+                </div>
+                <div class='card  h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">党员分析</div>
                         </screen-title>
@@ -49,23 +76,33 @@
                                 </div>
                         </div>
                 </div>
-                <div class='card  h292 m-top12'>
-                        <screen-title>
-                                <div slot="left" class="screen-title-left">党员风采</div>
-                        </screen-title>
-                        <div class="card-item-dyfc">
-                                <div class="item" v-for="(item, index) in partList" :key="index">
-                                        <img :src="item.imgSrc" alt="">
-                                        <div class="name">{{ item.name }}</div>
-                                        <div class="unit">{{ item.unit }}</div>
-                                        <div class="title">{{ item.title }}</div>
-                                </div>
-                        </div>
-                </div>
         </div>
 </template>
 
 <script>
+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() {
+                let scale = FALLLENGTH / (FALLLENGTH - this.z);
+                let alpha = (this.z + RADIUS) / (3 * RADIUS);
+                let left = this.x + CX - this.el.offsetWidth / 2 + "px"; // 水平偏移
+                let 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度
+        }
+
+}
 import { mapActions } from 'vuex'
 export default {
         data() {
@@ -92,26 +129,7 @@ export default {
                                         num: 14,
                                 }
                         ],
-                        partList: [
-                                {
-                                        name: '徐法佑',
-                                        unit: '徐家沟村人',
-                                        title: '丹心一片风华百年带着两个兵，敢挡一个团',
-                                        imgSrc: require('@/assets/images/resource/dyfc/1.jpg')
-                                },
-                                {
-                                        name: '傅祖聪',
-                                        unit: '移风中学',
-                                        title: '培桃育李四十三载乐善好施奉献一生',
-                                        imgSrc: require('@/assets/images/resource/dyfc/2.jpg')
-                                },
-                                {
-                                        name: '朱爱香',
-                                        unit: '太平庄村人',
-                                        title: '一座大棚撑起新型农民致富梦',
-                                        imgSrc: require('@/assets/images/resource/dyfc/3.jpg')
-                                }
-                        ],
+
                         peiOption: null,
                         optionData: [
                                 {
@@ -162,14 +180,149 @@ export default {
                                         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,
+                                },
+                        ],
                 };
         },
         created() {
+                this.bubbleList.forEach((i, index) => {
+                        this.$set(i, 'c', this.forArrayValue([
+                                "#00BABC", "#009FA4", "#00FFC0"
+                        ], index));
+                });
         },
         mounted() {
                 this.$nextTick(function () {
-                        this.initChart();
+                        this.initTag()
+                        this.animate();
+                        this.initBarAge();
                         this.initBar()
                 });
         },
@@ -180,18 +333,191 @@ export default {
                         // set_garden: 'SET_GARDEN',
                         set_organization: 'SET_ORGANIZATION'
                 }),
+                forArrayValue(array, sort) {
+                        return array[sort % array.length];
+                },
                 handelClickOrg() {
                         this.set_organization(true)
                 },
-                initChart() {
-                        //构建3d饼状图
+
+                initTag() {
+                        const tags = document.querySelectorAll(".tag");
+                        const wrap = document.querySelector(".card-item-tag");
+                        let 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)];
+                                let k = -1 + (2 * (index + 1) - 1) / len;
+                                let a = Math.acos(k);
+                                let b = a * Math.sqrt(len * Math.PI);
+                                let x = RADIUS * 1.15 * Math.sin(a) * Math.cos(b);
+                                let y = RADIUS * Math.sin(a) * Math.sin(b);
+                                let z = RADIUS * Math.cos(a);
+                                let tag = new Tag(i, x, y, z);
+                                this.tempList.push(tag);
+                        });
+                },
+                rotateX() {
+                        let angleX = Math.PI / 8000;
+                        let cos = Math.cos(angleX);
+                        let sin = Math.sin(angleX);
+                        this.tempList.forEach(i => {
+                                let y1 = i.y * cos - i.z * sin;
+                                let z1 = i.z * cos + i.y * sin;
+                                i.y = y1;
+                                i.z = z1;
+                        });
+                },
+                rotateY() {
+                        let angleY = Math.PI / 200;
+                        let cos = Math.cos(angleY);
+                        let sin = Math.sin(angleY);
+                        this.tempList.forEach(i => {
+                                let x1 = i.x * cos - i.z * sin;
+                                let 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() {
                         let myChart = echarts.init(document.getElementById('charts'));
-                        // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
-                        this.peiOption = this.getPie3D(this.optionData, 0.75);
-                        //将配置项设置进去
-                        myChart.setOption(this.peiOption);
-                        //鼠标移动上去特效效果
-                        this.bindListen(myChart);
+                        let 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() {
@@ -230,7 +556,7 @@ export default {
                                         axisTick: {
                                                 show: false
                                         },
-                                       
+
                                 }, {
                                         triggerEvent: true,
                                         show: true,
@@ -261,474 +587,72 @@ export default {
                                 }],
                                 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: {
-                                                        color: new echarts.graphic.LinearGradient(
-                                                                0,
-                                                                0,
-                                                                1,
-                                                                0,
-                                                                [{
-                                                                        offset: 0,
-                                                                        color: '#1f4889'
-                                                                },
-
-                                                                {
-                                                                        offset: 1,
-                                                                        color: '#2caffd'
-                                                                }
-                                                                ],
-                                                                false
-                                                        ),
-                                                        // barBorderRadius: 10
+                                                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==',
+                                                        }
                                                 },
-                                                // color: '#A71A2B',
-                                                // barBorderRadius: 4,
+                                                data: symbolData
                                         },
-                                        label: {
-                                                normal: {
-                                                        color: '#DBE9FF',
-                                                        show: true,
-                                                        position: [0, '-15px'],
-                                                        textStyle: {
-                                                                fontSize: 14
+                                        {
+                                                name: '条',
+                                                type: 'bar',
+                                                showBackground: true,
+                                                barBorderRadius: 30,
+                                                yAxisIndex: 0,
+                                                data: data,
+                                                barWidth: 5,
+                                                // align: left,
+                                                itemStyle: {
+                                                        normal: {
+                                                                color: new echarts.graphic.LinearGradient(
+                                                                        0,
+                                                                        0,
+                                                                        1,
+                                                                        0,
+                                                                        [{
+                                                                                offset: 0,
+                                                                                color: '#1f4889'
+                                                                        },
+
+                                                                        {
+                                                                                offset: 1,
+                                                                                color: '#2caffd'
+                                                                        }
+                                                                        ],
+                                                                        false
+                                                                ),
+                                                                // barBorderRadius: 10
                                                         },
-                                                        formatter: function (a, b) {
-                                                                return a.name
+                                                        // 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
                 },
-                // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-                getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-                        // 计算
-                        let midRatio = (startRatio + endRatio) / 2;
-                        let startRadian = startRatio * Math.PI * 2;
-                        let endRadian = endRatio * Math.PI * 2;
-                        let midRadian = midRatio * Math.PI * 2;
-                        // 如果只有一个扇形，则不实现选中效果。
-                        if (startRatio === 0 && endRatio === 1) {
-                                isSelected = false;
-                        }
-                        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-                        k = typeof k !== 'undefined' ? k : 1 / 3;
-                        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-                        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-                        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-                        // 计算高亮效果的放大比例（未高亮，则比例为 1）
-                        let hoverRate = isHovered ? 1.05 : 1;
-                        // 返回曲面参数方程
-                        return {
-                                u: {
-                                        min: -Math.PI,
-                                        max: Math.PI * 3,
-                                        step: Math.PI / 32
-                                },
-                                v: {
-                                        min: 0,
-                                        max: Math.PI * 2,
-                                        step: Math.PI / 20
-                                },
-                                x: function (u, v) {
-                                        if (u < startRadian) {
-                                                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        if (u > endRadian) {
-                                                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-                                },
-                                y: function (u, v) {
-                                        if (u < startRadian) {
-                                                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        if (u > endRadian) {
-                                                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-                                },
-                                z: function (u, v) {
-                                        if (u < -Math.PI * 0.5) {
-                                                return Math.sin(u);
-                                        }
-                                        if (u > Math.PI * 2.5) {
-                                                return Math.sin(u) * h * .1;
-                                        }
-                                        return Math.sin(v) > 0 ? 1 * h * .1 : -1;
-                                }
-                        };
-                },
-
-                getPie3D(pieData, internalDiameterRatio) {
-                        let that = this;
-                        let series = [];
-                        let sumValue = 0;
-                        let startValue = 0;
-                        let endValue = 0;
-                        let legendData = [];
-                        let legendBfb = [];
-                        let k = 1 - internalDiameterRatio;
-                        pieData.sort((a, b) => {
-                                return (b.value - a.value);
-                        });
-                        // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
-                        for (let i = 0; i < pieData.length; i++) {
-                                sumValue += pieData[i].value;
-                                let seriesItem = {
-                                        //系统名称
-                                        name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
-                                        type: 'surface',
-                                        //是否为参数曲面（是）
-                                        parametric: true,
-                                        //曲面图网格线（否）上面一根一根的
-                                        wireframe: {
-                                                show: false
-                                        },
-                                        pieData: pieData[i],
-                                        pieStatus: {
-                                                selected: false,
-                                                hovered: false,
-                                                k: k
-                                        },
-                                        //设置饼图在容器中的位置(目前没发现啥用)
-                                        //   center: ['50%', '100%']
-                                };
-
-                                //曲面的颜色、不透明度等样式。
-                                if (typeof pieData[i].itemStyle != 'undefined') {
-                                        let itemStyle = {};
-                                        typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
-                                        typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
-                                        seriesItem.itemStyle = itemStyle;
-                                }
-                                series.push(seriesItem);
-                        }
 
-                        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-                        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-                        legendData = [];
-                        legendBfb = [];
-                        for (let i = 0; i < series.length; i++) {
-                                endValue = startValue + series[i].pieData.value;
-                                series[i].pieData.startRatio = startValue / sumValue;
-                                series[i].pieData.endRatio = endValue / sumValue;
-                                series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
-                                        false, false, k, series[i].pieData.value);
-                                startValue = endValue;
-                                let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
-                                legendData.push({
-                                        name: series[i].name,
-                                        value: bfb
-                                });
-                                legendBfb.push({
-                                        name: series[i].name,
-                                        value: bfb
-                                });
-                        }
-                        //(第二个参数可以设置你这个环形的高低程度)
-                        let boxHeight = this.getHeight3D(series, 13);//通过传参设定3d饼/环的高度
-                        // 准备待返回的配置项，把准备好的 legendData、series 传入。
-                        let option = {
-                                //图例组件
-                                legend: {
-                                        data: legendData,
-                                        //图例列表的布局朝向。
-                                        orient: 'horizontal',
-                                        left: 10,
-                                        top: 140,
-                                        //图例文字每项之间的间隔
-                                        itemGap: 15,
-                                        textStyle: {
-                                                color: '#A1E2FF',
-                                        },
-                                        show: true,
-                                        icon: "vertical",
-                                        //格式化图例文本（我是数值什么显示什么）
-                                        // formatter: function (name) {
-                                        //         var target;
-                                        //         for (var i = 0, l = pieData.length; i < l; i++) {
-                                        //                 if (pieData[i].name == name) {
-                                        //                         target = pieData[i].value;
-                                        //                 }
-                                        //         }
-                                        //         return `${name}: ${target}`;
-                                        // }
-                                        // 这个可以显示百分比那种（可以根据你想要的来配置）
-                                        //   formatter: function(param) {
-                                        //       let item = legendBfb.filter(item => item.name == param)[0];
-                                        //       let bfs = that.fomatFloat(item.value * 100, 2) + "%";
-                                        //       console.log(item.name)
-                                        //       return `${item.name} :${bfs}`;
-                                        //   }
-                                },
-                                //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
-                                tooltip: {
-                                        formatter: params => {
-                                                if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                                                        let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
-                                                                100).toFixed(2);
-                                                        return `${params.seriesName}<br/>` +
-                                                                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                                                                `${bfb}`;
-                                                }
-                                        }
-                                },
-                                //这个可以变形
-                                xAxis3D: {
-                                        min: -1,
-                                        max: 1
-                                },
-                                yAxis3D: {
-                                        min: -1,
-                                        max: 1
-                                },
-                                zAxis3D: {
-                                        min: -1,
-                                        max: 1
-                                },
-                                // legend:{
-                                //   bottom:20,
-                                //   // left: '-15%',
-                                //   textStyle: {
-                                //     color: '#fff !important'
-                                //   }
-                                // },
-                                //此处是修改样式的重点
-                                grid3D: {
-                                        show: false,
-                                        boxHeight: boxHeight, //圆环的高度
-                                        //这是饼图的位置
-                                        top: '-20.5%',
-                                        left: '',
-                                        viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
-                                                alpha: 25, //角度(这个很重要 调节角度的)
-                                                distance: 190,//调整视角到主体的距离，类似调整zoom(这是整体大小)
-                                                rotateSensitivity: 0, //设置为0无法旋转
-                                                zoomSensitivity: 0, //设置为0无法缩放
-                                                panSensitivity: 0, //设置为0无法平移
-                                                autoRotate: false //自动旋转
-                                        }
-                                },
-                                series: series
-                        };
-                        return option;
-                },
-                getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-                        // 计算
-                        let midRatio = (startRatio + endRatio) / 2;
-                        let startRadian = startRatio * Math.PI * 2;
-                        let endRadian = endRatio * Math.PI * 2;
-                        let midRadian = midRatio * Math.PI * 2;
-                        // 如果只有一个扇形，则不实现选中效果。
-                        if (startRatio === 0 && endRatio === 1) {
-                                isSelected = false;
-                        }
-                        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-                        k = typeof k !== 'undefined' ? k : 1 / 3;
-                        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-                        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-                        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-                        // 计算高亮效果的放大比例（未高亮，则比例为 1）
-                        let hoverRate = isHovered ? 1.05 : 1;
-                        // 返回曲面参数方程
-                        return {
-                                u: {
-                                        min: -Math.PI,
-                                        max: Math.PI * 3,
-                                        step: Math.PI / 32
-                                },
-                                v: {
-                                        min: 0,
-                                        max: Math.PI * 2,
-                                        step: Math.PI / 20
-                                },
-                                x: function (u, v) {
-                                        if (u < startRadian) {
-                                                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        if (u > endRadian) {
-                                                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-                                },
-                                y: function (u, v) {
-                                        if (u < startRadian) {
-                                                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        if (u > endRadian) {
-                                                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
-                                        }
-                                        return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-                                },
-                                z: function (u, v) {
-                                        if (u < -Math.PI * 0.5) {
-                                                return Math.sin(u);
-                                        }
-                                        if (u > Math.PI * 2.5) {
-                                                return Math.sin(u) * h * .1;
-                                        }
-                                        return Math.sin(v) > 0 ? 1 * h * .1 : -1;
-                                }
-                        };
-                },
-                fomatFloat(num, n) {
-                        var f = parseFloat(num);
-                        if (isNaN(f)) {
-                                return false;
-                        }
-                        f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
-                        var s = f.toString();
-                        var rs = s.indexOf('.');
-                        //判定如果是整数，增加小数点再补0
-                        if (rs < 0) {
-                                rs = s.length;
-                                s += '.';
-                        }
-                        while (s.length <= rs + n) {
-                                s += '0';
-                        }
-                        return s;
-                },
-                bindListen(myChart) {
-                        let that = this;
-                        let selectedIndex = '';
-                        let hoveredIndex = '';
-                        // 监听点击事件，实现选中效果（单选）
-                        myChart.on('click', function (params) {
-                                // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-                                let isSelected = !that.peiOption.series[params.seriesIndex].pieStatus.selected;
-                                let isHovered = that.peiOption.series[params.seriesIndex].pieStatus.hovered;
-                                let k = that.peiOption.series[params.seriesIndex].pieStatus.k;
-                                let startRatio = that.peiOption.series[params.seriesIndex].pieData.startRatio;
-                                let endRatio = that.peiOption.series[params.seriesIndex].pieData.endRatio;
-                                // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-                                if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
-                                        that.peiOption.series[selectedIndex].parametricEquation = that.getParametricEquation(that.peiOption.series[
-                                                selectedIndex].pieData
-                                                .startRatio, that.peiOption.series[selectedIndex].pieData.endRatio, false, false, k, that.peiOption.series[
-                                                        selectedIndex].pieData
-                                                .value);
-                                        that.peiOption.series[selectedIndex].pieStatus.selected = false;
-                                }
-                                // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-                                that.peiOption.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                                        isSelected,
-                                        isHovered, k, that.peiOption.series[params.seriesIndex].pieData.value);
-                                that.peiOption.series[params.seriesIndex].pieStatus.selected = isSelected;
-                                // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-                                isSelected ? selectedIndex = params.seriesIndex : null;
-                                // 使用更新后的 option，渲染图表
-                                myChart.setOption(that.peiOption);
-                        });
-                        // 监听 mouseover，近似实现高亮（放大）效果
-                        myChart.on('mouseover', function (params) {
-                                // 准备重新渲染扇形所需的参数
-                                let isSelected;
-                                let isHovered;
-                                let startRatio;
-                                let endRatio;
-                                let k;
-                                // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-                                if (hoveredIndex === params.seriesIndex) {
-                                        return;
-                                        // 否则进行高亮及必要的取消高亮操作
-                                } else {
-                                        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-                                        if (hoveredIndex !== '') {
-                                                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-                                                isSelected = that.peiOption.series[hoveredIndex].pieStatus.selected;
-                                                isHovered = false;
-                                                startRatio = that.peiOption.series[hoveredIndex].pieData.startRatio;
-                                                endRatio = that.peiOption.series[hoveredIndex].pieData.endRatio;
-                                                k = that.peiOption.series[hoveredIndex].pieStatus.k;
-                                                // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                                                that.peiOption.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                                                        isSelected,
-                                                        isHovered, k, that.peiOption.series[hoveredIndex].pieData.value);
-                                                that.peiOption.series[hoveredIndex].pieStatus.hovered = isHovered;
-                                                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                                                hoveredIndex = '';
-                                        }
-                                        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-                                        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-                                                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                                                isSelected = that.peiOption.series[params.seriesIndex].pieStatus.selected;
-                                                isHovered = true;
-                                                startRatio = that.peiOption.series[params.seriesIndex].pieData.startRatio;
-                                                endRatio = that.peiOption.series[params.seriesIndex].pieData.endRatio;
-                                                k = that.peiOption.series[params.seriesIndex].pieStatus.k;
-                                                // 对当前点击的扇形，执行高亮操作（对 option 更新）
-                                                that.peiOption.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                                                        isSelected, isHovered, k, that.peiOption.series[params.seriesIndex].pieData.value + 5);
-                                                that.peiOption.series[params.seriesIndex].pieStatus.hovered = isHovered;
-                                                // 记录上次高亮的扇形对应的系列号 seriesIndex
-                                                hoveredIndex = params.seriesIndex;
-                                        }
-                                        // 使用更新后的 option，渲染图表
-                                        myChart.setOption(that.peiOption);
-                                }
-                        });
-                        // 修正取消高亮失败的 bug
-                        myChart.on('globalout', function () {
-                                // 准备重新渲染扇形所需的参数
-                                let isSelected;
-                                let isHovered;
-                                let startRatio;
-                                let endRatio;
-                                let k;
-                                if (hoveredIndex !== '') {
-                                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-                                        isSelected = that.peiOption.series[hoveredIndex].pieStatus.selected;
-                                        isHovered = false;
-                                        k = that.peiOption.series[hoveredIndex].pieStatus.k;
-                                        startRatio = that.peiOption.series[hoveredIndex].pieData.startRatio;
-                                        endRatio = that.peiOption.series[hoveredIndex].pieData.endRatio;
-                                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-                                        that.peiOption.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
-                                                isSelected,
-                                                isHovered, k, that.peiOption.series[hoveredIndex].pieData.value);
-                                        that.peiOption.series[hoveredIndex].pieStatus.hovered = isHovered;
-                                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-                                        hoveredIndex = '';
-                                }
-                                // 使用更新后的 option，渲染图表
-                                myChart.setOption(that.peiOption);
-                        });
-                },
-                //获取3d丙图的最高扇区的高度
-                getHeight3D(series, height) {
-                        series.sort((a, b) => {
-                                return (b.pieData.value - a.pieData.value);
-                        })
-                        return height * 15 / series[0].pieData.value;
-                },
         },
         components: {},
         computed: {},
@@ -746,6 +670,7 @@ export default {
                 padding: 25px 25px 30px 20px;
                 box-sizing: border-box;
                 height: 100%;
+
                 .top {
                         display: flex;
                         justify-content: space-between;
@@ -768,7 +693,7 @@ export default {
                         }
 
                         >.item {
-                               @include flex(column);
+                                @include flex(column);
 
                                 .num {
                                         font-family: pangmenzhengdao;
@@ -797,23 +722,136 @@ export default {
                         flex: 1;
                         display: flex;
                         justify-content: space-around;
-                        color: rgb(83, 180, 255,0.2);
+
                         .item {
                                 @include flex(column);
                                 align-items: center;
                                 justify-content: space-around;
-                                img {
+                                position: relative;
+
+                                .imgBox {
                                         width: 120px;
                                         height: 100px;
+                                        background: url('~@/assets/images/common/iconBg.png') no-repeat !important;
+                                        background-size: 100% 100%;
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: center;
+
+                                        img {
+                                                width: 50px;
+                                                height: 40px;
+                                                animation: moveUpDown 3s infinite linear;
+
+                                        }
                                 }
 
+
                                 .num {
                                         font-family: pangmenzhengdao;
                                         color: #EBF2FA;
                                         text-shadow: 0 0 10px #fff;
                                         font-size: 22px;
                                 }
+
+                                .bubbles {
+                                        position: absolute;
+                                        width: 100%;
+                                        height: 55%;
+                                        top: 0;
+                                        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);
+                                        }
+                                }
+                        }
+                }
+        }
+
+        &-item-tag {
+                position: relative;
+                width: 100%;
+                height: 395px;
+
+                .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;
+                        //         }
+                        // }
                 }
         }
 
@@ -854,16 +892,6 @@ export default {
                         width: 47%;
                         @include flex(column);
                         margin-right: 50px;
-
-                        .buttomCharts {
-                                background: center top url('~@/assets/images/common/peiBg.png') no-repeat;
-                                background-size: 100% 100%;
-                                height: 91px;
-                                width: 202px;
-                                position: absolute;
-                                top: 453px;
-                                left: 16px;
-                        }
                 }
 
                 .bar {
@@ -872,55 +900,5 @@ export default {
 
         }
 
-        &-item-dyfc {
-                display: flex;
-                padding: 16px 16px 21px 16px;
-                box-sizing: border-box;
 
-                .item {
-                        @include flex(column);
-                        border: 1px solid #77A5D8;
-                        padding: 5px;
-                        box-sizing: border-box;
-                        margin-right: 4px;
-
-                        img {
-                                width: 130px;
-                                height: 80px;
-                        }
-
-                        .name {
-                                margin: 11px 0 8px 0;
-                                padding-left: 12px;
-                                position: relative;
-
-                                &::after {
-                                        content: '';
-                                        width: 4px;
-                                        height: 4px;
-                                        border-radius: 4px;
-                                        background: #6BEAC6;
-                                        position: absolute;
-                                        left: 2px;
-                                        top: 10px;
-                                }
-
-                        }
-
-                        .unit {
-                                font-size: 12px;
-                                padding: 0 5px;
-                                color: #BDCEEA;
-                                margin-bottom: 9px;
-                        }
-
-                        .title {
-                                font-size: 14px;
-                                padding: 0 5px;
-                                color: #DBE9FF;
-                        }
-                }
-        }
-
-}
-</style>
+}</style>
diff --git a/src/views/next/screen-content-right/hsyf-right/index.vue b/src/views/next/screen-content-right/hsyf-right/index.vue
index 226de0f..14ec75e 100644
--- a/src/views/next/screen-content-right/hsyf-right/index.vue
+++ b/src/views/next/screen-content-right/hsyf-right/index.vue
@@ -16,7 +16,7 @@
 
                 </div>
                 <div class='card h292' style="margin-top: 8px;">
-                        <screen-title>
+                        <!-- <screen-title>
                                 <div slot="left" class="screen-title-left">支部风采</div>
                         </screen-title>
                         <div class="card-item-zbfc">
@@ -30,17 +30,27 @@
                                         上泊村为村民发放政法宣传资料
                                         <img src="@/assets/images/common/carousel-right.png" alt="">
                                 </div>
+                        </div> -->
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党员风采</div>
+                        </screen-title>
+                        <div class="card-item-dyfc">
+                                <div class="item" v-for="(item, index) in partList" :key="index">
+                                        <img :src="item.imgSrc" alt="">
+                                        <div class="name">{{ item.name }}</div>
+                                        <div class="unit">{{ item.unit }}</div>
+                                        <div class="title">{{ item.title }}</div>
+                                </div>
                         </div>
                 </div>
                 <div class='card h292 m-top12'>
                         <screen-title>
-                                <div slot="left" class="screen-title-left">党务公开</div>
+                                <div slot="left" class="screen-title-left">移风心愿</div>
                         </screen-title>
-                        <div class="card-item-dwgk">
-                                <div class="item" v-for="(item, index) in policyList" :key="index">
-                                        <div class="unit">{{ item.unit }}</div>
-                                        <div class="title">{{ item.title }}</div>
-                                        <div class="time">{{ item.time }}</div>
+                        <div class="card-item-yfxy">
+                                <div class="item" v-for="(item, index) in wishList" :key="index">
+                                        <img :src="item.imgSrc" alt="">
+                                        <div class="name">{{ item.name }}</div>
                                 </div>
                         </div>
                 </div>
@@ -75,33 +85,44 @@ export default {
                                 require('@/assets/images/resource/zbfc/4.jpg'),
                                 require('@/assets/images/resource/zbfc/5.jpg'),
                         ],
-                        policyList: [
+                        wishList: [
                                 {
-                                        unit: '中共青岛市...',
-                                        title: '关于公开基层党委在新···',
-                                        time: '2024-01-02'
+                                        imgSrc: require('@/assets/images/resource/yfxy/1.png'),
+                                        name: '“移”点心愿',
                                 },
                                 {
-                                        unit: '中共青岛市...',
-                                        title: '即墨区水利局2023年国···',
-                                        time: '2023-12-01'
+                                        imgSrc: require('@/assets/images/resource/yfxy/2.png'),
+                                        name: '“移”列清单',
                                 },
                                 {
-                                        unit: '中共青岛市...',
-                                        title: '青岛市即墨区人民政府···',
-                                        time: '2023-09-22'
+                                        imgSrc: require('@/assets/images/resource/yfxy/3.png'),
+                                        name: '“移”语化开',
                                 },
                                 {
-                                        unit: '中共青岛市...',
-                                        title: '青岛市卫生健康委员会···',
-                                        time: '2023-09-13'
+                                        imgSrc: require('@/assets/images/resource/yfxy/4.png'),
+                                        name: '“移”站到家',
+                                }
+                        ],
+                        partList: [
+                                {
+                                        name: '徐法佑',
+                                        unit: '徐家沟村人',
+                                        title: '丹心一片风华百年带着两个兵，敢挡一个团',
+                                        imgSrc: require('@/assets/images/resource/dyfc/1.jpg')
+                                },
+                                {
+                                        name: '傅祖聪',
+                                        unit: '移风中学',
+                                        title: '培桃育李四十三载乐善好施奉献一生',
+                                        imgSrc: require('@/assets/images/resource/dyfc/2.jpg')
                                 },
                                 {
-                                        unit: '中共青岛市...',
-                                        title: '农业局关于印发《即墨···',
-                                        time: '2023-05-06'
+                                        name: '朱爱香',
+                                        unit: '太平庄村人',
+                                        title: '一座大棚撑起新型农民致富梦',
+                                        imgSrc: require('@/assets/images/resource/dyfc/3.jpg')
                                 }
-                        ]
+                        ],
                 };
         },
         created() {
@@ -123,11 +144,12 @@ export default {
 .card {
         width: 100%;
         @include flex(column);
-        @include flex(column);
+
         &-item-djhd {
                 padding: 16px;
                 box-sizing: border-box;
                 @include flex(column);
+
                 >.item {
                         margin-bottom: 4px;
 
@@ -150,43 +172,85 @@ export default {
                 }
         }
 
-        &-item-zbfc {
-                padding: 16px;
+
+        &-item-dyfc {
+                display: flex;
+                padding: 16px 16px 21px 16px;
                 box-sizing: border-box;
 
-                .tabs {
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        margin-top: 21px;
-                        background: linear-gradient(to left, #ecf5fd00 0%, #0e5eaa 50%, #ecf5fd00 100%);
+                .item {
+                        @include flex(column);
+                        border: 1px solid #77A5D8;
+                        padding: 5px;
+                        box-sizing: border-box;
+                        margin-right: 4px;
 
                         img {
-                                width: 42px;
-                                height: 42px;
+                                width: 130px;
+                                height: 80px;
+                        }
+
+                        .name {
+                                margin: 11px 0 8px 0;
+                                padding-left: 12px;
+                                position: relative;
+
+                                &::after {
+                                        content: '';
+                                        width: 4px;
+                                        height: 4px;
+                                        border-radius: 4px;
+                                        background: #6BEAC6;
+                                        position: absolute;
+                                        left: 2px;
+                                        top: 10px;
+                                }
+
+                        }
+
+                        .unit {
+                                font-size: 12px;
+                                padding: 0 5px;
+                                color: #BDCEEA;
+                                margin-bottom: 9px;
+                        }
+
+                        .title {
+                                font-size: 14px;
+                                padding: 0 5px;
+                                color: #DBE9FF;
                         }
                 }
         }
 
-        &-item-dwgk {
-                @include flex(column);
+        &-item-yfxy {
                 padding: 16px;
+                display: grid;
+                grid-template-columns: 50% 50%;
+                grid-template-rows: 48% 48%;
+                grid-gap: 8px 5px;
 
                 >.item {
-                        display: flex;
-                        height: 44px;
-                        align-items: center;
-                        padding: 13px 9px;
-                        box-sizing: border-box;
-                        justify-content: space-between;
-                        .time {
-                                font-size: 14px;
-                                color: #BCD0F0;
+                        position: relative;
+                        .name {
+                                width: 97px;
+                                height: 18px;
+                                margin: 0 auto;
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                transform: translate(-50%, -50%);
+                                z-index: 1;
                         }
-
-                        &:nth-child(odd) {
-                                background: rgb(44, 103, 208, .46);
-
+                        &::after{
+                                content: '';
+                                position: absolute;
+                                bottom: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                                background: #001428 ;
+                                opacity: .5;
                         }
                 }
         }