083b1ac3 by lihua

清理没用的图片信息

1 parent dc1a7e5e
Showing 39 changed files with 9 additions and 745 deletions
......@@ -16,8 +16,6 @@
},
"dependencies": {
"@antv/g6": "^4.8.21",
"@antv/s2": "^1.48.0",
"@antv/s2-vue": "^1.5.0",
"@vueuse/core": "^10.1.0",
"@vueuse/integrations": "^10.1.0",
"@wangeditor/editor": "^5.1.23",
......@@ -50,7 +48,6 @@
"pinia": "^2.0.35",
"pinia-plugin-persistedstate": "^2.2.0",
"pinyin-pro": "^3.24.2",
"qs": "^6.11.1",
"sortablejs": "^1.15.1",
"vant": "^4.9.8",
"vue": "^3.2.47",
......@@ -99,7 +96,6 @@
"vite-plugin-compression": "^0.5.1",
"vite-plugin-mock": "^2.9.8",
"vite-plugin-pages": "^0.29.0",
"vite-plugin-spritesmith": "^0.1.1",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-vue-inspector": "^3.4.1",
"vite-plugin-vue-meta-layouts": "^0.2.2",
......
<script lang="ts" setup name="TableS2">
import { TableSheet, DataCell } from '@antv/s2';
import { debounce } from 'lodash-es'
import { shallowRef, reactive, computed, ref } from "vue";
const props = defineProps({
tableInfo: {
type: Object,
default: {}
}
})
const s2Options = {
width: 600,
height: 480,
showSeriesNumber: true,
};
const BORDER_COLOR = '#d9d9d9';
const BACK_COLOR = '#fff';
const HEADER_BACK_COLOR = '#f2f2f2';
const CELL_ACTIVE_BACK_COLOR = '#F5F8FF';
const customTheme = {
background: {
color: HEADER_BACK_COLOR,
},
cornerCell: {
cell: {
horizontalBorderColor: BORDER_COLOR,
verticalBorderColor: BORDER_COLOR,
backgroundColor: HEADER_BACK_COLOR,
},
text: {
fill: 'var(--el-color-regular)',
fontSize: 12,
textAlign: 'left',
},
bolderText: {
fill: 'var(--el-color-regular)',
fontSize: 12,
opacity: 1,
fontWeight: 400
},
},
splitLine: {
horizontalBorderColor: BORDER_COLOR,
horizontalBorderColorOpacity: 1,
horizontalBorderWidth: 2,
verticalBorderColor: BORDER_COLOR,
verticalBorderColorOpacity: 1,
verticalBorderWidth: 2,
showRightShadow: true,
shadowWidth: 10,
shadowColors: {
left: 'rgba(0,0,0,0.1)',
right: 'rgba(0,0,0,0)',
},
},
rowCell: {
text: {
fill: 'var(--el-color-regular)',
opacity: 1,
fontSize: 12,
fontWeight: 400,
textAlign: 'left'
},
cell: {
backgroundColor: HEADER_BACK_COLOR,
interactionState: {
hover: {
backgroundColor: CELL_ACTIVE_BACK_COLOR,
backgroundOpacity: 1,
},
selected: {
backgroundColor: 'rgb(63, 69, 97)',
},
},
horizontalBorderColor: BORDER_COLOR,
verticalBorderColor: BORDER_COLOR,
verticalBorderWidth: 1,
},
},
colCell: {
cell: {
horizontalBorderColor: BORDER_COLOR,
verticalBorderColor: BORDER_COLOR,
verticalBorderWidth: 2,
horizontalBorderWidth: 2,
backgroundColor: HEADER_BACK_COLOR,
interactionState: {
hover: {
backgroundColor: HEADER_BACK_COLOR,
backgroundOpacity: 1,
},
selected: {
backgroundColor: 'rgb(63, 69, 97)',
},
},
},
text: {
fill: 'var(--el-color-regular)',
fontSize: 12,
textAlign: 'left'
},
bolderText: {
fill: 'var(--el-color-regular)',
opacity: 1,
fontSize: 12,
textAlign: 'left',
fontWeight: 400
},
},
dataCell: {
icon: {
size: 14,
margin: {
left: 10,
},
},
cell: {
interactionState: {
hover: {
backgroundColor: CELL_ACTIVE_BACK_COLOR,
backgroundOpacity: 1,
},
hoverFocus: {
backgroundColor: CELL_ACTIVE_BACK_COLOR,
backgroundOpacity: 1,
// borderColor: 'blue',
},
selected: {
backgroundColor: CELL_ACTIVE_BACK_COLOR,
backgroundOpacity: 1,
},
unselected: {
backgroundOpacity: 1,
opacity: 1,
},
prepareSelect: {
borderColor: CELL_ACTIVE_BACK_COLOR,
},
},
crossBackgroundColor: BACK_COLOR,
horizontalBorderColor: BORDER_COLOR,
verticalBorderColor: BORDER_COLOR,
verticalBorderWidth: 2,
horizontalBorderWidth: 2,
backgroundColorOpacity: 0.9,
backgroundColor: HEADER_BACK_COLOR,
},
text: {
fill: 'var(--el-color-regular)',
fontSize: 14,
textAlign: 'left'
},
},
};
const s2DataConfig = {
fields: {
columns: ['province', 'city', 'type', 'price', 'cost'],
},
meta: [
{
field: 'province',
name: '省份',
},
{
field: 'city',
name: '城市',
},
{
field: 'type',
name: '商品类别',
},
{
field: 'price',
name: '价格',
},
{
field: 'cost',
name: '成本',
},
],
data: [
{
"province": "浙江",
"city": "杭州",
"type": "笔",
"price": 1
},
{
"province": "浙江",
"city": "杭州",
"type": "纸张",
"price": 2
},
{
"province": "浙江",
"city": "舟山",
"type": "笔",
"price": 17
},
{
"province": "浙江",
"city": "舟山",
"type": "纸张",
"price": 6
},
{
"province": "吉林",
"city": "长春",
"type": "笔",
"price": 8
},
{
"province": "吉林",
"city": "白山",
"type": "笔",
"price": 12
},
{
"province": "吉林",
"city": "长春",
"type": "纸张",
"price": 3
},
{
"province": "吉林",
"city": "白山",
"type": "纸张",
"price": 25
},
{
"province": "浙江",
"city": "杭州",
"type": "笔",
"price": 20
},
{
"province": "浙江",
"city": "杭州",
"type": "纸张",
"price": 10
},
{
"province": "浙江",
"city": "舟山",
"type": "笔",
"price": 15
},
{
"province": "浙江",
"city": "舟山",
"type": "纸张",
"price": 2
},
{
"province": "吉林",
"city": "长春",
"type": "笔",
"price": 15
},
{
"province": "吉林",
"city": "白山",
"type": "笔",
"price": 30
},
{
"province": "吉林",
"city": "长春",
"type": "纸张",
"price": 40
},
{
"province": "吉林",
"city": "白山",
"type": "纸张",
"price": 50
}
],
};
onBeforeMount(() => {
})
onMounted(() => {
const s2Container = document.getElementById(props.tableInfo.id);
const s2 = new TableSheet(s2Container, s2DataConfig, s2Options);
s2.setThemeCfg({ theme: customTheme });
s2.render();
const debounceRender = debounce((width, height) => {
s2.changeSheetSize(width, height)
s2.render(false) // 不重新加载数据
}, 100)
const resizeObserver = new ResizeObserver(([entry] = []) => {
const [size] = entry.borderBoxSize || [];
debounceRender(size.inlineSize, size.blockSize)
});
resizeObserver.observe(s2Container);
})
</script>
<template>
<div class="table_panel" :id="props.tableInfo.id"></div>
</template>
<style lang="scss" scoped>
.table_panel {
width: 100%;
height: 100%;
}
</style>
<script lang="ts" setup name="TableS2Vue">
import { SheetComponent } from "@antv/s2-vue";
import { shallowRef, reactive, computed, ref } from "vue";
import "@antv/s2-vue/dist/style.min.css";
import "ant-design-vue/dist/antd.css";
const props = defineProps({
tableInfo: {
type: Object,
default: {}
}
})
// 数据
const rawDataCfg = ref<Object>({});
// 色板
const s2Palette = {
basicColors: [
'var(--el-color-regular)', // 角头、行头、列头 单元格文本及图标颜色、数据单元格图标颜色
'#ffffff', // 行头、数据 单元格背景填充色
'#F5F8FF', // 行头、数据 单元格 鼠标悬停/选中/聚焦 状态的背景填充色
'#f2f2f2', // 角头、列头 背景填充色
'#f2f2f2', // 列头 鼠标悬停/选中 背景填充色
'#f2f2f2', // 刷选预选中状态蒙板背景填充色
'#f2f2f2', // 行头单元格链接文本颜色
'#EBF6F7', // 数据单元格柱状图填充色 resize 蒙层背景色、热区参考线颜色、热区悬停态背景颜色
'#f2f2f2', // 数据单元格背景填充色、表格背景填充色
'#d9d9d9', // 行头、数据 单元格边框颜色
'#d9d9d9', // 角头、列头 单元格边框颜色
'#d9d9d9', // 表体水平边框颜色(一级横向分割线)
'#d9d9d9', // 表体垂直边框颜色(一级纵向分割线)
'var(--el-color-regular)', // 数据单元格文本颜色
'var(--el-color-regular)', // 行头 链接文本颜色、数据单元格鼠标悬停聚焦/鼠标刷选预中 边框颜色
],
// ---------- semantic colors ----------
semanticColors: {
red: '#FF4D4F',
green: '#29A294',
},
};
// 组件参数
const rawOptions = {
width: 600,
height: 400,
showSeriesNumber: props.tableInfo.showIndex == undefined ? true : props.tableInfo.showIndex,
showDefaultHeaderActionIcon: false,
pagination: {
pageSize: 50,
current: 1,
},
};
// dataCfg 数据字段较多,建议使用 shallow, 如果有数据更改直接替换整个对象
const dataCfg = shallowRef(rawDataCfg);
const options = reactive(rawOptions);
const adaptive = ref<Object>({});
const themeCfg = {
theme: {
colCell: {
bolderText: {
textAlign: 'left'
}
},
dataCell: {
text: {
textAlign: 'left'
}
}
},
palette: s2Palette
}
const setTableData = (info) => {
rawDataCfg.value = {
fields: info.fields,
meta: info.meta,
data: info.data
}
}
onBeforeMount(() => {
setTableData(props.tableInfo)
})
onMounted(() => {
adaptive.value = {
width: true,
height: true,
getContainer: () => document.getElementById(props.tableInfo.id),
}
})
</script>
<template>
<div class="table_panel" :id="tableInfo.id">
<SheetComponent sheetType="table" :dataCfg="dataCfg" :options="options" :adaptive="adaptive" :themeCfg="themeCfg"
:showPagination="true" />
</div>
</template>
<style lang="scss" scoped>
.table_panel {
width: 100%;
height: 100%;
}
</style>
<script lang="ts" setup name="FixedActionBar">
const isBottom = ref(false)
onMounted(() => {
onScroll()
window.addEventListener('scroll', onScroll)
})
onUnmounted(() => {
window.removeEventListener('scroll', onScroll)
})
function onScroll() {
// 变量scrollTop是滚动条滚动时,滚动条上端距离顶部的距离
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 变量windowHeight是可视区的高度
const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
// 变量scrollHeight是滚动条的总高度(当前可滚动的页面的总高度)
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
// 滚动条到底部
isBottom.value = Math.ceil(scrollTop + windowHeight) >= scrollHeight
}
</script>
<template>
<div class="actionbar" :class="{ shadow: !isBottom }" data-fixed-calc-width>
<slot />
</div>
</template>
<style lang="scss" scoped>
.actionbar {
z-index: 4;
bottom: 0;
padding: 20px;
text-align: center;
background-color: var(--g-app-bg);
box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
transition: all 0.3s, var(--el-transition-box-shadow);
&.shadow {
box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
}
}
:deep(.el-form-item) {
margin-bottom: 0;
}
</style>
<script lang="ts" setup name="topbar">
import { ref, watch } from 'vue';
const props = defineProps({
isGraphDisplay: {
type: Boolean,
default: true
},
});
const isGraph = ref(false);
watch(() => props.isGraphDisplay, (val) => {
isGraph.value = val;
}, {
immediate: true
})
const emits = defineEmits(["displaySwitchChange"]);
const switchChange = (val) => {
isGraph.value = val
emits('displaySwitchChange', val);
}
</script>
<template>
<div className='g6-component-topbar-content'>
<div :class="isGraph ? 'selected g6-component-topbar-item' : 'g6-component-topbar-item'" @click="switchChange(true)">
关系网
</div>
<div :class="!isGraph ? 'selected g6-component-topbar-item' : 'g6-component-topbar-item'" @click="switchChange(false)">
桑基图
</div>
</div>
</template>
<style scoped lang="scss">
.g6-component-topbar-content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #fff;
border: 1px solid var(--el-color-primary);
border-radius: 32px;
padding: 4px;
width: 138px;
height: 32px;
}
.g6-component-topbar-item {
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #999999;
cursor: pointer;
&.selected {
background: #4FA1A4;
border-radius: 32px;
color: #fff;
}
}
</style>
\ No newline at end of file
<script setup lang="ts">
import eventBus from '@/utils/eventBus'
const isShow = ref(false)
const { pkg, lastBuildTime } = __SYSTEM_INFO__
onMounted(() => {
eventBus.on('global-system-info-toggle', () => {
isShow.value = !isShow.value
})
})
</script>
<template>
<div>
<el-drawer v-model="isShow" title="系统信息" direction="rtl" :size="360">
<el-descriptions direction="vertical" :column="1" border>
<el-descriptions-item label="最后编译时间" align="center">
{{ lastBuildTime }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions title="生产环境依赖" :column="1" size="small" border>
<el-descriptions-item v-for="(val, key) in (pkg.dependencies as object)" :key="key" :label="key">
{{ val }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions title="开发环境依赖" :column="1" size="small" border>
<el-descriptions-item v-for="(val, key) in (pkg.devDependencies as object)" :key="key" :label="key">
{{ val }}
</el-descriptions-item>
</el-descriptions>
</el-drawer>
</div>
</template>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
margin-bottom: initial;
padding-bottom: 20px;
border-bottom: 1px solid var(--el-border-color);
transition: var(--el-transition-border);
}
:deep(.el-descriptions) {
margin-bottom: 20px;
}
</style>
<script lang="ts" setup name="Trend">
const props = defineProps({
value: {
type: String,
required: true,
},
type: {
type: String as () => 'up' | 'down',
default: 'up',
},
prefix: {
type: String,
default: '',
},
suffix: {
type: String,
default: '',
},
reverse: {
type: Boolean,
default: false,
},
})
const isUp = computed(() => {
let isUp = props.type === 'up'
if (props.reverse) {
isUp = !isUp
}
return isUp
})
</script>
<template>
<div :class="`trend ${isUp ? 'up' : 'down'}`">
<span v-if="prefix" class="prefix">{{ prefix }}</span>
<span class="text">{{ value }}</span>
<span v-if="suffix" class="suffix">{{ suffix }}</span>
<el-icon>
<svg-icon name="ep:caret-top" />
</el-icon>
</div>
</template>
<style lang="scss" scoped>
.trend {
display: flex;
align-items: center;
transition: var(--el-transition-color);
&.up {
color: var(--el-color-success);
}
&.down {
color: var(--el-color-danger);
.el-icon {
transform: rotate(180deg);
}
}
.el-icon {
margin-left: 5px;
transition: transform 0.3s;
}
}
</style>
const useDataFinanceStore = defineStore(
/** 流通撮合guid */
'circuGUid',
() => {
const circuGUid = ref<string>('');
/** 商品名称 */
const goodsName = ref('');
function setGoodsName(v: string) {
goodsName.value = v;
}
function setCircuGUid(v: string) {
circuGUid.value = v;
}
return {
goodsName,
setGoodsName,
circuGUid,
setCircuGUid
}
},
)
export default useDataFinanceStore
\ No newline at end of file
......@@ -23,7 +23,6 @@ declare module '@vue/runtime-core' {
Dialog_pane: typeof import('./../components/Dialog/dialog_pane.vue')['default']
DialogPlus: typeof import('./../components/DialogPlus/src/DialogPlus.vue')['default']
Drawer: typeof import('./../components/Drawer/index.vue')['default']
EchartsMap: typeof import('./../components/EchartsMap/index.vue')['default']
Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
EllipsisTooltip: typeof import('./../components/EllipsisTooltip.vue')['default']
FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
......
......@@ -28,7 +28,7 @@ export default ({ mode, command }) => {
server: {
open: true,
host: '0.0.0.0',
port: 9000,
port: 9001,
proxy: {
'/api': {
target: env.VITE_API_BASEURL,
......@@ -54,7 +54,12 @@ export default ({ mode, command }) => {
target: '//csbr-daop.obs.cn-north-1.myhuaweicloud.com:443',
changeOrigin: env.VITE_OPEN_PROXY === 'true',
rewrite: path => path.replace(/\/obs/, ''),
}
},
// '/idaas': {
// target: env.VITE_API_IDAAS_URL,
// changeOrigin: env.VITE_OPEN_PROXY === 'true',
// // rewrite: path => path.replace(/\/api/, ''),
// }
},
},
// 构建选项 https://cn.vitejs.dev/config/#server-fsserve-root
......
......@@ -10,7 +10,7 @@ import createSvgIcon from './svg-icon'
import createLayouts from './layouts'
import createPages from './pages'
import createCompression from './compression'
import createSpritesmith from './spritesmith'
//import createSpritesmith from './spritesmith'
import createBanner from './banner'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
......@@ -36,7 +36,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) {
vitePlugins.push(createLayouts())
vitePlugins.push(createPages())
isBuild && vitePlugins.push(...createCompression(viteEnv))
vitePlugins.push(...createSpritesmith(isBuild))
//vitePlugins.push(...createSpritesmith(isBuild))
vitePlugins.push(createBanner())
vitePlugins.push(createMock(viteEnv.VITE_APP_CHECK_BASEURL, isBuild))
return vitePlugins
......
import fs from 'fs'
import spritesmith from 'vite-plugin-spritesmith'
export default function createSpritesmith(isBuild) {
const spriteDirnames: string[] = []
fs.readdirSync('src/assets/sprites').forEach((dirname) => {
if (fs.statSync(`src/assets/sprites/${dirname}`).isDirectory()) {
spriteDirnames.push(dirname)
}
})
const plugin: any[] = []
spriteDirnames.forEach((item) => {
plugin.push(
spritesmith({
watch: !isBuild,
src: {
cwd: `./src/assets/sprites/${item}`,
glob: '*.png',
},
target: {
image: `./src/assets/sprites/${item}.png`,
css: [
[
`./src/assets/sprites/_${item}.scss`,
{
format: 'handlebars_based_template',
},
],
],
},
apiOptions: {
cssImageRef: `@/assets/sprites/${item}.png`,
spritesheet_info: {
name: item,
format: 'handlebars_based_template',
},
},
customTemplates: {
handlebars_based_template: './scss.template.hbs',
},
spritesmithOptions: {
algorithm: 'binary-tree',
padding: 10,
},
}),
)
})
return plugin
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!