近三年资金拨付对接

.env.development

@@ -5,11 +5,11 @@ VUE_APP_TITLE = 金鸡湖现代服务业品牌管理系统
 ENV = 'development'
 
 # 金鸡湖现代服务业品牌管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.0.110:9040'
+# VUE_APP_BASE_API = 'http://192.168.0.108:9040'
 # 测试环境数据库
 # VUE_APP_BASE_API = 'http://39.101.188.84:9040'
 # 脱敏三方测试用数据库
-# VUE_APP_BASE_API = 'http://39.101.188.84:9031'
+VUE_APP_BASE_API = 'http://39.101.188.84:9031'
 # 正式环境数据库
 # VUE_APP_BASE_API = 'https://idp.sipac.gov.cn/api'
 

src/api/jin_ji_hu/zijinbiao/index.js

@@ -81,3 +81,11 @@ export function memorandum(){
     method: "get",
   })
 }
+
+// 正式环境政务端工作台 --> 近三年资金拨付情况
+export function threeYearsFund(year){
+  return request({
+    url: "/jjh/chiefWork/threeYearsFund/" +  year,
+    method: "get",
+  })
+}

src/assets/styles/publicPro.scss

@@ -472,7 +472,7 @@
                   display: flex;
 
                   .BJinsannianzijinchart-left, .zongbuzhuanxing-box{
-                    width: 75%;
+                    width: 68%;
                     height: 100%;
                   }
                   .BJinsannianzijinchart-right {

src/views/workbenchPro/components/BJinsannianzijin/index.vue

@@ -12,15 +12,15 @@
         <div class="BJinsannianzijinchart-right">
           <div class="yushuan">
             <span>资金预算</span>
-            <div class="number-box">60 <span class="number-unit-box">万元</span></div>
+            <div class="number-box">{{ obj.fundBudget }} <span class="number-unit-box">万元</span></div>
           </div>
           <div class="yushuan">
             <span>追加预算</span>
-            <div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
+            <div class="bottom_number number-box">{{ obj.additionBudget }} <span class="number-unit-box">万元</span></div>
           </div>
         </div>
       </div>
-      <div class="echart_boxs_bottom">拨付资金 <span>80</span>万元  (执行率 <span>80</span>% )</div>
+      <div class="echart_boxs_bottom">拨付资金 <span>{{ obj.appropriationFund }}</span>万元  (执行率 <span>{{ obj.implementationRate }}</span>% )</div>
     </div>
     <div class="echart_boxs echart_boxs_right">
       <div class="echart_boxs_top">
@@ -34,15 +34,15 @@
         <div class="BJinsannianzijinchart-right">
           <div class="yushuan">
             <span>资金预算</span>
-            <div class="number-box">60 <span class="number-unit-box">万元</span></div>
+            <div class="number-box">{{ objTwo.fundBudget }} <span class="number-unit-box">万元</span></div>
           </div>
           <div class="yushuan">
             <span>追加预算</span>
-            <div class="bottom_number number-box">40 <span class="number-unit-box">万元</span></div>
+            <div class="bottom_number number-box">{{ objTwo.additionBudget }} <span class="number-unit-box">万元</span></div>
           </div>
         </div>
       </div>
-      <div class="echart_boxs_bottom">拨付资金 <span>80</span>万元  (执行率 <span>80</span>% )</div>
+      <div class="echart_boxs_bottom">拨付资金 <span>{{ objTwo.appropriationFund }}</span>万元  (执行率 <span>{{ objTwo.implementationRate }}</span>% )</div>
     </div>
   </div>
 </template>
@@ -50,7 +50,7 @@
 <script>
 import * as echarts from 'echarts'
 // import resize from './mixins/resize'
-
+import { threeYearsFund } from "@/api/jin_ji_hu/zijinbiao"
 const animationDuration = 6000
 
 export default {
@@ -75,7 +75,7 @@ export default {
     return {
       chart: null,
       chartTwo:null,
-      changeFuwuyeYear: 0,
+      changeFuwuyeYear: currentYear,
       fuwuyeYear:[
         {
           year: currentYear - 1,
@@ -84,12 +84,14 @@ export default {
         },{
           year: currentYear - 3,
         },
-      ]
+      ],
+      obj:{},
+      objTwo:{}
     }
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
+      this.initChart(this.changeFuwuyeYear)
       window.addEventListener('resize', this.cancalDebounce);
     })
   },
@@ -107,17 +109,10 @@ export default {
       window.onresize = this.chart.resize();
       window.onresize = this.chartTwo.resize();
     },
