修改

dsk-operate-ui/.env.development

@@ -12,8 +12,8 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 
 # 子系统地址
-# VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
-VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400"
+VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
+# VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400"
 
 # Bi大屏系统地址
 VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001"

dsk-operate-ui/src/api/detail/groupAccount/groupAccount.js

@@ -67,6 +67,14 @@ export function businessList(data) {
     data: data
   })
 }
+// 集团业绩-图表
+export function recentlyStatis(data) {
+  return request({
+    url: '/index/project/combine/recentlyStatis',
+    method: 'post',
+    data: data
+  })
+}
 
 // 集团招标
 export function bidPage(data) {

dsk-operate-ui/src/router/index.js

@@ -634,6 +634,19 @@ export const constantRoutes = [
       }
     ]
   },
+  //添加订阅
+  {
+    path: '',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '/search/subscribe',
+        component: () => import('@/views/detail'),
+      }
+    ]
+  },
   {
     path: '/structure',
     component: Layout,

dsk-operate-ui/src/views/detail/groupAccount/component/performance.vue

@@ -16,6 +16,25 @@
       </template>
     </head-form-new>
     <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
+
+    <p style="font-size: 12px;margin-top: 0;padding-left: 16px;">项目中标中金额<span style="color:#E6A23C;padding-left: 4px;">{{sumMoney}}万元</span></p>
+    <div class="chart" v-if="echartsDataState === false && !isSkeleton">
+      <div class="chart-left">
+        <div class="echarts-item">
+          <div class="echarts-title">项目类型分布</div>
+          <div id="echarts1" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item">
+          <div class="echarts-title">项目地区分布</div>
+          <div id="echarts2" style="height: 240px"></div>
+        </div>
+      </div>
+      <div class="chart-right" @click="handledialog">
+        更<br/>多<br/>分<br/>析<br/>
+        <i class="el-icon-more"></i>
+      </div>
+    </div>
+
     <tables
       v-if="!isSkeleton"
       :defaultSort="defaultSort"
@@ -53,15 +72,42 @@
     </tables>
 
     <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
+
+    <el-dialog title="集团业绩宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
+      <div class="echarts-content">
+        <div class="echarts-item">
+          <div class="echarts-title">项目类型分布</div>
+          <div id="echarts-xmlx" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item">
+          <div class="echarts-title">项目地区分布</div>
+          <div id="echarts-xmdq" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item">
+          <div class="echarts-title">项目投资额分布</div>
+          <div id="echarts-xmtz" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item">
+          <div class="echarts-title">业绩类型分布</div>
+          <div id="echarts-xmjb" style="height: 240px"></div>
+        </div>
+        <div class="echarts-item" style="width: 100%;">
+          <div class="echarts-title">合作项目数前十业主</div>
+          <div id="echarts-tze" style="height: 240px"></div>
+        </div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
   import mixin from '../../party-a/mixins/mixin'
-  import {businessList,exportWinBid} from '@/api/detail/groupAccount/groupAccount'
+  import {businessList,exportWinBid,recentlyStatis} from '@/api/detail/groupAccount/groupAccount'
   import dataRegion from '@/assets/json/dataRegion1'
   import { getDictType } from '@/api/main'
   import ExportDialog from "../../../component/export-dialog"
+  import * as echarts from 'echarts';
   export default {
     name: 'qualifications',
     props: ['customerId','combineName'],
@@ -163,7 +209,10 @@
           ],
           exportEXCEL:false
         },
-
+        dialogEchartsVisible:false,
+        echartsDataState:false,
+        echartsData:{},
+        sumMoney:0
       }
     },
     created() {
@@ -227,8 +276,18 @@
         businessList(data).then(res=>{
           this.tableData = res.code == 200 ? res.rows:[]
           this.tableDataTotal = res.total
-          this.isSkeleton = false
-          this.tableLoading = false
+          this.tableLoading = false;
+          recentlyStatis(data).then(res=>{
+            this.isSkeleton = false
+            if(res.code === 200 && res.data){
+              this.echartsDataState=false;
+              this.sumMoney=res.data.sumMoney
+              this.echartsData=res.data;
+              this.initChart(res.data)
+            }else {
+              this.echartsDataState=true;
+            }
+          })
         })
       },
       formatDate(timestamp) {
@@ -351,6 +410,329 @@
         this.exportData.dialogExportVisible=false;
         this.exportData.exportEXCEL={}
       },
