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 data:data
}) })
} }
//API页面类型分类
export function findConnectSort() {
return request({
url: '/mart/connector/findConnectSort',
method: 'get'
})
}

View File

@ -73,17 +73,31 @@
:total="total" :total="total"
@pagination="getList" @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> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' //echarts
import { userloginfo } from "@/api/system/user"; import { userloginfo } from "@/api/system/user";
import PanelGroup from "@/views/dashboard/PanelGroup.vue"; import PanelGroup from "@/views/dashboard/PanelGroup.vue";
export default { export default {
components: {PanelGroup}, components: {PanelGroup},
data() { data() {
return { return {
charts: "",
opinionData: [], //
b: [],
dateRange: [], dateRange: [],
listDate: [], listDate: [],
total: 0, total: 0,
@ -96,6 +110,9 @@ export default {
created() { created() {
this.getList(); this.getList();
}, },
mounted() {
this.drawLine();
},
methods: { methods: {
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
@ -112,8 +129,106 @@ export default {
userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => { userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
this.listDate = response.data.rows; this.listDate = response.data.rows;
this.total = response.data.total; 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> </script>

View File

@ -1,104 +1,114 @@
<template> <template>
<div> <div>
<!-- <el-button type="primary">+申请新数据</el-button>--> <el-container style="height: 1000px; border: 1px solid #eee">
<el-form label-width="40px" :model="form"> <el-aside width="180px">
<el-form-item> <el-menu :default-openeds="['1', '3']">
<input v-model="form.connectorName" style="padding: 10px 10px;float: initial"> <el-menu-item-group>
<button @click="findApiList" style="padding: 10px 10px">查询</button> <span style="font-weight: bold;font-size: 25px;">全部类型</span>
<span style="font-weight: bold;font-size: 20px;">全部类型</span> </el-menu-item-group>
<el-button style="font-weight: bold;font-size: 20px;" type="text">电子商务</el-button> <el-menu-item-group v-for="i in connectSort" :key="i.value" :label="i.connectorSort" :value="i.connectorSort" :disabled="item.disabled">>
<el-button style="font-weight: bold;font-size: 20px;" type="text">应用开发</el-button> <el-link type="primary" style="font-weight: bold;font-size: 20px;" v-model="connectSort.connectorSort"></el-link>
<el-button style="font-weight: bold;font-size: 20px;" type="text">生活服务</el-button> </el-menu-item-group>
</el-form-item> </el-menu>
</el-form> </el-aside>
<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-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">API</el-button> <el-container>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">API</el-button> <el-main>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">API</el-button> <el-form label-width="40px" :model="form">
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">API</el-button> <el-form-item>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">API</el-button> <input v-model="form.connectorName" style="padding: 10px 10px;float: initial" placeholder=>
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">API</el-button> <el-button @click="findApiList" style="padding: 10px 10px">查询</el-button>
</el-card>
</el-col> </el-form-item>
</el-row> </el-form>
<!-- 手机号查询归属地--> <el-row :gutter="50">
<el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible"> <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
<el-form :model="formInline"> <el-card class="box-card" style="margin-top: 15px;width: 450px; height: 600px;" shadow="hover">
<el-form-item label="手机号" :label-width="formLabelWidth"> <div slot="header" class="clearfix">
<el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input> <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
</el-form-item> <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)"></el-button>
<span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true"> </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.province}}<br>
城市{{this.formInline.city}}<br> 城市{{this.formInline.city}}<br>
区号{{this.formInline.areacode}}<br> 区号{{this.formInline.areacode}}<br>
邮编{{this.formInline.zip}}<br> 邮编{{this.formInline.zip}}<br>
运营商{{this.formInline.company}}<br> 运营商{{this.formInline.company}}<br>
</span> </span>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="phonePlace()"></el-button> <el-button type="primary" @click="phonePlace()"></el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--IP查询归属地--> <!--IP查询归属地-->
<el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1"> <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
<el-form :model="formIp"> <el-form :model="formIp">
<el-form-item label="IP" > <el-form-item label="IP" >
<el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input> <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
</el-form-item> </el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true"> <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
国家{{this.formIp.country}}<br> 国家{{this.formIp.country}}<br>
省份{{this.formIp.province}}<br> 省份{{this.formIp.province}}<br>
城市{{this.formIp.city}}<br> 城市{{this.formIp.city}}<br>
运营商{{this.formIp.isp}}<br> 运营商{{this.formIp.isp}}<br>
</span> </span>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getIpPlace()"></el-button> <el-button type="primary" @click="getIpPlace()"></el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 新闻头条--> <!-- 新闻头条-->
<el-dialog title="新闻头条" :visible.sync="dialogTableVisible"> <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
<el-table :data="gridData"> <el-table :data="gridData">
<el-table-column property="title" label="新闻标题" width="150"></el-table-column> <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="date" label="新闻时间" width="200"></el-table-column>
<el-table-column property="category" label="新闻分类"></el-table-column> <el-table-column property="category" label="新闻分类"></el-table-column>
<el-table-column property="authorName" label="新闻来源"></el-table-column> <el-table-column property="authorName" label="新闻来源"></el-table-column>
</el-table> </el-table>
</el-dialog> </el-dialog>
<!--生辰助手--> <!--生辰助手-->
<el-dialog title="生辰助手" :visible.sync="dialogFormVisible2"> <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
<el-form :model="formBirthday"> <el-form :model="formBirthday">
<el-form-item label="年" > <el-form-item label="年" >
<el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input> <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="月" > <el-form-item label="月" >
<el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input> <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="日" > <el-form-item label="日" >
<el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input> <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="时" > <el-form-item label="时" >
<el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input> <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
</el-form-item> </el-form-item>
<span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true"> <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
years {{this.formBirthday.years}}<br> years {{this.formBirthday.years}}<br>
months {{this.formBirthday.months}}<br> months {{this.formBirthday.months}}<br>
days {{this.formBirthday.days}}<br> days {{this.formBirthday.days}}<br>
@ -119,87 +129,91 @@
eightall {{this.formBirthday.eightall}}<br> eightall {{this.formBirthday.eightall}}<br>
fiveall {{this.formBirthday.fiveall}} fiveall {{this.formBirthday.fiveall}}
</span> </span>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getBirthday()"></el-button> <el-button type="primary" @click="getBirthday()"></el-button>
</div> </div>
</el-dialog> </el-dialog>
<!--邮编查询--> <!--邮编查询-->
<el-dialog title="邮编查询" :visible.sync="dialogFormVisible3"> <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
<el-form :model="formPostCode"> <el-form :model="formPostCode">
<el-form-item label="邮编" > <el-form-item label="邮编" >
<el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input> <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
</el-form-item> </el-form-item>
<el-table :data="gridData2" v-if="formPostCode.reason==true"> <el-table :data="gridData2" v-if="formPostCode.reason==true">
<el-table-column property="postNumber" label="邮编" width="150"></el-table-column> <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="province" label="省" width="200"></el-table-column>
<el-table-column property="city" label="市"></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="district" label="区"></el-table-column>
<el-table-column property="address" label="县"></el-table-column> <el-table-column property="address" label="县"></el-table-column>
</el-table> </el-table>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="getPostcode()"></el-button> <el-button type="primary" @click="getPostcode()"></el-button>
</div> </div>
</el-dialog> </el-dialog>
<!-- 气象预警--> <!-- 气象预警-->
<el-dialog title="气象预警" :visible.sync="dialogFormVisible4"> <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
<el-aside width="100%"> <el-aside width="100%">
<el-tree :data="data" :props="defaultProps"> <el-tree :data="data" :props="defaultProps">
<template slot-scope="{data,node}"> <template slot-scope="{data,node}">
<span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span> <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
</template> </template>
</el-tree> </el-tree>
</el-aside> </el-aside>
</el-dialog> </el-dialog>
<!-- 购买--> <!-- 购买-->
<el-dialog title="购买API" :visible.sync="dialogFormVisible5"> <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
<el-form :model="buyForm"> <el-form :model="buyForm">
<el-form-item label="产品编号" :label-width="formLabelWidth"> <el-form-item label="产品编号" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="产品名称" :label-width="formLabelWidth"> <el-form-item label="产品名称" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="产品介绍" :label-width="formLabelWidth"> <el-form-item label="产品介绍" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="产品价格" :label-width="formLabelWidth"> <el-form-item label="产品价格" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="产品公司" :label-width="formLabelWidth"> <el-form-item label="产品公司" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="API_URL" :label-width="formLabelWidth"> <el-form-item label="API_URL" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="API_EYE" :label-width="formLabelWidth"> <el-form-item label="API_EYE" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请求方式" :label-width="formLabelWidth"> <el-form-item label="请求方式" :label-width="formLabelWidth">
<el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input> <el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
</el-form-item> </el-form-item>
<el-form-item label="购买次数" :label-width="formLabelWidth"> <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-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
</el-form-item> </el-form-item>
<p style="font-weight: bold;font-size: 20px">余额{{ userBalanceData.userBalance || '加载中...' }}</p> <p style="font-weight: bold;font-size: 20px">余额{{ userBalanceData.userBalance || '加载中...' }}</p>
<span style="font-weight: bold;font-size: 20px">共计{{buyForm.connectorPrice*buyForm.connectorFrequency}}</span> <span style="font-weight: bold;font-size: 20px">共计{{buyForm.connectorPrice*buyForm.connectorFrequency}}</span>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="primary" @click="buyInterface()"> </el-button> <el-button type="primary" @click="buyInterface()"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</el-main>
</el-container>
</el-container>
<!-- <el-button type="primary">+申请新数据</el-button>-->
</div> </div>
</template> </template>
@ -217,6 +231,7 @@ import {getPostcode} from "@/api/port/port";
import {getWeather} from "@/api/port/port"; import {getWeather} from "@/api/port/port";
import {doBuyInterface} from "@/api/port/port"; import {doBuyInterface} from "@/api/port/port";
import {userBalance} from "@/api/system/user"; import {userBalance} from "@/api/system/user";
import {findConnectSort} from "@/api/port/port";
export default { export default {
//import使" //import使"
components: {}, components: {},
@ -234,6 +249,7 @@ export default {
children:"citys", children:"citys",
label:'provinceName', label:'provinceName',
}, },
connectSort:[],
connectorList:[], connectorList:[],
gridData:[], gridData:[],
gridData2:[], gridData2:[],
@ -463,12 +479,19 @@ export default {
this.connectorList=res.data; this.connectorList=res.data;
console.log(res.data); console.log(res.data);
}) })
},
findConnectSort(){
findConnectSort().then((res)=>{
this.connectSort=res.data;
console.log(this.connectSort);
})
} }
}, },
// - 访this", // - 访this",
created() { created() {
this.fetchUserBalance(); this.fetchUserBalance();
this.findApiList(); this.findApiList();
this.findConnectSort()
}, },
// - 访DOM", // - 访DOM",
mounted() { mounted() {