大屏修改

front/src/api/assertReport.js

@@ -0,0 +1,72 @@
+import request from '@/utils/request'
+//获取中间地图
+export function getDistrictFundStatement() {
+  return request({
+    url: '/processForm/tabilityapplication/getDistrictFundStatement',
+    method: 'get',
+  })
+}
+//左侧获取组件资源节约资金列表
+export function getComponentFundStatement() {
+    return request({
+      url: '/processForm/tabilityapplication/getComponentFundStatement',
+      method: 'get',
+    })
+  }
+//左侧获取应用资源列表
+export function getResourceFundStatement() {
+    return request({
+      url: '/processForm/tabilityapplication/getResourceFundStatement',
+      method: 'get',
+    })
+  }
+//左侧基础设施
+export function getInfrastructureFundStatement() {
+    return request({
+      url: '/processForm/tabilityapplication/getInfrastructureFundStatement',
+      method: 'get',
+    })
+  }
+  //右侧市级部门共享排行
+export function getProvideDeptFundStatement() {
+    return request({
+      url: '/processForm/tabilityapplication/getProvideDeptFundStatement',
+      method: 'get',
+    })
+  }
+  //右侧市级部门申请排行
+  export function getApplyDeptFundStatement() {
+    return request({
+      url: '/processForm/tabilityapplication/getApplyDeptFundStatement',
+      method: 'get',
+    })
+  }
+//右侧区市提供排行
+export function getProvideDistrictFundStatement() {
+        return request({
+          url: '/processForm/tabilityapplication/getProvideDistrictFundStatement',
+          method: 'get',
+        })
+      }
+//右侧区市申请排行
+export function getApplyDistrictFundStatement() {
+        return request({
+          url: '/processForm/tabilityapplication/getApplyDistrictFundStatement',
+          method: 'get',
+        })
+      }
+//右侧资源汇聚总量
+export function selectTotal() {
+    return request({
+      url: '/resource/selectTotal',
+      method: 'get',
+    })
+  }
+  //首页 获取总节省资金
+  //右侧资源汇聚总量
+export function getApplyPriceCount() {
+    return request({
+      url: '/processForm/tabilityapplication/getApplyPriceCount',
+      method: 'get',
+    })
+  }

front/src/utils/arrayMethod.js

@@ -0,0 +1,150 @@
+/*
+ * @Author: hisense.wuhongjian
+ * @Date: 2021-08-12 10:50:17
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2021-08-12 14:20:07
+ * @Description: 数组公共方法
+ */
+/**
+ * @description: 根据属性名过滤数组，支持一维属性及二维属性
+ * @param {*} arr 待过滤的数组
+ * @param {*} param 一维属性 'param' 二维属性 'param1[param2]'
+ * @return {*} 过滤之后的数组
+ */
+export function arrFilterByParam(arr, param) {
+  const res = new Map();
+  const paramArr = param.split('[');
+  if (paramArr.length > 1) {
+    const first = paramArr[0];
+    const second = paramArr[1].split(']')[0];
+    return arr.filter(
+      (list) => !res.has(list[first][second]) && res.set(list[first][second], 1));
+  } else {
+    return arr.filter(
+      (list) => !res.has(list[param]) && res.set(list[param], 1));
+  }
+}
+//获取时间戳转换为日期格式 或者 2021-09-24 19:53:01:765 转化为正常时间。
+// filters: {
+//     formatDate(time) {
+//         var date = new Date(time);
+//         return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
+//     }
+// },
+//{{ 输入时间 | formatDate }}
+export function formatDate (date, fmt) {
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+    }
+    let o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+    };
+    for (let k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+            let str = o[k] + '';
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
+        }
+    }
+    return fmt;
+};
+
+function padLeftZero (str) {
+    return ('00' + str).substr(str.length);
+};
+
+// 把数字改成数组。
+export function NumbersConvertedToArrays(inNum) {
+    const str = inNum.toString();
+    const arr = str.split("");
+    const arrlenght = arr.length;
+    if (arrlenght == 2) {
+        arr.unshift(0);
+    }
+    if (arrlenght == 1) {
+        arr.unshift(0);
+        arr.unshift(0);
+    }
+    return arr;
+};
+// var lon = 107.631131;
+// var lat = 29.2331231;
+// var lonDMS = transformDMS(lon, "lon");
+// var latDMS = transformDMS(lat, "lat");
+
+// console.log(lonDMS); // 107°44′35″E
+// console.log(latDMS); // 29°14′17″N
+ // 经纬度转度分秒
+ export function transformDMS(degree, direction) {
+    var D = plusZeroAtHead(Math.floor(degree));
+  var M = plusZeroAtHead(Math.floor((degree - D) * 60));
+  var S = plusZeroAtHead(Math.floor(((degree - D) * 60 - M) * 60));
+  var result = D + "°" + M + "′" + S + "″";
+
+  // 如果是个位数， 则在首位加 0
+  function plusZeroAtHead(num) {
+      if (num > -10 && num < 0) {
+          num = "-0" + Math.abs(num)
+      }
+      if (num > 0 && num < 10) {
+          return "0" + num
+      }
+      return num;
+  }
+
+  if (direction === "lon") {
+      D > 0 ? result += "E" : result += "W";
+      return result;
+  }
+  if (direction === "lat") {
+      D > 0 ? result += "N" : result += "S";
+      return result;
+  }
+  return result;
+};
+export function getBlob(url,cb) {
+    var xhr = new XMLHttpRequest();
+    let that=this;
+    xhr.open('GET', url, true);
+    xhr.responseType = 'blob';
+    xhr.onload = function() {
+        if (xhr.status === 200) {
+            cb(xhr.response);
+        }
+    };
+    xhr.send();
+};
+/**
+ * 保存
+ * @param  {Blob} blob
+ * @param  {String} filename 想要保存的文件名称
+ */
+export function saveAs(blob, filename) {
+    if (window.navigator.msSaveOrOpenBlob) {
+        navigator.msSaveBlob(blob, filename);
+    } else {
+        var link = document.createElement('a');
+        var body = document.querySelector('body');
+
+        link.href = window.URL.createObjectURL(blob);
+        link.download = filename;
+
+        // fix Firefox
+        link.style.display = 'none';
+        body.appendChild(link);
+
+        link.click();
+        body.removeChild(link);
+
+        window.URL.revokeObjectURL(link.href);
+    }
+};
+
+//获取天气图标logo  公共部分
+
+
+
+