+      handledialog(){
+        this.dialogEchartsVisible=true;
+        this.initChart1(this.echartsData)
+      },
+      initChart(row) {
+        var data=[];
+        for(let key in row.projectTypeList){
+          for(const i in row.projectTypeList[key]){
+            var obj={};
+            obj.name=i;
+            obj.value=row.projectTypeList[key][i];
+            data.push(obj)
+          }
+        }
+        var data1=[];
+        for(let key in row.provinceList){
+          for(const i in row.provinceList[key]){
+            var obj={};
+            obj.name=i;
+            obj.value=row.provinceList[key][i];
+            data1.push(obj)
+          }
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts1"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '85%',
+                center: ['50%', '50%'],
+                data: data,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart.setOption(option);
+          let myChart1 = echarts.init(document.getElementById("echarts2"))
+          let option1 ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '85%',
+                center: ['50%', '50%'],
+                data: data1,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart1.setOption(option1);
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+          });
+        })
+
+      },
+      initChart1(row) {
+        let data=[];
+        for(let key in row.projectTypeList){
+          for(const i in row.projectTypeList[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.projectTypeList[key][i];
+            data.push(obj)
+          }
+        }
+        let data1=[];
+        for(let key in row.provinceList){
+          for(const i in row.provinceList[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.provinceList[key][i];
+            data1.push(obj)
+          }
+        }
+
+        let data2=[]
+        for(let i=0; i<row.moneyRange.length; i++){
+          let obj={};
+          obj.name=row.moneyRange[i].rangeName;
+          obj.value=row.moneyRange[i].rate;
+          data2.push(obj)
+        }
+
+        let data3=[];
+        for(let key in row.boundTypeList){
+          for(const i in row.boundTypeList[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.boundTypeList[key][i];
+            data3.push(obj)
+          }
+        }
+        let data4=[];
+        for(let key in row.topTenCompany){
+          for(const i in row.topTenCompany[key]){
+            let obj={};
+            obj.name=i;
+            obj.value=row.topTenCompany[key][i];
+            data4.push(obj)
+          }
+        }
+
+        this.$nextTick(() => {
+          let myChart = echarts.init(document.getElementById("echarts-xmlx"))
+          let option ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '75%',
+                center: ['50%', '50%'],
+                data: data,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart.setOption(option);
+
+          let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
+          let option1 ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '75%',
+                center: ['50%', '50%'],
+                data: data1,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart1.setOption(option1);
+
+          let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
+          let option2 ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '75%',
+                center: ['50%', '50%'],
+                data: data2,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart2.setOption(option2);
+
+          let myChart3 = echarts.init(document.getElementById("echarts-xmjb"))
+          let option3 ={
+            tooltip: {
+              trigger: 'item',
+            },
+            color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
+            series: [
+              {
+                type: 'pie',
+                radius: '75%',
+                center: ['50%', '50%'],
+                data: data3,
+                emphasis: {
+                  itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          myChart3.setOption(option3);
+
+          let myChart4 = echarts.init(document.getElementById("echarts-tze"))
+          let option4 ={
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: {
+                type: 'cross'
+              }
+            },
+            xAxis: {
+              type: 'category',
+              axisLabel: {
+                formatter: function (params) {
+                  var str = "";                 // 最终拼接成的字符串
+                  var paramsLen = params.length;// 获取每项文字的个数
+                  var len = 6;                  // 每行能显示的字的个数（根据实际情况自己设置）
+                  var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
+                  if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
+                    for (var i = 0; i < rowNumber; i++) {
+                      var temp = "";            // 表示每一次截取的字符串
+                      var start = i * len;      // 开始截取的位置
+                      var end = start + len;    // 结束截取的位置
+                      if (i == rowNumber - 1) { // 最后一次不换行
+                        temp = params.substring(start, paramsLen);
+                      } else {                  // 每一次拼接字符串并换行
+                        temp = params.substring(start, end) + "\n";
+                      }
+                      str += temp;              // 最终拼成的字符串
+                    }
+                  } else {                      // 给新的字符串赋值
+                    str = params;
+                  }
+                  return str;                   //返回字符串
+                }
+              },
+              axisTick: false, //坐标轴刻度
+              axisPointer: {
+                type: 'shadow'
+              },
+              data: data4.map(item => item.name),
+            },
+            yAxis: [
+              {
+                type: 'value',
+                axisLabel: { //坐标轴刻度标签的相关设置
+                  color:"#666666"
+                },
+                name: '单位：亿元',
+                nameLocation: 'end',
+                nameTextStyle: {
+                  padding: [0, 10, 0, -30],    // 四个数字分别为上右下左与原位置距离
+                  color: '#666666',
+                }
+              },
+            ],
+            grid: {
+              top:40,
+              left:60,
+              right:20,
+              bottom:50,
+            },
+            series: [
+              {
+                name:'项目金额',
+                type: 'bar',
+                barWidth: 20,
+                tooltip: {
+                  valueFormatter: function (value) {
+                    return value;
+                  }
+                },
+                itemStyle: {
+                  normal:{
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                      offset: 0,
+                      color: '#E49708'
+                    }, {
+                      offset: 1,
+                      color: '#E49708'
+                    }]),
+                    // barBorderRadius:[20,20, 0, 0]
+                  }
+                },
+                data:data4.map(item => item.value),
+              }
+            ]
+          }
+          myChart4.setOption(option4);
+
+
+          window.addEventListener("resize", function () {
+            myChart.resize();//图表跟随页面大小变化宽度
+            myChart1.resize();//图表跟随页面大小变化宽度
+            myChart2.resize();//图表跟随页面大小变化宽度
+            myChart3.resize();//图表跟随页面大小变化宽度
+            myChart4.resize();//图表跟随页面大小变化宽度
+
+          });
+        })
+
+      },
     }
   }
 </script>
