Merge branch 'main' of https://git.sxidc.com/kingdee_large_screen/pc_kingdee_large_screen

investmentNew/index.html

@@ -669,7 +669,11 @@
                 股权类
               </div>
               <div class="wrapMeansItem">
-                <div v-for="(item, index) in stockRightList" class="itemWid2">
+                <div
+                  v-for="(item, index) in stockRightList"
+                  :class="[topIndex == index+6 ? 'active': '']"
+                  class="itemWid2"
+                >
                   <div class="itemBac itemBac2">
                     <div>
                       {{item.value}}
@@ -677,11 +681,11 @@
                     </div>
                     <span>{{item.label}}</span>
                   </div>
-                  <!-- <img
-                v-if="index != stockRightList.length -1"
-                src="./img/6.png"
-                alt=""
-              /> -->
+                  <img
+                    v-if="index != stockRightList.length -1"
+                    src="./img/6.png"
+                    alt=""
+                  />
                 </div>
               </div>
             </div>

investmentNew/js/index.js

@@ -109,7 +109,7 @@ let app = new Vue({
           value: "66",
         },
         {
-          label: "工商变更登记",
+          label: "变更登记",
           value: "77",
         },
       ],
@@ -360,24 +360,24 @@ let app = new Vue({
           "汾酒集团",
         ],
         y1: [
-          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
+          100, 45, 67, 110, 108, 120, 110, 45, 67, 110, 108, 34, 100, 45, 67,
           110, 108, 34,
         ],
         y2: [
-          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
-          110, 108, 34,
+          120, 50, 67, 130, 56, 233, 100, 78, 98, 100, 120, 78, 120, 90, 56,
+          120, 110, 78,
         ],
         y3: [
-          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
-          110, 108, 34,
+          130, 76, 67, 120, 89, 111, 87, 123, 56, 65, 45, 98, 230, 78, 99, 130,
+          56, 98,
         ],
         y4: [
-          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
-          110, 108, 34,
+          90, 100, 67, 90, 110, 120, 34, 231, 34, 78, 78, 100, 110, 120, 67, 89,
+          78, 110,
         ],
         y5: [
-          100, 45, 67, 110, 108, 34, 100, 45, 67, 110, 108, 34, 100, 45, 67,
-          110, 108, 34,
+          110, 110, 67, 110, 120, 95, 78, 45, 120, 110, 98, 233, 100, 45, 67,
+          98, 98, 34,
         ],
       },
     };
@@ -478,6 +478,24 @@ let app = new Vue({
         ],
       ];
       let that = this;
