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

investment/investHome.html

@@ -12,7 +12,7 @@
   <!-- 引入js -->
   <script src="./libs/vue@2.7.10.js"></script>
   <script src="./libs/datav.min.js"></script>
-  <script src="./libs/echarts.min.js"></script>
+  <script src="./libs/echarts.min2.js"></script>
   <script src="./libs/echarts-gl.min.js"></script>
   <script src="./libs/element-ui@2.15.9.js"></script>
   <script src="./libs/axios.min.js"></script>

investment/js/data.js

@@ -6,10 +6,10 @@ let info = [
 ]
 let statusList = [
   { name: '煤炭和煤电', value: 8.6 },
-  { name: '煤炭和新能源', value: 10.6993 },
-  { name: '煤炭和化工', value: 7.1763 },
-  { name: '煤炭和数字', value: 14.9128 },
-  { name: '煤炭和降碳', value: 6.079607 },
+  { name: '煤电和新能源', value: 10.70 },
+  { name: '煤炭和化工', value: 7.18 },
+  { name: '煤炭和数字', value: 14.91 },
+  { name: '煤炭和降碳', value: 6.08 },
 ]
 let executeList = [
   { name: '山西焦煤', value: 189.07, value2: 121.59 },

investment/js/investHome.js

@@ -57,6 +57,7 @@ let app = new Vue({
     if (this.timer) {
       clearInterval(this.timer);
     }
+    clearInterval(this.timeOut)
   },
   mounted() {
     setTimeout(() => {
@@ -73,9 +74,6 @@ let app = new Vue({
       this.initProjectList()
     }, 0)
   },
-  beforeDestroy(){
-    clearInterval(this.timeOut)
-  },
   methods: {
     numFormat(value) {
       if (!value) return '0'
@@ -1133,7 +1131,7 @@ let app = new Vue({
     //     let k =
     //         typeof internalDiameterRatio !== 'undefined'
     //             ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-    //             : 1 / 3;
+    //             : 1 / 5;
 
     //     // 新增标签 series @20210613
     //     let labelSeries = {
@@ -1524,9 +1522,18 @@ let app = new Vue({
       let option = {
         tooltip: {
           trigger: 'item',
-          position: ['65%', '42%'],
+          //position: ['65%', '42%'],
+          position: (point,params,dom,rect,size) => {
+            if(params.name == '传统产业'){
+              return ['55%','25%']
+            } else if (params.name == '战略新兴产业') {
+              return ['55%','65%']
+            } else if (params.name == '基础产业') {
+              return ['18%','35%']
+            }
+    },
           formatter: params => {
-            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value} <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资占比：${params.percent}%`
+            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.percent}% <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 金额：${params.value}亿`
           },  //+ '<br/>'+ '{a1}：{c1}' + '%',
           axisPointer: {
             type: 'cross',
@@ -1607,11 +1614,44 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL2'])
       let option = {
         tooltip: {
+          formatter: data => {
+            console.log(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}亿`
+          },
           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: '16%',
           right: '3%',
@@ -1648,8 +1688,9 @@ let app = new Vue({
         yAxis: [
           {
             type: 'value',
+            name: '亿元',
             nameTextStyle: {
-              color: '#ebf8ac',
+              color: 'rgba(255,255,255,0.6)',
             },
             splitLine: {
               show: true,
@@ -1720,6 +1761,32 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let arr =  executeList.map(item => item.value2)
+      this.timeOut = setInterval(function () {
+       
+        let startValue = myChart.getModel().option.dataZoom[0].startValue;
+        let endValue = myChart.getModel().option.dataZoom[0].endValue;
+        let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴
+        let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
+        // 每次向后滚动一个，最后一个从头开始。
+        // console.log(option.dataZoom[0].endValue);
+        
+        if (option.dataZoom[0].endValue >= 12) {
+          option.dataZoom[0].endValue = 5
+          option.dataZoom[0].startValue = 0
+        } else {
+            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 6
+            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 6
+        }
+
+        // myChart.dispatchAction({
+        //   type: 'showTip',
+        //   seriesIndex: 0,
+        //   dataIndex: startValue +1,
+        // });
+        myChart.setOption(option);
+      }, 12000);
+      
     },
     initChartR1() {
       let myChart = echarts.init(this.$refs['echartL1'])
@@ -1835,6 +1902,7 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+
     },
 
     initChartR2() {
@@ -1842,9 +1910,15 @@ let app = new Vue({
       let option = {
         tooltip: {
           trigger: 'item',
-          position: ['65%', '42%'],
+          position: (point,params,dom,rect,size) => {
+                  if(params.name == '新建'){
+                    return ['55%','45%']
+                  } else {
+                    return ['15%','40%']
+                  }
+          },
           formatter: params => {
-            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 项目数量：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
+            return `<span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> ${params.name}：${params.value}个 <br/><span style="display:inline-block;border-radius:50%; width:7px;height:7px;background-color:${params.color}"></span> 投资完成额：${params.data.value2}亿`
           },  //+ '<br/>'+ '{a1}：{c1}' + '%',
           axisPointer: {
             type: 'cross',
@@ -1884,7 +1958,7 @@ let app = new Vue({
       }
       myChart.setOption(option)
       tools.loopShowTooltip(myChart, option, {
-        nterval: 2000,
+        nterval: 10000,
         loopSeries: true,
       })
     },

investment/styles/investHome.css

@@ -457,7 +457,7 @@ a {
   left: 0; */
 }
 .tip-box {
-  z-index: 9;
+  z-index: 99999999;
   position: fixed;
   /* top: 35%;
   left: 32.5%; */
@@ -467,18 +467,18 @@ a {
   height: 56vh;
   top: calc(50% - 26vh);
   left: calc(50% - 450px);
-  background: url("../images/alert.png") no-repeat center;
+  background: url('../images/popup.png') no-repeat center;
   /* background-color: #133b65; */
   background-size: 100% 100%;
   padding: 100px 60px 50px;
 }
 .tip-title {
   position: absolute; 
-  top:10px; 
+  top:-2px; 
   left: calc(50% - 200px); 
   width: 400px; 
   text-align: center;
-  font-size: 32px;
+  font-size: 24px;
 }
 .tip-down {
   position: absolute;