@@ -381,6 +763,70 @@
         background: #F0F3FA;
       }
     }
+
+    .chart{
+      height: 306px;
+      display: flex;
+      margin: 16px 0;
+      width: calc(100%);
+      .chart-left{
+        height: 306px;
+        border: 1px solid #DCDFE6;
+        border-radius: 4px;
+        width: calc(100% - 74px);
+        display: flex;
+        .echarts-title{
+          color: #303133;
+          font-size: 14px;
+          font-weight: 700;
+          padding-bottom: 14px;
+        }
+        .echarts-item{
+          width: calc(50% - 16px);
+          padding: 16px 0 16px 16px;
+        }
+      }
+      .chart-right{
+        height: 306px;
+        border-radius: 8px;
+        border: 1px solid #1373D9;
+        color: #1373D9;
+        text-align: center;
+        font-size: 14px;
+        padding-top: 103px;
+        cursor: pointer;
+        margin-left: 16px;
+        width: 56px;
+      }
+      .chart-right:hover{
+        background: #E8F1FC;
+      }
+    }
+
+
     @import "@/assets/styles/search-common.scss";
   }
+  .dialogEcharts{
+    ::v-deep .el-dialog {
+      .el-dialog__body{
+        padding: 16px 19px 0 16px;
+        height: 664px;
+        overflow: auto;
+      }
+      .echarts-item{
+        border: 1px solid #DCDFE6;
+        width: 547px;
+        display: inline-block;
+        border-radius: 4px;
+        padding: 16px;
+        margin-bottom: 16px;
+      }
+      .echarts-item:nth-child(2){
+        margin-left: 16px;
+      }
+      .echarts-item:nth-child(4){
+        margin-left: 16px;
+      }
+    }
+  }
 </style>

dsk-operate-ui/src/views/subscribe/index.vue

