Qin Dong Ming 2024-09-03 21:22:51 +08:00
commit 66afe0fb92
3 changed files with 299 additions and 154 deletions

View File

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

View File

@ -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>

View File

@ -1,104 +1,114 @@
<template>
<div>
<!-- <el-button type="primary">+申请新数据</el-button>-->
<el-form label-width="40px" :model="form">
<el-form-item>
<input v-model="form.connectorName" style="padding: 10px 10px;float: initial">
<button @click="findApiList" style="padding: 10px 10px">查询</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">
<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>
</div>
<span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
<el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
<span style="font-weight: bold;font-size: 20px">产品介绍</span>
{{connector.connectorDescribe}}<br>
<span style="font-weight: bold;font-size: 20px">价格</span>
{{connector.connectorPrice}}/<br>
<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-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">API</el-button>
</el-card>
</el-col>
</el-row>
<!-- 手机号查询归属地-->
<el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
<el-form :model="formInline">
<el-form-item label="手机号" :label-width="formLabelWidth">
<el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
<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" placeholder=>
<el-button @click="findApiList" style="padding: 10px 10px">查询</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: 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>
</div>
<span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
<el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
<span style="font-weight: bold;font-size: 20px">产品介绍</span>
{{connector.connectorDescribe}}<br>
<span style="font-weight: bold;font-size: 20px">价格</span>
{{connector.connectorPrice}}/<br>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">API</el-button>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">API</el-button>
</el-card>
</el-col>
</el-row>
<!-- 手机号查询归属地-->
<el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
<el-form :model="formInline">
<el-form-item label="手机号" :label-width="formLabelWidth">
<el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
省份{{this.formInline.province}}<br>
城市{{this.formInline.city}}<br>
区号{{this.formInline.areacode}}<br>
邮编{{this.formInline.zip}}<br>
运营商{{this.formInline.company}}<br>
</span>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="phonePlace()"></el-button>
</div>
</el-dialog>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="phonePlace()"></el-button>
</div>
</el-dialog>
<!--IP查询归属地-->
<el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
<el-form :model="formIp">
<el-form-item label="IP" >
<el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
<!--IP查询归属地-->
<el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
<el-form :model="formIp">
<el-form-item label="IP" >
<el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
国家{{this.formIp.country}}<br>
省份{{this.formIp.province}}<br>
城市{{this.formIp.city}}<br>
运营商{{this.formIp.isp}}<br>
</span>
</el-form>
<div slot="footer" class="dialog-footer">
<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>
<el-table-column property="date" label="新闻时间" width="200"></el-table-column>
<el-table-column property="category" label="新闻分类"></el-table-column>
<el-table-column property="authorName" label="新闻来源"></el-table-column>
</el-table>
</el-dialog>
</el-form>
<div slot="footer" class="dialog-footer">
<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>
<el-table-column property="date" label="新闻时间" width="200"></el-table-column>
<el-table-column property="category" label="新闻分类"></el-table-column>
<el-table-column property="authorName" label="新闻来源"></el-table-column>
</el-table>
</el-dialog>
<!--生辰助手-->
<el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
<el-form :model="formBirthday">
<el-form-item label="年" >
<el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
</el-form-item>
<!--生辰助手-->
<el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
<el-form :model="formBirthday">
<el-form-item label="年" >
<el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
</el-form-item>
<el-form-item label="月" >
<el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
</el-form-item>
<el-form-item label="月" >
<el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
</el-form-item>
<el-form-item label="日" >
<el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
</el-form-item>
<el-form-item label="日" >
<el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
</el-form-item>
<el-form-item label="时" >
<el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
<el-form-item label="时" >
<el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
</el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
years {{this.formBirthday.years}}<br>
months {{this.formBirthday.months}}<br>
days {{this.formBirthday.days}}<br>
@ -119,87 +129,91 @@
eightall {{this.formBirthday.eightall}}<br>
fiveall {{this.formBirthday.fiveall}}
</span>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getBirthday()"></el-button>
</div>
</el-dialog>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getBirthday()"></el-button>
</div>
</el-dialog>
<!--邮编查询-->
<el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
<el-form :model="formPostCode">
<el-form-item label="邮编" >
<el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
</el-form-item>
<el-table :data="gridData2" v-if="formPostCode.reason==true">
<el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
<el-table-column property="province" label="省" width="200"></el-table-column>
<el-table-column property="city" label="市"></el-table-column>
<el-table-column property="district" label="区"></el-table-column>
<el-table-column property="address" label="县"></el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getPostcode()"></el-button>
</div>
</el-dialog>
<!--邮编查询-->
<el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
<el-form :model="formPostCode">
<el-form-item label="邮编" >
<el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
</el-form-item>
<el-table :data="gridData2" v-if="formPostCode.reason==true">
<el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
<el-table-column property="province" label="省" width="200"></el-table-column>
<el-table-column property="city" label="市"></el-table-column>
<el-table-column property="district" label="区"></el-table-column>
<el-table-column property="address" label="县"></el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getPostcode()"></el-button>
</div>
</el-dialog>
<!-- 气象预警-->
<el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
<el-aside width="100%">
<el-tree :data="data" :props="defaultProps">
<template slot-scope="{data,node}">
<span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
</template>
</el-tree>
</el-aside>
</el-dialog>
<!-- 购买-->
<el-dialog title="购买API" :visible.sync="dialogFormVisible5">
<el-form :model="buyForm">
<el-form-item label="产品编号" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<!-- 气象预警-->
<el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
<el-aside width="100%">
<el-tree :data="data" :props="defaultProps">
<template slot-scope="{data,node}">
<span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
</template>
</el-tree>
</el-aside>
</el-dialog>
<!-- 购买-->
<el-dialog title="购买API" :visible.sync="dialogFormVisible5">
<el-form :model="buyForm">
<el-form-item label="产品编号" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品名称" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品名称" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品介绍" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品介绍" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品价格" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品价格" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品公司" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="产品公司" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="API_URL" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="API_URL" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="API_EYE" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="API_EYE" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="请求方式" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="请求方式" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
</el-form-item>
<el-form-item label="购买次数" :label-width="formLabelWidth">
<el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
</el-form-item>
<p style="font-weight: bold;font-size: 20px">余额{{ userBalanceData.userBalance || '加载中...' }}</p>
<span style="font-weight: bold;font-size: 20px">共计{{buyForm.connectorPrice*buyForm.connectorFrequency}}</span>
<el-form-item label="购买次数" :label-width="formLabelWidth">
<el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
</el-form-item>
<p style="font-weight: bold;font-size: 20px">余额{{ userBalanceData.userBalance || '加载中...' }}</p>
<span style="font-weight: bold;font-size: 20px">共计{{buyForm.connectorPrice*buyForm.connectorFrequency}}</span>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="buyInterface()"> </el-button>
</div>
</el-dialog>
</el-form>
<div slot="footer" class="dialog-footer">
<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() {