开发代码生成功能
This commit is contained in:
izory
@@ -26,10 +26,10 @@ export function cleanOperlog() {
|
||||
}
|
||||
|
||||
// 导出操作日志
|
||||
export function exportOperlog(query) {
|
||||
return request({
|
||||
url: '/monitor/operlog/export',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// export function exportOperlog(query) {
|
||||
// return request({
|
||||
// url: '/monitor/operlog/export',
|
||||
// method: 'get',
|
||||
// params: query
|
||||
// })
|
||||
// }
|
||||
|
||||
@@ -6,16 +6,13 @@
|
||||
<!-- 面包屑导航 -->
|
||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
|
||||
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="!topNav"/> -->
|
||||
<!-- <el-menu class="el-menu">
|
||||
<el-menu-item index="4" text-color="#fff"><a href="/bigdata" target="_blank">大屏数据</a></el-menu-item>
|
||||
</el-menu> -->
|
||||
|
||||
<div class="right-menu">
|
||||
<template v-if="device!=='mobile'">
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom"> -->
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
<!-- </el-tooltip> -->
|
||||
</template>
|
||||
|
||||
@@ -85,9 +82,6 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
to() {
|
||||
this.$router.replace("/bigdata");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,218 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div id="big-data-container" class="big-data-container">
|
||||
<div class="head">
|
||||
<h1>大屏数据统计分析显示</h1>
|
||||
</div>
|
||||
<div class="data-container">
|
||||
<div class="data-left">
|
||||
<div class="data-left-item">
|
||||
<div class="title">商品销量分类</div>
|
||||
<div id="chart-left-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">本月商品销量</div>
|
||||
<div id="chart-left-3" style="height: calc(100% - 30px);"></div>
|
||||
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-left-item">
|
||||
<div class="title">7日订单销量</div>
|
||||
<div id="chart-left-2" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-center">
|
||||
<!-- <div class="title">中间位置</div> -->
|
||||
<div class="center-top-num">
|
||||
<div class="item">
|
||||
<div class="text">累计销量</div>
|
||||
<div class="num">220,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">累计销售金额</div>
|
||||
<div class="num">58,000,000</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="text">购买用户人数</div>
|
||||
<div class="num">15,000</div>
|
||||
</div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="center-top">
|
||||
<div class="title">用户活跃信息-1</div>
|
||||
<iview-circle :size="200" style="padding: 8px 0;"></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="title">订单销售统计</div>
|
||||
<div id="chart-center" class="chart-center"></div>
|
||||
</div>
|
||||
<div class="data-right">
|
||||
<div class="data-right-item">
|
||||
<div class="title">销售情况走势</div>
|
||||
<div id="chart-right-1" style="height: calc(100% - 30px);"></div>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item">
|
||||
<div class="title">用户活跃信息</div>
|
||||
<iview-circle></iview-circle>
|
||||
<div class="data-foot-line"></div>
|
||||
</div>
|
||||
<div class="data-right-item right-3">
|
||||
<div class="title">商品销售排行</div>
|
||||
<div id="chart-right-3" class="right-item">
|
||||
<div class="item">
|
||||
<div class="top">排名</div>
|
||||
<div class="pro-name">商品名称</div>
|
||||
<div class="num">销量</div>
|
||||
<div class="num">销售金额</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-1">
|
||||
<span>1</span>
|
||||
</div>
|
||||
<div class="pro-name">卡帝乐鳄鱼</div>
|
||||
<div class="num">2,200</div>
|
||||
<div class="num">360,00</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-2">
|
||||
<span>2</span>
|
||||
</div>
|
||||
<div class="pro-name">春夏男T恤</div>
|
||||
<div class="num">1,700</div>
|
||||
<div class="num">24,500</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="top top-3">
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class="pro-name">男女同款休闲鞋</div>
|
||||
<div class="num">1,120</div>
|
||||
<div class="num">12,700</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
var echarts = require("echarts");
|
||||
import {
|
||||
chartLeft1,
|
||||
chartLeft2,
|
||||
chartLeft3,
|
||||
chartRight1
|
||||
} from "./bigdata/chart-options";
|
||||
import IviewCircle from "./bigdata/IviewCircle";
|
||||
import "./bigdata/layout.less";
|
||||
export default {
|
||||
components: {
|
||||
"iview-circle": IviewCircle
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {
|
||||
var $chartLeft1 = echarts.init(document.getElementById("chart-left-1"));
|
||||
$chartLeft1.setOption(chartLeft1);
|
||||
|
||||
var $chartLeft2 = echarts.init(document.getElementById("chart-left-2"));
|
||||
$chartLeft2.setOption(chartLeft2);
|
||||
|
||||
var $chartLeft3 = echarts.init(document.getElementById("chart-left-3"));
|
||||
$chartLeft3.setOption(chartLeft3);
|
||||
|
||||
var $chartCenter = echarts.init(document.getElementById("chart-center"));
|
||||
$chartCenter.setOption(chartRight1);
|
||||
|
||||
var $chartRight1 = echarts.init(document.getElementById("chart-right-1"));
|
||||
$chartRight1.setOption(chartRight1);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
/* .chart-center {
|
||||
display: flex;
|
||||
border: 1px solid #0000ff;
|
||||
height: 200px;
|
||||
flex-direction: column;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chart-center .item {
|
||||
text-align: center;
|
||||
border: 1px solid #00c1b3;
|
||||
flex: 1;
|
||||
} */
|
||||
.right-3 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* margin-top: 20px; */
|
||||
}
|
||||
|
||||
.right-3 .right-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.right-3 .item {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #549069;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
margin: 0 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.right-3 .item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.right-3 .item > div {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.right-3 .top {
|
||||
width: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-3 .top span {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
top: 5px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.right-3 .top-1 span {
|
||||
background: #e80d0d;
|
||||
}
|
||||
|
||||
.right-3 .top-2 span {
|
||||
background: #00c935;
|
||||
}
|
||||
|
||||
.right-3 .top-3 span {
|
||||
background: #0083f4;
|
||||
}
|
||||
|
||||
.right-3 .num {
|
||||
width: 88px;
|
||||
}
|
||||
|
||||
.right-3 .pro-name {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<div class="demo-Circle">
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>1500</h1>
|
||||
<p>昨日活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{1500/20000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
<div style>
|
||||
<i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
|
||||
<div class="demo-Circle-custom">
|
||||
<h1>12000</h1>
|
||||
<p>上月活跃用户数量</p>
|
||||
<span>
|
||||
占比
|
||||
<i>{{12000/150000}}%</i>
|
||||
</span>
|
||||
</div>
|
||||
</i-circle>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 150,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.demo-Circle {
|
||||
display: flex;
|
||||
}
|
||||
.demo-Circle > div {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.demo-Circle > div:first-child {
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.demo-Circle > div:last-child {
|
||||
padding-right: 10%;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.demo-Circle-custom {
|
||||
& h1 {
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}
|
||||
& p {
|
||||
color: #ece8e8;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
& span {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
color: wheat;
|
||||
font-size: 14px;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
background: #e0e3e6;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
& span i {
|
||||
font-style: normal;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,471 +0,0 @@
|
||||
var echarts = require("echarts");
|
||||
let chartLeft1 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"商超门店",
|
||||
"教育培训",
|
||||
"房地产",
|
||||
"生活服务",
|
||||
"汽车销售",
|
||||
"旅游酒店",
|
||||
"五金建材"
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [200, 600, 300, 900, 1500, 1200, 600],
|
||||
barWidth: "35%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
let chartLeft2 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "10px",
|
||||
right: "0%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"07.01",
|
||||
"07.02",
|
||||
"07.03",
|
||||
"07.04",
|
||||
"07.05",
|
||||
"07.06",
|
||||
],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// rotate:50,
|
||||
show: true,
|
||||
splitNumber: 15,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
], series: [
|
||||
{
|
||||
type: "bar",
|
||||
name: "销量",
|
||||
data: [1200, 800, 300, 500, 560, 220],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}, {
|
||||
type: "bar",
|
||||
name: "订单",
|
||||
data: [1000, 750, 380, 450, 450, 120],
|
||||
barWidth: "25%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#46d000",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartLeft3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: "0%",
|
||||
top: "-5px",
|
||||
right: "3%",
|
||||
bottom: "4%",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1 )",
|
||||
width: 1,
|
||||
type: "solid"
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
data: ['周一', '周二', '周三', '周四', '周五']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideRight'
|
||||
},
|
||||
barWidth: "55%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2f89cf",
|
||||
opacity: 1,
|
||||
barBorderRadius: 5
|
||||
}
|
||||
},
|
||||
data: [120, 302, 400, 200, 700]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let chartRight1 = {
|
||||
title: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
backgroundColor: "#6a7985"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
color: ["#ffab6f", "#09b916", "#83cddc"], //图例颜色
|
||||
legend: {
|
||||
top: "0%",
|
||||
icon: "roundRect",
|
||||
data: ["销售订单", "退货订单", "折扣订单"],
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.5)",
|
||||
fontSize: "12"
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {}
|
||||
},
|
||||
grid: {
|
||||
left: "10",
|
||||
top: "20",
|
||||
right: "10",
|
||||
bottom: "10",
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.2)"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
"2020.06.15",
|
||||
"2020.06.16",
|
||||
"2020.06.17",
|
||||
"2020.06.18",
|
||||
"2020.06.19",
|
||||
"2020.06.20",
|
||||
"2020.06.21",
|
||||
"2020.06.22"
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisTick: { show: false },
|
||||
minInterval: 60,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "rgba(255,255,255,.6)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,.1)"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "销售订单",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#45d4ba",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#83cddc"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#bfdffbb5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [5, 22, 150, 54, 1, 230, 4, 1]
|
||||
},
|
||||
{
|
||||
name: "退货订单",
|
||||
type: "line",
|
||||
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: "#04a710",
|
||||
width: 1
|
||||
}, //
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#0cbf22"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#b8f7d1b5"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [10, 150, 1, 250, 20, 100, 10, 150]
|
||||
},
|
||||
{
|
||||
name: "折扣订单",
|
||||
type: "line",
|
||||
|
||||
lineStyle: {
|
||||
color: "#0864c3",
|
||||
width: 1
|
||||
}, //线条的样式
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#29d7ff"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#34ccef85"
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [100, 2, 260, 1, 200, 30, 101, 40]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
export { chartLeft1, chartLeft2,chartLeft3, chartRight1 }
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB |
@@ -1,197 +0,0 @@
|
||||
|
||||
.big-data-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #1400a8;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
.head {
|
||||
height: 75px;
|
||||
/* height: 1.05rem; */
|
||||
background: url(./head_bg.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* font-size: .4rem; */
|
||||
/* line-height: .8rem; */
|
||||
line-height: 71px;
|
||||
}
|
||||
|
||||
.data-container {
|
||||
/* margin: 5px 15px;
|
||||
height:100%; */
|
||||
|
||||
margin: 0px 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 76px;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.data-container > div {
|
||||
float: left;
|
||||
/* border: 1px solid white; */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-center {
|
||||
padding: 0 0.9rem;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// .center-top{
|
||||
// height: 210px;
|
||||
// background: red;
|
||||
// }
|
||||
.chart-center{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.chart-center{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// background: white;
|
||||
}
|
||||
.data-left,
|
||||
.data-right {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.data-left-item,
|
||||
.data-right-item,.center-top,.center-top-num,.chart-center {
|
||||
border: 1px solid rgba(25, 186, 139, 0.17);
|
||||
padding: 0 0.2rem 0.4rem 0.15rem;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
margin-bottom: 0.15rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.data-foot-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.data-foot-line:before,
|
||||
.data-foot-line:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-bottom: 2px solid #02a6b5;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.data-foot-line:before {
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.boxall:after,
|
||||
.data-foot-line:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.boxall:before,
|
||||
.boxall:after {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:before,
|
||||
.data-right-item:before,
|
||||
.center-top-num:before,
|
||||
.center-top:before{
|
||||
border-left: 2px solid #02a6b5;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height:10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left-item:after,
|
||||
.data-right-item:after,
|
||||
.center-top-num:after,
|
||||
.center-top:after {
|
||||
border-right: 2px solid #02a6b5;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: "";
|
||||
border-top: 2px solid #02a6b5;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.data-left,
|
||||
.data-right {
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
.data-left > .data-left-item,
|
||||
.data-right > .data-right-item {
|
||||
flex: 1;
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
|
||||
.data-center .title,
|
||||
.data-left > .data-left-item .title,
|
||||
.data-right > .data-right-item .title {
|
||||
/* font-size: .2rem; */
|
||||
font-size: 1rem;
|
||||
padding: 7px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* line-height: .5rem; */
|
||||
}
|
||||
|
||||
.data-center .chart-center{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.center-top-num{
|
||||
height: 80px;
|
||||
padding-top: 7px;
|
||||
margin-bottom: 0.8rem;
|
||||
display: flex;
|
||||
.item{
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.text{
|
||||
color: #fcf0d8;
|
||||
font-size: 14px;
|
||||
}
|
||||
.num{
|
||||
font-size: 34px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
font-weight: bold;
|
||||
color: #67caca;
|
||||
}
|
||||
}
|
||||
-151
@@ -1,151 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>基本信息</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<table cellspacing="0" style="width: 100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><div class="cell">Redis版本</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_version }}</div></td>
|
||||
<td><div class="cell">运行模式</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></td>
|
||||
<td><div class="cell">端口</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.tcp_port }}</div></td>
|
||||
<td><div class="cell">客户端数</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.connected_clients }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">运行时间(天)</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.uptime_in_days }}</div></td>
|
||||
<td><div class="cell">使用内存</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.used_memory_human }}</div></td>
|
||||
<td><div class="cell">使用CPU</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></td>
|
||||
<td><div class="cell">内存配置</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.maxmemory_human }}</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div class="cell">AOF是否开启</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></td>
|
||||
<td><div class="cell">RDB是否成功</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></td>
|
||||
<td><div class="cell">Key数量</div></td>
|
||||
<td><div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div></td>
|
||||
<td><div class="cell">网络入口/出口</div></td>
|
||||
<td><div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header"><span>命令统计</span></div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="commandstats" style="height: 420px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<div slot="header">
|
||||
<span>内存信息</span>
|
||||
</div>
|
||||
<div class="el-table el-table--enable-row-hover el-table--medium">
|
||||
<div ref="usedmemory" style="height: 420px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCache } from "@/api/monitor/cache";
|
||||
// import echarts from "echarts";
|
||||
|
||||
export default {
|
||||
name: "Server",
|
||||
data() {
|
||||
return {
|
||||
// 加载层信息
|
||||
loading: [],
|
||||
// 统计命令信息
|
||||
commandstats: null,
|
||||
// 使用内存
|
||||
usedmemory: null,
|
||||
// cache信息
|
||||
cache: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
this.openLoading();
|
||||
},
|
||||
methods: {
|
||||
/** 查缓存询信息 */
|
||||
getList() {
|
||||
getCache().then((response) => {
|
||||
this.cache = response.data;
|
||||
this.loading.close();
|
||||
|
||||
this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
|
||||
this.commandstats.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "命令",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [15, 95],
|
||||
center: ["50%", "38%"],
|
||||
data: response.data.commandStats,
|
||||
animationEasing: "cubicInOut",
|
||||
animationDuration: 1000,
|
||||
},
|
||||
],
|
||||
});
|
||||
this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
|
||||
this.usedmemory.setOption({
|
||||
tooltip: {
|
||||
formatter: "{b} <br/>{a} : {c}M",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "峰值",
|
||||
type: "gauge",
|
||||
detail: {
|
||||
formatter: "{value}M",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(this.cache.info.used_memory_human),
|
||||
name: "内存消耗",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
},
|
||||
// 打开加载层
|
||||
openLoading() {
|
||||
this.loading = this.$loading({
|
||||
lock: true,
|
||||
text: "拼命读取中",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
||||
<el-form-item label="登录地址" prop="ipaddr">
|
||||
<el-input
|
||||
v-model="queryParams.ipaddr"
|
||||
placeholder="请输入登录地址"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名称" prop="userName">
|
||||
<el-input
|
||||
v-model="queryParams.userName"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column label="序号" type="index" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="会话编号" align="center" prop="tokenId" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录名称" align="center" prop="userName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="部门名称" align="center" prop="deptName" />
|
||||
<el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="浏览器" align="center" prop="browser" />
|
||||
<el-table-column label="操作系统" align="center" prop="os" />
|
||||
<el-table-column label="登录时间" align="center" prop="loginTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.loginTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleForceLogout(scope.row)"
|
||||
v-hasPermi="['monitor:online:forceLogout']"
|
||||
>强退</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { list, forceLogout } from "@/api/monitor/online";
|
||||
|
||||
export default {
|
||||
name: "Online",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 表格数据
|
||||
list: [],
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
ipaddr: undefined,
|
||||
userName: undefined
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询登录日志列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
list(this.queryParams).then(response => {
|
||||
this.list = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 强退按钮操作 */
|
||||
handleForceLogout(row) {
|
||||
this.$confirm('是否确认强退名称为"' + row.userName + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return forceLogout(row.tokenId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("强退成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="30" align="center" />
|
||||
<el-table-column type="selection" width="50" align="center" />
|
||||
<el-table-column label="日志编号" align="center" prop="operId" />
|
||||
<el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true"/>
|
||||
<!-- <el-table-column label="操作类型" align="center" prop="businessType" :formatter="typeFormat" /> -->
|
||||
@@ -121,11 +121,10 @@ import {
|
||||
cleanOperlog,
|
||||
exportOperlog,
|
||||
} from "@/api/monitor/operlog";
|
||||
import template from "../../../../document/template.vue";
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
|
||||
export default {
|
||||
components: { template ,DateRangePicker},
|
||||
components: { DateRangePicker},
|
||||
name: "Operlog",
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库表名">
|
||||
<el-form-item label="表名">
|
||||
<el-input v-model="searchform.tableName" clearable placeholder="输入要查询的表名" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
@@ -56,15 +56,21 @@
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="iconfont icon-code" @click="handleGenerate()">生成代码</el-button>
|
||||
<!-- <el-button type="primary" icon="iconfont icon-code" @click="handleGenerate()">生成代码</el-button> -->
|
||||
<el-button type="default" icon="el-icon-refresh" size="small" @click="loadTableData()">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe highlight-current-row style="width: 100%" :default-sort="{prop: 'TableName', order: 'ascending'}" @select="handleSelectChange" @select-all="handleSelectAllChange" @sort-change="handleSortChange">
|
||||
<el-table-column type="selection" width="50" />
|
||||
<el-table-column prop="tableName" label="表名" sortable="custom" width="380" />
|
||||
<el-table ref="gridtable" v-loading="tableloading" :data="tableData" border stripe highlight-current-row style="width: 100%" @selection-change="handleSelectChange">
|
||||
<!-- <el-table-column type="selection" width="50" /> -->
|
||||
<el-table-column prop="name" label="表名" sortable="custom" width="380" />
|
||||
<el-table-column prop="description" label="表描述" />
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-view">预览</el-button>
|
||||
<el-button type="text" icon="el-icon-download" @click="handleGenerate(scope.row)">生成代码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-container">
|
||||
<el-pagination background :current-page="pagination.pageNum" :page-sizes="[5,10,20,50,100, 200, 300, 400]" :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
@@ -84,7 +90,9 @@ import { downloadFile } from "@/utils/index";
|
||||
import { Loading } from "element-ui";
|
||||
|
||||
import defaultSettings from "@/settings";
|
||||
import template from "../../../document/template.vue";
|
||||
export default {
|
||||
components: { template },
|
||||
name: "CodeGenerator",
|
||||
data() {
|
||||
return {
|
||||
@@ -163,8 +171,8 @@ export default {
|
||||
var seachdata = {
|
||||
pageNum: this.pagination.pageNum,
|
||||
PageSize: this.pagination.pagesize,
|
||||
Keywords: this.searchform.tableName,
|
||||
EnCode: this.searchform.DbName,
|
||||
tableName: this.searchform.tableName,
|
||||
dbName: this.searchform.DbName,
|
||||
// Order: this.sortableData.order,
|
||||
// Sort: this.sortableData.sort,
|
||||
};
|
||||
@@ -206,75 +214,57 @@ export default {
|
||||
/**
|
||||
* 点击生成服务端代码
|
||||
*/
|
||||
handleGenerate: async function () {
|
||||
if (this.currentSelected.length === 0) {
|
||||
this.$alert("请先选择要生成代码的数据表", "提示");
|
||||
return false;
|
||||
} else {
|
||||
this.$refs["codeform"].validate((valid) => {
|
||||
if (valid) {
|
||||
var loadop = {
|
||||
lock: true,
|
||||
text: "正在生成代码...",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
};
|
||||
const pageLoading = Loading.service(loadop);
|
||||
var currentTables = "";
|
||||
this.currentSelected.forEach((element) => {
|
||||
currentTables += element.TableName + ",";
|
||||
});
|
||||
var seachdata = {
|
||||
tables: currentTables,
|
||||
baseSpace: this.codeform.baseSpace,
|
||||
replaceTableNameStr: this.codeform.replaceTableNameStr,
|
||||
};
|
||||
codeGenerator(seachdata)
|
||||
.then((res) => {
|
||||
if (res.code == 100) {
|
||||
downloadFile(
|
||||
defaultSettings.fileUrl + res.ResData[0],
|
||||
res.ResData[1]
|
||||
);
|
||||
handleGenerate: async function (row) {
|
||||
console.log(JSON.stringify(row));
|
||||
// if (this.currentSelected.length === 0 || this.currentSelected.length > 3) {
|
||||
// this.msgError("请先选择要生成代码的数据表", "提示");
|
||||
// return false;
|
||||
// } else {
|
||||
this.$refs["codeform"].validate((valid) => {
|
||||
if (valid) {
|
||||
var loadop = {
|
||||
lock: true,
|
||||
text: "正在生成代码...",
|
||||
spinner: "el-icon-loading",
|
||||
background: "rgba(0, 0, 0, 0.7)",
|
||||
};
|
||||
const pageLoading = Loading.service(loadop);
|
||||
|
||||
this.msgSuccess("恭喜你，代码生成完成！");
|
||||
} else {
|
||||
this.msgError(res.msg);
|
||||
}
|
||||
pageLoading.close();
|
||||
})
|
||||
.catch((erre) => {
|
||||
pageLoading.close();
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 当表格的排序条件发生变化的时候会触发该事件
|
||||
*/
|
||||
handleSortChange: function (column) {
|
||||
this.sortableData.sort = column.prop;
|
||||
if (column.order === "ascending") {
|
||||
this.sortableData.order = "asc";
|
||||
} else {
|
||||
this.sortableData.order = "desc";
|
||||
}
|
||||
this.loadTableData();
|
||||
var seachdata = {
|
||||
dbName: this.searchform.DbName,
|
||||
tables: row.name, // this.currentSelected.toString(),
|
||||
baseSpace: this.codeform.baseSpace,
|
||||
replaceTableNameStr: this.codeform.replaceTableNameStr,
|
||||
};
|
||||
codeGenerator(seachdata)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
// downloadFile(
|
||||
// defaultSettings.fileUrl + res.ResData[0],
|
||||
// res.ResData[1]
|
||||
// );
|
||||
|
||||
this.msgSuccess("恭喜你，代码生成完成！");
|
||||
} else {
|
||||
this.msgError(res.msg);
|
||||
}
|
||||
pageLoading.close();
|
||||
})
|
||||
.catch((erre) => {
|
||||
pageLoading.close();
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
// }
|
||||
},
|
||||
/**
|
||||
* 当用户手动勾选checkbox数据行事件
|
||||
*/
|
||||
handleSelectChange: function (selection, row) {
|
||||
this.currentSelected = selection;
|
||||
},
|
||||
/**
|
||||
* 当用户手动勾选全选checkbox事件
|
||||
*/
|
||||
handleSelectAllChange: function (selection) {
|
||||
this.currentSelected = selection;
|
||||
console.log(JSON.stringify(selection));
|
||||
this.currentSelected = selection.map((item) => item.name);
|
||||
},
|
||||
/**
|
||||
* 选择每页显示数量
|
||||
|
||||
Reference in New Issue
Block a user