部门发布能力被调用趋势

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)
+    })
 }

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);
+}

back/src/views/modules/workBench/components/trend-view.vue

@@ -1,18 +1,104 @@
 <template>
-    <div class="trend">
+  <div class="trend">
-        趋势
+    <content-title title="部门发布能力被调用趋势">
-    </div>
+      <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;
+  width: 544px;
-    height: 335px;
+  height: 335px;
-    background: pink;
+  background: #fff;
-    margin-right: 4px;
+  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>