Ver código fonte

增加index 2,3,4 灯光效果

zhbyyy 2 anos atrás
pai
commit
b5b2451406
4 arquivos alterados com 112 adições e 113 exclusões
  1. 86 87
      manpower/js/index.js
  2. 6 6
      manpower/js/index2.js
  3. 10 10
      manpower/js/index3.js
  4. 10 10
      manpower/js/index4.js

+ 86 - 87
manpower/js/index.js

@@ -15,7 +15,6 @@ let app = new Vue({
       },
       centerData: '',
       storageRecordConfig: {
-        waitTime: 200000,
         header: ['', '时间', '所属集团', '工作情况'],
         headerBGC: '#05507b33',
         oddRowBGC: '#69c0ff0f',
@@ -23,7 +22,7 @@ let app = new Vue({
         headerHeight: '40',
         columnWidth: [150, 150],
         rowNum: 4,
-        align: ['right','center','center','center'],
+        align: ['right', 'center', 'center', 'center'],
         data: [
           ['<span class="lightOut"><span class="light red"></span></span>', '2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
           ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年2月', '山西文旅', '不能按期完成序时进度'],
@@ -72,11 +71,11 @@ let app = new Vue({
         tooltip: {
           trigger: 'axis',
           textStyle: { fontSize: 18 },
-          axisPointer: { 
-              type: 'cross', 
-              label: { 
-                fontSize: 18
-              }
+          axisPointer: {
+            type: 'cross',
+            label: {
+              fontSize: 18
+            }
           },
         },
         grid: {
@@ -298,7 +297,7 @@ let app = new Vue({
             barWidth: 15,
             itemStyle: {
               color: params => {
-                if( params.value > dataL2[1][params.dataIndex]) {
+                if (params.value > dataL2[1][params.dataIndex]) {
                   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                     {
                       offset: 0,
@@ -311,17 +310,17 @@ let app = new Vue({
                   ])
                 } else {
                   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                          {
-                            offset: 0,
-                            color: '#69c0ff',
-                          },
-                          {
-                            offset: 1,
-                            color: '#082550',
-                          },
-                        ])
+                    {
+                      offset: 0,
+                      color: '#69c0ff',
+                    },
+                    {
+                      offset: 1,
+                      color: '#082550',
+                    },
+                  ])
                 }
-            },
+              },
             },
             data: dataL2[0]
           },
@@ -471,7 +470,7 @@ let app = new Vue({
           },
         },
       })
-      option.tooltip.formatter = '{a0}:{c0}' +'<br/>'+ '{a1}:{c1}' + '%'
+      option.tooltip.formatter = '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%'
       myChart.setOption(option)
     },
     initChartL4 () {
@@ -623,7 +622,7 @@ let app = new Vue({
           },
         },
       })
-      option.tooltip.formatter = '{a0}:{c0}' +'<br/>'+ '{a1}:{c1}' + '%'
+      option.tooltip.formatter = '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%'
       myChart.setOption(option)
     },
     initChartL6 () {
@@ -729,11 +728,11 @@ let app = new Vue({
             smooth: false,
             itemStyle: {
               color: params => {
-                if( dataL7[0][params.dataIndex] > 0 && params.value < 0) {
+                if (dataL7[0][params.dataIndex] > 0 && params.value < 0) {
                   return 'red'
-                }else {
+                } else {
                   return '#b889ea'
-                } 
+                }
               }
             },
             lineStyle: {
@@ -748,7 +747,7 @@ let app = new Vue({
       option.legend.data = ['人数变化', '劳动生产率同比变化']
       option.legend.show = true
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      option.tooltip.formatter = '{a0}:{c0}' + '%' +'<br/>'+ '{a1}:{c1}' + '%'
+        option.tooltip.formatter = '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
       option.yAxis.push({
         type: 'value',
         axisLine: {
@@ -816,11 +815,11 @@ let app = new Vue({
             smooth: false,
             itemStyle: {
               color: params => {
-                if( dataL8[0][params.dataIndex] > 0 && params.value < 0) {
+                if (dataL8[0][params.dataIndex] > 0 && params.value < 0) {
                   return 'red'
-                }else {
+                } else {
                   return '#b889ea'
-                } 
+                }
               }
             },
             lineStyle: {
@@ -835,7 +834,7 @@ let app = new Vue({
       option.legend.data = ['人数变化', '人工成本利润率同比变化']
       option.legend.show = true
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      option.tooltip.formatter = '{a0}:{c0}' + '%' +'<br/>'+ '{a1}:{c1}' + '%'
+        option.tooltip.formatter = '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
       myChart.setOption(option)
     },
     // 中间图表---------------------------------------------开始
@@ -851,22 +850,22 @@ let app = new Vue({
             barWidth: 15,
             itemStyle: {
               color: params => {
-                  if( params.value < 0 && c2[0][params.dataIndex] < 0) {
-                    return 'red'
-                  } else if(params.value < 0 ) {
-                    return 'yellow'
-                  } else {
-                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                              offset: 0,
-                              color: '#69c0ff',
-                            },
-                            {
-                              offset: 1,
-                              color: '#082550',
-                            },
-                          ])
-                  }
+                if (params.value < 0 && c2[0][params.dataIndex] < 0) {
+                  return 'red'
+                } else if (params.value < 0) {
+                  return 'yellow'
+                } else {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#69c0ff',
+                    },
+                    {
+                      offset: 1,
+                      color: '#082550',
+                    },
+                  ])
+                }
               },
             },
             data: c1[0]
@@ -874,7 +873,7 @@ let app = new Vue({
           {
             name: '全员劳动生产率同比',
             type: 'line',
-            yAxisIndex: 1, 
+            yAxisIndex: 1,
             smooth: true, //平滑曲线显示
             showAllSymbol: true, //显示所有图形。
             symbol: 'circle', //标记的图形为实心圆
@@ -948,7 +947,7 @@ let app = new Vue({
       option.legend.data = ['全员劳动生产率同比', '全员劳动生产率(万/人)']
       option.legend.show = true
       option.grid.right = '15%'
-      option.tooltip.formatter = '{a0}:{c0}' +'<br/>'+ '{a1}:{c1}' + '%'
+      option.tooltip.formatter = '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%'
       option.yAxis.push({
         type: 'value',
         axisLine: {
@@ -1058,22 +1057,22 @@ let app = new Vue({
             },
             itemStyle: {
               color: params => {
-                  if( params.value < 0 && c2[0][params.dataIndex] < 0) {
-                    return 'red'
-                  } else if(params.value < 0 ) {
-                    return 'yellow'
-                  } else {
-                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                              offset: 0,
-                              color: '#69c0ff',
-                            },
-                            {
-                              offset: 1,
-                              color: '#082550',
-                            },
-                          ])
-                  }
+                if (params.value < 0 && c2[0][params.dataIndex] < 0) {
+                  return 'red'
+                } else if (params.value < 0) {
+                  return 'yellow'
+                } else {
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#69c0ff',
+                    },
+                    {
+                      offset: 1,
+                      color: '#082550',
+                    },
+                  ])
+                }
               },
             },
             data: c2[1]
@@ -1084,7 +1083,7 @@ let app = new Vue({
       option.legend.show = true
       option.grid.right = '15%'
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      option.tooltip.formatter = '{a0}:{c0}' + '%' +'<br/>'+ '{a1}:{c1}' + '%'
+        option.tooltip.formatter = '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
       option.yAxis.push({
         type: 'value',
         axisLine: {
@@ -1120,7 +1119,7 @@ let app = new Vue({
       dataR1[1].forEach(item => {
         dataTemp2.push(item + 1);
       });
-    
+
       let option = {
         ..._.cloneDeep(commonOptions),
         series: [
@@ -1170,9 +1169,9 @@ let app = new Vue({
       option.title.text = '当前各省属企业招聘需求公示人次'
       option.legend.data = ['招聘需求公告次数', '招聘需求公告累计招聘人次']
       option.legend.show = true
-      option.tooltip.formatter = function(value){
-        return value[0].axisValue+':'+ (value[0].value -1)+'<br>'+
-        value[1].axisValue+':'+ (value[1].value-1)
+      option.tooltip.formatter = function (value) {
+        return value[0].axisValue + ':' + (value[0].value - 1) + '<br>' +
+          value[1].axisValue + ':' + (value[1].value - 1)
       }
       option.yAxis[0] = {
         type: 'log',
@@ -1203,10 +1202,10 @@ let app = new Vue({
       let dataTemp = []
       let dataTemp2 = []
       dataR2[0].forEach(item => {
-          dataTemp.push(item+1);
+        dataTemp.push(item + 1);
       });
       dataR2[1].forEach(item => {
-        dataTemp2.push(item+1);
+        dataTemp2.push(item + 1);
       });
       let option = {
         ..._.cloneDeep(commonOptions),
@@ -1257,9 +1256,9 @@ let app = new Vue({
       option.title.text = '当前各省属企业录用结果公示人次'
       option.legend.data = ['录用结果公示次数', '录用结果公示累计公示人数']
       option.legend.show = true
-      option.tooltip.formatter = function(value){
-        return value[0].axisValue+':'+ (value[0].value -1)+'<br>'+
-        value[1].axisValue+':'+ (value[1].value-1)
+      option.tooltip.formatter = function (value) {
+        return value[0].axisValue + ':' + (value[0].value - 1) + '<br>' +
+          value[1].axisValue + ':' + (value[1].value - 1)
       }
       option.yAxis[0] = {
         type: 'log',
@@ -1530,21 +1529,21 @@ let app = new Vue({
             smooth: false,
             itemStyle: {
               color: params => {
-                if( params.value > 0 && fjxdataL2[0][params.dataIndex] < 0) {
+                if (params.value > 0 && fjxdataL2[0][params.dataIndex] < 0) {
                   return 'yellow'
                 } else {
                   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                          {
-                            offset: 0,
-                            color: '#69c0ff',
-                          },
-                          {
-                            offset: 1,
-                            color: '#082550',
-                          },
-                        ])
+                    {
+                      offset: 0,
+                      color: '#69c0ff',
+                    },
+                    {
+                      offset: 1,
+                      color: '#082550',
+                    },
+                  ])
                 }
-            },
+              },
             },
             lineStyle: {
               color: '#69C0FF',
@@ -1556,9 +1555,9 @@ let app = new Vue({
       }
       option.title.text = '各省属企业月利润与月薪酬变动情况'
       option.legend.data = ['2022年利润累计涨幅率', '2022年薪酬累计涨幅率']
-      option.tooltip.formatter = '{a0}:{c0}' + '%' +'<br/>'+ '{a1}:{c1}' + '%'
+      option.tooltip.formatter = '{a0}:{c0}' + '%' + '<br/>' + '{a1}:{c1}' + '%'
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      myChart.setOption(option)
+        myChart.setOption(option)
     },
     initChartR7 () {
       let myChart = echarts.init(this.$refs['echartR7'])
@@ -1591,7 +1590,7 @@ let app = new Vue({
       option.legend.show = false
       option.tooltip.formatter = '{a0}:{c0}' + '%'
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      myChart.setOption(option)
+        myChart.setOption(option)
     },
     initChartR8 () {
       let myChart = echarts.init(this.$refs['echartR8'])
@@ -1624,7 +1623,7 @@ let app = new Vue({
       option.legend.show = false
       option.tooltip.formatter = '{a0}:{c0}' + '%'
       option.yAxis[0].axisLabel.formatter = '{value} %',
-      myChart.setOption(option)
+        myChart.setOption(option)
     },
   },
 })

+ 6 - 6
manpower/js/index2.js

@@ -20,12 +20,12 @@ let app = new Vue({
         rowNum: 4,
         align: ['center'],
         data: [
-          ['2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年2月', '山西文旅', '不能按期完成序时进度'],
-          ['2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
-          ['2022年4月', '国际能源', '薪酬结果没有做到公开'],
-          ['2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年6月', '山西焦煤', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年2月', '山西文旅', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年4月', '国际能源', '薪酬结果没有做到公开'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年6月', '山西焦煤', '不能按期完成序时进度'],
         ],
       },
       storageRecordConfig2: {

+ 10 - 10
manpower/js/index3.js

@@ -20,12 +20,12 @@ let app = new Vue({
         rowNum: 4,
         align: ['center'],
         data: [
-          ['2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年2月', '山西文旅', '不能按期完成序时进度'],
-          ['2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
-          ['2022年4月', '国际能源', '薪酬结果没有做到公开'],
-          ['2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年6月', '山西焦煤', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年2月', '山西文旅', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年4月', '国际能源', '薪酬结果没有做到公开'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年6月', '山西焦煤', '不能按期完成序时进度'],
         ],
       },
       storageRecordConfig2: {
@@ -1134,14 +1134,14 @@ let app = new Vue({
       option.legend.show = true
       option.yAxis = [
         {
-          max: function(val) {
+          max: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (Math.abs(val.max) * 1.2).toFixed(0)
             } else {
               return (Math.abs(val.min) * 1.2).toFixed(0)
             }
           },
-          min: function(val) {
+          min: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (-Math.abs(val.max) * 1.2).toFixed(0)
             } else {
@@ -1163,14 +1163,14 @@ let app = new Vue({
           },
         },
         {
-          max: function(val) {
+          max: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (Math.abs(val.max) * 1.2).toFixed(0)
             } else {
               return (Math.abs(val.min) * 1.2).toFixed(0)
             }
           },
-          min: function(val) {
+          min: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (-Math.abs(val.max) * 1.2).toFixed(0)
             } else {

+ 10 - 10
manpower/js/index4.js

@@ -20,12 +20,12 @@ let app = new Vue({
         rowNum: 4,
         align: ['center'],
         data: [
-          ['2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年2月', '山西文旅', '不能按期完成序时进度'],
-          ['2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
-          ['2022年4月', '国际能源', '薪酬结果没有做到公开'],
-          ['2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
-          ['2022年6月', '山西焦煤', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年2月', '山西文旅', '不能按期完成序时进度'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年3月', '大地控股', '已经实现中长期激励机制贯彻'],
+          ['<span class="lightOut"><span class="light red"></span></span>', '2022年4月', '国际能源', '薪酬结果没有做到公开'],
+          ['<span class="lightOut"><span class="light yellow"></span></span>', '2022年5月', '山西焦煤', '已经开展高层次人才引进工作'],
+          ['<span class="lightOut"><span class="light green"></span></span>', '2022年6月', '山西焦煤', '不能按期完成序时进度'],
         ],
       },
       storageRecordConfig2: {
@@ -1142,14 +1142,14 @@ let app = new Vue({
       option.legend.show = true
       option.yAxis = [
         {
-          max: function(val) {
+          max: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (Math.abs(val.max) * 1.2).toFixed(0)
             } else {
               return (Math.abs(val.min) * 1.2).toFixed(0)
             }
           },
-          min: function(val) {
+          min: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (-Math.abs(val.max) * 1.2).toFixed(0)
             } else {
@@ -1171,14 +1171,14 @@ let app = new Vue({
           },
         },
         {
-          max: function(val) {
+          max: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (Math.abs(val.max) * 1.2).toFixed(0)
             } else {
               return (Math.abs(val.min) * 1.2).toFixed(0)
             }
           },
-          min: function(val) {
+          min: function (val) {
             if (Math.abs(val.max) > Math.abs(val.min)) {
               return (-Math.abs(val.max) * 1.2).toFixed(0)
             } else {