From 2339b13ec8f28360bbd7444117eef5154a09abfa Mon Sep 17 00:00:00 2001
From: hucongqian <hucongqian1990@163.com>
Date: Thu, 30 Jun 2022 14:25:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=A8=E9=97=A8=E5=8F=91=E5=B8=83=E8=83=BD?=
 =?UTF-8?q?=E5=8A=9B=E8=A2=AB=E8=B0=83=E7=94=A8=E8=B6=8B=E5=8A=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 back/src/views/modules/workBench/api.js       |  12 ++
 .../workBench/components/lineOption.js        | 129 ++++++++++++++++++
 .../workBench/components/trend-view.vue       | 104 ++++++++++++--
 3 files changed, 236 insertions(+), 9 deletions(-)
 create mode 100644 back/src/views/modules/workBench/components/lineOption.js

diff --git a/back/src/views/modules/workBench/api.js b/back/src/views/modules/workBench/api.js
index a7e698ec..9e3bf5de 100644
--- a/back/src/views/modules/workBench/api.js
+++ b/back/src/views/modules/workBench/api.js
@@ -122,4 +122,16 @@ export const getApplyByDept = (data, success, fail) => {
     }).catch(err => {
         fail && fail(err)
     })
+}
+// 部门发布能力被调用趋势
+export const getByDept = (data, success, fail) => {
+    Request({
+        methods: 'get',
+        url: '/resource/getByDept',
+        data
+    }).then(res => {
+        success && success(res)
+    }).catch(err => {
+        fail && fail(err)
+    })
 }
\ No newline at end of file
diff --git a/back/src/views/modules/workBench/components/lineOption.js b/back/src/views/modules/workBench/components/lineOption.js
new file mode 100644
index 00000000..75c33e08
--- /dev/null
+++ b/back/src/views/modules/workBench/components/lineOption.js
@@ -0,0 +1,129 @@
+import * as echarts from 'echarts'
+//折线图
+export const trendLineChart = (id, chartData, _option) => {
+
+    let { xaxis = [], ydata = [], } = chartData;
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            top: '16%',
+            left: '7%',
+            right: '7%',
+            bottom: '10%',
+        },
+        xAxis: [{
+            type: 'category',
+            boundaryGap: true,
+            axisLine: { //坐标轴轴线相关设置。数学上的x轴
+                show: true,
+                lineStyle: {
+                    color: 'rgba(138,178,241)'
+                },
+            },
+            axisLabel: { //坐标轴刻度标签的相关设置
+                textStyle: {
+                    color: '#2b2b2b',
+                    margin: 15,
+                    fontSize: '14'
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            data: xaxis,
+        }],
+        yAxis: [{
+            name: '使用量(万次)',
+            nameTextStyle:{color:"#2b2b2b"},
+            type: 'value',
+            min: 0,
+            max: 100,
+            splitNumber: 5,
+            splitLine: {
+                show: false,
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: 'rgba(138,178,241)'
+                },
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: '#2b2b2b',
+                    margin: 15,
+                    fontSize: '14'
+                },
+
+            },
+            axisTick: {
+                show: false,
+            },
+        }],
+        series: [{
+            name: '合格数据百分比',
+            type: 'line',
+            showAllSymbol: true,
+            symbolSize: 0,
+            symbol: 'circle', 
+            symbolSize: 5,   //设定实心点的大小
+            lineStyle: {
+                normal: {
+
+                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                        offset: 0,
+                        color: '#0058e1'
+                    }, {
+                        offset: 1,
+                        color: '#0058e1'
+                    }])
+                },
+                borderColor: '#f0f'
+            },
+            label: {
+                show: false,
+            },
+            itemStyle: {
+                normal: {
+                    color: "#0058ee",
+                }
+            },
+            // 区域填充样式
+            areaStyle: {
+                normal: {
+                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                        offset: 0,
+                        color: 'rgba(0,88,225,0.16)'
+                    },
+                    {
+                        offset: 1,
+                        color: 'rgba(0,88,225,0)'
+                    }
+                    ], false),
+                    shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
+                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+                }
+            },
+            data: ydata
+        }]
+    };
+
+    if (_option !== undefined) {
+        option = Object.assign({}, option, _option)
+    }
+
+    const client = document.getElementById(id);
+    let myChart = echarts.init(client);
+    const clientWidth = client.clientWidth;
+    const clientHeight = client.clientHeight;
+    myChart.clear();
+    myChart.resize({ width: clientWidth, height: clientHeight });
+    myChart.setOption(option);
+}
diff --git a/back/src/views/modules/workBench/components/trend-view.vue b/back/src/views/modules/workBench/components/trend-view.vue
index b195debd..3b80dbb1 100644
--- a/back/src/views/modules/workBench/components/trend-view.vue
+++ b/back/src/views/modules/workBench/components/trend-view.vue
@@ -1,18 +1,104 @@
 <template>
-    <div class="trend">
-        趋势
-    </div>
+  <div class="trend">
+    <content-title title="部门发布能力被调用趋势">
+      <div class="button">
+        <div
+          v-for="(item, idx) in titles"
+          :key="item"
+          @click="handleTitleSwitch(idx)"
+          class="top-title"
+          :class="{ active: idx == selectedTitle }"
+        >{{ item }}</div>
+      </div>
+    </content-title>
+    <div id="trendId" class="trend-echart"></div>
+  </div>
 </template>
 <script>
+import { trendLineChart } from "./lineOption";
+import contentTitle from "./content-title";
+import * as Apis from "../api";
 export default {
-
-}
+  data() {
+    return {
+      titles: ["近七日", "月度"],
+      selectedTitle: 0,
+      trendChartData:{}
+    };
+  },
+  components: {
+    contentTitle
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    //发布动态
+    initChart() {
+    let data = {
+        limit: 10,
+        page: 1
+      };
+      Apis.getByDept(
+        data,
+        res => {
+          if (res.data.code !== 0) {
+            return;
+          }
+          this.data = res.data.data.records || [];
+          let xaxis=[],ydata=[]
+          this.data.forEach(v=>{
+            xaxis.push(v.createDate)
+            ydata.push(v.visits)
+          })
+          this.trendChartData = {
+            xaxis: xaxis,
+            ydata: ydata
+          };
+          this.$nextTick(() => {
+            trendLineChart("trendId", this.trendChartData);
+          });
+        },
+        err => {
+          console.log("err", err);
+        }
+      );
+    },
+    handleTitleSwitch(idx) {
+      this.selectedTitle = idx;
+      this.initChart();
+    }
+  }
+};
 </script>
 <style lang="scss" scoped>
 .trend {
-    width: 544px;
-    height: 335px;
-    background: pink;
-    margin-right: 4px;
+  width: 544px;
+  height: 335px;
+  background: #fff;
+  margin-right: 4px;
+  padding: 0 20px 0 20px;
+  .trend-echart {
+    height: 280px;
+    width: 500px;
+    margin: 0 auto;
+  }
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 110px;
+
+    .top-title {
+      font-size: 16px;
+      height: 30px;
+      line-height: 30px;
+      &.active {
+        color: #0058e1;
+        font-weight: bold;
+        border-bottom: 2px solid #0058e1;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file