Merge branch 'master' of https://gitea.qinmian.online/TreeData/cloud-web

src/api/port/port/index.js

@@ -94,3 +94,10 @@ export function findConnectorUserList(data) {
     data:data
   })
 }
+//API页面类型分类
+export function findConnectSort() {
+  return request({
+    url: '/mart/connector/findConnectSort',
+    method: 'get'
+  })
+}

src/views/money/buy/index.vue

@@ -73,17 +73,31 @@
       :total="total"
       @pagination="getList"
     />
+
+    <el-card style="margin-top: 50px">
+      <div>
+        <!-- 装ECharts的容器 -->
+        <div id="main" style="width: 100%; height: 520px; background: #fff">
         </div>
+      </div>
+    </el-card>
+  </div>
+
+
 </template>
 
 
 <script>
+import * as echarts from 'echarts' //引用echarts
 import { userloginfo } from "@/api/system/user";
 import PanelGroup from "@/views/dashboard/PanelGroup.vue";
 export default {
   components: {PanelGroup},
   data() {
     return {
+      charts: "",
+      opinionData: [], // 数据
+      b: [],
       dateRange: [],
       listDate: [],
       total: 0,
@@ -96,6 +110,9 @@ export default {
   created() {
     this.getList();
   },
+  mounted() {
+    this.drawLine();
+  },
   methods: {
     /** 搜索按钮操作 */
     handleQuery() {
@@ -112,8 +129,106 @@ export default {
       userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
           this.listDate = response.data.rows;
           this.total = response.data.total;
+          this.drawLine();
         }
-      );}
+      );},
-  }
+    drawLine() {
+      // 初始化折线图
+      this.charts = echarts.init(document.getElementById('main'));
+
+      this.b = this.listDate.map(item => item.dataName);
+      this.opinionData = this.listDate.map(item => item.amount);
+
+      // 设置折线图数据和样式
+      this.charts.setOption({
+        title: {
+          left: "3%",
+          top: "5%",
+          text: "消费趋势", // 自定义
+        },
+
+        tooltip: {
+          trigger: "axis",
+        },
+
+        legend: {
+          align: "right",
+          left: "3%",
+          top: "15%",
+          data: ["消费金额"], // 自定义
+        },
+
+        grid: {
+          top: "30%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          containLabel: true,
+        },
+
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+
+        // 自定义：设置x轴刻度
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          // 自定义标签
+          data:this.b
+          // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+        },
+
+        // 自定义：设置y轴刻度
+        yAxis: {
+          type: "value",
+          boundaryGap: true,
+          splitNumber: 4,
+          interval: 250,
+        },
+
+        // 设置数据
+        series: [
+          {
+            name: "消费金额", // 自定义
+            type: "line",
+            stack: "总量", // 自定义
+            data: this.opinionData, // 自定义
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "rgb(255,200,213)",
+                  },
+                  {
+                    offset: 1,
+                    color: "#ffffff",
+                  },
+                ],
+                global: false,
+              },
+            },
+            itemStyle: {
+              color: "rgb(255,96,64)",
+              lineStyle: {
+                color: "rgb(255,96,64)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
 }
 </script>

src/views/port/port/employee.vue

@@ -1,19 +1,29 @@
 <template>
   <div>
-<!--    <el-button type="primary">+申请新数据</el-button>-->
+    <el-container style="height: 1000px; border: 1px solid #eee">
+      <el-aside width="180px">
+        <el-menu :default-openeds="['1', '3']">
+          <el-menu-item-group>
+            <span style="font-weight: bold;font-size: 25px;">全部类型：</span>
+          </el-menu-item-group>
+          <el-menu-item-group v-for="i in connectSort" :key="i.value" :label="i.connectorSort" :value="i.connectorSort" :disabled="item.disabled">>
+            <el-link type="primary" style="font-weight: bold;font-size: 20px;" v-model="connectSort.connectorSort"></el-link>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+        <el-main>
           <el-form label-width="40px" :model="form">
             <el-form-item>
-        <input v-model="form.connectorName" style="padding: 10px 10px;float: initial">
+              <input v-model="form.connectorName" style="padding: 10px 10px;float: initial" placeholder=请输入关键字>
-        <button @click="findApiList" style="padding: 10px 10px">查询</button>
+              <el-button @click="findApiList" style="padding: 10px 10px">查询</el-button>
-        <span style="font-weight: bold;font-size: 20px;">全部类型：</span>
+
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">电子商务</el-button>
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">应用开发</el-button>
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">生活服务</el-button>
             </el-form-item>
           </el-form>
           <el-row :gutter="50">
             <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
-        <el-card class="box-card" style="margin-top: 15px;width: 500px; height: 600px;" shadow="hover">
+              <el-card class="box-card" style="margin-top: 15px;width: 450px; height: 600px;" shadow="hover">
                 <div slot="header" class="clearfix">
                   <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
                   <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
@@ -34,7 +44,7 @@
               </el-card>
             </el-col>
           </el-row>
-<!--    手机号查询归属地-->
+          <!--    手机号查询归属地-->
           <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
             <el-form :model="formInline">
               <el-form-item label="手机号" :label-width="formLabelWidth">
@@ -70,7 +80,7 @@
               <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
             </div>
           </el-dialog>
-<!--    新闻头条-->
+          <!--    新闻头条-->
           <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
             <el-table :data="gridData">
               <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
@@ -154,7 +164,7 @@
               </el-tree>
             </el-aside>
           </el-dialog>
-<!--  购买-->
+          <!--  购买-->
           <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
             <el-form :model="buyForm">
               <el-form-item label="产品编号" :label-width="formLabelWidth">
@@ -200,6 +210,10 @@
               <el-button type="primary" @click="buyInterface()">购 买</el-button>
             </div>
           </el-dialog>
+        </el-main>
+      </el-container>
+    </el-container>
+<!--    <el-button type="primary">+申请新数据</el-button>-->
 
   </div>
 </template>
@@ -217,6 +231,7 @@ import {getPostcode} from "@/api/port/port";
 import {getWeather} from "@/api/port/port";
 import {doBuyInterface} from "@/api/port/port";
 import {userBalance} from "@/api/system/user";
+import {findConnectSort} from "@/api/port/port";
 export default {
   //import引入的组件需要注入到对象中才能使用"
   components: {},
@@ -234,6 +249,7 @@ export default {
         children:"citys",
         label:'provinceName',
       },
+      connectSort:[],
       connectorList:[],
       gridData:[],
       gridData2:[],
@@ -463,12 +479,19 @@ export default {
         this.connectorList=res.data;
         console.log(res.data);
       })
+    },
+    findConnectSort(){
+      findConnectSort().then((res)=>{
+        this.connectSort=res.data;
+        console.log(this.connectSort);
+      })
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
     this.fetchUserBalance();
     this.findApiList();
+    this.findConnectSort()
   },
   //生命周期 - 挂载完成（可以访问DOM元素）",
   mounted() {