From 7bab8e176a356322b28d8c81f47d555f46d44903 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 18 Jun 2024 17:36:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=BA=E5=B7=AE=E9=80=89=E6=8B=A9=E9=A2=84?=
 =?UTF-8?q?=E7=AE=97=E3=80=81=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/components/Progress/index.vue             | 171 ++++++++
 src/icons/svg/book.svg                        |   1 +
 src/icons/svg/calendar-check.svg              |   1 +
 src/icons/svg/notice.svg                      |   1 +
 src/icons/svg/zhangdan.svg                    |   1 +
 src/icons/svg/zhifu.svg                       |   1 +
 src/views/away/addAway.vue                    | 411 ++++++++++++++++--
 src/views/dashboard/components/BarChart.vue   |   2 +-
 src/views/dashboard/components/PieChart.vue   |   2 +-
 src/views/system/worker.vue                   |   4 +
 .../system/workerComponents/bookBorrow.vue    |  13 +-
 src/views/system/workerComponents/toDo.vue    |  15 +-
 src/views/system/workerComponents/total.vue   | 109 +++--
 14 files changed, 659 insertions(+), 75 deletions(-)
 create mode 100644 src/components/Progress/index.vue
 create mode 100644 src/icons/svg/book.svg
 create mode 100644 src/icons/svg/calendar-check.svg
 create mode 100644 src/icons/svg/notice.svg
 create mode 100644 src/icons/svg/zhangdan.svg
 create mode 100644 src/icons/svg/zhifu.svg

diff --git a/package.json b/package.json
index 3e47794..a37fcba 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
-    "echarts": "^4.9.0",
+    "echarts": "^5.0.0",
     "element-resize-detector": "^1.2.4",
     "element-ui": "2.13.2",
     "html2canvas": "^1.4.1",
