项目概览

dsk-operate-ui/src/views/detail/party-a/cooperate/index.vue

@@ -14,7 +14,7 @@
           >
             <template slot="slot">
               <div class="flex-box query-add">
-                <el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加商务信息</el-button>
+                <el-button type="primary" icon="el-icon-plus" @click="drawer = true">添加合作情况</el-button>
               </div>
             </template>
           </head-form>

dsk-operate-ui/src/views/project/overview/index.vue

@@ -3,7 +3,7 @@
     <div class="chart-top clearfix">
       <div class="left">
         <el-card class="box-card noborder">
-          <div class="flex">
+          <div  class="flex">
             <div class="top-icons" @click="linkTo()">
               <img class="top-img" src="@/assets/images/project/icon_6.png">
               <div class="number">{{statistics.totalCount}}<span>个</span></div>
@@ -119,7 +119,8 @@
       </el-card> -->
       <el-card class="box-card noborder pd16">
         <h3>储备项目统计</h3>
-        <div class="flex-box clue-box" v-if="viewData1.length>0">
+        <skeleton v-if="isSkeleton1" style="padding: 16px"></skeleton>
+        <div class="flex-box clue-box" v-if="viewData1.length>0&&!isSkeleton1">
           <div class="clue-echarts"><div id="echarts1" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
           <div class="table-item">
             <el-table
@@ -142,11 +143,12 @@
             </el-table>
           </div>
         </div>
-        <no-data  v-else/>
+        <no-data  v-if="viewData1.length==0"/>
       </el-card>
       <el-card class="box-card noborder pd16">
         <h3>储备项目资金来源</h3>
-        <div class="flex-box clue-box" v-if="viewData2.length>0">
+        <skeleton v-if="isSkeleton2" style="padding: 16px"></skeleton>
+        <div class="flex-box clue-box" v-if="viewData2.length>0&&!isSkeleton2">
           <div class="clue-echarts"><div id="echarts2" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
           <div class="table-item">
             <el-table
@@ -169,11 +171,12 @@
             </el-table>
           </div>
         </div>
-        <no-data  v-else/>
+        <no-data  v-if="viewData2.length==0"/>
       </el-card>
       <el-card class="box-card noborder pd16">
         <h3>已合作项目统计</h3>
-        <div class="flex-box clue-box" v-if="viewData3.length>0">
+        <skeleton v-if="isSkeleton3" style="padding: 16px"></skeleton>
+        <div class="flex-box clue-box" v-if="viewData3.length>0&&!isSkeleton3">
           <div class="clue-echarts"><div id="echarts3" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
           <div class="table-item">
             <el-table
@@ -196,7 +199,7 @@
             </el-table>
           </div>
         </div>
-        <no-data  v-else/>
+        <no-data  v-if="viewData3.length==0"/>
       </el-card>
       <el-card class="box-card noborder pd16">
         <h3>公招项目地区统计</h3>
@@ -217,7 +220,8 @@
           <el-radio-button label="近七天" ></el-radio-button>
           <el-radio-button label="自定义"></el-radio-button>
         </el-radio-group>
-        <div class="flex-box clue-box" v-if="viewData4.length>0">
+        <skeleton v-if="isSkeleton4" style="padding: 16px"></skeleton>
+        <div class="flex-box clue-box" v-if="viewData4.length>0&&!isSkeleton4">
           <div class="drawChinese">
             <div id="drawChinese" style="width: 411px; height: 360px;"></div>
             <!-- <img src="@/static/img/index/map-nhzd.png" class="nhzd" alt="南海诸岛" title="南海诸岛"> -->
@@ -245,7 +249,7 @@
             </el-table>
           </div>
         </div>
-        <no-data  v-else/>
+        <no-data  v-if="viewData4.length==0"/>
       </el-card>
       <el-card class="box-card noborder pd16">
         <h3>公招项目投资金额统计</h3>
@@ -266,7 +270,8 @@
           <el-radio-button label="近七天" ></el-radio-button>
           <el-radio-button label="自定义"></el-radio-button>
         </el-radio-group>
-        <div class="flex-box clue-box" v-if="viewData5.length>0">
+        <skeleton v-if="isSkeleton5" style="padding: 16px"></skeleton>
+        <div class="flex-box clue-box" v-if="viewData5.length>0&&!isSkeleton5">
           <div class="clue-echarts"><div id="echarts5" style="width: 100%;height:300px; margin: 0 auto;"></div></div>
           <div class="table-item">
             <el-table
@@ -286,7 +291,7 @@
             </el-table>
           </div>
         </div>
-        <no-data  v-else/>
+        <no-data v-if="viewData5.length==0"/>
       </el-card>
       <el-card class="box-card noborder" >
         <div >
@@ -311,7 +316,8 @@
               <el-radio-button label="自定义"></el-radio-button>
             </el-radio-group>
           </div>
