Merge branch 'main' of git.zdool.com:xs/ggfwjsc

src/view/echarts/pie3d.vue

@@ -14,33 +14,25 @@ const colorList = ['#FFE35F','#0081FF','#8ABEDB','#25B9C8','#30EB92','rgba(69, 2
 
 const pieData = [
     {
-        name: "A", //名称
-        value: 10, //值
+        name: "60-70岁", //名称
+        value: 1012431431, //值
     },
     {
-        name: "B",
-        value: 8,
+        name: "70-80岁",
+        value: 85425345,
     },
     {
-        name: "C",
-        value: 2,
+        name: "80-90岁",
+        value: 2543256,
     },
     {
-        name: "D",
-        value: 6,
+        name: "90-100岁",
+        value: 5432535,
     },
     {
-        name: "E",
-        value: 5,
-    },
-    {
-        name: "F",
-        value: 1,
-    },
-    {
-        name: "G",
-        value: 5
-    },
+        name: "100岁以上",
+        value: 56,
+    }
 ]
 
 const serData = pieData.map((dItem, index) => {
@@ -152,40 +144,7 @@ function getPie3D(pieData, internalDiameterRatio) {
     //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) ;
     //         },
     //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
-    //         },
-    //     },
-    // });
-    // series.push({
-    //     name: 'mouseoutSeries',
-    //     type: 'surface',
-    //     parametric: true,
-    //     wireframe: {
-    //         show: false,
-    //     },
-    //     itemStyle: {
-    //         opacity: 0.5,
-    //         color: '#fff',
-    //     },
-    //     parametricEquation: {
-    //         u: {
-    //             min: 0,
-    //             max: Math.PI * 2,
-    //             step: Math.PI / 20,
-    //         },
-    //         v: {
-    //             min: 1.5,
-    //             max: 3,
-    //             step: Math.PI / 20,
-    //         },
-    //         x: function (u, v) {
-    //             return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) *1;
-    //         },
-    //         y: function (u, v) {
-    //             return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI)*1;
-    //         },
-    //         z: function (u, v) {
-    //             return Math.cos(v) > 0 ? -4 : -4;
+    //             return Math.cos(v) > 0 ? -6 : -7;
     //         },
     //     },
     // });
@@ -206,19 +165,19 @@ function getPie3D(pieData, internalDiameterRatio) {
                 "#F4BB29",
                 "#49C384",
             ],
-            width: '30%',
+            width: '40%',
             //图例列表的布局朝向。
-            // orient: "vertical",
-            right: 0,
+            orient: "vertical",
+            right: 20,
             // bottom: 20,
             top: 'center',
             // left: '10px',
             //图例文字每项之间的间隔
-            itemGap: 20,
+            itemGap: 10,
             show: true,
             icon: "rect",
             itemHeight: 10,
-            itemWidth: 10,
+            itemWidth: 25,
             textStyle: {
                 //图例字体大小
                 fontSize: 14,
@@ -227,15 +186,21 @@ function getPie3D(pieData, internalDiameterRatio) {
             },
 
             //格式化图例文本
-            // 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 (name) {
+                var target;
+                for (var i = 0, l = pieData.length; i < l; i++) {
+                    if (pieData[i].name == name) {
+                        target = pieData[i].value;
+                    }
+                }
+                if(name == '90-100岁'){
+                    return `   ${name}           ${target} 人`;
+                }else if(name == '100岁以上'){
+                    return `   ${name}          ${target} 人`;
+                }else{
+                    return `   ${name}             ${target} 人`;
+                }
+            },
         },
         //移动上去提示的文本内容
         tooltip: {
@@ -256,7 +221,7 @@ function getPie3D(pieData, internalDiameterRatio) {
                         `<div style='color:rgba(214, 243, 255, 0.9);'>` +
                         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                         `${params.seriesName}<br/>` +
-                        `<span style='margin-right:20px'>${value}</span>` +
+                        `<span style='margin-right:20px'>${value}人</span>` +
                         `<span >${bfb}%</span>` +
                         `</div>`
                     );
@@ -269,14 +234,14 @@ function getPie3D(pieData, internalDiameterRatio) {
         grid3D: {
             viewControl: {
                 autoRotate: true,
-                rotateSensitivity: 1, //设置为0无法旋转
-                zoomSensitivity: 1, //设置为0无法缩放
+                rotateSensitivity: 0, //设置为0无法旋转
+                zoomSensitivity: 0, //设置为0无法缩放
                 panSensitivity: 0, //设置为0无法平移
                 alpha: 25, //角度(这个很重要 调节角度的)
-                distance: 120, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+                distance: 90, //调整视角到主体的距离，类似调整zoom(这是整体大小)
             },
-            top: '0',
-            left: '-100',
+            top: '-30',
+            left: '-120',
             width: '100%',
             show: false,
             boxHeight: 20,

src/view/yl.vue

@@ -94,10 +94,15 @@
     </div>
     <div class="displayFlex">
       <div class="flex1">
-        <div class="yd_title">
-          <span class="text">活动数据分析</span>
+        <div class="yd_title center_1">
+        </div>
+        <div class="minTopPart">
+          <div class="mtpImg1"></div>
+          <div class="mtpImg2"></div>
+          <div class="mtpImg3"></div>
+          <div class="mtpText1">5888811</div>
+          <div class="mtpText2">18%</div>
         </div>
-        <waterBall></waterBall>
         <ePie3d></ePie3d>
       </div>
       <div class="flex1">
@@ -194,11 +199,7 @@
             </div>
           </div>
           <div class="mealAssistance">
-            <img
-              class="mealAssistanceimg"
-              src="@/assets/YLimg/ylimg7.png"
-              alt=""
-            />
+            <img class="mealAssistanceimg" src="@/assets/YLimg/ylimg7.png" alt="" />
             <div style="width: 490px">
               <ylXZZC></ylXZZC>
             </div>
@@ -240,16 +241,19 @@ const change = (name, index) => {
   flex-direction: column;
   // flex: 1;
 }
+
 .flex1 {
   // flex: 1;
   // padding: 0 28px;
   box-sizing: border-box;
 }
+
 .flex2 {
   // flex: 1;
   padding: 0 38px;
   box-sizing: border-box;
 }
+
 .module {
   display: flex;
 }
@@ -262,6 +266,7 @@ const change = (name, index) => {
   width: 90%;
   height: 36px;
   position: relative;
+
   .text {
     display: flex;
     position: absolute;
@@ -274,15 +279,19 @@ const change = (name, index) => {
     top: 3px;
   }
 }
+
 .familyPlanning {
   background-image: url(@/assets/YLTitle/titleImg9.png);
 }
+
 .mechanism {
   background-image: url(@/assets/YLTitle/titleImg10.png);
 }
+
 .service {
   background-image: url(@/assets/YLTitle/titleImg11.png);
 }
+
 .serviceBox {
   display: flex;
   flex-direction: column;
@@ -291,13 +300,16 @@ const change = (name, index) => {
     width: 182px;
     height: 35px;
   }
+
   .serviceTop {
     display: flex;
     justify-content: space-between;
+
     .medicalService {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .ylimg {
         width: 205px;
         height: 239px;
@@ -305,6 +317,7 @@ const change = (name, index) => {
 
       .medicalServiceTop {
         position: relative;
+
         span {
           position: absolute;
           left: 38px;
@@ -321,11 +334,13 @@ const change = (name, index) => {
       }
     }
   }
+
   .mealAssistance {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     .mealAssistanceimg {
       width: 495px;
       height: 35px;
@@ -338,16 +353,25 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_2 {
   background-image: url(@/assets/images/gllrbt.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_3 {
   background-image: url(@/assets/images/tkjz.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
+.center_1 {
+  background-image: url(@/assets/YLTitle/titleImg8.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
 .left_bg {
   width:642px;
   box-sizing: border-box;
@@ -357,11 +381,13 @@ const change = (name, index) => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .basicInformation {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding-top: 22px;
+
   .basicInformation_item {
     flex: 0 0 50%;
     padding: 0 2px;
@@ -370,10 +396,12 @@ const change = (name, index) => {
     box-sizing: border-box;
     display: flex;
     align-items: center;
+
     .icon {
       width: 79px;
       height: 47px;
     }
+
     .right {
       margin-left: 4px;
 
@@ -383,6 +411,7 @@ const change = (name, index) => {
         background-repeat: no-repeat;
         background-position: bottom;
         margin-bottom: 4px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -391,6 +420,7 @@ const change = (name, index) => {
           margin-left: 2px;
         }
       }
+
       p {
         font-size: 16px;
         font-weight: bold;
@@ -410,12 +440,15 @@ const change = (name, index) => {
     margin-top: 16px;
     padding: 15px 8px;
     box-sizing: border-box;
+
     img {
       display: inline-block;
       margin-right: 10px;
     }
+
     .visitLog_item_box {
       flex: auto;
+
       h4 {
         font-size: 18px;
         font-family: MicrosoftYaHei;
@@ -423,6 +456,7 @@ const change = (name, index) => {
         color: #0096ff;
         margin-bottom: 2px;
       }
+
       p {
         font-size: 12px;
         font-family: SourceHanSansCN;
@@ -431,6 +465,7 @@ const change = (name, index) => {
         margin-top: 6px;
       }
     }
+
     .check {
       font-size: 12px;
       font-family: SourceHanSansCN;
@@ -444,6 +479,7 @@ const change = (name, index) => {
 .history {
   padding-top: 12px;
   display: flex;
+
   .history1 {
     font-size: 26px;
     color: #ffffff;
@@ -456,6 +492,7 @@ const change = (name, index) => {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .unit {
       font-weight: 500;
       font-size: 14px;
@@ -465,15 +502,18 @@ const change = (name, index) => {
       font-style: normal;
       font-family: PingFangSC, PingFang SC;
     }
+
     .historyimg {
       width: 182px;
       height: 35px;
     }
   }
+
   img {
     width: 154px;
     height: 136px;
   }
+
   p {
     margin-top: 12px;
     font-size: 12px;
@@ -489,6 +529,7 @@ const change = (name, index) => {
   align-items: center;
   justify-content: center;
   margin: 12px 0 20px;
+
   span {
     text-align: center;
     background: rgba(0, 89, 130, 0.73);
@@ -502,9 +543,11 @@ const change = (name, index) => {
     margin: 0 10px;
   }
 }
+
 .property {
   display: flex;
   padding: 14px 0 10px;
+
   .property_box {
     background-image: url(@/assets/img_05.png);
     background-size: 100% 100%;
@@ -513,12 +556,14 @@ const change = (name, index) => {
     height: 91px;
     margin: 0 12px;
     text-align: center;
+
     h5 {
       font-size: 14px;
       font-weight: 400;
       color: #ffffff;
       margin: 9px 0 16px;
     }
+
     p {
       font-size: 21px;
       font-weight: bold;
@@ -526,6 +571,7 @@ const change = (name, index) => {
     }
   }
 }
+
 .activity {
   h5 {
     font-size: 14px;
@@ -535,9 +581,11 @@ const change = (name, index) => {
     border-bottom: 2px solid rgba(0, 164, 250, 1);
     margin-bottom: 17px;
   }
+
   .activity_content {
     margin: 0 -6px 12px;
     display: flex;
+
     .activity_box {
       width: 50%;
       display: inline-block;
@@ -545,6 +593,7 @@ const change = (name, index) => {
       box-sizing: border-box;
       background-color: rgba(15, 28, 54, 1);
       padding: 12px 12px 19px;
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -555,26 +604,31 @@ const change = (name, index) => {
     }
   }
 }
+
 .monitor {
   .monitor_box {
     display: flex;
     padding: 8px 0;
     border-bottom: 2px solid rgba(255, 255, 255, 0.67);
+
     img {
       width: 115px;
       height: 84px;
       margin-right: 21px;
     }
+
     .monitor_box_text {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
+
       h4 {
         font-size: 14px;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
       }
+
       p {
         font-size: 14px;
         font-weight: 400;
@@ -584,4 +638,71 @@ const change = (name, index) => {
     }
   }
 }
+
+.minTopPart {
+  width: 530px;
+  height: 174px;
+  background-image: url(@/assets/minTopBg.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 4px auto;
+  position: relative;
+
+  .mtpImg1 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop1.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    left: 23px;
+  }
+
+  .mtpImg2 {
+    width: 140px;
+    height: 24px;
+    background-image: url(@/assets/minTop2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 49px;
+    right: 23px;
+  }
+  .mtpImg3 {
+    width: 125px;
+    height: 36px;
+    background-image: url(@/assets/minTop3.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 316px;
+    left: 84px;
+  }
+
+  .mtpText1 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    left: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+  .mtpText2 {
+    width: 140px;
+    height: 30px;
+    position: absolute;
+    top: 94px;
+    right: 23px;
+    text-align: center;
+    line-height: 30px;
+    font-weight: bold;
+    font-size: 26px;
+    color: #FFFFFF;
+  }
+}
 </style>