+<template>
+  <div v-loading="loading" class="market-container">
+    <iframe id="companyIframe" class="market-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" :src="src" />
+    <!--<iframe id="companyIframe" class="market-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" src="https://www.jianchayun.com/company/56546856314e567a69/?index=true" />-->
+  </div>
+</template>
+
+<script>
+import { steerScroll } from '@/assets/js/jskplug';
+import { dskAccessToken } from '@/api/common';
+import { encodeStr } from "@/assets/js/common";
+import MaxPageSizeTip from "@/views/components/MaxPageSizeTip.vue";
+import { getUipIdByCid } from '@/api/macro/macro';
+export default {
+  name: 'Subscribe',
+  components: {
+    MaxPageSizeTip
+  },
+  data() {
+    return {
+      encodeStr,
+      loading: false, // 是否加载完成-当前页控制
+      iframeTimer: '',  // 是否加载中定时器-当前页控制
+      footHeight: 0,  //底部高度，若为0（页面内部嵌套或者没有底部板块）
+      iframeHight: `${window.innerHeight}px`, // iframe高度-当前页控制
+      navigation: { isFixed: true, fixedHeight: 56, totalHeight: 68 },  // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
+      src: '',  //iframe嵌套页面地址
+      domain: 'https://plug.jiansheku.com', // 插件地址
+      // domain: 'https://pre-plug.jiansheku.com', // 插件地址测试
+      // domain: 'http://192.168.60.104:3400',
+      ak: 'aec7b3ff2y2q8x6t49a7e2c463ce21912', // 需要携带的sdkId
+      timelongs: 7200,//刷新token时间
+      tokentimer: null,
+      showMaxPageTip: false,
+      iframeIns: null,
+      systemCode:'ZTESJ', //每个项目传的对应参数都不一样
+    };
+  },
+  created() {
+    this.domain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS;
+    this.gettokens();
+    this.iframeObserver();
+  },
+  mounted() {
+    this.iframeLoading(); // 判断iframe页面是否加载完成-当前页控制
+    // steerScroll('companyIframe', this.navigation, this.footHeight, true); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+  },
+  beforeDestroy() {
+    clearInterval(this.iframeTimer); // -当前页控制
+    steerScroll('companyIframe', this.navigation, this.footHeight); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
+    clearInterval(this.tokentimer);
+    // 移除layout样式
+    this.iframeIns?.contentWindow ? this.iframeIns.contentWindow.postMessage("removeHtmlLayoutStyle", { targetOrigin: this.domain, }) : null;
+  },
+  methods: {
+    async iframeObserver() {
+      try {
+        await this.$nextTick();
+        this.iframeIns = document.querySelector(".market-iframe");
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    gettokens() {
+      dskAccessToken().then(res => {
+        if (res.code == 200) {
+          this.timelongs = res.data.expire;
+          this.ak = res.data.accessToken;
+          this.src = `${this.domain}/search/subscribe?ak=${this.ak}&initTime=${new Date().getTime()}&uid=${this.ak}&origin=${window.location.origin}&type=1&systemCode=${this.systemCode}&userCode=${this.$store.state.user.userId}`;
+          this.refreshtoken();
+        } else {
+          clearTimeout(this.tokentimer);
+        }
+      });
+    },
+    refreshtoken() {
+      this.tokentimer = setTimeout(() => {
+        dskAccessToken().then(res => {
+          if (res.code == 200) {
+            this.timelongs = res.data.expire;
+            this.ak = res.data.accessToken;
+            let ifam = document.getElementById('companyIframe');	//iframe的id
+            let akObj = res.data.expire;	//accessToken接口的返回值
+            let initTime = new Date().getTime(); 	//accessToken接口返回后的当前时间戳
+            ifam.contentWindow.postMessage({ 'accessToken': akObj.accessToken, 'initTime': initTime }, '*');
+          } else {
+            clearTimeout(this.tokentimer);
+          }
+        });
+      }, this.timelongs * 1000);
+    },
+    //判断iframe页面是否加载完成-当前页控制
+    iframeLoading() {
+      let iframeHeight = document.getElementById("companyIframe").clientHeight, number = 0;
+      this.iframeTimer = setInterval(() => {
+        number++;
+        if (document.getElementById("companyIframe").clientHeight != iframeHeight || number == 5000) {
+          this.loading = false;
+          clearInterval(this.iframeTimer);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.market-container {
+  width: 100%;
+  height: 100%;
+  padding: 16px 24px;
+  padding-right: 15px;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  top: 0;
+
+  .market-iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>