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

investment/investHome.html

@@ -95,7 +95,7 @@
               <div ref="echartR1" class="content"></div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="12">
+          <dv-border-box-8 :dur="12" style="margin-bottom: 0;">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资执行情况</span>
@@ -188,7 +188,7 @@
               </div>-->
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="12">
+          <dv-border-box-8 :dur="12" style="margin-bottom: 0;">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">重点项目监控</span>

investment/investHome2.html

@@ -185,7 +185,7 @@
           </dv-border-box-8>
           <dv-border-box-8 :dur="10" style="flex: 1;">
             <div class="title">
-              <span class="text">投前项目阶段分析</span>
+              <span class="text">项目阶段分析</span>
               <!-- <span class="tip-window">省重点项目</span> -->
             </div>
             <div class="content">
@@ -246,6 +246,11 @@
           <!-- <div class="pie" ref="echartR5" style="width: 100%; height: 100%;"></div> -->
         </div>
       </div>
+      <div class="tip" v-show="showTip3">
+        <div class="tip-down" @click="showTip3 = false">×</div>
+        <div class="tip1">{{ echartTitle }}</div>
+        <div class="pie" ref="echartT1" style="width: 100%; height: 100%;"></div>
+      </div>
     </dv-full-screen-container>
   </div>
   <script src="./js/investHome2.js"></script>

investment/js/investHome2.js

@@ -4,6 +4,8 @@ let app = new Vue({
     return {
       type: true, // 切换柱状图状态
       showTip2: false,
+      showTip3: false,
+      echartTitle: '',
       year: '2022',
       time: '',
       timer: '',
@@ -1051,13 +1053,13 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
           orient: 'horizontal',
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1074,8 +1076,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1097,6 +1099,14 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
     },
     initChartL5 () {
       let data = [
@@ -1104,8 +1114,10 @@ let app = new Vue({
         { value: [59.11, 38], name: '高端装备制造产业' },
         { value: [3.96, 5], name: '新材料产业' },
         { value: [2.12, 7], name: '生物产业' },
+        { value: [0, 0], name: '新能源汽车产业' },
         { value: [100.09, 79], name: '新能源产业' },
         { value: [15.48, 32], name: '节能环保产业' },
+        { value: [0, 0], name: '数字创意产业' },
         { value: [3.00, 3], name: '相关服务业' },
       ]
       let count = 0
@@ -1115,7 +1127,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL5'])
       let option = {
         title: {
-          text: '传统产业',
+          text: '战略性新兴产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1126,12 +1138,12 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1148,8 +1160,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1171,7 +1183,16 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL6 () {
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
+    },
+    initChartL6 () {
       let data = [
         { value: [25.82, 43], name: '化工产业' },
         { value: [17.36, 21], name: '煤层气产业' },
@@ -1180,6 +1201,7 @@ let app = new Vue({
         { value: [9.32, 5], name: '酿造' },
         { value: [71.12, 129], name: '建筑房地产' },
         { value: [9.11, 14], name: '农业' },
+        { value: [0, 0], name: '其他' },
       ]
       let count = 0
       data.forEach(item => {
@@ -1189,7 +1211,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL6'])
       let option = {
         title: {
-          text: '战略性新兴产业',
+          text: '特色优势产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1200,13 +1222,13 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
           // position: ['30%', '87%'],
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1223,8 +1245,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1246,12 +1268,22 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL7 () {
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
+    },
+    initChartL7 () {
       let data = [
         { value: [155.82, 51], name: '交通运输业' },
+        { value: [0, 0], name: '市政设施' },
         { value: [8.47, 19], name: '煤气层管网' },
         { value: [10.64, 24], name: '物流贸易' },
-        { value: [41.05, 46], name: '物流贸易' },
+        { value: [41.05, 46], name: '水务' },
         { value: [2.14, 7], name: '其他' },
       ]
       let count = 0
@@ -1261,7 +1293,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartL7'])
       let option = {
         title: {
-          text: '基础产业',
+          text: '公共基础等产业',
           x: 'center',
           y: '0%',
           textStyle: {
@@ -1272,12 +1304,12 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+              return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
-          show: true,
+          show: false,
           icon: 'circle',
           top: 'bottom',
           orient: 'vertical',
@@ -1294,8 +1326,8 @@ let app = new Vue({
             name: '',
             type: 'pie',
             // radius: ['0%', '70%'],
-            radius: ['40%', '55%'],
-            center: ['45%', '55%'],
+            radius: ['50%', '65%'],
+            center: ['50%', '55%'],
             itemStyle: {
               normal: {
                 borderColor: 'rgba(1,31,64,0.7)',
@@ -1317,6 +1349,14 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        that.showTip3 = true
+        setTimeout(() => {
+          that.initChartT1(data, option)
+        })
+      })
     },
     initChartR4 () {
       let myChart = echarts.init(this.$refs['echartR4'])
@@ -1649,7 +1689,7 @@ let app = new Vue({
         grid: {
           top: '22%',
           right: '5%',
-          left: '10%',
+          left: '15%',
           bottom: '15%',
         },
         yAxis: {
@@ -1906,6 +1946,44 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+    },
+    initChartT1(list, info) {
+      let count = 0
+      console.log(list, info)
+      this.echartTitle = info.title.text
+      let data = list
+      data.forEach(item => {
+        count += item.value[0]
+      })
+      let option = JSON.parse(JSON.stringify(info))
+      option.series[0].center = ['50%', '50%']
+      option.series[0].radius = ['60%', '75%']
+      option.legend = {
+        show: true,
+        icon: 'circle',
+        top: 'bottom',
+        orient: 'vertical',
+        right: '3%',
+        textStyle: {
+          color: '#9DB9EB',
+          fontSize: 16
+        },
+        itemWidth: 10,
+        itemHeight: 10
+      },
+      option.title.text =  ''
+      option.tooltip = {
+        trigger: 'item',
+        formatter: function (params) {
+            return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
+        }
+      }
+      let myChart = echarts.init(this.$refs['echartT1'])
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     }
   },
 })

investment/styles/investHome2.css

@@ -385,6 +385,10 @@ a {
   background-color: #05183c;
   flex: 1;
 }
+.right .content .content-right {
+  background-color: #05183c;
+  flex: 1;
+}
 .right .content .content-left .content-left-l {
   /* background-color: rgb(18 81 128 / 22%); */
   background-color: #05183c;
@@ -501,13 +505,14 @@ a {
 .tip1 {
   position: absolute;
   font-weight: bold;
-  width: 100px;
+  width: 150px;
   top: 17px;
   height: 30px;
   line-height: 30px;
   font-size: 20px;
   text-align: center;
-  left: calc(50% - 50px);
+  left: 50%;
+  transform: translate(-50%);
   background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;