From 5c30e7e3637590c763f9c4597bcbd2d0be1e0463 Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Mon, 25 Jul 2022 16:32:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/echarts/catePie.vue      |  92 ++++++++++++
 src/views/components/echarts/lendAcross.vue   | 133 ++++++++++++++++++
 src/views/components/echarts/typePie.vue      |  98 +++++++++++++
 src/views/system/archiveStatistics/index.vue  |  79 ++++++++---
 .../archiveStatistics/module/acrossBar.vue    | 104 ++++++++++++++
 .../archiveStatistics/module/barEcharts.vue   |  43 +++---
 .../archiveStatistics/module/lineEchart.vue   | 124 ++++++++++++++++
 7 files changed, 631 insertions(+), 42 deletions(-)
 create mode 100644 src/views/components/echarts/catePie.vue
 create mode 100644 src/views/components/echarts/lendAcross.vue
 create mode 100644 src/views/components/echarts/typePie.vue
 create mode 100644 src/views/system/archiveStatistics/module/acrossBar.vue
 create mode 100644 src/views/system/archiveStatistics/module/lineEchart.vue

diff --git a/src/views/components/echarts/catePie.vue b/src/views/components/echarts/catePie.vue
new file mode 100644
index 0000000..1eb6c68
--- /dev/null
+++ b/src/views/components/echarts/catePie.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <!-- 档案类别 -->
+    <div id="maincate" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'CatePie',
+  props: {
+    cateData: {
+      type: Array,
+      require: true,
+      default: function() {
+        return []
+      }
+    }
+  },
+  mounted() {
+    this.drawChart()
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('maincate')
+      const myChart = echarts.init(chartDom)
+      let option = null
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+
+        legend: {
+          bottom: 20,
+          left: 'center',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        series: [
+          {
+            name: '档案类别',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            center: ['50%', '40%'], // 饼图位置
+            avoidLabelOverlap: false, // 不重叠
+            labelLine: {
+              normal: {
+                length: 15, // 第一段表示线
+                length2: 60 // 第二段标示线
+              }
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  formatter: '{c}' // 指示线显示百分比
+                }
+              }
+            },
+            // label: {
+            //   show: false,
+            //   position: 'center'
+            // },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            data: [
+              { value: this.cateData[0], name: '案卷', itemStyle: { color: '#1CADAB' }},
+              { value: this.cateData[1], name: '文件', itemStyle: { color: '#339CFF' }}
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#maincate {
+    width: 520px;
+    height:257px;
+  }
+</style>
diff --git a/src/views/components/echarts/lendAcross.vue b/src/views/components/echarts/lendAcross.vue
new file mode 100644
index 0000000..026976e
--- /dev/null
+++ b/src/views/components/echarts/lendAcross.vue
@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <!-- 档案借阅 -->
+    <div id="mainlend" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'AcrossEcharts',
+  props: {
+    lendData: {
+      type: Array,
+      require: true,
+      default: function() {
+        return []
+      }
+    }
+  },
+  mounted() {
+    this.drawChart()
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('mainlend')
+      const myChart = echarts.init(chartDom)
+      let option = null
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        // legend: {}, //图例
+        grid: { // 边距
+          left: '10%',
+          right: '16%',
+          bottom: '15%',
+          top: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          show: false
+        },
+        yAxis: {
+          type: 'category',
+          offset: 20,
+          axisLabel: {// 轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff',
+              fontSize: '14'
+            }
+          },
+          axisLine: {// 轴线的颜色以及宽度
+            show: false
+          },
+          data: ['在库档案', '已借档案', '待借档案', '逾期档案']
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'bar',
+            barWidth: 15, // 柱图宽度
+            barGap: 25,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#02255F'
+              // borderRadius: [0, 10, 10, 0] // 背景圆角
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,		// 开启显示
+                  distance: 20, // 条柱之间的距离
+                  position: 'right',	// 在上方top在右侧right显示
+                  textStyle: { // 数值样式
+                    color: '#fff',
+                    fontSize: 14
+                  }
+                },
+                // 设置柱子圆角
+                barBorderRadius: [0, 10, 10, 0],
+                // 这里设置每个柱子颜色不一样
+                // color: function(params) {
+                //   const colorList = ['#0FBED9', '#F65163', '#FF8447', '#76AF50', '#8378E8']
+                //   return colorList[params.dataIndex]
+                // }
+                color: function(params) {
+                  console.log(params)
+                  var colorList = [
+                    ['#5FA2E2', '#1C54EE'],
+                    ['#84DFC0', '#0D9D81'],
+                    ['#FBCE9B', '#FF801E'],
+                    ['#FF7A7D', '#FF3438']
+                  ]
+
+                  var colorItem = colorList[params.dataIndex]
+                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                    offset: 0,
+                    color: colorItem[0]
+                  },
+                  {
+                    offset: 1,
+                    color: colorItem[1]
+                  }
+                  ], false)
+                }
+              }
+
+            },
+            data: this.lendData // 从下到上的数据
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#mainlend {
+    width: 520px;
+    height:257px;
+  }
+</style>
diff --git a/src/views/components/echarts/typePie.vue b/src/views/components/echarts/typePie.vue
new file mode 100644
index 0000000..4144465
--- /dev/null
+++ b/src/views/components/echarts/typePie.vue
@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <!-- 档案类别 -->
+    <div id="maintype" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'TypePie',
+  props: {
+    typeData: {
+      type: Array,
+      require: true,
+      default: function() {
+        return []
+      }
+    }
+  },
+  mounted() {
+    this.drawChart()
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('maintype')
+      const myChart = echarts.init(chartDom)
+      let option = null
+      option = {
+        tooltip: {
+          trigger: 'item'
+          // formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+
+        legend: {
+          // orient: 'vertical',
+          bottom: 20,
+          left: 'center',
+          icon: 'rect',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        // color: ['#1CADAB', '#339CF'], // 饼 颜色
+        series: [
+          {
+            name: '档案类别',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            center: ['50%', '40%'], // 饼图位置
+            avoidLabelOverlap: true,
+            labelLine: {
+              normal: {
+                length: 10, // 第一段表示线
+                length2: 60 // 第二段标示线
+              }
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  formatter: ' {d}%' // 指示线显示百分比
+                }
+              }
+            },
+            // label: {
+            //   show: false,
+            //   position: 'center'
+            // },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            data: [
+              { value: this.typeData[0], name: '文书档案', itemStyle: { color: '#0FBED9' }},
+              { value: this.typeData[1], name: '科技档案', itemStyle: { color: '#F65163' }},
+              { value: this.typeData[2], name: '会计档案', itemStyle: { color: '#FF8447' }},
+              { value: this.typeData[3], name: '实物档案', itemStyle: { color: '#76AF50' }},
+              { value: this.typeData[4], name: '基建档案', itemStyle: { color: '#8378E8' }}
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#maintype {
+    width: 520px;
+    height:257px;
+  }
+</style>
diff --git a/src/views/system/archiveStatistics/index.vue b/src/views/system/archiveStatistics/index.vue
index db92888..4a0f6c7 100644
--- a/src/views/system/archiveStatistics/index.vue
+++ b/src/views/system/archiveStatistics/index.vue
@@ -3,13 +3,18 @@
     <div>
       <el-row :gutter="20" style="height:296px;">
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <radar-chart />
+          <div class="top-row  container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">档案借阅</p>
+            </h3>
+            <div class="chart-wrapper">
+              <lend-across :lend-data="lendData" />
+            </div>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <!-- 档案类别 -->
-          <!-- <div class="container-wrap"> -->
           <div class="top-row  container-wrap">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
@@ -17,36 +22,58 @@
               <p class="title-arrow">档案类别</p>
             </h3>
             <div class="chart-wrapper">
-              <pie-chart :width="'100%'" :height="'100%'" />
+              <cate-pie :cate-data="cateData" />
             </div>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <pie-chart />
+          <div class="top-row  container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">档案类型</p>
+            </h3>
+            <div class="chart-wrapper">
+              <type-pie :type-data="typeData" />
+            </div>
           </div>
         </el-col>
       </el-row>
       <!-- 中间 -->
-      <el-row :gutter="20" style="height:296px;margin:20px 0">
-        <el-col :xs="24" :sm="24" :lg="12">
+      <el-row :gutter="20" style="height:296px;margin:20px 0;" class="dpflex">
+        <el-col :xs="24" :sm="24" :lg="12" style="padding:0;margin-right:20px">
           <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">出入库管理情况</p>
+            </h3>
             <BarEcharts />
           </div>
-
         </el-col>
-        <el-col :xs="24" :sm="24" :lg="12">
-          <!-- 档案类别 -->
-          <!-- <div class="container-wrap"> -->
-          <div class=" container-wrap" />
+        <el-col :xs="24" :sm="24" :lg="12" style="padding:0">
+          <div class=" container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">档案检索排名</p>
+            </h3>
+            <AcrossBar />
+          </div>
         </el-col>
 
       </el-row>
       <!-- 底部 -->
-      <el-row :gutter="20" style="height:296px;margin:20px 0">
+      <el-row :gutter="20" style="height:296px;">
         <el-col :xs="24" :sm="24" :lg="25">
-          <div class=" container-wrap" />
-
+          <div class=" container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">档案实际情况</p>
+            </h3>
+            <LineEchart />
+          </div>
         </el-col>
 
       </el-row>
@@ -55,11 +82,23 @@
 </template>
 
 <script>
-import RadarChart from '@/components/Echarts/RadarChart'
-import PieChart from '@/components/Echarts/PieChart'
+// import RadarChart from '@/components/Echarts/RadarChart'
+import lendAcross from '@/views/components/echarts/lendAcross.vue'
+import catePie from '@/views/components/echarts/catePie.vue'
+import typePie from '@/views/components/echarts/typePie.vue'
+// import PieChart from '@/components/Echarts/PieChart'
 import BarEcharts from './module/barEcharts.vue'
+import AcrossBar from './module/acrossBar.vue'
+import LineEchart from './module/lineEchart.vue'
 export default {
-  components: { RadarChart, PieChart, BarEcharts }
+  components: { lendAcross, catePie, typePie, BarEcharts, AcrossBar, LineEchart },
+  data() {
+    return {
+      lendData: [18203, 23489, 29034, 104970],
+      cateData: [1000, 700],
+      typeData: [1110, 2000, 800, 600, 900]
+    }
+  }
 }
 </script>
 
diff --git a/src/views/system/archiveStatistics/module/acrossBar.vue b/src/views/system/archiveStatistics/module/acrossBar.vue
new file mode 100644
index 0000000..c65f57f
--- /dev/null
+++ b/src/views/system/archiveStatistics/module/acrossBar.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="barEcharts">
+    <!-- 档案检索排名 -->
+    <div id="main2" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'AcrossEcharts',
+  mounted() {
+    this.drawChart()
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('main2')
+      const myChart = echarts.init(chartDom)
+      let option = null
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        // legend: {}, //图例
+        grid: { // 边距
+          left: '6%',
+          right: '13%',
+          bottom: '3%',
+          top: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01],
+          show: false
+        },
+        yAxis: {
+          type: 'category',
+          offset: 20,
+          axisLabel: {// 轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff',
+              fontSize: '14'
+            }
+          },
+          axisLine: {// 轴线的颜色以及宽度
+            show: false
+          },
+          data: ['文书档案', '科技档案', '会计档案', '实物档案', '基建档案']
+        },
+        series: [
+          {
+            name: '检索量',
+            type: 'bar',
+            barWidth: 15, // 柱图宽度
+            showBackground: true,
+            backgroundStyle: {
+              color: '#02255F'
+              // borderRadius: [0, 10, 10, 0] // 背景圆角
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,		// 开启显示
+                  distance: 20, // 条柱之间的距离
+                  position: 'right',	// 在上方top在右侧right显示
+                  textStyle: { // 数值样式
+                    color: '#fff',
+                    fontSize: 14
+                  }
+                },
+                // 设置柱子圆角
+                barBorderRadius: [0, 10, 10, 0],
+                // 这里设置每个柱子颜色不一样
+                color: function(params) {
+                  // 定义一个颜色数组colorList
+                  const colorList = ['#0FBED9', '#F65163', '#FF8447', '#76AF50', '#8378E8']
+                  return colorList[params.dataIndex]
+                }
+              }
+
+            },
+            data: [18203, 23489, 29034, 104970, 131711] // 从下到上的数据
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#main2 {
+    width: 765px;
+    height:257px;
+  }
+</style>
diff --git a/src/views/system/archiveStatistics/module/barEcharts.vue b/src/views/system/archiveStatistics/module/barEcharts.vue
index 76d8a69..2503f0a 100644
--- a/src/views/system/archiveStatistics/module/barEcharts.vue
+++ b/src/views/system/archiveStatistics/module/barEcharts.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="barEcharts">
-    <div id="main" />
+    <!-- 出入库管理情况 -->
+    <div id="main1" />
   </div>
 </template>
 
@@ -15,7 +16,7 @@ export default {
   methods: {
     drawChart() {
       const app = {}
-      const chartDom = document.getElementById('main')
+      const chartDom = document.getElementById('main1')
       const myChart = echarts.init(chartDom)
 
       let option = null
@@ -110,30 +111,28 @@ export default {
             type: 'shadow'
           }
         },
-        legend: {
-          data: ['Forest', 'Steppe']
-        },
-        toolbox: {
-          show: true,
-          orient: 'vertical',
-          left: 'right',
-          top: 'center',
-          feature: {
-            mark: { show: true },
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar', 'stack'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
+        legend: { // 图例
+          data: ['出库', '入库'],
+          right: 60,
+          icon: 'circle',
+          textStyle: {
+            color: '#fff'
           }
         },
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '8%',
+          top: '15%',
+          containLabel: true
+        },
         xAxis: [{
           type: 'category',
           axisTick: { show: false },
           data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
           axisLine: {// 轴线的颜色以及宽度
             lineStyle: {
-              color: '#113D72',
-              type: 'solid'
+              color: '#113D72'
             }
           },
           axisLabel: {// x轴文字的配置
@@ -181,7 +180,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [320, 332, 301, 334, 390],
+            data: [320, 332, 401, 334, 390, 320, 332, 301, 334, 390, 320, 332],
             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                 offset: 0,
@@ -202,7 +201,7 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: [220, 182, 191, 234, 290],
+            data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 220, 182],
             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
               {
                 offset: 0,
@@ -224,8 +223,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  #main {
+  #main1 {
     width: 765px;
-    height:297px;
+    height:257px;
   }
 </style>
diff --git a/src/views/system/archiveStatistics/module/lineEchart.vue b/src/views/system/archiveStatistics/module/lineEchart.vue
new file mode 100644
index 0000000..d8c3ca1
--- /dev/null
+++ b/src/views/system/archiveStatistics/module/lineEchart.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="barEcharts">
+    <!-- 档案检索排名 -->
+    <div id="main3" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  name: 'AcrossEcharts',
+  mounted() {
+    this.drawChart()
+  },
+  methods: {
+    drawChart() {
+      const chartDom = document.getElementById('main3')
+      const myChart = echarts.init(chartDom)
+      let option = null
+      option = {
+        grid: { // 边距
+          left: '2%',
+          right: '2%',
+          bottom: '5%',
+          top: '8%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {// 轴线的颜色以及宽度
+            lineStyle: {
+              color: '#113D72'
+            }
+          },
+          axisLabel: {// x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+
+        },
+        yAxis: {
+          type: 'value',
+          min: 0,
+          max: 900,
+          splitNumber: 3,
+          axisLine: {// 轴线的颜色以及宽度
+            lineStyle: {
+              color: '#113D72'
+            }
+          },
+          axisLabel: {// x轴文字的配置
+            show: true,
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          splitLine: {// 分割线配置
+            lineStyle: {
+              color: '#113D72',
+              type: 'dashed'
+            }
+          }
+        },
+        series: [
+          {
+            data: [450, 430, 524, 418, 735, 547, 660, 750, 630, 524, 618, 335],
+            type: 'line',
+            areaStyle: {
+              normal: {
+                color: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0.1,
+                      color: 'rgba(51, 156, 255, 0.64)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.5,
+                      color: 'rgba(51, 156, 255, 0.3)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.7,
+                      color: 'rgba(51, 156, 255, 0.1)' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.9,
+                      color: 'rgba(0,0,0, 0.1)' // 100% 处的颜色
+                    }
+                  ]
+                  // globalCoord: false // 缺省为 false
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#339CFF', // 改变折线点的颜色
+                lineStyle: {
+                  color: '#339CFF' // 改变折线颜色
+                }
+              }
+            }
+          }
+        ]
+      }
+      option && myChart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#main3 {
+    width: 100%;
+    height:257px;
+    color: rgb(51, 156, 255);
+  }
+</style>