diff --git a/src/components/Progress/index.vue b/src/components/Progress/index.vue
new file mode 100644
index 0000000..71c8d3f
--- /dev/null
+++ b/src/components/Progress/index.vue
@@ -0,0 +1,171 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/views/dashboard/components/mixins/resize'
+const animationDuration = 6000
+export default {
+  mixins: [resize],
+  props: {
+    className: String,
+    height: String,
+    width: String,
+    percent: [Number,String],
+    chartData: {
+      type: Array,
+      default: () => []
+    },
+    text: String,
+    subText: String
+  },
+  data() {
+    return {
+      flag: true,
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.setOptions();
+
+    },
+    setOptions() {
+      this.chart.setOption(this.options)
+      this.setGraphics()
+    },
+    setGraphics () {
+      const getPointOnCircle = (angle, radiusPercent) => {
+        let radian = (angle - 90 - 12) * Math.PI / 180;
+        let radius = this.chart.getWidth() / 2 * radiusPercent / 100;
+        let x = this.chart.getWidth() / 2 + Math.cos(radian) * radius;
+        let y = this.chart.getHeight() / 2 + Math.sin(radian) * radius;
+        return {x: x, y: y};
+      }
+      let graphicElements = [];
+      let total = 0;
+      if (!this.options?.series[0]?.data) return;
+      this.options?.series[0]?.data.forEach(function (item) {
+        total += item.value;
+      });
+
+      let startAngle = 0;
+      this.options?.series[0]?.data.forEach(function (item) {
+        let angle = (item.value / total) * 360;
+        let endAngle = startAngle + angle;
+        let middleAngle = (startAngle + endAngle) / 2;
+
+        // 计算开始和结束点的位置
+        let pointStart = getPointOnCircle(middleAngle - angle / 2, 60);
+        let pointEnd = getPointOnCircle(middleAngle + angle / 2, 60);
+
+        // 添加小圆的装饰
+        graphicElements.push({
+          type: 'circle',
+          shape: {
+            cx: pointStart.x,
+            cy: pointStart.y,
+            r: 4
+          },
+          style: {
+            fill: '#fff'
+          },
+          z: 100
+        });
+        graphicElements.push({
+          type: 'circle',
+          shape: {
+            cx: pointEnd.x,
+            cy: pointEnd.y,
+            r: 4
+          },
+          style: {
+            fill: '#fff'
+          },
+          z: 100
+        });
+
+        startAngle += angle;
+      })
+
+      this.chart.setOption({
+        graphic: {
+          elements: graphicElements
+        }
+      })
+    }
+  },
+  computed: {
+    options () {
+      const _this = this;
+      return {
+        legend: {
+          show: true,
+          bottom: 0,
+          left: "center",
+          orient: "horizontal",
+          itemWidth: 8,
+          itemHeight: 6
+        },
+        color: ["#446df6","#f2a93f","#56b7f9"],
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            avoidLabelOverlap: false,
+            padAngle: 4,
+            itemStyle: {
+              borderRadius: 10,
+              padding: 10
+            },
+            label: {
+              show: true,
+              position: 'center',
+              formatter: `${_this.title||""}\n${_this.title ? '' : '{b}'}{d}%`
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 15,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: (() => {
+              if (this.percent || this.percent === 0) {
+                return [
+                  { value: parseFloat(this.percent), name: '完成率' },
+                  { value: 100 - parseFloat(this.percent), name: '未完成率' }
+                ]
+              } else {
+                return this.chartData
+              }
+            })()
+          }
+        ],
+        graphic: {
+          elements: []
+        }
+      }
+    }
+  },
+  watch: {
+    chartData () {
+      this.setOptions()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/icons/svg/book.svg b/src/icons/svg/book.svg
new file mode 100644
index 0000000..0107144
--- /dev/null
+++ b/src/icons/svg/book.svg
@@ -0,0 +1 @@
+<svg t="1718610790436" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13778" width="200" height="200"><path d="M896 128l0 832-672 0c-53.024 0-96-42.976-96-96s42.976-96 96-96l608 0 0-768-640 0c-70.4 0-128 57.6-128 128l0 768c0 70.4 57.6 128 128 128l768 0 0-896-64 0z" fill="currentColor" p-id="13779"></path><path d="M224.064 832l0 0c-0.032 0-0.032 0-0.064 0-17.664 0-32 14.336-32 32s14.336 32 32 32c0.032 0 0.032 0 0.064 0l0 0 607.904 0 0-64-607.904 0z" fill="currentColor" p-id="13780"></path></svg>
diff --git a/src/icons/svg/calendar-check.svg b/src/icons/svg/calendar-check.svg
new file mode 100644
index 0000000..a5c78db
--- /dev/null
+++ b/src/icons/svg/calendar-check.svg
@@ -0,0 +1 @@
+<svg t="1718608395605" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6321" width="200" height="200"><path d="M699.733333 529.066667L640 469.333333l-149.333333 149.333334-72.533334-72.533334-64 59.733334 136.533334 136.533333z" fill="currentColor" p-id="6322"></path><path d="M896 128h-170.666667V42.666667h-85.333333v85.333333H384V42.666667H298.666667v85.333333H128c-25.6 0-42.666667 17.066667-42.666667 42.666667v682.666666c0 25.6 17.066667 42.666667 42.666667 42.666667h768c25.6 0 42.666667-17.066667 42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667z m-42.666667 682.666667H170.666667v-384h682.666666v384z m0-469.333334H170.666667V213.333333h128v42.666667h85.333333V213.333333h256v42.666667h85.333333V213.333333h128v128z" fill="currentColor" p-id="6323"></path></svg>
diff --git a/src/icons/svg/notice.svg b/src/icons/svg/notice.svg
new file mode 100644
index 0000000..b7b2780
--- /dev/null
+++ b/src/icons/svg/notice.svg
@@ -0,0 +1 @@
+<svg t="1718609821828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11800" width="200" height="200"><path d="M550.64576 211.34848H478.85824V81.92h71.78752v129.42848zM204.2368 345.1392L112.64 248.07936l52.07552-49.664 91.5968 97.06496z m613.05856 4.87936l-51.42016-50.37056 94.06464-97.06496L911.36 252.9536z m34.93888 519.86944v-263.808c0-189.3888-153.24672-343.46496-341.61152-343.46496s-341.6064 154.08128-341.6064 343.47008V869.888H116.0448V942.08h786.944v-72.192h-50.74432zM485.67808 469.26336a0.19968 0.19968 0 0 0 0 0.0256A137.472 137.472 0 0 0 376.832 576.04608v0.16896c-0.30208 1.42848-0.47104 2.90304-0.72192 4.352-2.01728 8.0128-9.59488 23.88992-38.03136 23.88992-22.2976 0-29.29664-14.74048-31.27808-26.94144a55.69024 55.69024 0 0 1 0.99328-21.70368 209.9712 209.9712 0 0 1 144.44544-152.6272 57.40032 57.40032 0 0 1 13.28128-2.24768c14.336-0.71168 42.37824 1.43872 45.12768 28.7744 0.83968 33.39776-23.56224 39.28064-24.97024 39.552z" fill="#3171f4" p-id="11801"></path></svg>
diff --git a/src/icons/svg/zhangdan.svg b/src/icons/svg/zhangdan.svg
new file mode 100644
index 0000000..a84346a
--- /dev/null
+++ b/src/icons/svg/zhangdan.svg
@@ -0,0 +1 @@
+<svg t="1718596167767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5129" width="200" height="200"><path d="M512 896a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h682.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v213.333333a42.666667 42.666667 0 0 1-85.333333 0V213.333333H213.333333v640h256a42.666667 42.666667 0 0 1 42.666667 42.666667zM341.333333 341.333333h213.333334a42.666667 42.666667 0 0 1 0 85.333334H341.333333a42.666667 42.666667 0 1 1 0-85.333334z m0 170.666667h85.333334a42.666667 42.666667 0 0 1 0 85.333333H341.333333a42.666667 42.666667 0 0 1 0-85.333333z m640 188.970667a231.594667 231.594667 0 0 1-231.68 231.594666 231.594667 231.594667 0 1 1 0-463.232c128 0 231.68 103.68 231.68 231.637334z m-137.642666 25.002666a67.712 67.712 0 0 0-15.317334-19.797333 98.986667 98.986667 0 0 0-21.546666-14.464 264.746667 264.746667 0 0 0-24.746667-10.752 1068.8 1068.8 0 0 0-24.704-9.002667 178.474667 178.474667 0 0 1-21.674667-9.088 52.778667 52.778667 0 0 1-15.274666-11.093333 21.205333 21.205333 0 0 1-5.717334-14.72 23.125333 23.125333 0 0 1 10.282667-19.626667 40.362667 40.362667 0 0 1 13.013333-5.717333c5.162667-1.408 11.178667-2.090667 18.176-2.090667 8.874667 0 17.066667 0.938667 24.448 2.645334a161.024 161.024 0 0 1 33.962667 11.946666c3.84 1.792 6.656 2.688 8.490667 2.688a6.613333 6.613333 0 0 0 4.266666-1.194666 7.296 7.296 0 0 0 2.389334-3.754667 28.672 28.672 0 0 0 1.194666-6.528 134.826667 134.826667 0 0 0 0.128-18.346667 32.341333 32.341333 0 0 0-0.853333-5.76 14.122667 14.122667 0 0 0-1.450667-3.712 17.28 17.28 0 0 0-3.242666-3.328 43.861333 43.861333 0 0 0-9.941334-4.906666 133.674667 133.674667 0 0 0-17.194666-5.248c-6.528-1.621333-10.282667-2.56-17.706667-3.498667-1.536-0.170667-3.029333-0.128-4.565333-0.256v-17.322667a25.514667 25.514667 0 1 0-51.072 0v17.322667c-4.608 1.365333-4.053333 1.621333-10.666667 3.157333-12.8 2.986667-23.978667 7.637333-33.450667 13.781334a70.229333 70.229333 0 0 0-22.528 23.125333c-5.546667 9.258667-8.362667 20.053333-8.362666 32.341333 0 10.666667 1.962667 19.84 5.845333 27.52 3.84 7.637333 8.96 14.250667 15.146667 19.84 6.186667 5.632 13.226667 10.453333 21.205333 14.464 7.893333 4.053333 16.042667 7.594667 24.448 10.794667 8.405333 3.114667 16.554667 6.144 24.490667 9.002667 7.893333 2.816 14.933333 5.845333 21.162666 9.088 6.229333 3.242667 11.264 6.912 15.146667 11.093333a20.992 20.992 0 0 1 5.802667 14.933333 27.690667 27.690667 0 0 1-13.184 23.978667 50.602667 50.602667 0 0 1-15.616 6.442667 85.418667 85.418667 0 0 1-20.864 2.304c-11.776 0-22.186667-1.109333-31.146667-3.285334a160.341333 160.341333 0 0 1-38.997333-14.421333 23.125333 23.125333 0 0 0-9.6-3.285333 7.936 7.936 0 0 0-4.266667 1.109333 7.338667 7.338667 0 0 0-2.858667 3.712 22.869333 22.869333 0 0 0-1.578666 6.741333 95.104 95.104 0 0 0-0.469334 10.282667c0 6.144 0.426667 10.752 1.28 13.994667a13.909333 13.909333 0 0 0 4.522667 7.424c2.133333 1.706667 5.546667 3.626667 10.282667 5.888 4.778667 2.218667 10.666667 4.352 17.792 6.357333 7.125333 2.048 15.36 3.754667 24.618666 5.205333 9.301333 1.408 9.557333 2.133333 20.394667 2.133334l1.450667-0.042667 0.341333 9.301333a26.538667 26.538667 0 0 0 26.538667 25.514667 24.661333 24.661333 0 0 0 24.661333-25.514667l-0.469333-13.397333c1.792-0.426667 3.754667-0.554667 5.546666-0.981333 14.08-3.456 23.168-8.533333 33.664-15.36 10.496-6.784 18.816-15.274667 24.96-25.429334 6.144-10.112 9.216-21.930667 9.216-35.413333 0-10.24-1.962667-19.2-5.802666-26.794667z" fill="#ffffff" p-id="5130"></path></svg>
diff --git a/src/icons/svg/zhifu.svg b/src/icons/svg/zhifu.svg
new file mode 100644
index 0000000..98f39e1
--- /dev/null
+++ b/src/icons/svg/zhifu.svg
@@ -0,0 +1 @@
+<svg t="1718600533873" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2830" width="200" height="200"><path d="M353.91239 792.98785h28.047802v7.649401c-2.5498 5.0996-2.5498 12.749001-2.5498 17.848601v40.796803h-25.498002c-165.737011 0-298.326619-76.494005-298.326619-168.286811v-66.294804c-2.5498 91.792806 132.589608 168.286811 298.326619 168.28681z m0-117.290807h28.047802v7.6494c-2.5498 5.0996-2.5498 12.749001-2.5498 17.848602v40.796802h-25.498002c-165.737011 0-298.326619-76.494005-298.326619-168.286811v-66.294804c-2.5498 91.792806 132.589608 168.286811 298.326619 168.286811z m0-237.131415c165.737011 0 298.326619-76.494005 298.326619-168.286811v66.294804c0 40.796803-25.498002 76.494005-66.294804 104.541807-40.796803 12.749001-79.043805 28.047802-109.641407 48.446203-38.247002 10.199201-81.593605 15.298801-124.940208 15.298801-165.737011 0-298.326619-76.494005-298.326619-168.286811v-66.294804c0 94.342606 135.139409 168.286811 300.876419 168.286811z m0 117.290807c20.398401 0 40.796803 0 58.645404-2.5498-15.298801 20.398401-25.498002 45.896403-30.597602 68.844605h-28.047802c-165.737011 0-298.326619-76.494005-298.326619-168.286811v-66.294804c-2.5498 94.342606 132.589608 168.286811 298.326619 168.28681z m0-504.860432c165.737011 0 298.326619 76.494005 298.326619 168.286811 0 94.342606-135.139409 168.286811-298.326619 168.286811-165.737011 0-298.326619-76.494005-298.326619-168.286811C53.035971 127.490008 188.175379 50.996003 353.91239 50.996003z m627.25084 688.446044c-17.848601 0-112.191207-53.545803-114.741007-56.095604-7.6494-7.6494-5.0996-15.298801 2.5498-15.298801 7.6494 0 48.446203-5.0996 48.446203-5.0996-25.498002-63.745004-79.043805-117.290807-152.98801-132.589608-114.741007-28.047802-234.581615 48.446203-262.629417 165.73701 0 0-2.5498 12.749001-10.1992 12.749001-7.6494 0-28.047802-7.6494-35.697203-12.749001-7.6494-5.0996-10.199201-2.5498-7.6494-15.298801 30.597602-147.888409 183.585612-247.330616 331.474021-214.183213 122.390408 28.047802 209.083613 132.589608 216.733014 252.430216 2.5498 15.298801-7.6494 20.398401-15.298801 20.398401z m-415.617427 63.745004c10.199201 5.0996 7.6494 17.848601-2.5498 20.398401-10.199201 0-43.346603 5.0996-43.346603 5.099601 25.498002 61.195204 79.043805 107.091607 147.88841 124.940208 114.741007 28.047802 234.581615-45.896403 260.079616-160.637411 0-2.5498 0-2.5498 2.549801-7.6494 0-5.0996 2.5498-12.749001 12.749-10.199201 10.199201 2.5498 35.697202 10.199201 43.346603 12.749001 7.6494 2.5498 7.6494 5.0996 5.0996 12.749001v5.0996c-35.697202 150.43821-186.135412 244.780816-336.573621 211.633414-122.390408-28.047802-209.083613-132.589608-216.733014-252.430216-2.5498-20.398401 12.749001-25.498002 28.047802-17.848602 10.199201 2.5498 89.243006 48.446203 99.442206 56.095604z m45.896403-181.035811c-5.0996-12.749001 0-20.398401 10.199201-28.047802s22.948201-5.0996 30.597602 7.6494l58.645404 94.342606 61.195204-94.342606c7.6494-12.749001 17.848601-15.298801 28.047801-10.1992 12.749001 5.0996 15.298801 15.298801 10.199201 28.047801l-61.195204 91.792806h50.996003c5.0996 5.0996 7.6494 10.199201 7.649401 15.298801 0 7.6494-2.5498 12.749001-7.649401 15.298801h-66.294804v25.498002h66.294804c5.0996 5.0996 7.6494 10.199201 7.649401 15.298801 0 7.6494-2.5498 12.749001-7.649401 15.298801h-66.294804v66.294804c0 20.398401-7.6494 28.047802-22.948201 30.597602s-25.498002-10.199201-25.498002-30.597602v-66.294804h-63.745004c-7.6494-2.5498-10.199201-7.6494-10.199201-15.298801s2.5498-12.749001 10.199201-15.298801h63.745004V739.442047h-63.745004c-7.6494-5.0996-10.199201-10.199201-10.199201-15.298801 0-7.6494 2.5498-12.749001 10.199201-15.298801h50.996003l-61.195204-86.693205z" fill="currentColor" p-id="2831"></path></svg>
diff --git a/src/views/away/addAway.vue b/src/views/away/addAway.vue
index 4a85270..e9e69c3 100644
--- a/src/views/away/addAway.vue
+++ b/src/views/away/addAway.vue
@@ -1,55 +1,293 @@
 <template>
-  <div style="padding: 0 20px;">
-    <lx-header
-      icon="md-document"
-      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
-      :text="(id ? '编辑' : '新增') + '出差申请'"
-    >
-    </lx-header>
-    <el-card>
-      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
-        <el-form-item label="出差事由" prop="title">
-          <el-input clearable placeholder="请输入标题" v-model="form.title" style="max-width: 300px;width: 100%;"></el-input>
-        </el-form-item>
-<!--        <el-form-item label="是否用车" prop="use_car">-->
-<!--          <el-radio-group v-model="form.use_car">-->
-<!--            <el-radio :label="1">是</el-radio>-->
-<!--            <el-radio :label="0">否</el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </el-form-item>-->
-        <el-form-item label="开始时间" prop="start_date">
-          <el-date-picker value-format="yyyy-MM-dd" clearable placeholder="请选择开始时间" style="max-width: 300px;width: 100%;" v-model="form.start_date"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间" prop="end_date">
-          <el-date-picker value-format="yyyy-MM-dd"
-                          clearable
-                          placeholder="请选择结束时间"
-                          style="max-width: 300px;width: 100%;"
-                          v-model="form.end_date"></el-date-picker>
-        </el-form-item>
-<!--        <el-form-item label="是否室内补助" prop="is_subsidize">-->
-<!--          <el-radio-group v-model="form.is_subsidize">-->
-<!--            <el-radio :label="1">是</el-radio>-->
-<!--            <el-radio :label="0">否</el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </el-form-item>-->
-        <el-form-item align="center">
-          <el-button type="warning" plain @click="reset">重置</el-button>
-          <el-button :loading="loading" type="primary" @click="submit">提交</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+  <div>
+    <el-steps :active="step" align-center>
+      <el-step title="选择预算计划"> </el-step>
+      <el-step title="新增出差事项"> </el-step>
+      <el-step title="新增成功"> </el-step>
+    </el-steps>
+
+    <div style="padding: 20px">
+      <div v-show="step === 1">
+        <div style="display: flex;justify-content: space-between;align-items: center;">
+          <DatePicker
+            :value="planSelect.year"
+            placeholder="选择所属年份"
+            placement="bottom-start"
+            style="width: 180px;margin-right: 10px;"
+            type="year"
+            @on-change="(e) => {
+              planSelect.year = e
+              getBudgets()
+            }"
+          ></DatePicker>
+          <el-select
+            placeholder="科室选择"
+            clearable
+            size="small"
+            v-model="planSelect.plan_department_id"
+            style="width: 180px;margin-right: 10px;"
+            @change="getBudgets"
+          >
+            <el-option
+              v-for="item in departments"
+              :label="item.name"
+              :value="item.id"
+              :key="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-cascader
+            placeholder="资金类型选择"
+            :options="planTypes"
+            :props="{
+                checkStrictly: false,
+                label: 'name',
+                value: 'id',
+              }"
+            :value="planSelect.type"
+            clearable
+            size="small"
+            style="width: 220px;margin-right: 10px;"
+            @change="(e) => {
+              planSelect.type = e[e.length - 1] || '';
+              getBudgets();
+            }"
+          />
+          <Input
+            v-model="planSelect.name"
+            search
+            enter-button="搜 索"
+            clearable
+            placeholder="搜索预算计划.."
+            @on-search="getBudgets"
+          />
+        </div>
+
+        <xy-table
+          :list="plans"
+          :show-index="false"
+          :table-item="planTable"
+          :height="boxheight"
+          style="margin-top: 10px"
+          ref="editorPlanTable"
+          row-key="id"
+          border
+          default-expand-all
+          @select="planPick"
+          :tree-props="{ children: 'notChildren', hasChildren: 'hasChildren' }"
+        >
+          <template v-slot:btns>
+            <el-table-column
+              label="使用金额（元）"
+              header-align="center"
+              width="144"
+            >
+              <template slot-scope="scope" v-if="scope.row.pid === 0">
+                <InputNumber
+                  style="width: 120px"
+                  :min="0"
+                  :precision="2"
+                  :active-change="false"
+                  v-model="scope.row._inputMoney"
+                  :formatter="
+                    (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+                  "
+                  :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+                ></InputNumber>
+              </template>
+            </el-table-column>
+          </template>
+        </xy-table>
+        <div style="display: flex; justify-content: flex-end">
+          <Page
+            :total="planTotal"
+            show-elevator
+            @on-change="
+              (e) => {
+                planSelect.page = e;
+                getBudgets();
+              }
+            "
+          />
+        </div>
+        <div style="text-align: center">
+          <el-button type="primary" style="margin-top: 12px" @click="() => nextStep()"
+          >下一步</el-button
+          >
+        </div>
+      </div>
+
+
+      <el-card v-show="step === 2">
+        <el-popover placement="right-start" width="660" trigger="click">
+          <xy-table
+            :list="planSelections"
+            size="mini"
+            :table-item="[
+              ...planTable.slice(1),
+              {
+                width: 120,
+                align: 'right',
+                label: '使用金额（元）',
+                prop: '_inputMoney',
+                formatter: (v1, v2, value) =>
+                  `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
+              },
+            ]"
+            :height="400"
+            style="width: 100%"
+            row-key="id"
+            border
+            :tree-props="{
+              children: 'notChildren',
+              hasChildren: 'hasChildren',
+            }"
+          >
+            <template #btns></template>
+          </xy-table>
+          <el-button
+            icon="el-icon-s-order"
+            size="small"
+            type="primary"
+            slot="reference"
+          >查看已选预算计划（{{ planSelections.length }}）</el-button
+          >
+        </el-popover>
+
+        <el-form :model="form" :rules="rules" ref="form" label-width="120px" style="margin-top: 20px;">
+          <el-form-item label="出差事由" prop="title">
+            <el-input clearable placeholder="请输入标题" v-model="form.title" style="max-width: 300px;width: 100%;"></el-input>
+          </el-form-item>
+          <!--        <el-form-item label="是否用车" prop="use_car">-->
+          <!--          <el-radio-group v-model="form.use_car">-->
+          <!--            <el-radio :label="1">是</el-radio>-->
+          <!--            <el-radio :label="0">否</el-radio>-->
+          <!--          </el-radio-group>-->
+          <!--        </el-form-item>-->
+          <el-form-item label="开始时间" prop="start_date">
+            <el-date-picker value-format="yyyy-MM-dd" clearable placeholder="请选择开始时间" style="max-width: 300px;width: 100%;" v-model="form.start_date"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="结束时间" prop="end_date">
+            <el-date-picker value-format="yyyy-MM-dd"
+                            clearable
+                            placeholder="请选择结束时间"
+                            style="max-width: 300px;width: 100%;"
+                            v-model="form.end_date"></el-date-picker>
+          </el-form-item>
+          <!--        <el-form-item label="是否室内补助" prop="is_subsidize">-->
+          <!--          <el-radio-group v-model="form.is_subsidize">-->
+          <!--            <el-radio :label="1">是</el-radio>-->
+          <!--            <el-radio :label="0">否</el-radio>-->
+          <!--          </el-radio-group>-->
+          <!--        </el-form-item>-->
+          <div style="display: flex;justify-content: center;">
+            <el-button type="primary" plain @click="forwardStep">上一步</el-button>
+            <el-button type="warning" plain @click="reset">重置</el-button>
+            <el-button :loading="loading" type="primary" @click="submit">提交</el-button>
+          </div>
+        </el-form>
+      </el-card>
+    </div>
+
+
   </div>
 </template>
 
 <script>
 import { deepCopy } from "@/utils";
 import { save, show } from "@/api/away"
+import {getBudget} from "@/api/budget/budget";
+import {listdeptNoAuth} from "@/api/system/department";
+import {getparameterTree} from "@/api/system/dictionary";
 export default {
   data() {
     return {
+      planTypes: [],
+      departments: [],
+
       id: "",
+      step: 1,
       loading: false,
+      plans: [],
+      boxheight: 300,
+      planSelect: {
+        name: "",
+        page_size: 20,
+        page: 1,
+        is_tree: 1,
+        year: new Date().getFullYear().toString(),
+        plan_department_id: "",
+        type: ""
+      },
+      planTable: [
+        {
+          sortable: false,
+          width: 44,
+          type: "selection",
+          reserveSelection: true,
+          fixed: "left",
+          selectable: (row, index) => {
+            return row.pid === 0;
+          },
+        },
+        {
+          label: "科室",
+          prop: "plan_department.name",
+          width: 120,
+          align: "center",
+        },
+        {
+          label: "年份",
+          prop: "year",
+          width: 80,
+          align: "center",
+        },
+        {
+          label: "分类",
+          prop: "type_detail.value",
+          width: 120,
+        },
+        {
+          label: "名称",
+          prop: "name",
+          minWidth: 180,
+          align: "left",
+        },
+        {
+          label: "内容",
+          prop: "content",
+          minWidth: 200,
+          align: "left",
+        },
+        {
+          label: "计划金额",
+          prop: "money",
+          align: "right",
+          width: 120,
+          formatter: (v1, v2, value) => {
+            return `${(value && parseFloat(value) !== 0) ? value : v1.update_money }`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+          }
+        },
+        {
+          label: "实付金额",
+          prop: "use_money_total",
+          width: 120,
+          align: "right",
+          formatter: (v1, v2, value) =>
+            value ? `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "",
+        },
+        {
+          label: "已用金额",
+          prop: "has_money_total",
+          width: 120,
+          align: "right",
+          formatter: (v1, v2, value) =>
+            value ? `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : "",
+        },
+      ],
+      planTotal: 0,
+
+
       form: {
         title: '',
         //use_car: 0,
@@ -60,6 +298,7 @@ export default {
         // subsidize_status: 1,
         expense_status: 1,
         away_status: 1,
+        away_plan_links: []
       },
       copyForm: {
 
@@ -104,12 +343,95 @@ export default {
     }
   },
   methods: {
+    forwardStep () {
+      this.step = this.step > 1 ? this.step - 1 : this.step;
+    },
+    nextStep () {
+      if (this.step === 1) {
+        const selections = this.$refs["editorPlanTable"].getSelection();
+        if (selections?.length > 0) {
+          for (let i of selections) {
+            if (i._inputMoney <= 0) {
+              this.$message({
+                type: "warning",
+                message: `【${i.year}】${i.name} 使用金额需要大于0！`,
+              });
+              return;
+            }
+            if (i._inputMoney > ((Number(i.money) || Number(i.update_money)) - Number(i.has_money_total))) {
+              this.$message({
+                type: "warning",
+                message: `【${i.year}】${i.name} 使用金额大于剩余预算！`,
+              });
+              return;
+            }
+          }
+          this.form.away_plan_links = selections.map((i) => ({
+            plan_id: i.id,
+            use_money: i._inputMoney,
+            new_money: i.money,
+          }));
+          this.step = 2;
+        } else {
+          this.$message({
+            type: "warning",
+            message: "请先选择预算计划！",
+          });
+        }
+      }
+    },
+
+    planPick (selection, row) {
+      if (row.year != new Date().getFullYear()) {
+        this.$confirm("您选择了非本年预算，是否继续？").catch(_ => {
+          this.$refs['editorPlanTable'].toggleRowSelection(row)
+        })
+      }
+    },
+    //获取预算计划
+    async getBudgets() {
+      let res = await getBudget(this.planSelect);
+      res.list.forEach((item) => (item._inputMoney = 0));
+      this.plans = res.list;
+      this.planTotal = res.list.total || 0;
+    },
+    getDepartment() {
+      listdeptNoAuth().then((res) => {
+        this.departments = res;
+      });
+    },
+    async getPlanTypes() {
+      const res = await getparameterTree({
+        id: 3
+      });
+      const dataHandler = (data) => {
+        data.forEach(i => {
+          if (i.hasOwnProperty('detail')) {
+            i.children = i.detail.map(j => {
+              j.name = j.value
+              return j;
+            })
+          } else {
+            dataHandler(i['children'])
+          }
+        })
+        return data;
+      }
+      this.planTypes = dataHandler(res?.children) || []
+    },
+
     init () {
       this.copyForm = deepCopy(this.form)
+      this.getBudgets()
+      this.getDepartment()
+      this.getPlanTypes()
+      this.boxheight = document.documentElement.clientHeight - 400;
     },
 
     reset () {
-      this.form = deepCopy(this.copyForm)
+      this.$set(this, "form", this.copyForm)
+      //this.form = deepCopy(this.copyForm)
+      this.$refs["editorPlanTable"].clearSelection()
       this.$nextTick(() => this.$refs.form.clearValidate())
     },
 
@@ -137,7 +459,12 @@ export default {
       })
     }
   },
-  computed: {},
+  computed: {
+    planSelections() {
+      let temp = this.form.away_plan_links;
+      return this.$refs["editorPlanTable"]?.getSelection() || [];
+    },
+  },
   created() {
     this.init();
   }
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
index d457475..b506030 100644
--- a/src/views/dashboard/components/BarChart.vue
+++ b/src/views/dashboard/components/BarChart.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-  import echarts from 'echarts'
+  import * as echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   import resize from './mixins/resize'
 
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
index 29ae924..1f65467 100644
--- a/src/views/dashboard/components/PieChart.vue
+++ b/src/views/dashboard/components/PieChart.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-  import echarts from 'echarts'
+  import * as echarts from 'echarts'
   require('echarts/theme/macarons') // echarts theme
   import resize from './mixins/resize'
 
diff --git a/src/views/system/worker.vue b/src/views/system/worker.vue
index b43360e..0f454de 100644
--- a/src/views/system/worker.vue
+++ b/src/views/system/worker.vue
@@ -235,4 +235,8 @@ export default {
     opacity: 0;
   }
 }
+
+::v-deep .el-card__header {
+  padding: 10px 20px;
+}
 </style>
diff --git a/src/views/system/workerComponents/bookBorrow.vue b/src/views/system/workerComponents/bookBorrow.vue
index 356c87f..ab8f86e 100644
--- a/src/views/system/workerComponents/bookBorrow.vue
+++ b/src/views/system/workerComponents/bookBorrow.vue
@@ -1,7 +1,8 @@
 <template>
   <el-card class="box-card" shadow="hover">
     <div slot="header" class="clearfix">
-      <span style="border-left: 3px solid #338de3ff; padding-left: 6px"
+      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice"></SvgIcon>
+      <span style="padding-left: 15px"
         >图书借阅统计</span
       >
       <DatePicker
@@ -9,7 +10,7 @@
         :value="select.date"
         placeholder="选择所属年份"
         placement="bottom"
-        style="width: 130px; float: right"
+        style="width: 130px; margin-left: auto;"
         type="month"
         format
         @on-change="changeMonth"
@@ -31,8 +32,12 @@
 </template>
 
 <script>
+import SvgIcon from "@/components/SvgIcon/index.vue";
 import { httpCurl } from "@/api/out";
 export default {
+  components: {
+    SvgIcon
+  },
   name: "card6",
   layout: {
     x: 0,
@@ -122,4 +127,8 @@ export default {
     }
   }
 }
+.clearfix {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/src/views/system/workerComponents/toDo.vue b/src/views/system/workerComponents/toDo.vue
index 49371fc..291b969 100644
--- a/src/views/system/workerComponents/toDo.vue
+++ b/src/views/system/workerComponents/toDo.vue
@@ -1,10 +1,11 @@
 <template>
   <el-card class="box-card" shadow="hover" id="todo-card">
-    <div slot="header">
-      <span style="border-left: 3px solid #338de3ff; padding-left: 6px"
+    <div slot="header" class="clearfix">
+      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice"></SvgIcon>
+      <span style="padding-left: 15px"
         >待办事项</span
       >
-      <i class="el-icon-more" style="float: right; font-size: 20px"></i>
+      <i class="el-icon-more" style="margin-left: auto; font-size: 20px"></i>
     </div>
 
     <div style="position: relative;height: 100%;width: 100%;">
@@ -23,10 +24,14 @@
 </template>
 
 <script>
+import SvgIcon from "@/components/SvgIcon/index.vue";
 import { getNotice2, readNotice } from "@/api/dashboard/notice";
 import ElementResize from "element-resize-detector";
 
 export default {
+  components: {
+    SvgIcon
+  },
   name: "card2",
   layout: {
     x: 4,
@@ -257,4 +262,8 @@ export default {
 ::v-deep .ivu-table th,::v-deep .ivu-table td {
   border-bottom-style: dashed;
 }
+.clearfix {
+  display: flex;
+  align-items: center;
+}
 </style>
diff --git a/src/views/system/workerComponents/total.vue b/src/views/system/workerComponents/total.vue
index ccee577..d2c6d20 100644
--- a/src/views/system/workerComponents/total.vue
+++ b/src/views/system/workerComponents/total.vue
@@ -1,43 +1,54 @@
 <template>
   <el-card class="box-card" shadow="hover">
     <div slot="header" class="clearfix">
+      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="calendar-check"></SvgIcon>
       <span style="padding-left: 15px;">预算总体执行情况</span>
-      <DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;float: right;"
+      <DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;margin-left: auto;"
                   type="year" @on-change="changeYear"></DatePicker>
     </div>
     <div class="progress-card">
       <div class="progress-card-item">
-<!--        <div class="icon-yuan">-->
-<!--          <SvgIcon icon-class="yuan"></SvgIcon>-->
-<!--        </div>-->
+        <div class="worker-progress__icon icon-yuan">
+          <SvgIcon icon-class="yuan"></SvgIcon>
+        </div>
         <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
         <div class="progress-card-item__label">年初预算合计金额</div>
       </div>
       <div class="progress-card-item">
+        <div class="worker-progress__icon icon-zhangdan">
+          <SvgIcon icon-class="zhangdan"></SvgIcon>
+        </div>
         <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
         <div class="progress-card-item__label">调整后预算合计金额</div>
       </div>
       <div class="progress-card-item">
+        <div class="worker-progress__icon icon-zhifu">
+          <SvgIcon icon-class="zhifu"></SvgIcon>
+        </div>
         <div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
         <div class="progress-card-item__label">已支付金额</div>
       </div>
       <div class="progress-card-item">
-        <div class="progress-card-item__num">
-          {{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%
-        </div>
-        <div class="progress-card-item__label">执行率</div>
+        <MyProgress width="145px" height="145px" title="执行率" :chart-data="[{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'},{value:statistic.progress.use_money_total,name:'已用金额'}]" ></MyProgress>
+<!--        <el-progress :width="145" type="circle" stroke-width="20" :format="per => `${per}%\n执行率`" :percentage="40"></el-progress>-->
+<!--        <div class="progress-card-item__num">-->
+<!--          {{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%-->
+<!--        </div>-->
+<!--        <div class="progress-card-item__label">执行率</div>-->
       </div>
     </div>
   </el-card>
 </template>
 
 <script>
+import MyProgress from "@/components/Progress";
 import SvgIcon from "@/components/SvgIcon";
 import { moneyFormatter } from "@/utils"
 import { statistic } from '@/api/dashboard/notice'
 export default {
   components: {
-    SvgIcon
+    SvgIcon,
+    MyProgress
   },
   name:"card1",
   layout:{
@@ -54,7 +65,11 @@ export default {
         year: new Date().getFullYear().toString()
       },
       statistic: {
-        progress: {}
+        progress: {
+          money_total_1: 0,
+          money_total_2: 0,
+          use_money_total: 0
+        }
       }
     }
   },
@@ -88,40 +103,84 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.progress-card {
+.clearfix {
   display: flex;
+  align-items: center;
+}
+.progress-card {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 20px;
 
   &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
-    flex: 1;
 
     &__label {
-      font-size: 14px;
+      font-size: 15px;
+      color: #000000;
+      padding-top: 20px;
     }
 
     &__num {
       font-size: 20px;
-      font-weight: 600;
-
-      padding: 6px 0;
+      line-height: 7px;
+      color: #000000;
+      font-weight: bold;
+      padding-top: 18px;
     }
 
+    .worker-progress__icon {
+      border-radius: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 72px;
+      height: 72px;
+
+      svg {
+        border-radius: 100%;
+        width: 40px;
+        height: 40px;
+
+      }
+    }
     .icon-yuan {
-      background: $primaryColor;
+      background: #56b7f9;
       color: #fff;
-      border-radius: 20px;
       filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
-      display: inline-block;
-      padding: 10px;
-
       svg {
+        color: #56b7f9;
         background: #fff;
-        color: $primaryColor;
-        border-radius: 100%;
-        width: 25px;
-        height: 25px;
+      }
+    }
+    .icon-zhangdan {
+      background: #446df6;
+      filter: drop-shadow(0px 6px 6px rgba(54,117,255,0.5));
+      svg {
+        color: #fff;
+        width: 36px;
+      }
+    }
+    .icon-zhifu {
+      background: #f2a93f;
+      filter: drop-shadow(0px 6px 6px rgba(255,164,45,0.5));
+      svg {
+        color: #fff;
+        width: 36px;
       }
     }
   }
 }
+::v-deep .el-progress--circle .el-progress__text {
+  white-space: break-spaces;
+}
+</style>
+<style>
+.progress-card-item > .icon-yuan > svg > use {
+  transform: scale(0.55);
+  transform-origin: center;
+}
 </style>