-          <template v-if="viewData6.length>0" >
+          <skeleton v-if="isSkeleton6" style="padding: 16px"></skeleton>
+          <template v-if="viewData6.length>0&&!isSkeleton6" >
             <div class="scroll_box" ref="scrollRef" @scroll="scrollbottom()">
               <div class="item_wrap" v-for="(item,index) in viewData6" :key="index">
                 <h2>{{ item.recordInfo }}</h2>
@@ -339,7 +345,7 @@
               </div>
             </div>
           </template>
-          <no-data style="margin:20px 0"  v-else/>
+          <no-data style="margin:20px 0" v-if="viewData6.length==0"/>
         </div>
       </el-card>
     </div>
@@ -354,12 +360,19 @@
   import addproject from '../projectList/component/addProject'
   import NoData from '../../component/noData'
   import '@/assets/lib/china.js'
+  import skeleton from '@/views/project/projectList/component/skeleton'
 
 export default {
   name: 'Overview',
-  components:{addproject,NoData},
+  components:{addproject,NoData,skeleton},
   data() {
     return {
+      isSkeleton1:true,
+      isSkeleton2:true,
+      isSkeleton3:true,
+      isSkeleton4:true,
+      isSkeleton5:true,
+      isSkeleton6:true,
       projectName:'',
       datatype:'1',//切换类型
       viewData1:[],
@@ -406,7 +419,7 @@ export default {
     this.getAllRecord();
     getStatistics().then(res=>{
       if(res.code==200){
-        this.statistics = res.data
+        this.statistics = res.data;
       }
     })
     window.addEventListener("resize", this.resizeEcharts);
@@ -426,6 +439,7 @@ export default {
       }
       getAllRecord(this.recordParams).then(res=>{
         if(res.code==200){
+          this.isSkeleton6 = false;
           this.recordTotal = res.total
           this.viewData6 = this.viewData6.concat(res.rows)
         }
@@ -434,6 +448,7 @@ export default {
     getCount1(){
       getCount(0).then(res=>{
         if(res.code==200){
+          this.isSkeleton1 = false;
           this.viewData1 = res.data;
           if(this.viewData1.length>0){
             for(var i=0;i< this.viewData1.length;i++){
@@ -454,6 +469,7 @@ export default {
     getCount2(){
       getCount(2).then(res=>{
         if(res.code==200){
+          this.isSkeleton3 = false;
           this.viewData3 = res.data;
           if(res.data.length>0){
             this.$nextTick(()=>{
@@ -468,6 +484,7 @@ export default {
     getAmount(){
       getAmount().then(res=>{
         if(res.code==200){
+          this.isSkeleton2 = false;
           this.viewData2 = res.data;
           if(res.data.length>0){
             for(var i=0;i< this.viewData2.length;i++){
@@ -495,8 +512,8 @@ export default {
       }
       countGroupByProvince(data).then(res=>{
         if(res.code==200){
+          this.isSkeleton4 = false;
           this.viewData4 = res.data;
-          
           if(this.viewData4.length>0){
             this.viewData4.map(item=>{
               if(item.money>0){
@@ -533,6 +550,7 @@ export default {
       }
       rangByMoney(data).then(res=>{
         if(res.code==200){
+          this.isSkeleton5 = false;
           this.viewData5 = res.data.reverse();
           this.$nextTick(()=>{
             let chartDom5 = document.getElementById("echarts5")
@@ -561,7 +579,7 @@ export default {
         grid: {
           left: '3%',
           right: '4%',
-          bottom: '3%',
+          bottom: '10%',
           containLabel: true
         },
         xAxis: [
@@ -576,6 +594,7 @@ export default {
         ],
         yAxis: [
           {
+            name: '单位：个',
             type: 'value',
             splitLine : { //网格线
               lineStyle: {
@@ -584,6 +603,11 @@ export default {
             }
           },
           {
+            nameTextStyle: {
+              padding: [0, 10, 0, 50],    // 四个数字分别为上右下左与原位置距离
+              color: '#666666',
+            },
+            name: '单位：万元',
             type: 'value',
             splitLine : { //网格线
               show:false
@@ -668,7 +692,7 @@ export default {
 
     },
     initChart3(){
-      //储备项目统计
+      //合作项目统计
       let barData1 = [],xAxisData1 = [],lineData1=[];
       this.viewData3.length>0&&this.viewData3.map(item=>{
         barData1.push(item.businessCount)
@@ -701,6 +725,7 @@ export default {
         ],
         yAxis: [
           {
+            name: '单位：个',
             type: 'value',
             splitLine : { //网格线
               lineStyle: {
@@ -709,7 +734,12 @@ export default {
             }
           },
           {
+            name: '单位：万元',
             type: 'value',
+            nameTextStyle: {
+              padding: [0, 10, 0, 50],    // 四个数字分别为上右下左与原位置距离
+              color: '#666666',
+            },
             splitLine : { //网格线
               show:false
             },
@@ -1000,7 +1030,6 @@ export default {
 
 <style lang="scss" scoped>
 .chart-top{
-  margin-bottom: 12px;
   .left{
     float: left;
     height: 122px;