front/src/views/assertReport/components/ReservoirBottom.vue

@@ -0,0 +1,130 @@
+
+<template>
+    <div class="right-survey">
+  
+      <div class="platform-overview-bottom">
+        <div class="top"><span class="title">资源汇聚总量</span></div>
+        <div class="bottom">
+          <div
+            v-for="(item, index) in servicesNum"
+            :key="index"
+            class="component-services-content-right-left-content-son"
+          >
+            <p>{{ item.type }}</p>
+            <p class="num">{{ item.count }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+    import {
+      selectTotal
+    } from '@/api/assertReport'
+  export default {
+   
+    components: {},
+  
+    mounted() {
+      this.selectAllTotal()
+    },
+    data() {
+      //这里存放数据
+      return {
+       
+        servicesNum: [],
+      }
+    },
+  
+    methods: {
+
+      selectAllTotal(){
+        selectTotal().then((res) => {
+         this.servicesNum=res.data.data.total
+        })
+      }
+  }
+  }
+  </script>
+  <style lang='less' scoped>
+  .top5-content::-webkit-scrollbar {
+    width: 6px;
+    /*height: 4px;*/
+  }
+  
+  .top5-content::-webkit-scrollbar-thumb {
+    background-color: #00deff;
+  }
+  .map-search-result::-webkit-scrollbar-track,
+  .top5-content::-webkit-scrollbar-track {
+    background-color: #424748;
+  }
+  @keyframes topup50 {
+    from {
+      top: 50%;
+    }
+    to {
+      top: -100%;
+    }
+  }
+  .right-survey {
+  
+    height: 100%;
+    color: #f0fafa;
+    font-size: 18px;
+    display: flex;
+    flex-direction: column;
+  
+  
+    .platform-overview-bottom {
+      margin-top: 20px;
+      width: 100%;
+      height: 1.7rem;
+      background: rgba(0, 108, 188, 0.2);
+      border-radius: 2px;
+      border: 1px solid rgba(0, 108, 188, 0.7);
+      text-decoration: none;
+      outline: none;
+      -webkit-transition: all 100ms ease-out;
+      -moz-transition: all 100ms ease-out;
+      transition: all 100ms ease-out;
+      .top {
+        font-size: 24px;
+        background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
+        background-size: 100% 100%;
+        text-align: center;
+  
+      }
+      .bottom {
+        margin-top: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding:0rem  0.2rem;
+        .component-services-content-right-left-content-son {
+          background: url('~@/assets/capabilityCloud/Component_services_snum.png')
+            no-repeat;
+          background-size: 1.1rem 0.59rem;
+          background-position: center;
+          text-align: center;
+       
+          & > p:first-child {
+            color: #ffffff;
+            font-size: 0.16rem;
+            line-height: 0.16rem;
+            margin-bottom: 0.12rem;
+          }
+          & > p:last-child {
+            color: #1ef6f5;
+            font-size: 0.28rem;
+            line-height: 0.28rem;
+            padding-bottom: 0.24rem;
+            margin: 10px 45px;
+          }
+        }
+      }
+    }
+  }
+  </style>
+  

front/src/views/assertReport/components/ReservoirLeft.vue

@@ -6,78 +6,24 @@
     <div class="platform-overview-top">
     <div class="top"><span class="title">组件资源</span></div>
     <div class="bottom">
-      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{componetsData.total}}万元 </span><img src="../image/xing1.png" /></div>
       <div class="left">
-        <div class="item">
+        <div class="item" v-for="item in componetsData.list">
           <div class="content1">
           <div class="img"> </div>
-            <div class="num">智能算法</div> 
+            <div class="num">{{item.resourceType}}</div> 
         </div>
           <div class="content">
             <div class="name">节省</div>
-            <div claSS="num">123万元</div>
+            <div claSS="num">{{item.applyPrice }}万元</div>
           </div>
           <div class="content">
             <div class="name">数量</div>
-            <div claSS="num">123个</div>
+            <div claSS="num">{{item.resourceAmount}}个</div>
           </div>
           <div class="content">
             <div class="name">共申请</div>
-            <div claSS="num">123次</div>
+            <div claSS="num">{{item.applyCount}}次</div>
-          </div>
-        </div>
-        <div class="item">
-          <div class="content1">
-          <div class="img"> </div>
-            <div class="num">图层服务</div> 
-        </div>
-          <div class="content">
-            <div class="name">节省</div>
-            <div claSS="num">123万元</div>
-          </div>
-          <div class="content">
-            <div class="name">数量</div>
-            <div claSS="num">123个</div>
-          </div>
-          <div class="content">
-            <div class="name">共申请</div>
-            <div claSS="num">123次</div>
-          </div>
-        </div>
-        <div class="item">
-          <div class="content1">
-          <div class="img"> </div>
-            <div class="num">开发组件</div> 
-        </div>
-          <div class="content">
-            <div class="name">节省</div>
-            <div claSS="num">123万元</div>
-          </div>
-          <div class="content">
-            <div class="name">数量</div>
-            <div claSS="num">123个</div>
-          </div>
-          <div class="content">
-            <div class="name">共申请</div>
-            <div claSS="num">123次</div>
-          </div>
-        </div>
-        <div class="item">
-          <div class="content1">
-          <div class="img"> </div>
-            <div class="num">业务组件</div> 
-        </div>
-          <div class="content">
-            <div class="name">节省</div>
-            <div claSS="num">123万元</div>
-          </div>
-          <div class="content">
-            <div class="name">数量</div>
-            <div claSS="num">123个</div>
-          </div>
-          <div class="content">
-            <div class="name">共申请</div>
-            <div claSS="num">123次</div>
           </div>
         </div>
       </div>
