提交 81da7744 authored 作者: 刘守彩's avatar 刘守彩

feat: update pkg

上级 b1cb1432
......@@ -24,7 +24,7 @@ npm install
# 启动服务
npm run dev
# 构建测试环境
npm run build:stage
npm run stage
# 构建生产环境
npm run build:prod
npm run prod
```
const { run } = require('runjs');
const chalk = require('chalk');
const config = require('../vue.config.js');
const rawArgv = process.argv.slice(2);
const args = rawArgv.join(' ');
if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
const report = rawArgv.includes('--report');
run(`vue-cli-service build ${args}`);
const port = 9526;
const publicPath = config.publicPath;
var connect = require('connect');
var serveStatic = require('serve-static');
const app = connect();
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
})
);
app.listen(port, function () {
console.log(
chalk.green(`> Preview at http://localhost:${port}${publicPath}`)
);
if (report) {
console.log(
chalk.green(
`> Report at http://localhost:${port}${publicPath}report.html`
)
);
}
});
} else {
run(`vue-cli-service build ${args}`);
}
......@@ -6,9 +6,8 @@
"license": "MIT",
"scripts": {
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"prod": "vue-cli-service build",
"stage": "vue-cli-service build --mode staging",
"lint": "eslint --ext .js,.vue src",
"fix": "eslint --fix --ext .js --ext .vue src/"
},
......@@ -32,17 +31,13 @@
"admin-template",
"management-system"
],
"repository": {
"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Vue.git"
},
"dependencies": {
"@riophae/vue-treeselect": "0.4.0",
"@taiyuan/ty-ui": "latest",
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "5.4.0",
"echarts": "5.4.3",
"element-ui": "2.15.14",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
......@@ -55,11 +50,12 @@
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"tailwindcss": "1.9.6",
"vue": "2.6.14",
"vue": "2.7.14",
"vue-echarts": "6.6.1",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-meta": "2.4.0",
"vue-router": "3.4.9",
"vue-router": "3.6.5",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},
......@@ -72,9 +68,7 @@
"@vue/eslint-config-standard": "5.1.2",
"babel-eslint": "10.1.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"chalk": "4.1.0",
"compression-webpack-plugin": "5.0.2",
"connect": "3.6.6",
"eslint": "7.13.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
......@@ -82,12 +76,11 @@
"eslint-plugin-standard": "4.1.0",
"eslint-plugin-vue": "7.1.0",
"lint-staged": "10.5.3",
"runjs": "4.4.2",
"sass": "1.32.13",
"sass-loader": "10.1.1",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.14"
"vue-template-compiler": "2.7.14"
},
"engines": {
"node": ">=8.9",
......
import Vue from 'vue';
import * as echarts from 'echarts';
import VCharts from 'vue-echarts';
Vue.prototype.$echarts = echarts;
Vue.component('v-chart', VCharts);
import './assets'; // 样式等静态资源
import '@/assets/icons'; // icon
import './vue-meta';
import './elment-ui';
import './element-ui';
import './ty-ui';
import './echarts';
import './ruoyi';
import './methods';
import './components';
<template>
<div :class="className" :style="{ height: height, width: width }" />
<v-chart :option="chartOption" autoresize></v-chart>
</template>
<script>
import * as echarts from 'echarts'; // echarts theme
import resize from './mixins/resize';
require('echarts/theme/macarons');
const animationDuration = 6000;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.chart.setOption({
chartOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -104,8 +64,8 @@ export default {
animationDuration
}
]
});
}
}
};
}
};
</script>
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'; // echarts theme
import resize from './mixins/resize';
require('echarts/theme/macarons');
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '350px'
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Object,
required: true
}
},
data() {
return {
chart: null
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions({ expectedData, actualData } = {}) {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['expected', 'actual']
},
series: [
{
name: 'expected',
itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
},
smooth: true,
type: 'line',
data: expectedData,
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
},
areaStyle: {
color: '#f3f8ff'
}
}
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
});
}
}
};
</script>
<template>
<el-row :gutter="40" class="panel-group">
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">访客</div>
<count-to
:start-val="0"
:end-val="102400"
:duration="2600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('messages')">
<div class="card-panel-icon-wrapper icon-message">
<svg-icon icon-class="message" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">消息</div>
<count-to
:start-val="0"
:end-val="81212"
:duration="3000"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('purchases')">
<div class="card-panel-icon-wrapper icon-money">
<svg-icon icon-class="money" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">金额</div>
<count-to
:start-val="0"
:end-val="9280"
:duration="3200"
class="card-panel-num"
/>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
<div class="card-panel-icon-wrapper icon-shopping">
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
</div>
<div class="card-panel-description">
<div class="card-panel-text">订单</div>
<count-to
:start-val="0"
:end-val="13600"
:duration="3600"
class="card-panel-num"
/>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import CountTo from 'vue-count-to';
export default {
components: {
CountTo
},
methods: {
handleSetLineChartData(type) {
// eslint-disable-next-line
this.$emit('handleSetLineChartData', type);
}
}
};
</script>
<style lang="scss" scoped>
.panel-group {
margin-top: 18px;
.card-panel-col {
margin-bottom: 32px;
}
.card-panel {
height: 108px;
cursor: pointer;
font-size: 12px;
position: relative;
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
color: #fff;
}
.icon-people {
background: #40c9c6;
}
.icon-message {
background: #36a3f7;
}
.icon-money {
background: #f4516c;
}
.icon-shopping {
background: #34bfa3;
}
}
.icon-people {
color: #40c9c6;
}
.icon-message {
color: #36a3f7;
}
.icon-money {
color: #f4516c;
}
.icon-shopping {
color: #34bfa3;
}
.card-panel-icon-wrapper {
float: left;
margin: 14px 0 0 14px;
padding: 16px;
transition: all 0.38s ease-out;
border-radius: 6px;
}
.card-panel-icon {
float: left;
font-size: 48px;
}
.card-panel-description {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
.card-panel-text {
line-height: 18px;
color: rgba(0, 0, 0, 0.45);
font-size: 16px;
margin-bottom: 12px;
}
.card-panel-num {
font-size: 20px;
}
}
}
}
@media (max-width: 550px) {
.card-panel-description {
display: none;
}
.card-panel-icon-wrapper {
float: none !important;
width: 100%;
height: 100%;
margin: 0 !important;
.svg-icon {
display: block;
margin: 14px auto !important;
float: none !important;
}
}
}
</style>
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'; // echarts theme
import resize from './mixins/resize';
require('echarts/theme/macarons');
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.chart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
bottom: '10',
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
},
series: [
{
name: 'WEEKLY WRITE ARTICLES',
type: 'pie',
roseType: 'radius',
radius: [15, 95],
center: ['50%', '38%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600
}
]
});
}
}
};
</script>
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from 'echarts'; // echarts theme
import resize from './mixins/resize';
require('echarts/theme/macarons');
const animationDuration = 3000;
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
radar: {
radius: '66%',
center: ['50%', '42%'],
splitNumber: 8,
splitArea: {
areaStyle: {
color: 'rgba(127,95,132,.3)',
opacity: 1,
shadowBlur: 45,
shadowColor: 'rgba(0,0,0,.5)',
shadowOffsetX: 0,
shadowOffsetY: 15
}
},
indicator: [
{ name: 'Sales', max: 10000 },
{ name: 'Administration', max: 20000 },
{ name: 'Information Techology', max: 20000 },
{ name: 'Customer Support', max: 20000 },
{ name: 'Development', max: 20000 },
{ name: 'Marketing', max: 20000 }
]
},
legend: {
left: 'center',
bottom: '10',
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
},
series: [
{
type: 'radar',
symbolSize: 0,
areaStyle: {
normal: {
shadowBlur: 13,
shadowColor: 'rgba(0,0,0,.2)',
shadowOffsetX: 0,
shadowOffsetY: 10,
opacity: 1
}
},
data: [
{
value: [5000, 7000, 12000, 11000, 15000, 14000],
name: 'Allocated Budget'
},
{
value: [4000, 9000, 15000, 15000, 13000, 11000],
name: 'Expected Spending'
},
{
value: [5500, 11000, 12000, 15000, 12000, 12000],
name: 'Actual Spending'
}
],
animationDuration: animationDuration
}
]
});
}
}
};
</script>
import { debounce } from '@/utils';
export default {
data() {
return {
$_sidebarElm: null,
$_resizeHandler: null
};
},
mounted() {
this.initListener();
},
activated() {
if (!this.$_resizeHandler) {
// avoid duplication init
this.initListener();
}
// when keep-alive chart activated, auto resize
this.resize();
},
beforeDestroy() {
this.destroyListener();
},
deactivated() {
this.destroyListener();
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_sidebarResizeHandler(e) {
if (e.propertyName === 'width') {
this.$_resizeHandler();
}
},
initListener() {
this.$_resizeHandler = debounce(() => {
this.resize();
}, 100);
window.addEventListener('resize', this.$_resizeHandler);
this.$_sidebarElm =
document.getElementsByClassName('sidebar-container')[0];
this.$_sidebarElm &&
this.$_sidebarElm.addEventListener(
'transitionend',
this.$_sidebarResizeHandler
);
},
destroyListener() {
window.removeEventListener('resize', this.$_resizeHandler);
this.$_resizeHandler = null;
this.$_sidebarElm &&
this.$_sidebarElm.removeEventListener(
'transitionend',
this.$_sidebarResizeHandler
);
},
resize() {
const { chart } = this;
chart && chart.resize();
}
}
};
<template>
<div class="app-container home">
<div class="p-10 text-16 border-primary border rounded-3 mb-10">
这是taiwindcss示例,具体参考<a
class="text-primary"
href="https://www.tailwindcss.cn/"
target="_blank"
>文档</a
<div class="p-10">
<div>
<div class="p-10 mb-10 border text-16 border-primary rounded-3">
这是taiwindcss示例,具体参考<a
class="text-primary"
href="https://www.tailwindcss.cn/"
target="_blank"
>文档</a
>
</div>
<el-button
@click="$modal.msgSuccess('测试提示')"
class="mb-10"
type="primary"
>主要按钮</el-button
>
<ty-tabs
class="mt-10"
:tab-list="tabList"
:default-active-index="defaultActiveIndex"
type="card"
/>
</div>
<div class="w-1/2 mt-10 h-300">
<BarChart />
</div>
<el-button
@click="$modal.msgSuccess('测试提示')"
class="mb-10"
type="primary"
>主要按钮</el-button
>
<ty-tabs
:tab-list="tabList"
:default-active-index="defaultActiveIndex"
type="card"
/>
</div>
</template>
<script>
import BarChart from './dashboard/BarChart';
export default {
name: 'Index',
components: {
BarChart
},
data() {
return {
// 版本号
version: '3.8.7',
tabList: [
{ name: '标签1', value: 1 },
{ name: '标签2', value: 2, disabled: true },
......@@ -38,74 +47,8 @@ export default {
defaultActiveIndex: 2
};
},
methods: {
goTarget(href) {
window.open(href, '_blank');
}
}
methods: {}
};
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>
<style lang="scss" scoped></style>
<template>
<div class="app-container home">
<div class="p-10 text-16 border-primary border rounded-3 mb-10">
这是taiwindcss示例,具体参考<a
class="text-primary"
href="https://www.tailwindcss.cn/"
target="_blank"
>文档</a
>
</div>
<el-button
@click="$modal.msgSuccess('测试提示')"
class="mb-10"
type="primary"
>主要按钮</el-button
>
<ty-tabs
:tab-list="tabList"
:default-active-index="defaultActiveIndex"
type="card"
/>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {
// 版本号
version: '3.8.7',
tabList: [
{ name: '标签1', value: 1 },
{ name: '标签2', value: 2, disabled: true },
{ name: '标签3', value: 3 },
{ name: '长标签当大于8个字时', value: 2 }
],
defaultActiveIndex: 2
};
},
methods: {
goTarget(href) {
window.open(href, '_blank');
}
}
};
</script>
<style scoped lang="scss">
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>
<template>
<div class="dashboard-editor-container">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<raddar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './dashboard/PanelGroup';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
};
export default {
name: 'Index',
components: {
PanelGroup,
LineChart,
RaddarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
};
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type];
}
}
};
</script>
<style lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
......@@ -59,6 +59,8 @@ module.exports = {
name: name,
resolve: {
alias: {
// fix:webpack下vue2.7.x, el-table渲染空白 https://github.com/ElemeFE/element/issues/21984
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
......@@ -77,6 +79,10 @@ module.exports = {
config.plugins.delete('preload'); // TODO: need test
config.plugins.delete('prefetch'); // TODO: need test
// config.externals({
// echarts: 'echarts'
// });
// set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
config.module
......@@ -117,6 +123,11 @@ module.exports = {
test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
priority: 20 // the weight needs to be larger than libs and app or it will be packaged into libs or app
},
echarts: {
name: 'chunk-echarts', // split echarts into a single package
test: /[\\/]node_modules[\\/]_?echarts(.*)/, // in order to adapt to cnpm
priority: 30 // the weight needs to be larger than libs and app or it will be packaged into libs or app
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论