From adc2463c3643317fd5073c61763e6ffb07b1150b Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Thu, 7 Dec 2023 17:08:16 +0800
Subject: [PATCH] 2023-12-7

---
 .../contract/components/contractSign.vue      |   3 +
 .../contract/components/detailContract.vue    |  14 +-
 .../contract/components/editorContract.vue    |   8 +-
 .../components/paymentRegistration.vue        |   2 +-
 src/views/contract/contractList.vue           |  54 ++--
 src/views/contract/contractProgress.vue       |  44 +--
 src/views/contract/seeContract.vue            |  19 +-
 src/views/dashboard/components/LineChart.vue  | 119 ++++----
 src/views/dashboard/components/PieChart.vue   |   6 +-
 .../dashboard/components/carryStatic.vue      |  87 ++++--
 src/views/dashboard/index.vue                 | 273 ++++++++++++++++--
 11 files changed, 439 insertions(+), 190 deletions(-)

diff --git a/src/views/contract/components/contractSign.vue b/src/views/contract/components/contractSign.vue
index cd40359..35daebb 100644
--- a/src/views/contract/components/contractSign.vue
+++ b/src/views/contract/components/contractSign.vue
@@ -140,6 +140,7 @@
         <div class="base-info add-plan" style="margin-top: 20px;margin-bottom: 20px">
           <div class="base-info-title">付款计划</div>
           <Button type="primary" style="margin-left: 50px;" @click="isShowAddPlan = true">新增计划</Button>
+          <p style="font-weight: 600;zoom: .9;color: red;">如需分期付款，请分条填报付款计划</p>
         </div>
 
         <xy-table :list="signList" :table-item="signTable" :show-index="false" :height="240"
@@ -515,6 +516,8 @@
         console.log(res)
         this.form.number = "HT-"+res.flow?.serial
         this.form.money = Number(res.flow_detail?.total)
+        this.form.supply = res.flow_detail?.yifang
+        this.form.carryDepartment = res.flow?.dept_name
       },
       //获取oa合同信息
       // async getOaContractInfo() {
diff --git a/src/views/contract/components/detailContract.vue b/src/views/contract/components/detailContract.vue
index 83fe931..eb41e91 100644
--- a/src/views/contract/components/detailContract.vue
+++ b/src/views/contract/components/detailContract.vue
@@ -370,19 +370,7 @@ export default {
           label: "类型",
           width: 100,
           sortable: false,
-          customFn: (row) => {
-            const typeSwitch = (type) => {
-              let res = this.planTypes.filter((item) => {
-                return item.id === type;
-              });
-              return res[0]?.value || "未知";
-            };
-            return (
-              <div>
-                <Tag color="primary"> {typeSwitch(row.type)} </Tag>{" "}
-              </div>
-            );
-          },
+          prop: 'type_detail.value'
         },
         {
           label: "项目",
diff --git a/src/views/contract/components/editorContract.vue b/src/views/contract/components/editorContract.vue
index 8e4eed5..5d621ba 100644
--- a/src/views/contract/components/editorContract.vue
+++ b/src/views/contract/components/editorContract.vue
@@ -465,13 +465,7 @@ import { resetSelect } from '@/utils'
           },
           {
             label: "分类",
-            prop: 'type',
-            formatter: (cell, data, value) => {
-              let res = this.moneyWay.filter(item => {
-                return item.id === value
-              })
-              return res[0]?.value || '未知'
-            }
+            prop: 'type_detail.value',
           },
           {
             label: "名称",
diff --git a/src/views/contract/components/paymentRegistration.vue b/src/views/contract/components/paymentRegistration.vue
index de611b7..ae5b703 100644
--- a/src/views/contract/components/paymentRegistration.vue
+++ b/src/views/contract/components/paymentRegistration.vue
@@ -507,7 +507,7 @@ export default {
             yizhifucishu: this.actNumsTotal(),
             yizhifujine: this.totalMoney(),
             zongjia: this.contract?.money,
-            zhifucishu: this.payment.length,
+            zhifucishu: this.contract?.sign_plan?.length || 0,
             total: data.apply_money,
             out_pay_id: res
           });
diff --git a/src/views/contract/contractList.vue b/src/views/contract/contractList.vue
index d5ccf39..5e8e013 100644
--- a/src/views/contract/contractList.vue
+++ b/src/views/contract/contractList.vue
@@ -1582,6 +1582,28 @@ export default {
             }
           },
         },