@@ -89,7 +35,7 @@
     <div class="platform-overview-mid">
     <div class="top"><span class="title">应用资源</span></div>
     <div class="bottom">
-    <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+    <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{resoureData.total}}万元 </span><img src="../image/xing1.png" /></div>
     <div class="component-services-content-right-right-bottom-right">
               <div>
                 <span>排行</span>
@@ -98,15 +44,18 @@
                 <span >次数</span>
                 <span >贡献金额</span>
               </div>
-              <div v-for="(item, index) in dataList" :key="index">
+              <div v-for="(item, index) in resoureData.list" :key="index">
                 <span>{{ index + 1 }}</span>
                 <a-tooltip>
-                  <template #title>{{ item.name }}</template>
+                  <template #title>{{ item.resourceName }}</template>
-                  <span>{{ item.name }}</span>
+                  <span>{{ item.resourceName }}</span>
                 </a-tooltip>
-                <span>{{ item.count || 0 }}</span>
+                <a-tooltip>
-                <span>{{ item.count || 0 }}</span>
+                  <template #title>{{ item.deptName}}</template>
-                <span>{{ item.count || 0 }}</span>
+                  <span>{{ item.deptName  }}</span>
+                </a-tooltip>
+                <span>{{ item.applyCount || 0 }}</span>
+                <span>{{ item.applyPrice || 0 }}</span>
               </div>
             </div>
     </div>
@@ -116,15 +65,15 @@
     <div class="platform-overview-bottom">
     <div class="top"><span class="title">基础设施</span></div>
     <div class="bottom">
-      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省XX万元 </span><img src="../image/xing1.png" /></div>
+      <div class="jiesheng"> <img src="../image/xing1.png" /><span style="padding-left:2px;">共节省{{infrastructureData.total}}万元 </span><img src="../image/xing1.png" /></div>
     <div class="huiketing">
       <div style="float:left;width:30%">
       <img :src="leftImg" alt="" /> 
     </div>
-    <div style="float:left;width:70%;margin-top: 30px;">
+    <div style="float:left;width:70%;margin-top: 30px;" v-for="item in infrastructureData.list">
-      <span style="font-size:22x">会客厅</span> 
+      <span style="font-size:22x">{{item.resourceName}}</span> 
       <span style="font-size:22px">节省 </span>
-      <span style="margin-right:10px;font-size:24px;  color: #1ef6f5;"> 453</span>
+      <span style="margin-right:10px;font-size:24px;  color: #1ef6f5;">{{item.applyPrice}}</span>
         <span style="font-size:20px"> 万元</span>
       </div>
     </div>
