chore: lodash 改为 lodash-es, 采用按需引入的方式使用
This commit is contained in:
wangxuefeng
parent
de679d4289
commit
dd8f7b52d2
50
farm.config.ts
Normal file
50
farm.config.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { defineConfig } from "@farmfe/core";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||
// import { fileURLToPath, URL } from "node:url";
|
||||
// import yargsParser from "yargs-parser";
|
||||
|
||||
// const argv = yargsParser(process.argv.slice(2));
|
||||
|
||||
console.log(process.env.DEV_ENV);
|
||||
|
||||
// let base: string;
|
||||
// switch (argv.mode) {
|
||||
// case "staging":
|
||||
// case "test":
|
||||
// base = "https://custom-chart.shiyue.com/";
|
||||
// break;
|
||||
// case "production":
|
||||
// base = "https://custom-chart.shiyuegame.com/";
|
||||
// break;
|
||||
// default:
|
||||
// base = "http://localhost:8080/";
|
||||
// }
|
||||
// if (process.env.DEV_ENV === "development") {
|
||||
// base = "http://localhost:8080/";
|
||||
// }
|
||||
|
||||
export default defineConfig({
|
||||
// compilation: {
|
||||
// output: {
|
||||
// path: "./dist",
|
||||
// publicPath: base,
|
||||
// filename: "[name]-ycode-[hash:8].[ext]",
|
||||
// },
|
||||
// sourcemap: false,
|
||||
// },
|
||||
vitePlugins: [vue(), vueJsx()],
|
||||
// resolve: {
|
||||
// alias: {
|
||||
// "@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
// },
|
||||
// },
|
||||
// define: {
|
||||
// _BASE_HOST_: `'${base}'`,
|
||||
// },
|
||||
// server: {
|
||||
// hmr: true,
|
||||
// host: "0.0.0.0",
|
||||
// port: 8080,
|
||||
// },
|
||||
});
|
||||
10
package.json
10
package.json
@ -13,12 +13,13 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g2plot": "^2.4.31",
|
||||
"@farmfe/core": "^1.6.6",
|
||||
"@sy/y-code-chart": "^1.2.1",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"ant-design-vue": "^4.1.2",
|
||||
"axios": "^1.6.7",
|
||||
"cross-env": "^7.0.3",
|
||||
"lodash": "^4.17.21",
|
||||
"lodash-es": "^4.17.21",
|
||||
"p-limit": "^6.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.15",
|
||||
@ -30,7 +31,7 @@
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@tsconfig/node20": "^20.1.2",
|
||||
"@types/node": "^20.11.10",
|
||||
"@vitejs/plugin-vue": "^5.0.3",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
@ -43,5 +44,6 @@
|
||||
"vite": "^5.0.11",
|
||||
"vite-plugin-qiankun": "^1.0.15",
|
||||
"vue-tsc": "^1.8.27"
|
||||
}
|
||||
}
|
||||
},
|
||||
"packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
|
||||
}
|
||||
6552
pnpm-lock.yaml
generated
Normal file
6552
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -5,14 +5,24 @@
|
||||
</div>
|
||||
<div class="chart-header">
|
||||
<div class="chart-filter">
|
||||
<div v-for="(item, index) in filterConfig" :key="index" class="filter-item">
|
||||
<div
|
||||
v-for="(item, index) in filterConfig"
|
||||
:key="index"
|
||||
class="filter-item"
|
||||
>
|
||||
<div>
|
||||
<a-radio-group v-model:value="dateType" button-style="solid">
|
||||
<a-radio-button value="day">日</a-radio-button>
|
||||
<a-radio-button value="week">周</a-radio-button>
|
||||
<a-radio-button value="month">月</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-range-picker v-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" :picker="rangePicker" @change="toFilt" />
|
||||
<a-range-picker
|
||||
v-if="item.type === 'time'"
|
||||
class="date-item"
|
||||
v-model:value="filterData[item.name]"
|
||||
:picker="rangePicker"
|
||||
@change="toFilt"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -32,7 +42,7 @@
|
||||
import { computed, ref } from "vue";
|
||||
import Line from "@/plugins/antv-g2plot/line.vue";
|
||||
import Column from "@/plugins/antv-g2plot/column.vue";
|
||||
import _ from 'lodash';
|
||||
import { cloneDeep } from "lodash-es";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@ -70,7 +80,7 @@ const currentChart = computed(() => {
|
||||
})
|
||||
|
||||
const toFilt = () => {
|
||||
const cloneFilter = _.cloneDeep(props.filterConfig);
|
||||
const cloneFilter = cloneDeep(props.filterConfig);
|
||||
const filter = cloneFilter
|
||||
.filter((item) => {
|
||||
return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
|
||||
|
||||
@ -32,17 +32,48 @@
|
||||
@change="toFilt"
|
||||
/>
|
||||
<!-- 日期范围 -->
|
||||
<a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
|
||||
<a-range-picker
|
||||
v-else-if="item.type === 'time'"
|
||||
class="date-item"
|
||||
v-model:value="filterData[item.name]"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<!-- 带时分的日期范围 -->
|
||||
<a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
|
||||
<a-range-picker
|
||||
v-else-if="item.type === 'date_time'"
|
||||
class="date-time-item"
|
||||
v-model:value="filterData[item.name]"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<!-- 数值区间 -->
|
||||
<div v-else-if="item.type === 'number_range' && filterData[item.name]" class="number_range_box">
|
||||
<a-input-number placeholder="最小值" style="width: 140px" v-model:value="filterData[item.name].min" @change="toFilt" />
|
||||
<div
|
||||
v-else-if="item.type === 'number_range' && filterData[item.name]"
|
||||
class="number_range_box"
|
||||
>
|
||||
<a-input-number
|
||||
placeholder="最小值"
|
||||
style="width: 140px"
|
||||
v-model:value="filterData[item.name].min"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<span class="divider"> - </span>
|
||||
<a-input-number placeholder="最大值" style="width: 140px" v-model:value="filterData[item.name].max" @change="toFilt" />
|
||||
<a-input-number
|
||||
placeholder="最大值"
|
||||
style="width: 140px"
|
||||
v-model:value="filterData[item.name].max"
|
||||
@change="toFilt"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isExport" class="filter-item"><a :href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`" target="_blank"><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a></div>
|
||||
<div v-if="isExport" class="filter-item">
|
||||
<a
|
||||
:href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`"
|
||||
target="_blank"
|
||||
><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="y-table-content">
|
||||
<a-table
|
||||
@ -54,9 +85,21 @@
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
|
||||
<a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
|
||||
<div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
|
||||
<a-image
|
||||
v-if="column.show_type === 'img'"
|
||||
:src="record[column.dataIndex]"
|
||||
:width="160"
|
||||
/>
|
||||
<a
|
||||
v-else-if="column.show_type === 'link'"
|
||||
target="_blank"
|
||||
:href="record[column.dataIndex]"
|
||||
>{{ record[column.dataIndex] }}</a
|
||||
>
|
||||
<div
|
||||
v-else-if="column.show_type === 'richText'"
|
||||
v-html="record[column.dataIndex]"
|
||||
></div>
|
||||
<template v-else>{{ record[column.dataIndex] }}</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@ -78,7 +121,7 @@
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import _ from "lodash";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import { CloudDownloadOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
const YCODE_BASEURL = import.meta.env.VITE_YCODE_BASEURL
|
||||
@ -139,7 +182,7 @@ const filterOption = (input, option) => {
|
||||
};
|
||||
|
||||
const getFilter = () => {
|
||||
const cloneFilter = _.cloneDeep(props.filterConfig);
|
||||
const cloneFilter = cloneDeep(props.filterConfig);
|
||||
const filter = cloneFilter
|
||||
.filter((item) => {
|
||||
return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
|
||||
@ -196,7 +239,6 @@ const toFilt = useDebounceFn(() => {
|
||||
const pageChange = () => {
|
||||
getData();
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
|
||||
import _ from "lodash";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
|
||||
export default function useChart(ChartClass, props) {
|
||||
const chart = ref(null); // 表格实例
|
||||
@ -11,7 +11,7 @@ export default function useChart(ChartClass, props) {
|
||||
let handler;
|
||||
|
||||
onMounted(() => {
|
||||
chartOptions.value = _.cloneDeep(props.config);
|
||||
chartOptions.value = cloneDeep(props.config);
|
||||
|
||||
// 实例化图表
|
||||
const chartInstance = new ChartClass(container.value, { ...props.config });
|
||||
@ -48,7 +48,7 @@ export default function useChart(ChartClass, props) {
|
||||
watch(
|
||||
() => props.config,
|
||||
(config) => {
|
||||
const newConfig = _.cloneDeep(config);
|
||||
const newConfig = cloneDeep(config);
|
||||
chartOptions.value = newConfig;
|
||||
chart.value.update(newConfig);
|
||||
},
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
<div class="left-box">
|
||||
<a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="项目"
|
||||
><a-select
|
||||
placeholder="请选择项目"
|
||||
:options="projectSel"
|
||||
v-model:value="projectId"
|
||||
@change="onProjectChange"
|
||||
></a-select
|
||||
><a-select
|
||||
placeholder="请选择项目"
|
||||
:options="projectSel"
|
||||
v-model:value="projectId"
|
||||
@change="onProjectChange"
|
||||
></a-select
|
||||
></a-form-item>
|
||||
<a-form-item label="数据来源">
|
||||
<a-select
|
||||
@ -28,7 +28,11 @@
|
||||
></a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="是否导出" v-if="showTypeId === 1">
|
||||
<a-switch v-model:checked="isExport" :checkedValue="1" :unCheckedValue="0">
|
||||
<a-switch
|
||||
v-model:checked="isExport"
|
||||
:checkedValue="1"
|
||||
:unCheckedValue="0"
|
||||
>
|
||||
</a-switch>
|
||||
</a-form-item>
|
||||
<a-form-item label="字段" v-if="fieldList.length">
|
||||
@ -37,15 +41,21 @@
|
||||
v-for="(item, index) in fieldList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-checkbox
|
||||
>{{ item.label }}</a-checkbox
|
||||
>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="x轴" v-if="xDataList.length">
|
||||
<a-radio-group :options="xDataList" v-model:value="xDataId"></a-radio-group>
|
||||
<a-radio-group
|
||||
:options="xDataList"
|
||||
v-model:value="xDataId"
|
||||
></a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="y轴" v-if="yDataList.length">
|
||||
<a-checkbox-group :options="yDataList" v-model:value="yDataId"></a-checkbox-group>
|
||||
<a-checkbox-group
|
||||
:options="yDataList"
|
||||
v-model:value="yDataId"
|
||||
></a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="footer">
|
||||
@ -53,7 +63,7 @@
|
||||
class="preview-btn"
|
||||
:loading="previewLoading"
|
||||
@click="() => {toPreview({})}"
|
||||
>预览</a-button
|
||||
>预览</a-button
|
||||
>
|
||||
<a-button type="primary" @click="addViewName">点击保存</a-button>
|
||||
</div>
|
||||
@ -87,16 +97,43 @@
|
||||
v-model:value="previewData.filterData[item.name]"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<a-range-picker v-if="item.type === 'time'" class="date-item" v-model:value="previewData.filterData[item.name]" @change="toFilt" />
|
||||
<a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="previewData.filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
|
||||
<a-range-picker
|
||||
v-if="item.type === 'time'"
|
||||
class="date-item"
|
||||
v-model:value="previewData.filterData[item.name]"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<a-range-picker
|
||||
v-else-if="item.type === 'date_time'"
|
||||
class="date-time-item"
|
||||
v-model:value="previewData.filterData[item.name]"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<!-- 数值区间 -->
|
||||
<div v-else-if="item.type === 'number_range' && previewData.filterData[item.name]" class="number_range_box">
|
||||
<a-input-number placeholder="最小值" style="width: 140px" v-model:value="previewData.filterData[item.name].min" @change="toFilt" />
|
||||
<div
|
||||
v-else-if="item.type === 'number_range' && previewData.filterData[item.name]"
|
||||
class="number_range_box"
|
||||
>
|
||||
<a-input-number
|
||||
placeholder="最小值"
|
||||
style="width: 140px"
|
||||
v-model:value="previewData.filterData[item.name].min"
|
||||
@change="toFilt"
|
||||
/>
|
||||
<span class="divider"> - </span>
|
||||
<a-input-number placeholder="最大值" style="width: 140px" v-model:value="previewData.filterData[item.name].max" @change="toFilt" />
|
||||
<a-input-number
|
||||
placeholder="最大值"
|
||||
style="width: 140px"
|
||||
v-model:value="previewData.filterData[item.name].max"
|
||||
@change="toFilt"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="previewData.isExport" class="filter-item"><a-button type="primary">导出</a-button></div>
|
||||
<div v-if="previewData.isExport" class="filter-item">
|
||||
<a-button type="primary">导出</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="y-table-content">
|
||||
<a-table
|
||||
@ -108,9 +145,21 @@
|
||||
bordered
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
|
||||
<a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
|
||||
<div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
|
||||
<a-image
|
||||
v-if="column.show_type === 'img'"
|
||||
:src="record[column.dataIndex]"
|
||||
:width="160"
|
||||
/>
|
||||
<a
|
||||
v-else-if="column.show_type === 'link'"
|
||||
target="_blank"
|
||||
:href="record[column.dataIndex]"
|
||||
>{{ record[column.dataIndex] }}</a
|
||||
>
|
||||
<div
|
||||
v-else-if="column.show_type === 'richText'"
|
||||
v-html="record[column.dataIndex]"
|
||||
></div>
|
||||
<template v-else>{{ record[column.dataIndex] }}</template>
|
||||
</template>
|
||||
</a-table>
|
||||
@ -125,7 +174,12 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<y-chart v-else-if="previewData.type === 'chart'" :chart-cfg="previewData.chartCfg" :filter-config="previewData.filter" @toFilt="() => {toPreview({})}"></y-chart>
|
||||
<y-chart
|
||||
v-else-if="previewData.type === 'chart'"
|
||||
:chart-cfg="previewData.chartCfg"
|
||||
:filter-config="previewData.filter"
|
||||
@toFilt="() => {toPreview({})}"
|
||||
></y-chart>
|
||||
<div class="preview-area" v-else>
|
||||
<div><BarChartOutlined /></div>
|
||||
<div>预览区</div>
|
||||
@ -160,7 +214,7 @@ import {
|
||||
import { message } from "ant-design-vue";
|
||||
import { BarChartOutlined } from "@ant-design/icons-vue";
|
||||
import yChart from "@/components/common/y-chart.vue";
|
||||
import _ from 'lodash'
|
||||
import { cloneDeep } from "lodash-es";
|
||||
|
||||
const projectSel = ref([]); // 项目下拉
|
||||
const modularSel = ref([]) // 数据来源下拉
|
||||
@ -286,7 +340,7 @@ const toPreview = ({filter}) => {
|
||||
previewLoading.value = true;
|
||||
let filterData
|
||||
if (!filter) {
|
||||
const cloneFilter = _.cloneDeep(previewData.filterConfig)
|
||||
const cloneFilter = cloneDeep(previewData.filterConfig)
|
||||
filterData = cloneFilter
|
||||
.filter((item) => {
|
||||
return previewData.filterData[item.name] !== undefined && previewData.filterData[item.name] !== null;
|
||||
@ -327,7 +381,7 @@ const toPreview = ({filter}) => {
|
||||
} else {
|
||||
filterData = filter;
|
||||
}
|
||||
|
||||
|
||||
preview({
|
||||
modularId: modularId.value,
|
||||
fieldIds: fieldIds.value.toString(),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user