+        {
+          label: "合同预算价(元)",
+          width: 140,
+          prop: "plan_price",
+          align: "right",
+          formatter: (v1, v2, value) => {
+            return Number(value)
+              .toFixed(2)
+              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+          },
+        },
+        {
+          label: "合同签订价(元)",
+          width: 140,
+          prop: "money",
+          align: "right",
+          formatter: (cell, data, value) => {
+            return Number(value)
+              .toFixed(2)
+              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+          },
+        },
         {
           label: "已申请金额(元)",
           prop: "apply_money_total",
@@ -1622,28 +1644,6 @@ export default {
             );
           },
         },
-        {
-          label: "合同预算价(元)",
-          width: 140,
-          prop: "plan_price",
-          align: "right",
-          formatter: (v1, v2, value) => {
-            return Number(value)
-              .toFixed(2)
-              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
-          },
-        },
-        {
-          label: "合同签订价(元)",
-          width: 140,
-          prop: "money",
-          align: "right",
-          formatter: (cell, data, value) => {
-            return Number(value)
-              .toFixed(2)
-              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
-          },
-        },
         {
           label: "合同状态",
           width: 120,
@@ -1783,13 +1783,7 @@ export default {
         },
         {
           label: "分类",
-          prop: "type",
-          formatter: (cell, data, value) => {
-            let res = this.moneyWay.filter((item) => {
-              return item.id === value;
-            });
-            return res[0]?.value || "未知";
-          },
+          prop: "type_detail.value",
           width: 100,
           fixed: "left",
         },
@@ -2318,7 +2312,7 @@ export default {
       let baseInfo = {
         title: row?.name,
         执行部门: row?.carry_department,
-        total: row?.money,
+        total: row?.money || row?.plan_price,
         out_contract_id: row.id,
         //"承包商\\供应商":row.supply
       };
diff --git a/src/views/contract/contractProgress.vue b/src/views/contract/contractProgress.vue
index 19035e9..3deb710 100644
--- a/src/views/contract/contractProgress.vue
+++ b/src/views/contract/contractProgress.vue
@@ -593,6 +593,28 @@ export default {
             }
           },
         },
+        {
+          label: "合同预算价(元)",
+          width: 140,
+          prop: "plan_price",
+          align: "right",
+          formatter: (v1, v2, value) => {
+            return Number(value)
+              .toFixed(2)
+              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+          },
+        },
+        {
+          label: "合同签订价(元)",
+          width: 140,
+          prop: "money",
+          align: "right",
+          formatter: (cell, data, value) => {
+            return Number(value)
+              .toFixed(2)
+              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
+          },
+        },
         {
           label: "已申请金额(元)",
           prop: "apply_money_total",
@@ -633,28 +655,6 @@ export default {
             );
           },
         },
-        {
-          label: "合同预算价(元)",
-          width: 140,
-          prop: "plan_price",
-          align: "right",
-          formatter: (v1, v2, value) => {
-            return Number(value)
-              .toFixed(2)
-              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
-          },
-        },
-        {
-          label: "合同签订价(元)",
-          width: 140,
-          prop: "money",
-          align: "right",
-          formatter: (cell, data, value) => {
-            return Number(value)
-              .toFixed(2)
-              .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
-          },
-        },
         {
           label: "合同状态",
           width: 120,
diff --git a/src/views/contract/seeContract.vue b/src/views/contract/seeContract.vue
index 57c0390..8130ed9 100644
--- a/src/views/contract/seeContract.vue
+++ b/src/views/contract/seeContract.vue
@@ -694,6 +694,15 @@
 
                 }
               },
+              {
+                 label: "合同预算价(元)",
+                 width: 140,
+                 prop: "plan_price",
+                 align: 'right',
+                 formatter: (v1, v2, value) => {
+                     return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
+                 }
+              },
               {
                 label: '已申请金额(元)',
                 prop: 'apply_money_total',
@@ -730,15 +739,7 @@
                   )
                 }
               },