+      let sumA = 42;
+      // 所有在100范围外的全部变成0，其他值相应增加/减少sumA
+      right5.forEach((item) => {
+        item.forEach((item2) => {
+          if (Number(item2[1]) < 0) {
+            item2[1] = that.$set(item2, 1, Number(that.numSub(item2[1], sumA)));
+          } else if (Number(item2[1]) > 0) {
+            item2[1] = that.$set(item2, 1, Number(item2[1]) + sumA);
+          }
+          if (Number(item2[1]) < -100 - sumA) {
+            item2[1] = that.$set(item2, 1, 0);
+            item2[1] = that.$set(item2, 2, 0);
+          } else if (Number(item2[1]) > 100 + sumA) {
+            item2[1] = that.$set(item2, 1, 0);
+            item2[1] = that.$set(item2, 2, 0);
+          }
+        });
+      });
       const itemStyle = {
         // opacity: 0.8,
         shadowBlur: 10,
@@ -485,8 +503,8 @@ let app = new Vue({
         shadowOffsetY: 0,
         shadowColor: "rgba(0,0,0,0.3)",
       };
-      let myChart = echarts.init(this.$refs["echartR1"]);
-      myChart.on("showTip", (params) => {
+      let echartR1d1 = echarts.init(this.$refs["echartR1"]);
+      echartR1d1.on("showTip", (params) => {
         // 如果是7或者15并且满足防抖则切换
         if (
           (params.dataIndex == 5 || params.dataIndex == 11) &&
@@ -496,7 +514,7 @@ let app = new Vue({
           setTimeout(() => {
             option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6;
             option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6;
-            myChart.setOption(option);
+            echartR1d1.setOption(option);
             // 防止勿刷新做的防抖
             setTimeout(() => {
               that.echartR2Fd = true;
@@ -508,7 +526,7 @@ let app = new Vue({
           setTimeout(() => {
             option.dataZoom[0].endValue = 0;
             option.dataZoom[0].startValue = 5;
-            myChart.setOption(option);
+            echartR1d1.setOption(option);
             // 防止勿刷新做的防抖
             setTimeout(() => {
               that.echartR2Fd = true;
@@ -562,21 +580,36 @@ let app = new Vue({
         textStyle: {
           color: "#fff",
         },
-        // tooltip: {
-        //   show: true,
-        //   trigger: "axis",
-        //   textStyle: {
-        //     color: "#FFF", // 文字的颜色
-        //     fontSize: "20", // 文字字体大小
-        //     fontFamily: "Microsoft YaHei",
-        //   },
-        //   formatter: (data) => {
-        //     return `${data[0].value[0]}<br /><span style="display:inline-block;border-radius:50%; width:14px;height:14px;background-color:${data[0].color}"></span> ${data[0].seriesName}：${data[0].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color}"></span> ${data[1].seriesName}：${data[1].data[1]}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color}"></span> ${data[2].seriesName}：${data[2].data[1]}亿`;
-        //   },
-        //   axisPointer: {
-        //     //  // type: 'cross',',
-        //   },
-        // },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色
+          textStyle: {
+            color: "#FFF", // 文字的颜色
+            fontSize: "20", // 文字字体大小
+            fontFamily: "Microsoft YaHei",
+          },
+          formatter: (data) => {
+            return `${
+              data[0].value[0]
+            }<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[0].color
+            }"></span> ${data[0].seriesName}：${that.numFormat(
+              data[0].data[2]
+            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[1].color
+            }"></span> ${data[1].seriesName}：${that.numFormat(
+              data[1].data[2]
+            )}亿<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${
+              data[2].color
+            }"></span> ${data[2].seriesName}：${that.numFormat(
+              data[2].data[2]
+            )}亿`;
+          },
+          axisPointer: {
+            //  // type: 'cross',',
+          },
+        },
         grid: {
           top: "10%",
           right: "4%",
@@ -584,9 +617,12 @@ let app = new Vue({
           bottom: "5%",
         },
         yAxis: {
-          name: "亿元",
+          min: -101 - sumA,
+          max: 101 + sumA,
+          maxInterval: 1,
           splitLine: {
-            show: true,
+            show: false,
+            // interval:,
             lineStyle: {
               color: "#68b4dd66",
               type: "dashed",
@@ -595,9 +631,23 @@ let app = new Vue({
           axisLine: {
             show: false,
           },
+          axisTick: {
+            show: false,
+          },
           axisLabel: {
             show: true,
-            formatter: "{value}",
+            // formatter: '{value}',
+            formatter(data) {
+              if (data == 100 + sumA) {
+                return "100%";
+              } else if (data == -100 - sumA) {
+                return "-100%";
+              } else if (data == -5 - sumA) {
+                return "-5%";
+              } else if (data == 5 + sumA) {
+                return "5%";
+              }
+            },
             textStyle: {
               color: "#fff",
               fontSize: "20",
@@ -611,9 +661,9 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: right5[0].map((item) => item[0]),
+          data: commonCompany,
           axisLine: {
-            show: true, //隐藏X轴轴线
+            show: false, //隐藏X轴轴线
             lineStyle: {
               color: "#005094",
               width: 1,
@@ -627,7 +677,7 @@ let app = new Vue({
             },
           },
           axisTick: {
-            show: false, //隐藏X轴刻度
+            show: true, //隐藏X轴刻度
           },
           axisLabel: {
             show: true,
@@ -647,7 +697,77 @@ let app = new Vue({
             itemStyle: itemStyle,
             data: right5[0],
             symbolSize: function (data) {
-              return Math.sqrt(data[1]) * 9;
+              if ((data[2] > 0 && data[2] < 50) || data[2] == 50) {
+                return 40;
+              } else if ((data[2] > 50 && data[2] < 100) || data[2] == 100) {
+                return 70;
+              } else if (data[2] > 100) {
+                return 100;
+              }
+            },
+            markLine: {
+              symbol: "none",
+              data: [
+                {
+                  name: "100%",
+                  yAxis: 100 + sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                    label: {
+                      show: false,
+                    },
+                  },
+                },
+                {
+                  name: "5%",
+                  yAxis: 5 + sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+                {
+                  name: "-5%",
+                  yAxis: -5 - sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+                {
+                  name: "100%",
+                  yAxis: -100 - sumA,
+                  lineStyle: {
+                    // color: '#fff',
+                  },
+                  label: {
+                    show: false,
+                    formatter: "{b}",
+                    position: "right",
+                    color: "#fff",
+                    fontSize: 20,
+                  },
+                },
+              ],
             },
           },
           {
@@ -656,7 +776,13 @@ let app = new Vue({
             itemStyle: itemStyle,
             data: right5[1],
             symbolSize: function (data) {
-              return Math.sqrt(data[1]) * 8;
+              if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
+                return 40;
+              } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
+                return 70;
+              } else if (data[1] > 100) {
+                return 100;
+              }
             },
           },
           {
@@ -665,17 +791,23 @@ let app = new Vue({
             itemStyle: itemStyle,
             data: right5[2],
             symbolSize: function (data) {
-              return Math.sqrt(data[1]) * 7;
+              if ((data[1] > 0 && data[1] < 50) || data[1] == 50) {
+                return 40;
+              } else if ((data[1] > 50 && data[1] < 100) || data[1] == 100) {
+                return 70;
+              } else if (data[1] > 100) {
+                return 100;
+              }
             },
           },
         ],
       };
-      myChart.on("click", function (param) {
+      echartR1d1.on("click", function (param) {
         // that.showChartLTipDouble(param.name)
         that.projectListTipShow = true;
       });
-      myChart.setOption(option);
-      tools.loopShowTooltip(myChart, option, {
+      echartR1d1.setOption(option);
+      tools.loopShowTooltip(echartR1d1, option, {
         interval: 2000,
         loopSeries: true,
       });
@@ -844,8 +976,9 @@ let app = new Vue({
             type: "category",
             data: that.riskData.x.map((item) => item.name),
             axisLine: {
+              show: true,
               lineStyle: {
-                color: "#005094",
+                color: "rgba(0, 80, 148, .8)",
               },
             },
             axisTick: {
@@ -866,7 +999,9 @@ let app = new Vue({
               fontSize: 22,
             },
             splitLine: {
+              show: true,
               lineStyle: {
+                color: "rgba(104, 180, 221, .2)",
                 type: "dashed",
               },
             },
@@ -1357,7 +1492,7 @@ let app = new Vue({
       this.timer = setInterval(() => {
         this.inner++;
         this.topIndex++;
-        this.topIndex = this.topIndex % this.meansList.length;
+        this.topIndex = this.topIndex % 8;
         this.witchs = this.inner % this.investData.investList.length;
         this.innerDeg = this.inner * angle;
       }, 2000);

investmentNew/styles/index.css

@@ -5,7 +5,7 @@ body {
   height: 100%;
   font-size: 20px;
   color: #fff;
-  font-family: 'Microsoft YaHei';
+  font-family: "Microsoft YaHei";
   overflow-y: hidden;
 }
 * {
@@ -30,7 +30,7 @@ a {
   display: none;
 }
 #app {
-  background: url('../img/page-bg3.png') center center no-repeat;
+  background: url("../img/page-bg3.png") center center no-repeat;
   background-size: 100% 100%;
 }
 .top {
@@ -50,26 +50,26 @@ a {
   letter-spacing: 5px;
 }
 .top .title > span:before {
-  content: '';
+  content: "";
   display: inline-block;
   width: 66px; /*图标宽度*/
   height: 42px; /*图标高度*/
-  background: url('../img/title-left.png') no-repeat center center; /*图标路径*/
+  background: url("../img/title-left.png") no-repeat center center; /*图标路径*/
   background-size: contain; /*图标大小适应*/
   margin-right: 20px; /*图标与文字的间距*/
 }
 .top .title > div {
   height: 30px;
   width: 40%;
-  background: url('../img/title-light.png') center bottom no-repeat;
+  background: url("../img/title-light.png") center bottom no-repeat;
   background-size: 100% 100%;
 }
 .top .title > span:after {
-  content: '';
+  content: "";
   display: inline-block;
   width: 66px; /*图标宽度*/
   height: 42px; /*图标高度*/
-  background: url('../img/title-right.png') no-repeat center center; /*图标路径*/
+  background: url("../img/title-right.png") no-repeat center center; /*图标路径*/
   background-size: contain; /*图标大小适应*/
   margin-left: 20px; /*图标与文字的间距*/
 }
@@ -113,7 +113,7 @@ a {
   /* height: calc(100% / 7); */
   height: 100px;
   overflow: hidden;
-  background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/
+  background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
   display: flex;
   align-items: center;
@@ -124,7 +124,7 @@ a {
   letter-spacing: 5px;
 }
 .left .child > div:nth-child(1):before {
-  content: '●';
+  content: "●";
   margin-right: 10px;
   color: #40a9ff;
 }
@@ -147,7 +147,7 @@ a {
 .left1 .child {
   width: 47%;
   height: 100%;
-  background: url('../img/left1.png') no-repeat center center; /*图标路径*/
+  background: url("../img/left1.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -175,12 +175,12 @@ a {
   padding: 1%;
 }
 .checkBg {
-  background: url('../img/disk.png') no-repeat center center; /*图标路径*/
+  background: url("../img/disk.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left .industryProportion1,
 .left2 .industryProportion1 {
-  background: url('../img/industryProportion.png') no-repeat center center; /*图标路径*/
+  background: url("../img/industryProportion.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left .industryProportion2 {
@@ -206,15 +206,15 @@ a {
   gap: 30px;
 }
 .left3A > div:nth-child(1) {
-  background: url('../img/retainedA.png') no-repeat center center; /*图标路径*/
+  background: url("../img/retainedA.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left3A > div:nth-child(2) {
-  background: url('../img/retainedB.png') no-repeat center center; /*图标路径*/
+  background: url("../img/retainedB.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left3A > div:nth-child(3) {
-  background: url('../img/retainedC.png') no-repeat center center; /*图标路径*/
+  background: url("../img/retainedC.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .left4 {
@@ -268,23 +268,23 @@ a {
   overflow: hidden;
 }
 .center1 > div:nth-child(2) {
-  background: url('../img/bubbleBg.png') no-repeat center center; /*图标路径*/
+  background: url("../img/bubbleBg.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(3) {
-  background: url('../img/blueBig.png') no-repeat center center; /*图标路径*/
+  background: url("../img/blueBig.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(4) {
-  background: url('../img/blueSmall.png') no-repeat center center; /*图标路径*/
+  background: url("../img/blueSmall.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(5) {
-  background: url('../img/greenSmall.png') no-repeat center center; /*图标路径*/
+  background: url("../img/greenSmall.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center1 > div:nth-child(6) {
-  background: url('../img/greenBig.png') no-repeat center center; /*图标路径*/
+  background: url("../img/greenBig.png") no-repeat center center; /*图标路径*/
   background-size: 100% 100%;
 }
 .center2 {
@@ -311,16 +311,16 @@ a {
   padding-left: 40%;
 }
 .center2 > div:nth-child(1) > div:nth-child(1) {
-  background: url('../img/centerTop1.png') no-repeat center left; /*图标路径*/
+  background: url("../img/centerTop1.png") no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(2) {
-  background: url('../img/centerTop2.png') no-repeat center left; /*图标路径*/
+  background: url("../img/centerTop2.png") no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(3) {
-  background: url('../img/centerTop3.png') no-repeat center left; /*图标路径*/
+  background: url("../img/centerTop3.png") no-repeat center left; /*图标路径*/
 }
 .center2 > div:nth-child(1) > div:nth-child(4) {
-  background: url('../img/centerTop4.png') no-repeat center left; /*图标路径*/
+  background: url("../img/centerTop4.png") no-repeat center left; /*图标路径*/
 }
 .center3 {
   position: absolute !important;
@@ -356,12 +356,12 @@ a {
   font-size: 32px !important;
 }
 .blueIcon::before {
-  content: '●';
+  content: "●";
   margin-right: 10px;
   color: #40a9ff;
 }
 .bottom-tip {
-  background: url('../img/center-bottonm.png') no-repeat center left; /*图标路径*/
+  background: url("../img/center-bottonm.png") no-repeat center left; /*图标路径*/
   background-size: 100% 100%;
   width: 1600px;
   height: 120px;
@@ -843,13 +843,13 @@ i {
 }
 
 .meansWrap {
-  width: 80%;
+  width: 75%;
   display: flex;
   flex-direction: column;
 }
 
 .itemWid {
-  width: calc(100% / 8);
+  width: calc(100% / 6);
   height: 100%;
   display: flex;
   align-items: flex-end;
@@ -866,14 +866,14 @@ i {
 
 .itemWid2 img {
   position: absolute;
-  right: -95px;
+  right: -70px;
   bottom: 15px;
-  width: 100px;
+  width: 120px;
 }
 
 .itemWid img {
   position: absolute;
-  right: -95px;
+  right: -65px;
   bottom: 15px;
   width: 120px;
 }
@@ -901,15 +901,19 @@ i {
   font-size: 72px;
   line-height: 60px;
   font-family: Helvetica Neue Extra Black Cond;
-  font-weight: 400;
+  font-weight: bold;
   color: #68bdff;
   position: absolute;
   top: 75px;
-  left: 110px;
+  left: 148px;
   display: flex;
   align-items: flex-end;
 }
 
+.itemBac2 div {
+  color: #5bdcc8;
+}
+
 .itemBac div p {
   font-size: 28px;
   line-height: 28px;
@@ -938,7 +942,7 @@ i {
   width: 100%;
   height: 100px;
   overflow: hidden;
-  background: url('../img/small-title.png') no-repeat center bottom; /*图标路径*/
+  background: url("../img/small-title.png") no-repeat center bottom; /*图标路径*/
   background-size: 100% 50%;
   display: flex;
   align-items: center;
@@ -982,7 +986,7 @@ i {
 }
 
 .itemTop p::after {
-  content: '';
+  content: "";
   width: 0.75rem;
   height: 0.75rem;
   background: linear-gradient(0deg, #014198, #93ceff);
@@ -1171,7 +1175,7 @@ i {
 }
 
 .investInfoWrap .investInfo::after {
-  content: '';
+  content: "";
   width: 20px;
   height: 20px;
   border: 4px solid #68bdff;