@@ -137,12 +86,13 @@
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+  import {
-//例如：import 《组件名称》 from '《组件路径》';
+    getComponentFundStatement,
-
+    getResourceFundStatement,
+    getInfrastructureFundStatement
+  } from '@/api/assertReport'
 import ResourceOverviewAnimation from "@/views/assertReport/components/ResourceOverviewAnimation.vue";
 export default {
-  //import引入的组件需要注入到对象中才能使用
   components: {
     ResourceOverviewAnimation
   },
@@ -151,11 +101,28 @@ export default {
   },
 
   mounted() {
-
+//组件资源
+  this.getComponent()
+  //应用资源
+  this.getResource()
+  //基础设施
+  this.getInfrastructure()
   },
   data() {
 
     return {
+      componetsData:{
+        total:'',
+        list:[]
+    },
+    resoureData:{
+      total:'',
+        list:[]  
+    },
+    infrastructureData:{
+       total:'',
+        list:'',
+    },
       leftImg:require('@/assets/capabilityCloud/resources-left.png'),
       dataList:[{name:'第一个',count:43},{name:'第二个',count:43},
       {name:'第三个',count:43},{name:'第四个',count:43},{name:'第五个',count:43}]
@@ -164,7 +131,24 @@ export default {
   },
 
   methods: {
- 
+    getComponent(){
+      getComponentFundStatement().then((res) => {
+       this.componetsData.total=res.data.data.total
+       this.componetsData.list=res.data.data.list
+      })
+    },
+    getResource(){
+      getResourceFundStatement().then((res) => {
+       this.resoureData.total=res.data.data.total
+       this.resoureData.list=res.data.data.list
+      })
+    },
+    getInfrastructure(){
+      getInfrastructureFundStatement().then((res) => {
+      this.infrastructureData.total=res.data.data.total
+       this.infrastructureData.list=res.data.data.list
+      })
+    }
 
   },
 
@@ -302,7 +286,7 @@ export default {
   .platform-overview-mid {
     margin-top:20px;
     width: 100%;
-    height: 2.8rem;
+    height: 3.9rem;
     background: rgba(0, 108, 188, 0.2);
     border-radius: 2px;
     border: 1px solid rgba(0, 108, 188, 0.7);
@@ -328,6 +312,8 @@ export default {
               font-size: 0.16rem;
               border: 0.01rem rgba(0, 108, 188, 0.7) solid;
               color: rgba(255, 255, 255, 0.8);
+              height: 2.9rem;
+               overflow-y: auto;
               & > div {
                 height: 0.32rem;
                 & > span {
@@ -352,11 +338,11 @@ export default {
                   padding-left: 0.05rem;
                 }
                 & > span:nth-child(3) {
-                  width: 0.8rem;
+                  width: 1.47rem;
                   padding-left: 0.05rem;
                 }
                 & > span:nth-child(4) {
-                  width: 1rem;
+                  width: 0.5rem;
                   padding-left: 0.05rem;
                 }
                 & > span:last-child {

front/src/views/assertReport/components/ReservoirRight.vue

@@ -4,7 +4,7 @@
     <!--最上面 部门排行榜-->
     <div class="platform-overview-top">
       <div class="top"><span class="title">部门排行榜</span></div>
-      <div class="bottom">
+      <div class="bottom1">
         <div class="bottom-item">
           <div class="inner-title">
             <p style="width: 220px">市级部门共享贡献资金排行</p>
@@ -13,21 +13,22 @@
             <div class="left-list1">排行</div>
             <div class="left-list2">部门名称</div>
             <div class="left-list1">提供资源</div>
-            <div class="left-list1">贡献总量</div>
+            <div class="left-list1" style="color: #1ffefd">贡献总量</div>
           </div>
-          <div class="left-list" v-for="item in top5AreaList">
+          <div class="left-list" v-for="(item, index) in top5DistrictList">
             <div class="left-list1" v-if="item.img">
               <img :src="item.img" />
             </div>
-            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div class="left-list1" v-else>{{ index + 1 }}</div>
-            <div
+            <a-tooltip>
-              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              <template #title>{{ item.deptName }}</template>
-              @click="chooseSelectArea(item)"
+              <div class="left-list2">{{ item.deptName }}</div>
-            >
+            </a-tooltip>
-              {{ item.areaName }}
+
+            <div class="left-list1">{{ item.resourceCount }}</div>
+            <div class="left-list1" style="color: #1ffefd">
+              {{ item.applyPrice }}
             </div>
-            <div class="left-list1">{{ item.num }}</div>
-            <div class="left-list1">{{ item.num }}</div>
           </div>
         </div>
         <div class="bottom-item">
@@ -38,48 +39,55 @@
             <div class="left-list1">排行</div>
             <div class="left-list2">部门名称</div>
             <div class="left-list1">提供资源</div>
-            <div class="left-list1">贡献总量</div>
+            <div class="left-list1" style="color: #1ffefd">贡献总量</div>
           </div>
-          <div class="left-list" v-for="item in top5AreaList">
+          <div class="left-list" v-for="(item, index) in top5DeptFundList">
             <div class="left-list1" v-if="item.img">
               <img :src="item.img" />
             </div>
-            <div class="left-list1" v-else>{{ item.name }}</div>
+            <div class="left-list1" v-else>{{ index + 1 }}</div>
-            <div
+            <a-tooltip>
-              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              <template #title>{{ item.deptName }}</template>
-              @click="chooseSelectArea(item)"
+              <div class="left-list2">{{ item.deptName }}</div>
-            >
+            </a-tooltip>
-              {{ item.areaName }}
+
+            <div class="left-list1">{{ item.applyCount }}</div>
+            <div class="left-list1" style="color: #1ffefd">
+              {{ item.applyPrice }}
             </div>
-            <div class="left-list1">{{ item.num }}</div>
-            <div class="left-list1">{{ item.num }}</div>
           </div>
         </div>
       </div>
-      <div class="bottom">
+      <div class="bottom2">
         <div class="bottom-item">
           <div class="inner-title">
             <p style="width: 220px">区市部门共享贡献资金排行</p>
           </div>
           <div class="left-list">
-            <div class="left-list1">排行</div>
+            <div class="left-list1">序号</div>
             <div class="left-list2">部门名称</div>
             <div class="left-list1">提供资源</div>
-            <div class="left-list1">贡献总量</div>
+            <div class="left-list1" style="color: #1ffefd">贡献总量</div>
           </div>
-          <div class="left-list" v-for="item in top5AreaList">
+          <div style="height: 300px; overfolw-y: auto">
-            <div class="left-list1" v-if="item.img">
-              <img :src="item.img" />
-            </div>
-            <div class="left-list1" v-else>{{ item.name }}</div>
             <div
-              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              class="left-list"
-              @click="chooseSelectArea(item)"
+              v-for="(item, index) in top5eDistrictFundList"
             >
-              {{ item.areaName }}
+              <div class="left-list1" v-if="item.img">
+                <img :src="item.img" />
+              </div>
+              <div class="left-list1" v-else>{{ index + 1 }}</div>
+              <a-tooltip>
+                <template #title>{{ item.districtName }}</template>
+                <div class="left-list2">{{ item.districtName }}</div>
+              </a-tooltip>
+
+              <div class="left-list1">{{ item.applyCount }}</div>
+              <div class="left-list1" style="color: #1ffefd">
+                {{ item.applyPrice }}
+              </div>
             </div>
-            <div class="left-list1">{{ item.num }}</div>
-            <div class="left-list1">{{ item.num }}</div>
           </div>
         </div>
         <div class="bottom-item">
@@ -87,103 +95,169 @@
             <p style="width: 220px">区市部门申请节省资金排行</p>
           </div>
           <div class="left-list">
-            <div class="left-list1">排行</div>
+            <div class="left-list1">序号</div>
             <div class="left-list2">部门名称</div>
             <div class="left-list1">提供资源</div>
-            <div class="left-list1">贡献总量</div>
+            <div class="left-list1" style="color: #1ffefd">贡献总量</div>
           </div>
-          <div class="left-list" v-for="item in top5AreaList">
+          <div style="height: 200px; overfolw-y: auto">
-            <div class="left-list1" v-if="item.img">
-              <img :src="item.img" />
-            </div>
-            <div class="left-list1" v-else>{{ item.name }}</div>
             <div
-              :class="selectArea === item.areaId ? 'active-item' : 'left-list2'"
+              class="left-list"
-              @click="chooseSelectArea(item)"
+              v-for="(item, index) in top5ApplyDistrictList"
             >
-              {{ item.areaName }}
+              <div class="left-list1" v-if="item.img">
+                <img :src="item.img" />
+              </div>
+              <div class="left-list1" v-else>{{ index + 1 }}</div>
+              <a-tooltip>
+                <template #title>{{ item.districtName }}</template>
+                <div class="left-list2">{{ item.districtName }}</div>
+              </a-tooltip>
+
+              <div class="left-list1">{{ item.applyCount }}</div>
+              <div class="left-list1" style="color: #1ffefd">
+                {{ item.applyPrice }}
+              </div>
             </div>
-            <div class="left-list1">{{ item.num }}</div>
-            <div class="left-list1">{{ item.num }}</div>
           </div>
         </div>
       </div>
     </div>
 
-    <div class="platform-overview-bottom">
+    <!-- <div class="platform-overview-bottom">
       <div class="top"><span class="title">资源汇聚总量</span></div>
       <div class="bottom">
         <div
-          v-for="(item, index) in servicesSnum"
+          v-for="(item, index) in servicesNum"
           :key="index"
           class="component-services-content-right-left-content-son"
         >
           <p>{{ item.type }}</p>
-          <p class="num">{{ item.amount }}</p>
+          <p class="num">{{ item.count }}</p>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+import {
+  getProvideDeptFundStatement,
+  getApplyDeptFundStatement,
+  getProvideDistrictFundStatement,
+  getApplyDistrictFundStatement,
+  selectTotal,
+} from '@/api/assertReport'
 export default {
-  //import引入的组件需要注入到对象中才能使用
   components: {},
   created() {},
   destroyed() {},
 
-  mounted() {},
+  mounted() {
+    this.getgetProvideDeptFund()
+    this.getApplyDeptFund()
+    this.getProvideDistrict()
+    this.getApplyDistrictFund()
+    this.selectAllTotal()
+  },
   data() {
     //这里存放数据
     return {
-      top5AreaList: [
+      //市级部门共享排行
-        {
+      top5DistrictList: [],
-          title: 'TOP1',
+      //市级部门申请排行
-          img: require('../image/one.png'),
+      top5DeptFundList: [],
-          areaName: '台东商圈',
+      //区市提供排行
-          areaId: '1',
+      top5eDistrictFundList: [],
-          num: '12',
+      //区市申请排行
-        },
+      top5ApplyDistrictList: [],
-        {
+      servicesNum: [],
-          title: 'TOP2',
-          img: require('../image/two.png'),
-          areaName: '李村商圈',
-          areaId: '2',
-          num: '8',
-        },
-        {
-          title: 'TOP3',
-          img: require('../image/three.png'),
-          areaName: '五四广场',
-          areaId: '3',
-          num: '7',
-        },
-        {
-          title: '4',
-          img: require('../image/four.png'),
-          areaName: '第一海水浴场',
-          areaId: '4',
-          num: '5',
-        },
-        {
-          title: '5',
-          img: require('../image/five.png'),
-          areaName: '石老人海水浴场',
-          areaId: '5',
-          num: '4',
-        },
-      ],
-      servicesSnum: [
-        { type: '组件服务', amount: 124 },
-        { type: '应用资源', amount: 34244 },
-        { type: '基础设施', amount: 125555 },
-        { type: '数据资源', amount: 5555 },
-      ],
     }
   },
 
-  methods: {},
+  methods: {
+    getgetProvideDeptFund() {
+      getProvideDeptFundStatement().then((res) => {
+        let result = res.data.data
+        if (result.length > 0) {
+          for (let i = 0; i < result.length; i++) {
+            if (i === 0) {
+              result[i].img = require('../image/one.png')
+            }
+            if (i === 1) {
+              result[i].img = require('../image/two.png')
+            }
+            if (i === 2) {
+              result[i].img = require('../image/three.png')
+            }
+          }
+        }
+        this.top5DistrictList = result
+      })
+    },
+    getApplyDeptFund() {
+      getApplyDeptFundStatement().then((res) => {
+        let result = res.data.data
+        if (result.length > 0) {
+          for (let i = 0; i < result.length; i++) {
+            if (i === 0) {
+              result[i].img = require('../image/one.png')
+            }
+            if (i === 1) {
+              result[i].img = require('../image/two.png')
+            }
+            if (i === 2) {
+              result[i].img = require('../image/three.png')
+            }
+          }
+        }
+        this.top5DeptFundList = result
+      })
+    },
+    getProvideDistrict() {
+      getProvideDistrictFundStatement().then((res) => {
+        let result = res.data.data
+        // if(result.length>0){
+        //  for(let i=0;i<result.length;i++){
+        //    if(i===0){
+        //     result[i].img=require('../image/one.png')
+        //    }
+        //     if(i===1){
+        //      result[i].img=require('../image/two.png')
+        //    }
+        //  if(i===2){
+        //      result[i].img= require('../image/three.png')
+        //    }
+        //  }
+        // }
+        this.top5eDistrictFundList = result
+      })
+    },
+    getApplyDistrictFund() {
+      getApplyDistrictFundStatement().then((res) => {
+        let result = res.data.data
+        // if(result.length>0){
+        //  for(let i=0;i<result.length;i++){
+        //    if(i===0){
+        //     result[i].img=require('../image/one.png')
+        //    }
+        //     if(i===1){
+        //      result[i].img=require('../image/two.png')
+        //    }
+        //  if(i===2){
+        //      result[i].img= require('../image/three.png')
+        //    }
+        //  }
+        // }
+        this.top5ApplyDistrictList = result
+      })
+    },
+    selectAllTotal() {
+      selectTotal().then((res) => {
+        this.servicesNum = res.data.data.total
+      })
+    },
+  },
 }
 </script>
 <style lang='less' scoped>
@@ -217,7 +291,7 @@ export default {
 
   .platform-overview-top {
     width: 100%;
-    height: 6.8rem;
+    height: 9.9rem;
     background: rgba(0, 108, 188, 0.2);
     border-radius: 2px;
     border: 1px solid rgba(0, 108, 188, 0.7);
@@ -232,75 +306,104 @@ export default {
       background-size: 100% 100%;
       text-align: center;
     }
-    .bottom {
+    .bottom1 {
-      margin-top: 4px;
+      margin-top: 10px;
       // margin-top:10px;
       width: 100%;
       display: table;
       justify-content: space-between;
       align-items: center;
-      :hover.bottom-item{
+      height: 3.5rem;
-        background: rgba(0, 108, 188, 0.5);
+    }
+    .bottom2 {
+      margin-top: 10px;
+      // margin-top:10px;
+      width: 100%;
+      display: table;
+      justify-content: space-between;
+      align-items: center;
+      height: 5.6rem;
+    }
+
+    :hover.bottom-item {
+      background: rgba(0, 108, 188, 0.5);
+    }
+    .bottom-item {
+      height: 100%;
+      overflow-y: auto;
+      background: rgba(0, 108, 188, 0.4);
+      border-radius: 2px;
+      margin: 5px 5px;
+      width: 48%;
+      .inner-title {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        margin-right: 5px;
+
+        font-weight: bold;
+        color: #ffffff;
+        p {
+          font-size: 16px;
+          line-height: 27px;
+          background: linear-gradient(
+            90deg,
+            #041d2f 0,
+            rgba(8, 115, 193, 0) 90%
+          );
+          color: #1ffefd;
+          width: auto;
+          padding-left: 5px;
+        }
       }
-      .bottom-item {
+
-        background: rgba(0, 108, 188, 0.4);
+      display: inline-table;
-    border-radius: 3px;
+
-        margin: 4px 5px;
+      .left-list {
-        .inner-title {
+        text-align: center;
-          margin-top: 10px;
+        color: #fff;
-          margin-bottom: 10px;
+        width: 100%;
-          margin-right: 5px;
+        height: 40px;
-         
+        margin-right: 10px;
-          font-weight: bold;
+        margin-top: 5px;
-          color: #ffffff;
+        font-size: 14px;
-          p {
+        .left-list1 {
-            font-size: 16px;
+          font-size: 14x;
-            line-height: 27px;
+          float: left;
-            background: linear-gradient(
+          width: 22%;
-              90deg,
+          height: 0.32rem;
-              #041d2f 0,
+          line-height: 0.32rem;
-              rgba(8, 115, 193, 0)  90%
+          overflow: hidden;
-            );
+          text-overflow: ellipsis;
-            color: #1ffefd;
+          white-space: nowrap;
-            width: auto;
+          -webkit-line-clamp: 1;
-            padding-left: 5px;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+        }
+        .left-list2 {
+          height: 0.32rem;
+          line-height: 0.32rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
+          cursor: pointer;
+          font-size: 14px;
+          float: left;
+          width: 30%;
+          &:hover {
+            color: rgb(0 255 255);
           }
         }
-   
+        .active-item {
-        display: inline-table;
+          cursor: pointer;
-        width: 48%;
-        height: 3rem;
-        .left-list {
-          text-align: center;
-          color: #fff;
-          width: 100%;
-          height: 24px;
-          margin-right: 10px;
-          margin-top: 5px;
           font-size: 14px;
-          .left-list1 {
+          float: left;
-            font-size: 14x;
+          width: 40%;
-            float: left;
+          color: rgb(0 255 255);
-            width: 20%;
+          font-weight: bold;
-          }
+          text-decoration: underline;
-          .left-list2 {
-            cursor: pointer;
-            font-size: 14px;
-            float: left;
-            width: 40%;
-            &:hover {
-              color: rgb(0 255 255);
-            }
-          }
-          .active-item {
-            cursor: pointer;
-            font-size: 14px;
-            float: left;
-            width: 40%;
-            color: rgb(0 255 255);
-            font-weight: bold;
-            text-decoration: underline;
-          }
         }
       }
     }
@@ -308,7 +411,7 @@ export default {
   .platform-overview-bottom {
     margin-top: 20px;
     width: 100%;
-    height: 1.8rem;
+    height: 1.7rem;
     background: rgba(0, 108, 188, 0.2);
     border-radius: 2px;
     border: 1px solid rgba(0, 108, 188, 0.7);
@@ -322,14 +425,13 @@ export default {
       background: url(~@/assets/capabilityCloud/top_bg.png) no-repeat;
       background-size: 100% 100%;
       text-align: center;
-      margin-bottom: 20px;
     }
     .bottom {
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0.2rem;
+      padding: 0rem 0.2rem;
       .component-services-content-right-left-content-son {
         background: url('~@/assets/capabilityCloud/Component_services_snum.png')
           no-repeat;

front/src/views/assertReport/components/ReservoirThumbnail.vue

@@ -19,8 +19,9 @@
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+  import {
-//例如：import 《组件名称》 from '《组件路径》';
+    getDistrictFundStatement
+  } from '@/api/assertReport'
 import axios from 'axios'
 const echarts = require("echarts");
 export default {
@@ -33,101 +34,80 @@ export default {
       districtData: [
         {
           name: "市南区",
-          value: [120.395966, 36.070892],
+          value: [120.395966, 36.000892],
-          num:232,
         },
         {
           name: "市北区",
           value: [120.355026, 36.083819],
-          num:232,
+  
         },
         {
           name: "李沧区",
-          value: [120.421236, 36.160023],
+          value: [120.421236, 36.188023],
-          num:232,
+    
         },
         {
           name: "崂山区",
-          value: [120.467393, 36.102569],
+          value: [120.587393, 36.199569],
-          num:232,
         },
         {
           name: "城阳区",
-          value: [120.389135, 36.306833],
+          value: [120.369135, 36.266833],
-          num:232,
+    
         },
         {
           name: "即墨区",
-          value: [120.447352, 36.390847],
+          value: [120.517352, 36.490847],
-          num:232,
+    
         },
         {
           name: "莱西市",
-          value: [120.526226, 36.86509],
+          value: [120.426226, 36.86009],
-          num:232,
+      
         },
         {
           name: "胶州市",
-          value: [120.006202, 36.285878],
+          value: [120.010202, 36.235878],
-          num:232,
+    
         },
         {
           name: "平度市",
           value: [119.959012, 36.788828],
-          num:232,
+   
         },
         {
           name: "西海岸",
-          value: [119.995518, 35.875138],
+          value: [119.895518, 35.875138],
-          num:232,
+        
         },
-      ],//青岛市区划坐标数据
-      reservoirTypeArr:[
-        {
-          id: 1,
-          type: "warning",
-          name: "超汛限",
-        },
-        {
-          id: 2,
-          type: "normal",
-          name: "正常",
-        }
       ],
-      // 1、菜单切换功能
+    
-      tabs: [
+    
-        { name: "降雨量图" },
-        { name: "人口热力图" },
-        { name: "水库等级图" },
-        { name: "水库告警分布" },
-      ],
-      selectedTabIndex: 3,
     };
   },
-//监听属性 类似于data概念
+
-  computed: {},
-//监控data中的数据变化
-  watch: {},
-//生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-//生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.findAllInfo();
-  // this.initMap();
   },
 //方法集合
   methods: {
     findAllInfo(){
-   let data=this.districtData
+      getDistrictFundStatement().then((res) => {
-  //  let result=[]
+        
-  //  for(let i=0;i<data.length;i++){
+        let districtData=this.districtData
-  //           let value=[]
+        let resulrtData=res.data.data
-  //           let d=res.data.data[i]
+        for(let i=0;i<resulrtData.length;i++){
-  //           value.push(d["longitude"])
+          for(let j=0;j<districtData.length;j++){
-  //           value.push(d["latitude"])
+            if(resulrtData[i].districtName=districtData[j].name){
-  //           d["value"]=value
+              
-  //         }
+              districtData[j].num=resulrtData[i].applyPrice
-   this.initMap(data)
+            }
+          }
+        }
+     
+        this.initMap(districtData)
+      })
+
      
 },
     initMap(data) {
@@ -330,7 +310,7 @@ export default {
               },
               symbol: "image://static/assets/reservoir-type-bak.png",
               symbolSize: [84, 28],
-              symbolOffset: [0, -20],
+              symbolOffset: [0, -30],
               z: 999,
               data: data,   //企业名称
             },
@@ -381,11 +361,11 @@ export default {
   background: url("~@/assets/common/homePage/big-bak.png") no-repeat;
   background-size: 100% 100%;
   .city-map-content-echarts {
-    width: 11rem;
+    width: 10rem;
-    height: 9rem;
+    height: 8rem;
-    top: 80px;
+    top: 0px;
-    left: 400px;
+    left: 500px;
-    bottom: 60px;
+    bottom: 2rem;
     position: absolute;
     z-index: 1000;
   }

front/src/views/assertReport/index.vue

@@ -8,9 +8,19 @@
       <span class="title" @click="goHome">城市云脑通用能力服务平台</span>
     </div>
     <div class="header1">
-      <div style=" color:#fff; font-size: 24px">累计节省财政资金</div>
+      <div style=" color:#bed1df; font-size: 26px">累计节省财政资金</div>
-      <div style=" color:#fff; font-size: 24px">2451.0万元</div>
+            <div class="area-right">
-      <div style=" color:#fff; font-size: 18px">注：资源参考价格由部门提供或参考市场价格设定</div>
+              <!-- <div class="mianJi">累计节省财政资金</div> -->
+              <template v-for="(item, index) in saveMonmy">
+                <p v-if="item == '.'" :key="index">
+                  {{ item }}
+                </p>
+                <span v-else >{{ item }}</span>
+              </template>
+              <div class="mianJi">万元</div>
+            </div>
+      <div style="  color: #bed1df; font-size: 16px">注：资源参考价格由部门提供或参考市场价格设定</div>
+
       </div>
     <!--左侧-->
     <div class="reservoir-left">
@@ -21,36 +31,44 @@
     <div class="reservoir-right">
       <reservoir-right />
     </div>
+    <!--中间地图-->
     <div class="reservoir-map">
-      <!-- 中间地图 -->
       <reservoir-thumbnail
                            @changeThumbnailMap="changeThumbnailMap"
                            @jumpIntoMap="jumpIntoMap"
       />
     </div>
+ <!--下方-->
+ <div class="bottom">
+  <reservoir-bottom />
 
+      </div>
   </div>
 
 </template>
 
 <script>
-
+import {
-
+  getApplyPriceCount
-import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
+  } from '@/api/assertReport'
-
+  import ReservoirThumbnail from "./components/ReservoirThumbnail.vue";
 import ReservoirLeft from "./components/ReservoirLeft";
   import ReservoirRight from "./components/ReservoirRight";
+  import ReservoirBottom from "./components/ReservoirBottom";
+  import { NumbersConvertedToArrays } from "@/utils/arrayMethod.js";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     ReservoirThumbnail,
     ReservoirLeft,
-    ReservoirRight
+    ReservoirRight,
+    ReservoirBottom
 
   },
   data() {
     //这里存放数据
     return {
+      saveMonmy:[],
       model: "common",
       dialogTitle: "周边视频",
       videoAnalysisDialogVisible: false, //视频分析弹窗显示标志位
@@ -76,101 +94,18 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    changeModel(model, waterPointInfo) {
+    getSaveMoney(){
-      this.model = model;
+      getApplyPriceCount().then((res) => {
-      if(model == 'common') {
+     
-        this.basicInfo = {};
+      this.saveMonmy=NumbersConvertedToArrays(res.data.data)
-      }
-      this.listType ="";
-      // if (this.model == "common") {
-      //   this.$refs.riverCourseMap.isMapMenu = true;
-      //   this.$refs.riverCourseMap.choseTab(1);
-      // }
-      //点击水库险情时
-      if(this.model == "dangerlist") {
-        this.isThumbnail=false;
-        //水库险情上图。
-        this.$nextTick(() => {
-          bus.$emit('reservoirMapDangerList');
-        })
-      }
-      //点击水库险情时
-      // if(this.model == "dangerlist") {
-      //   this.isThumbnail=false;
-      //   //水库险情上图。
-      //   this.$nextTick(() => {
-      //     bus.$emit('reservoirMapDangerList');
-      //   })
-      // }
-    },
-    //从缩略图下沉跳转至三维地图
-    jumpIntoMap(data) {
-      this.isThumbnail = false;
-      //地图到具体的区划
-      this.$nextTick(() => {
-        bus.$emit('reservoirMapLonLat',data);
       })
-    },
-    //点击所有水库上图。
-    listOnMap(data){
-      this.isThumbnail = false;
-      console.log("所有水库列表",data);
-      //地图到具体的区划
-      this.$nextTick(() => {
-        bus.$emit('reservoirMapList',data);
-      })
-
-    },
-    // 获取区市单位数据
-    async getDistrict() {
-      const res = await selectByType("districtType");
-      this.districtOptions = res.data;
-    },
-    //视频弹窗显示。
-    openVideoAnalysisAndData(item, isShow) {
-      console.log("为啥不显示", item);
-      this.positionInfo = item;
-      this.videoAnalysisDialogVisible = isShow;
-    },
-    //新增险情
-    addNewDanger(type, data){
-      console.log("type",type);
-      if (type == "add") {
-        this.dialogData = {};
-        this.dialogType = "add";
-      } else {
-        this.dialogData = data;
-        this.dialogType = "edit";
-      }
-      this.reservoirDialogVisible = true;
-    },
-    //3d 跳转缩略图
-    changeMap(isshow){
-      this.isThumbnail=isshow;
-    },
-    // 缩略图跳转3d
-    changeThumbnailMap(isshow,index){
-      console.log('isshow',isshow);
-      console.log('index',index);
-      this.isThumbnail=isshow;
-      this.tabindex=index;
     }
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
+
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-
+   this.getSaveMoney()
-
-
   },
-  beforeCreate() {}, //生命周期 - 创建之前
+
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="less">
@@ -215,11 +150,57 @@ export default {
     background: url('~@/assets/capabilityCloud/bg.png') no-repeat;
     background-size: 100% 100%;
     overflow: hidden;
+    .area-right {
+          display: flex;
+          align-items: center;
+          justify-items: flex-end;
+          padding-right: 20px;
+          color: #bed1df;
+          margin-left: 100px;
+          span {
+            width: 28px;
+            height: 40px;
+            line-height: 40px;
+            background: url("~@/assets/capabilityCloud/num_bg.png")
+            100% 100%;
+            background-size: 100%;
+            text-align: center;
+            font-size: 28px;
+            margin-right: 3px;
+            color: #fff;
+            font-family: DinPro-Bold;
+          }
+          .mianJi {
+            margin-top: 6px;;
+              margin-right: 3px;
+         font-size: 22px;
+         float:right;
+          }
+          p {
+            height: 34px;
+            display: flex;
+            align-items: flex-end;
+            justify-items: center;
+            font-size: 30px;
+          }
+        }
     & > .header {
       height: 1.04rem;
       text-align: center;
       background: url('~@/assets/capabilityCloud/header.png') no-repeat;
       font-size: 0.46rem;
+    }
+    .bottom{
+      bottom: 12px;
+    position: absolute;
+    left: 545px;
+    width: 732px;
+    align-items: center;
+    z-index: 1004;
+    text-align: center;
+  
+    height: 1.8rem;
+
     }
     .header1 {
       top: 78px;
@@ -234,7 +215,7 @@ export default {
   .reservoir-left {
     position: absolute;
     left: 0.1rem;
-    z-index: 1300;
+    z-index: 1000;
     top: 0.8rem;
     height: calc(100% - 0.8rem);
   }
@@ -248,8 +229,8 @@ export default {
   .reservoir-map {
     position: absolute;
     width: 100%;
-
+  //  height: 100%;
-    height: 100%;
+   // bottom:2rem;
   }
 }
 // 日期时间组件