-              {
-                label: "合同预算价(元)",
-                width: 140,
-                prop: "plan_price",
-                align: 'right',
-                formatter: (v1, v2, value) => {
-                  return Number(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
-                }
-              },
+
               {
                 label: '合同签订价(元)',
                 width: 140,
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
index b3419c2..5c697bf 100644
--- a/src/views/dashboard/components/LineChart.vue
+++ b/src/views/dashboard/components/LineChart.vue
@@ -61,63 +61,64 @@
       },
       setOptions(chartdata) {
         console.log(chartdata.xArr)
+        this.chart.clear();
         this.chart.setOption({
-          dataZoom: [
-            //给x轴设置滚动条
-            // {
-            //   startValue: 0,
-            //   endValue: 6, // 显示条数
-            //   type: 'slider',
-            //   show: true,
-            //   xAxisIndex: [0],
-            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
-            //   height: 8, //组件高度
-            //   left: 50, //左边的距离
-            //   right: 40, //右边的距离
-            //   bottom: 26, //右边的距离
-            //   handleColor: '#EFEFEF', //h滑动图标的颜色
-            //   handleStyle: {
-            //     borderColor: '#409EFF',
-            //     borderWidth: '1',
-            //     shadowBlur: 2,
-            //     background: '#EFEFEF',
-            //     shadowColor: '#EFEFEF'
-            //   },
-            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
-            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
-            //       //给第一个设置0，第四个设置1，就是垂直渐变
-            //       offset: 0,
-            //       color: '#409EFF'
-            //     },
-            //     {
-            //       offset: 1,
-            //       color: '#409EFF'
-            //     }
-            //   ]),
-            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
-            //   showDataShadow: false, //是否显示数据阴影 默认auto
-            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
-            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
-            //   filterMode: 'filter'
-            // }
-            //下面这个属性是里面拖到
-            //   {
-            //     type: 'inside',
-            //     show: true,
-            //     xAxisIndex: [0],
-            //     start: 0, //默认为1
-            //     end: 50,
-            //   },
-          ],
+          // dataZoom: [
+          //   //给x轴设置滚动条
+          //   {
+          //     startValue: 0,
+          //     endValue: 6, // 显示条数
+          //     type: 'slider',
+          //     show: true,
+          //     xAxisIndex: [0],
+          //    // handleSize: 0, //滑动条的 左右2个滑动条的大小
+          //     height: 8, //组件高度
+          //     left: 50, //左边的距离
+          //     right: 40, //右边的距离
+          //     bottom: 26, //右边的距离
+          //     handleColor: '#EFEFEF', //h滑动图标的颜色
+          //     handleStyle: {
+          //       borderColor: '#409EFF',
+          //       borderWidth: '1',
+          //       shadowBlur: 2,
+          //       background: '#EFEFEF',
+          //       shadowColor: '#EFEFEF'
+          //     },
+          //     fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+          //         //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+          //         //给第一个设置0，第四个设置1，就是垂直渐变
+          //         offset: 0,
+          //         color: '#409EFF'
+          //       },
+          //       {
+          //         offset: 1,
+          //         color: '#409EFF'
+          //       }
+          //     ]),
+          //     backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+          //     showDataShadow: false, //是否显示数据阴影 默认auto
+          //     showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+          //     handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+          //     filterMode: 'filter'
+          //   },
+          //   //下面这个属性是里面拖到
+          //     {
+          //       type: 'inside',
+          //       show: true,
+          //       xAxisIndex: [0],
+          //       start: 0, //默认为1
+          //       end: 50,
+          //     },
+          // ],
           legendArr:[],
           legend: {
             orient: 'horizontal',
-            bottom: '3%',
+            bottom: '3%',
             data:chartdata.legendArr
           },
-            tooltip: {
-              trigger: 'axis'
-            },
+            tooltip: {
+              trigger: 'axis'
+            },
             backgroundColor:"#fff",
           grid: {
             top: '3%',
@@ -127,13 +128,23 @@
             containLabel: true
           },
           xAxis: [{
-            type: 'category',
-            axisLabel: {rotate: chartdata.rotate},
+            type: 'category',
+            axisLabel: {
+              rotate: chartdata.rotate,
+              lineStyle: {
+                color: '#4d8bdc'
+              }
+            },
             data: chartdata.xArr,
           }],
           yAxis: [{
             type: 'value',
             minInterval: 1,
+            axisLabel: {
+              lineStyle: {
+                color: '#4d8bdc'
+              }
+            }
           }],
           series: chartdata.series
         })
@@ -141,4 +152,4 @@
       }
     }
   }
