up

src/components/LxHeader/index.vue

@@ -29,13 +29,23 @@
       text: {
         type: String,
         default: "未定义名称"
-      }
+      },
+      custom:{
+        type: Boolean,
+        default: false
+      },
     },
     computed: {
       title() {
+        if(this.custom){
+          return this.text;
+        }else
         return this.$route.meta.title;
       },
       iconImg() {
+        if(this.custom){
+          return this.icon;
+        }else
         return this.$route.meta.icon;
 
       }

src/views/dashboard/components/BarChart.vue

@@ -0,0 +1,149 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '500px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.$nextTick(() => {
+          this.setOptions(this.chartData);
+        })
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        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: 31, //右边的距离
+              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,
+            //   },
+          ],
+          grid: {
+            top: 10,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisTick: {
+              show: false
+            }
+          }],
+          series: [{
+            name: '数据',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: chartdata.yArr,
+            animationDuration,
+            barMaxWidth: 20, // 每一个都要设置
+          }]
+        })
+
+      }
+    }
+  }
+</script>

src/views/dashboard/components/LineChart.vue

@@ -0,0 +1,144 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        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,
+            //   },
+          ],
+          legendArr:[],
+          legend: {
+            orient: 'horizontal',
+            bottom: '3%',
+            data:chartdata.legendArr
+          },
+            tooltip: {
+              trigger: 'axis'
+            },
+            backgroundColor:"#fff",
+          grid: {
+            top: '3%',
+            left: '2%',
+            right: '2%',
+            bottom: '12%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            axisLabel: {rotate: chartdata.rotate},
+            data: chartdata.xArr,
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+          }],
+          series: chartdata.series
+        })
+
+      }
+    }
+  }
+</script>

src/views/dashboard/components/PieChart.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '300px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        this.chart.setOption({
+          legend: {
+            orient: 'horizontal',
+            bottom: '4%',
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          }
+,
+          series: [{
+            name: '数据',
+            type: 'pie',
+            radius: ['60%', '90%'],
+            center: ['50%', '50%'], //圆心坐标
+            avoidLabelOverlap: true, //是否启用防止标签重叠策略
+            label: { //每个数据的标签
+              show: true, //设置为true则显示第一个数据
+              position: 'center', //位置居中
+              formatter: '{d}%', //{d}表示数据在总数据中的百分比
+              fontSize: 20,
+              fontWeight: 'bold'
+            },
+            color: ['#695BF9', '#1E3E55'], //系列的颜色
+            emphasis: { //高亮，即鼠标经过时的样式
+              scale: false //表示不放大item
+            },
+            labelLine: {
+              show: true
+            },
+            center: ['50%', '45%'],
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>

src/views/dashboard/components/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/views/dashboard/index.vue

@@ -7,7 +7,8 @@
       <el-button type="primary">统计设置</el-button>
     </div>
 
-
+<el-row :gutter="20">
+  <el-col :span="16">
   <el-card class="box-card" style="margin: 20px 0;">
       <div slot="header" class="clearfix">
         <span>预算总体进展情况</span>
@@ -42,7 +43,7 @@
     </el-card>
 
     <div ref="lxHeader">
-      <LxHeader icon="md-apps" text="待办事项" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <LxHeader icon="iconfont/icon--kucunguanli" text="待办事项" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
         <div slot="content" />
         <slot>
           <div></div>
@@ -73,12 +74,26 @@
         <Page :total="total" show-elevator @on-change="pageChange" />
       </div>
     </div>
+
+   </el-col>
+  <el-col :span="8">
+    <el-card class="box-card" style="margin: 20px 0;">
+
+    <div class="text item">
+                  <pie-chart :chartData="rptChartData"></pie-chart>
+                </div>
+
+                </el-card>
+                </el-col>
+</el-row>
+
+
     <div class="demo-split">
       <Split v-model="split" style="height: 440px;">
         <template #left>
           <div class="demo-split-pane" style="padding-right: 5px;">
             <div ref="lxHeader" v-if="statistic.departmentList">
-              <LxHeader icon="md-apps" text="科室进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+              <LxHeader icon="iconfont/icon--kucunguanli" text="科室进展情况" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
                 <div slot="content" />
                 <slot>
                   <div style="width: 100%">
@@ -102,7 +117,7 @@
         <template #right>
           <div class="demo-split-pane" style="padding-left: 10px;">
             <div ref="lxHeader" v-if="statistic.typeList">
-              <LxHeader icon="md-apps" text="预算类型进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+              <LxHeader icon="iconfont/icon--kucunguanli" text="预算类型进展情况" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
                 <div slot="content" />
                 <slot>
                   <div style="width: 100%">
@@ -135,6 +150,7 @@
   import detailContract from "@/views/contract/components/detailContract"
   import LxHeader from '@/components/LxHeader/index.vue'
   import Pagination from '@/components/Pagination'
+  import PieChart from "./components/PieChart.vue"
   import {
     adminDepartmentList
   } from '../../api/system/department.js'
@@ -159,12 +175,14 @@
     components: {
       LxHeader,
       Pagination,
-      detailContract
+      detailContract,
+      PieChart
     },
     data() {
       return {
         value2: 12,
         split: 0.5,
+        rptChartData: [],
         select: {
           year: ''
         },
@@ -191,9 +209,10 @@
         departmentProgress: [],
         departmentTable: [{
             label: '科室',
-            width: 80,
+            minWidth: 180,
             prop: 'plan_department.name',
             sortable: false,
+            align:"left",
             fixed: "left"
           },
           {
@@ -222,7 +241,7 @@
           },
           {
             label: '年初预算合计金额(元)',
-            width: 160,
+            width: 260,
             align: 'right',
             sortable: false,
             prop: 'money_total_1',
@@ -232,7 +251,7 @@
           },
           {
             label: '调整后预算合计金额(元)',
-            width: 160,
+            width: 260,
             align: 'right',
             sortable: false,
             prop: 'money_total_2',
@@ -284,7 +303,7 @@
           },
           {
             label: '年初预算合计金额(元)',
-            width: 160,
+            width: 260,
             align: 'right',
             sortable: false,
             prop: 'money_total_1',
@@ -294,7 +313,7 @@
           },
           {
             label: '调整后预算合计金额(元)',
-            width: 160,
+            width: 260,
             align: 'right',
             sortable: false,
             prop: 'money_total_2',
@@ -335,7 +354,23 @@
       async getStatistic() {
         const res = await statistic(this.select)
         console.log(res)
-        this.statistic = res
+        this.statistic = res;
+
+        this.rptChartData = {
+          xArr: ["预算合计金额","预算已执行金额"],
+          radiusArr: '50%',
+          yArr: [{ value: res.progress.money_total_1, name: '预算合计金额',
+          label:{
+            show:false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+          },
+          emphasis:{
+                        label:{
+                            show:false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
+                        }
+                    } },
+          { value: res.progress.use_money_total, name: '预算已执行金额' }]
+        }
+
       },
 
       toContract(row) {