修改人力六定页面，投资页面初版完成

investment/investHomeGroup.html

@@ -385,16 +385,22 @@
         <div class="right-b">
           <div>
             <div class="title">
-              <span class="text">重点项目两线指标</span>
+              <span class="text">进度成本偏差</span>
             </div>
-            <div class="content">
+            <div class="content" style="padding:0">
+              <div ref="echartR2" class="w-full h-full" @mouseover="echartR2Fd = false" @mouseout="echartR2Fd = true"></div>
             </div>
           </div>
           <div>
             <div class="title">
               <span class="text">项目阶段分析</span>
             </div>
-            <div class="content">
+            <div class="content right-br">
+              <div class="right-brt">
+                <div ref="echartR3" class="w-full h-full commonBack" @mouseover="echartR3Fd = false" @mouseout="echartR3Fd = true"></div>
+                <div class="w-full h-full commonBack" ref="echartR4"></div>
+              </div>
+              <div class="w-full h-full commonBack" ref="echartR5"></div>
             </div>
           </div>
         </div>

investment/js/investHomeGroup.js

@@ -104,6 +104,13 @@ let app = new Vue({
       this.initChartC4()
       this.initChinaChart()
       this.initProjectList()
+      // 大屏三
+      this.initChartR1()
+      this.initChartR2()
+      this.initChartR3()
+      this.initChartR4()
+      this.initChartR5()
+      
     })
   },
   methods: {
@@ -910,7 +917,7 @@ let app = new Vue({
           textStyle: {
             // 图列内容样式
             color: "#fff", // 字体颜色
-            // fontSize: "10",
+            fontSize: "20",
           },
           right: 'center',
           y: 5,
@@ -2028,7 +2035,7 @@ let app = new Vue({
             show: true,
             rotate: 15,
             textStyle: {
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              color: '#fff', //X轴文字颜色
               fontSize: 12,
             },
           },
@@ -2243,7 +2250,7 @@ let app = new Vue({
           axisLabel: {
             show: true,
             textStyle: {
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              color: '#fff', //X轴文字颜色
               fontSize: 14,
             },
           },
@@ -2390,7 +2397,7 @@ let app = new Vue({
           axisLabel: {
             show: true,
             textStyle: {
-              color: 'rgba(255,255,255,0.6)', //X轴文字颜色
+              color: '#fff', //X轴文字颜色
               fontSize: 14,
             },
           },
@@ -3706,6 +3713,931 @@ let app = new Vue({
         align: ['center', 'center', 'center'],
         data: dataList,
       }
-    }
+    },
+    // 大屏三
+    initChartR1 () {
+      let that = this
+      let myChart = echarts.init(this.$refs['echartR1'])
+      myChart.on('showTip', (params) => {
+        // 如果是7或者15并且满足防抖则切换
+        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR1Fd) {
+          that.echartR1Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR1Fd = true
+            }, 2000)
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR1Fd) {
+          that.echartR1Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0
+            option.dataZoom[0].startValue = 5
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR1Fd = true
+            }, 2000)
+          }, 1900)
+        }
+      })
+      let option = {
+        tooltip: {
+          formatter: data => {
+            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}：${data[3].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[4].color.colorStops[0].color}"></span> ${data[4].seriesName}：${data[4].value}亿`
+          },
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 5,// 初始显示值
+            endValue: 0,// 结束显示值
+            height: 10,//组件高度
+            left: "5%",
+            right: "4%",//右边的距离
+            bottom: "25%",//底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
+            showDataShadow: false,//是否显示数据阴影
+            showDetail: false,//即拖拽时候是否显示详细数值信息 
+            truerealtime: true,//是否实时更新
+            filterMode: "filter"
+          }, {
+            type: 'inside',
+            show: true,
+            start: 1,
+            end: 100
+          }
+        ],
+        grid: {
+          top: '10%',
+          right: '3%',
+          left: '5%',
+          bottom: '5%',
+        },
+        legend: {
+          data: ["预算额", "已签合同额", '产值认定额', '结算额', '付款额'],
+          x: 'center',
+          y: '20px',
+          textStyle: {
+            color: '#fff',
+            fontSize: "20",
+          },
+        },
+        xAxis: {
+          data: echart1.map(item => item.name),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            // rotate: 40,
+            textStyle: {
+              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '亿元',
+            nameTextStyle: {
+              color: 'rgba(255,255,255,0.6)',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#3D7495',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '预算额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#71D5FF',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart1.map(item => item.value),
+          },
+          {
+            name: '已签合同额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#4D6FF6',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart1.map(item => item.value2),
+          },
+          {
+            name: '产值认定额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#877CFC',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart1.map(item => item.value),
+          },
+          {
+            name: '结算额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#52BF80',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart1.map(item => item.value2),
+          },
+          {
+            name: '付款额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#CADD62',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart1.map(item => item.value),
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        interval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR2 () {
+      let that = this
+      const itemStyle = {
+        // opacity: 0.8,
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0,
+        shadowColor: 'rgba(0,0,0,0.3)'
+      };
+      let myChart = echarts.init(this.$refs['echartR2'])
+      myChart.on('showTip', (params) => {
+        // 如果是7或者15并且满足防抖则切换
+        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR2Fd) {
+          that.echartR2Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd = true
+            }, 2000)
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR2Fd) {
+          that.echartR2Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0
+            option.dataZoom[0].startValue = 5
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR2Fd = true
+            }, 2000)
+          }, 1900)
+        }
+      })
+      let option = {
+        color: ['#80F1BE', '#fec42c', '#dd4444'],
+        title: {
+          textStyle: {
+            color: '#69C0FF',
+            fontSize: 16,
+            fontWeight: 500
+          },
+          top: '10',
+          left: '10'
+        },
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 5,// 初始显示值
+            endValue: 0,// 结束显示值
+            height: 10,//组件高度
+            left: "5%",
+            right: "4%",//右边的距离
+            bottom: "25%",//底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
+            showDataShadow: false,//是否显示数据阴影
+            showDetail: false,//即拖拽时候是否显示详细数值信息 
+            truerealtime: true,//是否实时更新
+            filterMode: "filter"
+          }, {
+            type: 'inside',
+            show: true,
+            start: 1,
+            end: 100
+          }
+        ],
+        legend: {
+          top: 10,
+          data: ['正偏差', '容差', '负偏差'],
+          textStyle: {
+            fontSize: 20,
+            color: '#fff'
+          }
+        },
+        textStyle: {
+          color: '#fff',
+        },
+        tooltip: {
+          show: true,
+          trigger: "axis",
+          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}：${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',
+          },
+          // axisPointer: {
+          //   lineStyle: {
+          //     type: 'dashed',
+          //     width: 2,
+          //     color: 'rgba(255,255,255,0.6)'
+          //   },
+          //   animation: true
+          // }
+        },
+        grid: {
+          top: '10%',
+          right: '4%',
+          left: '5%',
+          bottom: '5%',
+        },
+        yAxis: {
+          name: '亿元',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            formatter: '{value}',
+            textStyle: {
+              color: 'rgba(250,250,250,0.6)',
+            },
+          },
+          nameTextStyle: {
+            color: '#fff',
+            fontSize: 10,
+          },
+        },
+        xAxis: {
+          data: echart2[0].map(item => item[0]),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#68b4dd66',
+              type: 'dashed',
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            // rotate: 40,
+            padding: [0,0 , 0, 0],
+            textStyle: {
+              color: '#fff', //X轴文字颜色
+              fontSize: 12,
+            },
+          },
+        },
+        series: [
+          {
+            name: '正偏差',
+            type: 'scatter',
+            itemStyle: itemStyle,
+            data: echart2[0],
+            symbolSize: function (data) {
+              return Math.sqrt(data[1]) * 4;
+            },
+          },
+          {
+            name: '容差',
+            type: 'scatter',
+            itemStyle: itemStyle,
+            data: echart2[1],
+            symbolSize: function (data) {
+              return Math.sqrt(data[1]) * 4;
+            },
+          },
+          {
+            name: '负偏差',
+            type: 'scatter',
+            itemStyle: itemStyle,
+            data: echart2[2],
+            symbolSize: function (data) {
+              return Math.sqrt(data[1]) * 4;
+            },
+          }
+        ]
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        interval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR3 () {
+      let that = this
+      let myChart = echarts.init(this.$refs['echartR3'])
+      myChart.on('showTip', (params) => {
+        // 如果是7或者15并且满足防抖则切换
+        if ((params.dataIndex == 5 || params.dataIndex == 11) && that.echartR3Fd) {
+          that.echartR3Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR3Fd = true
+            }, 2000)
+          }, 1900);
+          // 如果是17表示到了最后一个，那么重新来一遍
+        } else if (params.dataIndex == 17 && that.echartR3Fd) {
+          that.echartR3Fd = false
+          setTimeout(() => {
+            option.dataZoom[0].endValue = 0
+            option.dataZoom[0].startValue = 5
+            myChart.setOption(option);
+            // 防止勿刷新做的防抖
+            setTimeout(() => {
+              that.echartR3Fd = true
+            }, 2000)
+          }, 1900)
+        }
+      })
+      let option = {
+        tooltip: {
+          formatter: data => {
+            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿`
+          },
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+          position: (params) => {
+            return [params[0] + 10, 60]
+          },
+        },
+        dataZoom: [
+          {
+            // start: 9,//默认为@
+            // end: 100,//黑认认为1@0
+            type: "slider",
+            show: false,
+            // xAxisIndex: [0]
+            handlesize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 5,// 初始显示值
+            endValue: 0,// 结束显示值
+            height: 10,//组件高度
+            left: "5%",
+            right: "4%",//右边的距离
+            bottom: "25%",//底边的距离
+            borderColor: "#939",
+            fillerColor: "#269cdb",
+            borderRadius: 5,
+            backgroundColor: "#33384b",//两边未选中的滑动条区域的额色
+            showDataShadow: false,//是否显示数据阴影
+            showDetail: false,//即拖拽时候是否显示详细数值信息 
+            truerealtime: true,//是否实时更新
+            filterMode: "filter"
+          }, {
+            type: 'inside',
+            show: true,
+            start: 1,
+            end: 100
+          }
+        ],
+        grid: {
+          top: '25%',
+          right: '3%',
+          left: '10%',
+          bottom: '15%',
+        },
+        legend: {
+          data: ["高风险", "中风险", '低风险'],
+          x: 'center',
+          y: '15px',
+          textStyle: {
+            // color: 'rgba(250,250,250,0.6)',
+            color: '#fff',
+            fontSize: "20",
+          },
+        },
+        xAxis: {
+          data: echart1.map(item => item.name),
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            rotate: 40,
+            textStyle: {
+              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '亿元',
+            nameTextStyle: {
+              color: 'rgba(255,255,255,0.6)',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#3D7495',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '高风险',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#CADD62',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart3.map(item => item.value),
+          },
+          {
+            name: '中风险',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#4D6FF6',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart3.map(item => item.value2),
+          },
+          {
+            name: '低风险',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#52BF80',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart3.map(item => item.value3),
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        interval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR4 () {
+      let myChart = echarts.init(this.$refs['echartR4'])
+      option = {
+        title: {
+          text: ''
+        },
+        // legend: {
+        //   data: ['安全风险', '付款风险', '合同风险', '结算风险', '进度风险', '质量风险'],
+        //   textStyle: {
+        //     color: '#9DB9EB',
+        //   },
+        //   top: 'center',
+        //   right:'50',
+        //   orient: 'vertical', // vertical 竖着 
+        // },
+        radar: {
+          // shape: 'circle',
+          center: ['50%', '50%'],
+          radius: 135,
+          indicator: [
+            { name: '安全风险', max: 100000 },
+            { name: '付款风险', max: 100000 },
+            { name: '合同风险', max: 100000 },
+            { name: '结算风险', max: 100000 },
+            { name: '进度风险', max: 100000 },
+            { name: '质量风险', max: 100000 },
+          ],
+          axisLine: {  // 设置雷达图中间射线的颜色
+            lineStyle: {
+              color: '#887d33',
+            },
+          },
+          splitLine: { //网格颜色设置
+            show: true,
+            lineStyle: {
+              width: 1,
+              color: ['#871b1a', '#638f41', '#d29e35', '#b6802b']
+              // color: '#000',
+              // color:(color)=>{
+              //   console.log(color,'??????')
+              // }
+            },
+          },
+          name: { //修改indicator文字的颜色
+            textStyle: {
+              color: "#fff",
+              fontSize:'20'
+            }
+          },
+          splitNumber: 4, //有几个圈
+          splitArea: {  //设置图表颜色，show的值为true
+            show: true,
+            areaStyle: {
+              // color:"#c1ddf8", //一般设置方式
+              //设置渐变背景色 new echarts.graphic.LinearGradient(a,b,c,d,arr)
+              //a ,b,c,d值可为0，1 a:1表示arr中的颜色右到左；c:1 arr中的颜色左到右
+              //b:1表示arr中的颜色下到上；d:1表示arr中的颜色上到下
+              // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+              //   { offset: 0, color: '#887D33' }, // 0% 处的颜色 
+              //   { offset: 0.75, color: '#7D4216' }, // 0% 处的颜色 
+              //   { offset: 1, color: '#430705' }// 100% 处的颜色
+              // ], false)
+              color: ['#638f41', '#887d33', '#7d4216', '#430705'],
+            }
+          }
+        },
+        series: [
+          {
+            name: '',
+            type: 'radar',
+            symbol: 'circle', // 单个数值点的样式，还可以取值'rect','angle'等
+            symbolSize: 0, // 数值点的大小
+            data: [
+              {
+                value: echart4[0],
+                name: '安全风险',
+                itemStyle: { //该数值区域样式设置
+                  normal: {
+                    color: 'rgb(44,198,255,0.8)', //背景颜色，还需设置areaStyle
+                    lineStyle: {
+                      color: 'rgb(44,198,255,0.8)', //边框颜色
+                    },
+                  },
+                },
+                label: {  //显示value中具体的数值
+                  normal: {
+                    show: false,
+                    textStyle: {  //更改数值样式
+                      color: '#43EDE3'
+                    }
+                  },
+                },
+                areaStyle: { //设置区域背景颜色透明度
+                  normal: {
+                    width: 1,
+                    opacity: 0.8,
+                  },
+                },
+              }
+            ]
+          }
+        ]
+      };
+      // tools.loopShowTooltip(myChart, option, {
+      //   interval: 2000,
+      //   loopSeries: true,
+      // });
+      myChart.setOption(option)
+    },
+    initChartR5 () {
+      let myChart = echarts.init(this.$refs['echartR5'])
+      let option = {
+        tooltip: {
+          formatter: data => {
+            return `${data[0].name}<br /><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[0].color.colorStops[0].color}"></span> ${data[0].seriesName}：${data[0].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[1].color.colorStops[0].color}"></span> ${data[1].seriesName}：${data[1].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[2].color.colorStops[0].color}"></span> ${data[2].seriesName}：${data[2].value}亿<br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${data[3].color.colorStops[0].color}"></span> ${data[3].seriesName}：${data[3].value}亿`
+          },
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        grid: {
+          top: '15%',
+          right: '3%',
+          left: '5%',
+          bottom: '35',
+        },
+        legend: {
+          data: ["预算额", "合同额", "结算额", "支付额"],
+          x: 'center',
+          y: '10px',
+          textStyle: {
+            // color: 'rgba(250,250,250,0.6)',
+            color: '#fff',
+            fontSize: "20",
+          },
+        },
+        xAxis: {
+          data: ['设备费','设计费','施工费','材料费'],
+          axisLine: {
+            show: true, //隐藏X轴轴线
+            lineStyle: {
+              color: '#005094',
+              width: 1,
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            // rotate: 40,
+            textStyle: {
+              color: '#fff',//'rgba(255,255,255,0.6)', //X轴文字颜色
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '亿元',
+            nameTextStyle: {
+              color: 'rgba(255,255,255,0.6)',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#68b4dd66',
+                type: 'dashed',
+              },
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#3D7495',
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: 'rgba(250,250,250,0.6)',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '预算额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#71D5FF',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart5.map(item => item.value),
+          },
+          {
+            name: '合同额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#4D6FF6',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart5.map(item => item.value2),
+          },
+          {
+            name: '结算额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#877CFC',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart5.map(item => item.value3),
+          },
+          {
+            name: '支付额',
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#52BF80',
+                  },
+                  {
+                    offset: 1,
+                    color: '#082550',
+                  },
+                ]),
+              },
+            },
+            data: echart5.map(item => item.value4),
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        interval: 2000,
+        loopSeries: true,
+      })
+    },
   },
 })

investment/styles/investHomeGroup.css

@@ -599,6 +599,16 @@ div {
   background-size: 100% auto;
   font-size: 26px;
 }
+.RightBox .right-br{
+  display: grid;
+  gap: 10px;
+  grid-template-rows: repeat(2, 1fr);  
+}
+.RightBox .right-brt{
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, 1fr);    
+}
 /* 公共css */
 /* 宽高纵横比 */
 .aspect-auto {

manpowerPort/index2.html

@@ -164,7 +164,7 @@
                   </div>
                 </div>
               </div>
-              <div class="box-center">
+              <!-- <div class="box-center">
                 <div class="t">
                   <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
                   <p>中层管理人数压缩率</p>
@@ -179,7 +179,7 @@
                     <p>改革后中层管理人数</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="box-center">
                 <div>
                   <p>{{centerData.changeInfo[2].value1}}<span>%</span></p>
@@ -196,6 +196,22 @@
                   </div>
                 </div>
               </div>
+              <div class="box-center">
+                <div class="t alignCenter">
+                  <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
+                  <p>在岗职工薪酬增长率</p>
+                </div>
+                <div class="flex">
+                  <div class="alignCenter" @click.stop="handleTitleShow('ggqzgzgpjxc.png')" style=" cursor: pointer;">
+                    <p style="color:#FBE139">{{numFormat(centerData.changeInfo[1].value2)}}<span>万元</span></p>
+                    <p>改革前在岗职工平均薪酬</p>
+                  </div>
+                  <div class="alignCenter">
+                    <p style="color:#17AC76">{{numFormat(centerData.changeInfo[1].value3)}}<span>万元</span></p>
+                    <p>改革后在岗职工平均薪酬</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>

manpowerPort/index2JNKG.html

@@ -24,7 +24,7 @@
 </head>
 
 <body>
-  <div id="app" v-cloak  @click="showTipClose">
+  <div id="app" v-cloak @click="showTipClose">
     <header class="my-header">
       <span class="left" @click="handleGoBack"><img style="width: 70px;height: 70px;" src="./images/back.png"></img>
       </span>
@@ -164,7 +164,7 @@
                   </div>
                 </div>
               </div>
-              <div class="box-center">
+              <!-- <div class="box-center">
                 <div class="t">
                   <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
                   <p>中层管理人数压缩率</p>
@@ -179,7 +179,7 @@
                     <p>改革后中层管理人数</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="box-center">
                 <div>
                   <p>{{centerData.changeInfo[2].value1}}<span>%</span></p>
@@ -196,6 +196,22 @@
                   </div>
                 </div>
               </div>
+              <div class="box-center">
+                <div class="t alignCenter">
+                  <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
+                  <p>在岗职工薪酬增长率</p>
+                </div>
+                <div class="flex">
+                  <div class="alignCenter" @click.stop="handleTitleShow('ggqzgzgpjxc.png')" style=" cursor: pointer;">
+                    <p style="color:#FBE139">{{numFormat(centerData.changeInfo[1].value2)}}<span>万元</span></p>
+                    <p>改革前在岗职工平均薪酬</p>
+                  </div>
+                  <div class="alignCenter">
+                    <p style="color:#17AC76">{{numFormat(centerData.changeInfo[1].value3)}}<span>万元</span></p>
+                    <p>改革后在岗职工平均薪酬</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>

manpowerPort/index3.html

@@ -163,7 +163,7 @@
                   </div>
                 </div>
               </div>
-              <div class="box-center">
+              <!-- <div class="box-center">
                 <div class="t">
                   <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
                   <p>中层管理人数压缩率</p>
@@ -178,7 +178,7 @@
                     <p>改革后中层管理人数</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="box-center">
                 <div>
                   <p>{{centerData.changeInfo[2].value1}}<span>%</span></p>
@@ -195,6 +195,22 @@
                   </div>
                 </div>
               </div>
+              <div class="box-center">
+                <div class="t alignCenter">
+                  <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
+                  <p>在岗职工薪酬增长率</p>
+                </div>
+                <div class="flex">
+                  <div class="alignCenter" @click.stop="handleTitleShow('ggqzgzgpjxc.png')" style=" cursor: pointer;">
+                    <p style="color:#FBE139">{{numFormat(centerData.changeInfo[1].value2)}}<span>万元</span></p>
+                    <p>改革前在岗职工平均薪酬</p>
+                  </div>
+                  <div class="alignCenter">
+                    <p style="color:#17AC76">{{numFormat(centerData.changeInfo[1].value3)}}<span>万元</span></p>
+                    <p>改革后在岗职工平均薪酬</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>

manpowerPort/index3MT.html

@@ -163,7 +163,7 @@
                   </div>
                 </div>
               </div>
-              <div class="box-center">
+              <!-- <div class="box-center">
                 <div class="t">
                   <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
                   <p>中层管理人数压缩率</p>
@@ -178,7 +178,7 @@
                     <p>改革后中层管理人数</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="box-center">
                 <div>
                   <p>{{centerData.changeInfo[2].value1}}<span>%</span></p>
@@ -195,6 +195,22 @@
                   </div>
                 </div>
               </div>
+              <div class="box-center">
+                <div class="t alignCenter">
+                  <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
+                  <p>在岗职工薪酬增长率</p>
+                </div>
+                <div class="flex">
+                  <div class="alignCenter" @click.stop="handleTitleShow('ggqzgzgpjxc.png')" style=" cursor: pointer;">
+                    <p style="color:#FBE139">{{numFormat(centerData.changeInfo[1].value2)}}<span>万元</span></p>
+                    <p>改革前在岗职工平均薪酬</p>
+                  </div>
+                  <div class="alignCenter">
+                    <p style="color:#17AC76">{{numFormat(centerData.changeInfo[1].value3)}}<span>万元</span></p>
+                    <p>改革后在岗职工平均薪酬</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>

manpowerPort/index4.html

@@ -164,7 +164,7 @@
                   </div>
                 </div>
               </div>
-              <div class="box-center">
+              <!-- <div class="box-center">
                 <div class="t">
                   <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
                   <p>中层管理人数压缩率</p>
@@ -179,7 +179,7 @@
                     <p>改革后中层管理人数</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
               <div class="box-center">
                 <div>
                   <p>{{centerData.changeInfo[2].value1}}<span>%</span></p>
@@ -196,6 +196,22 @@
                   </div>
                 </div>
               </div>
+              <div class="box-center">
+                <div class="t alignCenter">
+                  <p>{{centerData.changeInfo[1].value1}}<span>%</span></p>
+                  <p>在岗职工薪酬增长率</p>
+                </div>
+                <div class="flex">
+                  <div class="alignCenter" @click.stop="handleTitleShow('ggqzgzgpjxc.png')" style=" cursor: pointer;">
+                    <p style="color:#FBE139">{{numFormat(centerData.changeInfo[1].value2)}}<span>万元</span></p>
+                    <p>改革前在岗职工平均薪酬</p>
+                  </div>
+                  <div class="alignCenter">
+                    <p style="color:#17AC76">{{numFormat(centerData.changeInfo[1].value3)}}<span>万元</span></p>
+                    <p>改革后在岗职工平均薪酬</p>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </dv-border-box-8>