-</script>
+</script>
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
index 106d4fa..bc9633b 100644
--- a/src/views/dashboard/components/PieChart.vue
+++ b/src/views/dashboard/components/PieChart.vue
@@ -73,8 +73,8 @@
           series: [{
             name: '数据',
             type: 'pie',
-            radius: ['60%', '90%'],
-            center: ['50%', '50%'], //圆心坐标
+            radius: ['40%', '70%'],
+            center: ['50%', '45%'], //圆心坐标
             avoidLabelOverlap: true, //是否启用防止标签重叠策略
             label: { //每个数据的标签
               show: true, //设置为true则显示第一个数据
@@ -83,7 +83,7 @@
               fontSize: 20,
               fontWeight: 'bold'
             },
-            color: ['#695BF9', '#1E3E55'], //系列的颜色
+            color: ['#72d6d5','#4979b8'], //系列的颜色
             emphasis: { //高亮，即鼠标经过时的样式
               scale: false //表示不放大item
             },
diff --git a/src/views/dashboard/components/carryStatic.vue b/src/views/dashboard/components/carryStatic.vue
index 9801c39..b0d198d 100644
--- a/src/views/dashboard/components/carryStatic.vue
+++ b/src/views/dashboard/components/carryStatic.vue
@@ -2,7 +2,7 @@
   <div>
 
     <el-drawer
-      size="800px"
+      size="880px"
       title="执行统计"
       :visible.sync="drawer"
       direction="rtl">
@@ -30,19 +30,19 @@
             <div class="content">
               <div class="item">
                 <p class="item__title">年初预算合计金额（元）</p>
-                <div class="item__value">{{totalMoneyTotal1.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">调整后预算合计金额（元）</p>
-                <div class="item__value">{{totalMoneyTotal2.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">已使用（元）</p>
-                <div class="item__value">{{totalUseMoneyTotal.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">执行情况</p>
-                <el-progress class="item__value" :percentage="totalPercent"></el-progress>
+                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
               </div>
             </div>
           </Card>
@@ -70,19 +70,19 @@
             <div class="content">
               <div class="item">
                 <p class="item__title">年初预算合计金额（元）</p>
-                <div class="item__value">{{totalMoneyTotal1Type.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">调整后预算合计金额（元）</p>
-                <div class="item__value">{{totalMoneyTotal2Type.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">已使用（元）</p>
-                <div class="item__value">{{totalUseMoneyTotalType.toFixed(2)}}</div>
+                <div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
               </div>
               <div class="item">
                 <p class="item__title">执行情况</p>
-                <el-progress class="item__value" :percentage="totalPercent"></el-progress>
+                <el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
               </div>
             </div>
           </Card>
@@ -93,6 +93,7 @@
 </template>
 
 <script>
+import { moneyFormatter } from "@/utils"
 import { typeCarry } from "@/api/dashboard/notice"
 export default {
   props: {
@@ -116,6 +117,7 @@ export default {
     }
   },
   methods: {
+    moneyFormatter,
     show () {
       this.drawer = true
     },
@@ -151,10 +153,10 @@ export default {
       return this.types.filter(i => this.typeSelect.find(j => j === i.id))
     },
     totalMoneyTotal1Type () {
-      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total||0)),0) || 0
+      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
     },
     totalMoneyTotal2Type () {
-      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.update_money||0)),0) || 0
+      return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
     },
     totalUseMoneyTotalType () {
       return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
@@ -177,26 +179,67 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.content {
-  padding: 0 20px;
+$color: linear-gradient(to top left, #ff6641, #ec3634),
+linear-gradient(to top left, #4bfbb2, #49f2ac),
+linear-gradient(to top left, #efd458, #ba840a),
+linear-gradient(to top left, #05e6ff, #0069fe),
+linear-gradient(to top left, #a5ffff, #8fccd9),
+linear-gradient(to top left, #fca7ff, #7a519a),
+linear-gradient(to top left, #a4e829, #06ac2e);
 
-  .item {
+@for $index from 1 through length($color) {
+  .card#{$index} {
+    color: #fff;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: nth($color, $index);
+    grid-area: card#{$index};
+    border-radius: 4px;
+    filter: drop-shadow(0 2px 8px #0004);
+
+    padding: 20px;
 
-    padding: 10px 0;
-    &__title {
-      width: 200px;
+    .item__title {
       font-weight: 600;
+      text-align: center;
+
+      padding-bottom: 20px;
+      position: relative;
 
-      padding-right: 20px;
+      &::after {
+        content: '';
+        height: 2px;
+        background: linear-gradient(to right,#fff 40%,#0000);
+
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+      }
     }
-    &__value {
+    .item__value {
+      text-align: center;
       flex: 1;
+      padding-top: 20px;
     }
+  }
+}
+.content {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-gap: 20px;
 
-    & + & {
-      margin-top: 20px;
-    }
+  padding: 20px 0;
+  .item__title {
+    text-align: center;
+  }
+  .item__value {
+    font-weight: 600;
+    font-size: 17px;
+    text-align: center;
+
+    padding-top: 20px;
   }
 }
 
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 9e2050e..e90d51c 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -293,7 +293,7 @@
                           }"></el-date-picker>
         </div>
       </template>
-      <lineChart :chart-data="lineChartData"></lineChart>
+      <lineChart height="500px" :chart-data="lineChartData"></lineChart>
     </Card>
 
     <detailContract ref="detailContract"></detailContract>
@@ -305,6 +305,7 @@
 </template>
 
 <script>
+import echarts from 'echarts'
 import detailContract from "@/views/contract/components/detailContract";
 import LxHeader from "@/components/LxHeader/index.vue";
 import Pagination from "@/components/Pagination";
@@ -509,58 +510,272 @@ export default {
   methods: {
     async getCarry () {
       const res = await carry(this.carrySelect);
+
+      //组织数据
+      let setData = function(data, constData, showData) {
+        data.filter(function(item) {
+          if (item) {
+            constData.push(1);
+            showData.push(item);
+          } else {
+            constData.push(0);
+            showData.push({
+              value: 1,
+              itemStyle: {
+                normal: {
+                  borderColor: "rgba(0,0,0,0)",
+                  borderWidth: 2,
+                  color: "rgba(0,0,0,0)",
+                },
+              },
+            });
+          }
+        });
+      }
+      //组织颜色
+      let setColor = function(colorArr) {
+        let color = {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
+            x: 0,
+            x2: 0,
+            y: 0,
+            y2: 1, */
+          colorStops: [{
+            offset: 0,
+            color: colorArr[0],
+          },
+            {
+              offset: 0.5,
+              color: colorArr[0],
+            },
+            {
+              offset: 0.5,
+              color: colorArr[1],
+            },
+            {
+              offset: 1,
+              color: colorArr[1],
+            },
+          ],
+        };
+        return color
+      }
+
+      let curPlan = res?.map(i => {
+        const { use_money_total,paid_plan_total } = i
+        return paid_plan_total ? (Math.round((Number(use_money_total||0) / Number(paid_plan_total ||0)) * 10000) / 100) : 0;
+      });
+      let curAct = res?.map(i => {
+        const { use_money_total,money_total_2 } = i
+        return money_total_2 ? (Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100) : 0;
+      });
+      let nextPlan = res?.map(i => {
+        const { use_money_total_next,paid_plan_total_next } = i
+        return paid_plan_total_next ? (Math.round((Number(use_money_total_next||0) / Number(paid_plan_total_next||0)) * 10000) / 100) : 0;
+      });
+      let barWidth = 23;
+      let constData1 = [];
+      let showData1 = [];
+      let constData2 = [];
+      let showData2 = [];
+      let constData3 = [];
+      let showData3 = [];
+
+      setData(curPlan, constData1, showData1)
+      setData(curAct, constData2, showData2)
+      setData(nextPlan, constData3, showData3)
+
+      let colorArr1 = ["#345A8B", "#387ABD", "#398ac4"];
+      let colorArr2 = ["#51C0DB", "#42D9D6", "#45F5F1"];
+      let colorArr3 = ['#559372','#7ab798','#9edebc']
+
+      let color1 = setColor(colorArr1)
+      let color2 = setColor(colorArr2)
+      let color3 = setColor(colorArr3)
+
       this.lineChartData = {
         rotate: 54,
         xArr: res?.map(i => i.plan_department?.name),
         series: [
           {
-            name: `${this.carrySelect.month}计划`,
+            z: 1,
             type: 'bar',
-            barGap: 0,
-            emphasis: {
-              focus: 'series'
+            barWidth: barWidth,
+            name: `${this.carrySelect.month}计划`,
+            barGap: "96%", //相邻柱子间距
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],//柱子四周圆角
+              color: color1//柱子左右颜色（深，浅）
             },
+            data: curPlan, //Y轴上的高度
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: '5px',
+                color: '#4d8bdc',
+              },
+              formatter: params => `${params.value}%`
+            }
+          },
+          {
+            z: 2,
+            name: `${this.carrySelect.month}计划`,
+            type: "pictorialBar",
+            data: constData1,//此数据对应底部组件
+            symbol: "diamond",//底部组件形状，不写默认为椭圆
+            symbolOffset: ["-196%", "50%"],//与柱子的偏移角度
+            symbolSize: [barWidth, 10],//底面[宽，高]
             itemStyle: {
-              color: '#4d8bdc'
+              normal: {
+                color: color1//底面左右颜色（深，浅）
+              },
+            },
+            tooltip: {
+              show: false,
             },
-            data: res?.map(i => {
-              const { use_money_total,money_total_1 } = i
-              return Math.round((Number(use_money_total||0) / Number(money_total_1||0)) * 10000) / 100
-            })
           },
           {
-            name: `${this.carrySelect.month}实际`,
+            z: 3,
+            name: `${this.carrySelect.month}计划`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData1,//此数据对应顶部组件
+            symbol: "diamond",
+            symbolOffset: ["-234%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr1[2],
+                borderWidth: 2,
+                color: colorArr1[2],
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 4,
             type: 'bar',
-            barGap: 0,
-            emphasis: {
-              focus: 'series'
+            barWidth: barWidth,
+            name: `${this.carrySelect.month}实际`,
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],
+              color: color2
             },
+            data: curAct,
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: '5px',
+                color: '#4d8bdc',
+              },
+              formatter: params => `${params.value}%`
+            }
+          },
+          {
+            z: 5,
+            name: `${this.carrySelect.month}实际`,
+            type: "pictorialBar",
+            data: constData2,
+            symbol: "diamond",
+            symbolOffset: ["0%", "50%"],
+            symbolSize: [barWidth, 10], //=========================
             itemStyle: {
-              color: '#7ab384'
+              normal: {
+                color: color2
+              },
+            },
+            tooltip: {
+              show: false,
             },
-            data: res?.map(i => {
-              const { use_money_total,money_total_2 } = i
-              return Math.round((Number(use_money_total||0) / Number(money_total_2||0)) * 10000) / 100
-            })
           },
           {
-            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            z: 6,
+            name: `${this.carrySelect.month}实际`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData2,
+            symbol: "diamond",
+            symbolOffset: ["0%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr2[2],
+                borderWidth: 2,
+                color: colorArr2[2]
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            z: 7,
             type: 'bar',
-            barGap: 0,
-            emphasis: {
-              focus: 'series'
+            barWidth: barWidth,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            itemStyle: {
+              borderRadius: [0, 0, 0, 0],
+              color: color3
             },
+            data: nextPlan,
+            label: {
+              show: true,
+              position: 'top',
+              textStyle: {//数值样式
+                fontSize: '5px',
+                color: '#4d8bdc',
+              },
+              formatter: params => `${params.value}%`
+            }
+          },
+          {
+            z: 8,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            type: "pictorialBar",
+            data: constData3,
+            symbol: "diamond",
+            symbolOffset: ["196%", "50%"],
+            symbolSize: [barWidth, 10],
             itemStyle: {
-              color: '#f7cb56'
+              normal: {
+                color: color3
+              },
+            },
+            tooltip: {
+              show: false,
             },
-            data: res?.map(i => {
-              const { use_money_total_next,money_total } = i
-              return Math.round((Number(use_money_total_next||0) / Number(money_total||0)) * 10000) / 100
-            })
           },
+          {
+            z: 9,
+            name: `${this.$moment(this.carrySelect.month).add(1,'months').format('YYYY-MM')}计划`,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: showData3,
+            symbol: "diamond",
+            symbolOffset: ["237%", "-50%"],
+            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
+            itemStyle: {
+              normal: {
+                borderColor: colorArr3[2],
+                borderWidth: 2,
+                color: colorArr3[2]
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          }
         ]
       };
-      console.log(res)
     },
 
     changeYear(e) {