-    initChart() {
+    initChart(Year) {
       this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
       this.chartTwo = echarts.init(document.getElementById('zongbuzhuanxing-box'))
-      var value1 = Math.random() * 100; // 生成第一个随机值
+      let option = {
-      var value2 = 300 - value1; // 第二个随机值，保证总和为100
-
-      // 计算比例
-      var minOffset = value1 / 100; // 第一个颜色的渐变比例
-      var maxOffset = (value1 + value2) / 100; // 第二个颜色的渐变比例（这里总和为100，所以maxOffset等于1）
-
-     let option = {
         series: [
           {
             type: 'gauge',
@@ -179,14 +174,106 @@ export default {
           }
         ]
       };
-
+      let optionTwo = {
-
+        series: [
-      this.chart.setOption(
+          {
-        option
+            type: 'gauge',
-      )
+            splitNumber: 3,
-      this.chartTwo.setOption(
+            radius: 70,
-        option
+            center: ["45%", "95%"],
-      )
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            pointer: {
+              show: true,
+              icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVpJREFUWEftlr1KxEAURu9NsBLRDGJh7bqbpBJx3yCJ4KJgp4WFINjaCFZaCoIvIdrZKZhEn8AtFiFZ/AHBwkbMaiGuRXIlnUqWTMbVFZkp5975vsOpBuGb58Uqj/b7l/eiMSj6MH0XWcYqAlQ1P1wWzREGeJgtDyht9QYBRlQFpwdPAlcEQhigZeu7BLiWliJQXfOaU78G8GRXJhNQ6p8LaZ15zZ2iEEIGIsc8AqKZj2UI8EYJjLPT8K4IRGGAyDEXgWg/s4Rwj/nB0s8C2MY1AIx1LEGqMbd5zAtRyMCjbWwhwGZOeIN54UTXAZ4tvRQjXnEGbzAv3ObZ5TYQOfoBEC7whAJQrEBfaci7uM3b5wKI7EoNUZ3LCNPSOyJsI9Lr17nmBitdAegUEtkGpbMkxurwWXCeV5Y15zLwZwFajnlIRPM9MyABpAFpQBqQBqQBaaDnBv7Fj+gdzkcMMPGkRt0AAAAASUVORK5CYII=",
+              width: 20,
+              length: "80%",
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 10,
+                color: [
+                  [0.6, '#00AEFF'], // 第一个颜色
+                  [0.63, '#F5F8FA'],
+                  [1, '#FFA42B ']  // 第二个颜色
+                ],
+              },
+            },
+            axisLabel: {
+              show: false,
+              color: "#666",
+              fontSize: 16,
+              formatter: function (value) {
+                return value.toFixed(0);
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              length: "28%",
+              lineStyle: {
+                color: "#fff",
+                width: 2,
+              },
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            data: [
+              {
+                value: 61.5,
+                name: '决策层国际化导向'
+              }
+            ],
+          }
+        ]
+      };
+      threeYearsFund(Year).then(res=>{
+        res.data.map(item=>{
+          if(item.serviceType == "1") {
+            this.obj = item;
+            option.series[0].data[0].value = item.implementationRate
+            // 资金预算 fundBudget  追加预算 additionBudget
+            if(item.fundBudget <= 0) {
+              let color = [ [0, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
+              option.series[0].axisLine.lineStyle.color = color
+            } else if(item.additionBudget <= 0) {
+              let color = [ [1, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
+              option.series[0].axisLine.lineStyle.color = color
+            } else {
+              let count = item.fundBudget + item.additionBudget;
+              const percentage = (item.fundBudget / count);
+              let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
+              option.series[0].axisLine.lineStyle.color = color;
+            }
+          } else {
+            this.objTwo = item;
+            optionTwo.series[0].data[0].value = item.implementationRate
+            if(item.fundBudget <= 0) {
+              let color = [ [0, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
+              optionTwo.series[0].axisLine.lineStyle.color = color
+            } else if(item.additionBudget <= 0) {
+              let color = [ [1, '#00AEFF'], [1, '#FFA42B ']]  // 第二个颜色
+              optionTwo.series[0].axisLine.lineStyle.color = color
+            } else {
+              let count = item.fundBudget + item.additionBudget;
+              const percentage = (item.fundBudget / count);
+              let color = [ [Number(percentage.toFixed(1)), '#00AEFF'], [Number(percentage.toFixed(1)) + 0.03, '#F5F8FA'], [1, '#FFA42B ']]
+              optionTwo.series[0].axisLine.lineStyle.color = color;
+            }
+          }
+        })
+        this.chart.setOption(option)
+        this.chartTwo.setOption(optionTwo)
+      })
     }
   }
 }

src/views/workbenchPro/index.vue

@@ -42,12 +42,12 @@
                 <span class="box-header-title">近三年资金拨付情况</span>
                 <div class="left-box-select">
                   <div class="echart_boxs_btn">
-                    <span class="changeFuwuyeYear_span" v-for="item,index in fuwuyeYear" :class="changeFuwuyeYear == index ? 'changeFuwuyeYear_span_change': ''" @click="changeFuwuyeYear = index">{{ item.year }}</span>
+                    <span class="changeFuwuyeYear_span" v-for="item in fuwuyeYear" :class="changeFuwuyeYear == item.year ? 'changeFuwuyeYear_span_change': ''" @click="changeEchart(item)">{{ item.year }}</span>
                   </div>
                 </div>
               </div>
               <div class="BJinsannianzijin-box home-mainPro-top-box">
-                <BJinsannianzijin></BJinsannianzijin>
+                <BJinsannianzijin ref="BJinsannian"></BJinsannianzijin>
               </div>
             </div>
           </div>
@@ -346,6 +346,8 @@ export default {
       ],
       fuwuyeYear:[
         {
+          year: currentYear,
+        },{
           year: currentYear - 1,
         },{
           year: currentYear - 2,
@@ -353,7 +355,7 @@ export default {
           year: currentYear - 3,
         },
       ],
-      changeFuwuyeYear: 0,
+      changeFuwuyeYear: currentYear,
       checked: 0,
       loading:false,
       loadingProject:false,
@@ -384,6 +386,10 @@ export default {
     }
   },
   methods:{
+    changeEchart(item){
+      this.changeFuwuyeYear = item.year;
+      this.$refs.BJinsannian.initChart(item.year)
+    },
     // 获取最新年月日
     getNowFormatDate() {
       let date = new Date(),