Merge remote-tracking branch 'origin/master'

main
liu.shiyi 1 year ago
commit 1aab00e46d

@ -1,6 +1,6 @@
{
"name": "@gcpaas/data-room-ui",
"version": "1.0.1-2023101101-Alpha",
"version": "1.0.1-2023101301-Alpha",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -3699,7 +3699,7 @@
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.2",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.2.tgz",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.2.tgz",
"integrity": "sha512-ndeSe/8KQc/nlA7TJ+OBhv2qalmj1s+uBs7yHDRFaAXscFTApBzY9F1jES3bautmgWjDlDct0fw8rPuySDLwxw==",
"dev": true,
"requires": {
@ -3712,13 +3712,13 @@
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
@ -3727,7 +3727,7 @@
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
@ -10499,11 +10499,6 @@
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
"dev": true
},
"image-conversion": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/image-conversion/-/image-conversion-2.1.1.tgz",
"integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
},
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
@ -20147,7 +20142,7 @@
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
"dev": true
},

@ -64,7 +64,6 @@
"es6-promise": "4.2.8",
"gc-vue-draggable-resizable": "^1.0.1",
"html-to-image": "1.11.11",
"image-conversion": "^2.1.1",
"insert-css": "^2.0.0",
"jquery": "^3.6.4",
"lodash": "4.17.21",

@ -28,12 +28,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="按钮名称">

@ -35,12 +35,12 @@
label-width="120px"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -37,12 +37,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="setting-wrap">
<el-form-item

@ -37,12 +37,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="setting-wrap">
<el-form-item

@ -19,12 +19,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="组件类型">

@ -36,12 +36,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="字体大小">

@ -33,12 +33,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -28,12 +28,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting

@ -29,12 +29,12 @@
<div class="setting-wrap">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting

@ -36,12 +36,12 @@
:bigTitle='config.title'
/>
</div> -->
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label-width="100px" label="渐变背景色一">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<!-- <SettingTitle v-if="config.border"></SettingTitle>
<div class="lc-field-body">
<BorderSetting

@ -72,12 +72,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="输入值字体大小">

@ -40,12 +40,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="bs-setting-wrap">
<el-form-item

@ -33,12 +33,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -40,12 +40,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -42,12 +42,12 @@
:big-title="config.title"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -40,12 +40,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -66,7 +66,7 @@ export default {
if (config.customize.columnConfig.length === 0) {
const key = []
for (const i in data.columnData) {
header.push(data.columnData[i].remark)
header.push(data.columnData[i].remark||data.columnData[i].alias)
key.push(i)
}
data.data.forEach((item) => {

@ -36,12 +36,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="表头背景色">

@ -35,12 +35,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -19,12 +19,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<!-- 选择器背景颜色 -->

@ -35,12 +35,12 @@
label-width="120px"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="表头颜色">

@ -42,12 +42,12 @@
:big-title="config.title"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -36,12 +36,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -26,12 +26,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -36,12 +36,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item

@ -19,12 +19,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<!-- 选择器背景颜色 -->

@ -37,12 +37,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="背景色一">

@ -37,12 +37,12 @@
:bigTitle='config.title'
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="视频链接">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<slot name="top" />

@ -131,10 +131,9 @@ import icons from 'data-room-ui/assets/images/alignIcon/export'
import IconSvg from 'data-room-ui/SvgIcon'
import {
showSize,
dataURLtoBlob,
translateBlobToBase64
compressImage
} from 'data-room-ui/js/utils/compressImg'
import * as imageConversion from 'image-conversion'
// import * as imageConversion from 'image-conversion'
export default {
name: 'PageTopSetting',
components: {
@ -449,15 +448,21 @@ export default {
}
if (dataUrl) {
if (showSize(dataUrl) > 200) {
const url = dataURLtoBlob(dataUrl)
// 500KB,500,
const imgRes = await imageConversion.compressAccurately(url, {
size: 200, // 100kb
width: 1280, // 1280
height: 720 // 720
})
const base64 = await translateBlobToBase64(imgRes)
pageInfo.coverPicture = base64.result
// const newData = compressImage(dataUrl, 800)
// console.log(111, newData)
// const url = dataURLtoBlob(dataUrl)
// // 500KB,500,
// const imgRes = await imageConversion.compressAccurately(url, {
// size: 200, // 100kb
// width: 1280, // 1280
// height: 720 // 720
// })
// const base64 = await translateBlobToBase64(imgRes)
// pageInfo.coverPicture = base64.result
this.$message.info('由于封面图片过大,进行压缩中')
const compressCoverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
console.log(showSize(compressCoverPicture))
pageInfo.coverPicture = compressCoverPicture
} else {
pageInfo.coverPicture = dataUrl
}

@ -75,6 +75,7 @@
<el-form-item
:label-width="labelWidth"
label="是否显示标题"
v-if="config.type!='GcBorder16'"
>
<el-switch
v-model="config.isTitle"
@ -146,6 +147,22 @@
:placeholder="`请输入${setting.label}`"
clearable
/>
<el-input
v-model="config[setting.field]"
v-else-if="setting.type === 'background'"
clearable
placeholder="请选择图片"
>
<template slot="append">
<el-button
size="small"
type="primary"
@click="initCard"
>
选择
</el-button>
</template>
</el-input>
<el-select
v-else-if="setting.type === 'select'"
v-model="config[setting.field]"
@ -249,6 +266,7 @@
/>
</el-form-item>
</div>
<SourceDialog ref="SourceDialog" @getImg='changeImg' />
</div>
</div>
</template>
@ -258,12 +276,14 @@ import plotList from 'data-room-ui/BorderComponents/settingList.js'
import BorderColorSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderColorSetting/index.vue'
import ColorSelect from 'data-room-ui/ColorMultipleSelect/index.vue'
import BorderSelect from 'data-room-ui/BorderSelect/index.vue'
import SourceDialog from '../SourceDialog/index.vue'
export default {
name: '',
components: {
BorderSelect,
ColorSelect,
BorderColorSetting
BorderColorSetting,
SourceDialog
},
props: {
bigTitle:{
@ -361,9 +381,17 @@ export default {
// }
},
methods: {
changeImg(val){
console.log(val)
this.$set(this.config,'imgUrl',val.url)
},
init(){
this.$refs.BorderSelect.init()
},
initCard(){
this.$refs.SourceDialog.init()
}
}
}
</script>

@ -792,6 +792,8 @@ export default {
},
//
getDataSetDetailsById (id, type) {
this.clearVerify()
this.config.customize.columnConfig=[]
if (id) {
this.config.dataSource.businessKey = id
getDataSetDetails(id).then(res => {

@ -37,12 +37,12 @@
:config="config"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<template v-for="group in groupList">
<div :key="group.groupName">
<SettingTitle> {{ group.groupName | filterGroupName }}</SettingTitle>

@ -37,12 +37,12 @@
:config="config"
/>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<template v-for="group in groupList">
<div :key="group.groupName">
<SettingTitle> {{ group.groupName | filterGroupName }}</SettingTitle>

@ -153,7 +153,16 @@ import { getFileUrl } from 'data-room-ui/js/utils/file'
export default {
name: 'SourceDialog',
mixins: [pageMixins],
props: {},
props: {
imgUrl: {
type: String,
default: ''
}
},
model: {
prop: 'imgUrl',
event: 'change'
},
data () {
return {
dialogVisible: false,
@ -193,6 +202,7 @@ export default {
confirm () {
this.dialogVisible = false
if (this.focus !== -1) {
this.$emit('change', this.focus)
this.$emit('getImg', this.focus)
}
},

@ -156,10 +156,11 @@ import 'codemirror/mode/vue/vue.js'
import {
showSize,
dataURLtoBlob,
translateBlobToBase64
compressImage
// dataURLtoBlob,
// translateBlobToBase64
} from 'data-room-ui/js/utils/compressImg'
import * as imageConversion from 'image-conversion'
// import * as imageConversion from 'image-conversion'
export default {
name: 'BizComponentDesign',
@ -354,20 +355,22 @@ export default {
}
if (dataUrl) {
if (showSize(dataUrl) > 200) {
const url = dataURLtoBlob(dataUrl)
// const url = dataURLtoBlob(dataUrl)
// 500KB,500,
imageConversion.compressAccurately(
url,
{
size: 200, // 100kb
width: 1280, // 1280
height: 720 // 720
}
).then((res) => {
translateBlobToBase64(res, (e) => {
this.form.coverPicture = e.result
})
})
// imageConversion.compressAccurately(
// url,
// {
// size: 200, // 100kb
// width: 1280, // 1280
// height: 720 // 720
// }
// ).then((res) => {
// translateBlobToBase64(res, (e) => {
// this.form.coverPicture = e.result
// })
// })
this.$message.info('由于封面图片过大,进行压缩中')
this.form.coverPicture = await compressImage(dataUrl, { width: 1280, height: 720, size: 400, quality: 1 })
} else {
this.form.coverPicture = dataUrl
}

@ -4,8 +4,8 @@
class="bs-design-wrap"
:id="'border'+ config.code"
:style="{
borderImageSlice:'100 100 100 100 fill',
borderImageWidth:'100px 100px 100px 100px',
borderImageSlice:`${borderArray[0]} ${borderArray[1]} ${borderArray[2]} ${borderArray[3]} fill`,
borderImageWidth:`${borderArray[0]}px ${borderArray[1]}px ${borderArray[2]}px ${borderArray[3]}px`,
}"
>
</div>
@ -33,12 +33,26 @@ export default {
}
},
computed: {
borderArray(){
return this.config.border.borderArray ? this.config.border.borderArray
: [100,100,100,100]
}
},
watch: {
'config.border.imgUrl': {
handler (val) {
if(val){
const a =document.getElementById('border'+ this.config.code)
a.style['border-image-source']=`url(${val})`
}
}
}
},
mounted () {
const a =document.getElementById('border'+ this.config.code)
// a.style['border-image-source']=`url(http://127.0.0.1:8081//bigScreenServer/static/1704043211902484481.png)`
if(this.config.border.imgUrl){
const a =document.getElementById('border'+ this.config.code)
a.style['border-image-source']=`url(${this.config.border.imgUrl})`
}
},
methods: {
}

@ -3,134 +3,14 @@ const type = 'GcBorder16'
const name = '边框16'
const isTitle = true
const isTitle = false
const padding =[0,0,0,0]
// 右侧配置项
const setting = [
{
label:'标题区域背景色',
// 设置组件类型, select / input / colorPicker
type: 'gradual',
// 字段
field: 'fontGradientColor',
optionField: 'fontGradientColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: [],
},
// 背景色
// {
// label:'标题区域背景色一',
// // 设置组件类型, select / input / colorPicker
// type: 'colorPicker',
// // 字段
// field: 'fontGradientColor0',
// optionField: 'fontGradientColor0', // 对应options中的字段
// // 是否多选
// multiple: false,
// // 绑定的值
// value: '',
// },
// {
// label:'标题区域背景色二',
// // 设置组件类型, select / input / colorPicker
// type: 'colorPicker',
// // 字段
// field: 'fontGradientColor1',
// optionField: 'fontGradientColor1', // 对应options中的字段
// // 是否多选
// multiple: false,
// // 绑定的值
// value: '',
// },
{
label:'标题左侧颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'fontLeftColor',
optionField: 'fontLeftColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '#007aff',
},
{
label:'标题左侧宽度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'fontLeftWidth',
optionField: 'fontLeftWidth', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 4,
},
{
label:'标题底部分割线颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'fontBottomColor',
optionField: 'fontBottomColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
},
{
label:'外边框线颜色',
// 设置组件类型, select / input / colorPicker
type: 'colorPicker',
// 字段
field: 'borderColor',
optionField: 'borderColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: '',
},
{
label:'外边框线宽度',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'borderWidth',
optionField: 'borderWidth', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 0,
},
{
label:'背景色',
// 设置组件类型, select / input / colorPicker
type: 'gradual',
// 字段
field: 'gradientColor',
optionField: 'gradientColor', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: [],
},
// {
// label:'背景色一',
// // 设置组件类型, select / input / colorPicker
// type: 'colorPicker',
// // 字段
// field: 'gradientColor0',
// optionField: 'gradientColor0', // 对应options中的字段
// // 是否多选
// multiple: false,
// // 绑定的值
// value: '',
// },
// {
// label:'背景色二',
// // 设置组件类型, select / input / colorPicker
// type: 'colorPicker',
@ -143,104 +23,29 @@ const setting = [
// value: '',
// },
{
label: '渐变色方向',
// 设置组件类型
type: 'select',
// 字段
field: 'gradientDirection',
// 对应options中的字段
optionField: 'gradientDirection',
// 是否多选
multiple: false,
value: 'to right',
options: [
{
label: '从左到右',
value: 'to right'
},
{
label: '从右到左',
value: 'to left'
},
{
label: '从上到下',
value: 'to bottom'
},
{
label: '从下到上',
value: 'to top'
},
{
label: '从左上到右下',
value: 'to bottom right'
},
{
label: '从右上到左下',
value: 'to bottom left'
},
{
label: '从左下到右上',
value: 'to top right'
},
{
label: '从右下到左上',
value: 'to top left'
}
]
},
{
label:'左上圆角值',
label:'选择背景图',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
type: 'background',
// 字段
field: 'radiusLeftTop',
optionField: 'radiusLeftTop', // 对应options中的字段
field: 'imgUrl',
optionField: 'imgUrl', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'左下圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusLeftBottom',
optionField: 'radiusLeftBottom', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
},
{
label:'右上圆角值',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
// 字段
field: 'radiusRightTop',
optionField: 'radiusRightTop', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
value: '',
},
{
label:'右下圆角值',
label:'点九图背景切割',
// 设置组件类型, select / input / colorPicker
type: 'inputNumber',
type: 'move',
// 字段
field: 'radiusRightBottom',
optionField: 'radiusRightBottom', // 对应options中的字段
field: 'borderArray',
optionField: 'borderArray', // 对应options中的字段
// 是否多选
multiple: false,
// 绑定的值
value: 2,
value: [100,100,100,100],
},
]

@ -29,6 +29,7 @@
@click="chooseComponent(component)"
>
<div
v-if="component.title!='GcBorder16'"
:class="component.title == focus.title ? 'focus' : ''"
class="big-screen-card-inner"
>

@ -5,9 +5,9 @@
:config="config"
:predefine-theme-colors="predefineThemeColors"
/>
<RotateSetting
<!-- <RotateSetting
:config="config"
/>
/> -->
</div>
</template>
<script>

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -53,12 +53,12 @@
/>
</el-form-item>
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
</el-form>
</el-form>
</div>

@ -24,12 +24,6 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰颜色">
@ -60,7 +54,7 @@
<script>
import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
// import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
import {predefineColors} from "data-room-ui/js/utils/colorList";
export default {
@ -68,8 +62,7 @@ export default {
components: {
ColorPicker,
PosWhSetting,
SettingTitle,
RotateSetting
SettingTitle
},
data () {
return {

@ -18,16 +18,16 @@ const customConfig = {
root: {
version: '2023071001',
contribution: false,
// 绕x轴旋转角度
rotateX: 0,
// 绕y轴旋转角度
rotateY: 0,
// 绕z轴旋转角度
rotateZ: 0,
// 透视距离
perspective: 0,
skewX: 0,
skewY: 0
// // 绕x轴旋转角度
// rotateX: 0,
// // 绕y轴旋转角度
// rotateY: 0,
// // 绕z轴旋转角度
// rotateZ: 0,
// // 透视距离
// perspective: 0,
// skewX: 0,
// skewY: 0
},
customize: {
decorationColor1: '#3faacb',

@ -24,15 +24,15 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰颜色">
<el-form-item label="装饰颜色">
<ColorPicker
v-model="config.customize.decorationColor1"
:predefine="predefineThemeColors"

@ -24,12 +24,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -24,12 +24,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -24,12 +24,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -27,12 +27,12 @@
<div class="lc-field-body">
<PosWhSetting :config="config" />
</div>
<SettingTitle>旋转</SettingTitle>
<!-- <SettingTitle>旋转</SettingTitle>
<div class="lc-field-body">
<RotateSetting
:config="config"
/>
</div>
</div> -->
<SettingTitle>基础</SettingTitle>
<div class="lc-field-body">
<el-form-item label="装饰主颜色">

@ -1,544 +0,0 @@
/*
* @description: 配置参考https://g2plot.antv.antgroup.com/examples
* @Date: 2023-03-27 14:38:23
* @Author: xing.heng
*/
// 配置版本号
const version = '2023092201'
// 分类
const category = 'DualAxes'
// 标题
const title = '柱线混合图'
// 类别, new Line()
const chartType = 'DualAxes'
// 用于标识,唯一,和文件夹名称一致
const name = 'ZhuXianHunHeTu'
// 右侧配置项
const setting = [
{
label: '维度',
type: 'select', // 设置组件类型
field: 'xField', // 字段
optionField: 'xField', // 对应options中的字段
// 是否多选
multiple: false,
value: '',
tabName: 'data'
},
{
label: '指标',
type: 'select', // 设置组件类型
field: 'yField', // 字段
optionField: 'yField', // 对应options中的字段
// 是否多选
multiple: true,
value: [],
tabName: 'data'
},
// 网格线 grid
// {
// label: '虚线',
// type: 'switch',
// field: 'yAxis_grid_line_style_lineDash',
// optionField: 'yAxis.grid.line.style.lineDash',
// value: 0,
// active: 5,
// inactive: 0,
// tabName: 'custom',
// groupName: 'grid'
// },
// {
// label: '宽度',
// type: 'inputNumber',
// field: 'yAxis_grid_line_style_lineWidth',
// optionField: 'yAxis.grid.line.style.lineWidth',
// value: 1,
// tabName: 'custom',
// groupName: 'grid'
// },
// {
// label: '颜色',
// type: 'colorPicker',
// field: 'yAxis_grid_line_style_stroke',
// optionField: 'yAxis.grid.line.style.stroke',
// value: '#d0d0d0',
// tabName: 'custom',
// groupName: 'grid'
// },
// 图例 legend
{
label: '显示',
type: 'switch', // 设置组件类型
field: 'legendEnable', // 字段
optionField: 'legendEnable', // 对应options中的字段
value: false,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'legend'
},
{
label: '位置',
type: 'select', // 设置组件类型
field: 'legendPosition', // 字段
optionField: 'legendPosition', // 对应options中的字段
// 是否多选
multiple: false,
value: 'top',
tabName: 'custom',
options: [
{ label: '顶部', value: 'top' },
{ label: '左上角', value: 'top-left' },
{ label: '右上角', value: 'top-right' },
{ label: '左侧', value: 'left' },
// { label: '左上方', value: 'left-top' },
// { label: '左下方', value: 'left-bottom' },
{ label: '右侧', value: 'right' },
// { label: '右上方', value: 'right-top' },
// { label: '右下方', value: 'right-bottom' },
{ label: '底部', value: 'bottom' },
{ label: '左下角', value: 'bottom-left' },
{ label: '右下角', value: 'bottom-right' }
],
groupName: 'legend'
},
{
label: '字体大小',
type: 'inputNumber',
field: 'legendItemName_style_fontSize',
optionField: 'legendItemName.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体权重',
type: 'inputNumber',
step: 100,
max: 900,
field: 'legendItemName_style_fontWeight',
optionField: 'legendItemName.style.fontWeight',
value: 400,
tabName: 'custom',
groupName: 'legend'
},
{
label: '字体颜色',
type: 'colorPicker',
field: 'legendItemName_style_fill',
optionField: 'legendItemName.style.fill',
value: '#595959',
tabName: 'custom',
groupName: 'legend'
},
// X轴 xAxis
{
label: '标题',
type: 'input',
field: 'xAxis_title_text',
optionField: 'xAxis.title.text',
value: '',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题位置',
type: 'select',
field: 'xAxis_title_position',
optionField: 'xAxis.title.position',
value: 'end',
tabName: 'custom',
options: [
{
label: '左',
value: 'start'
},
{
label: '中',
value: 'center'
},
{
label: '右',
value: 'end'
}],
groupName: 'xAxis'
},
{
label: '标题字体大小',
type: 'inputNumber',
field: 'xAxis_title_style_fontSize',
optionField: 'xAxis.title.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标题颜色',
type: 'colorPicker',
field: 'xAxis_title_style_fill',
optionField: 'xAxis.title.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签大小',
type: 'inputNumber',
field: 'xAxis_label_style_fontSize',
optionField: 'xAxis.label.style.fontSize',
value: 12,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签颜色',
type: 'colorPicker',
field: 'xAxis_label_style_fill',
optionField: 'xAxis.label.style.fill',
// 是否多选
multiple: false,
value: '#8C8C8C',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线宽度',
type: 'inputNumber',
field: 'xAxis_line_style_lineWidth',
optionField: 'xAxis.line.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '轴线颜色',
type: 'colorPicker',
field: 'xAxis_line_style_stroke',
optionField: 'xAxis.line.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '刻度线宽度',
type: 'inputNumber',
field: 'xAxis_tickLine_style_lineWidth',
optionField: 'xAxis.tickLine.style.lineWidth',
value: 1,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '刻度线颜色',
type: 'colorPicker',
field: 'xAxis_tickLine_style_stroke',
optionField: 'xAxis.tickLine.style.stroke',
// 是否多选
multiple: false,
value: '#d0d0d0',
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过多时旋转',
type: 'switch',
field: 'xAxis_label_autoRotate',
optionField: 'xAxis.label.autoRotate',
value: true,
active: true,
inactive: false,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过多时隐藏',
type: 'switch',
field: 'xAxis_label_autoHide',
optionField: 'xAxis.label.autoHide',
value: true,
tabName: 'custom',
groupName: 'xAxis'
},
{
label: '标签过长时省略',
type: 'switch',
field: 'xAxis_label_autoEllipsis',
optionField: 'xAxis.label.autoEllipsis',
value: true,
tabName: 'custom',
groupName: 'xAxis'
},
// y轴
// {
// label: '标题',
// type: 'input',
// field: 'yAxis_title_text',
// optionField: 'yAxis.title.text',
// value: '',
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '标题过长时旋转',
// type: 'switch',
// field: 'yAxis_title_autoRotate',
// optionField: 'yAxis.title.autoRotate',
// value: true,
// active: true,
// inactive: false,
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '标题位置',
// type: 'select',
// field: 'yAxis_title_position',
// optionField: 'yAxis.title.position',
// value: 'end',
// tabName: 'custom',
// options: [
// {
// label: '上',
// value: 'end'
// },
// {
// label: '中',
// value: 'center'
// },
// {
// label: '下',
// value: 'start'
// }],
// groupName: 'yAxis'
// },
// {
// label: '标题字体大小',
// type: 'inputNumber',
// field: 'yAxis_title_style_fontSize',
// optionField: 'yAxis.title.style.fontSize',
// value: 12,
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '标题颜色',
// type: 'colorPicker',
// field: 'yAxis_title_style_fill',
// optionField: 'yAxis.title.style.fill',
// // 是否多选
// multiple: false,
// value: '#8C8C8C',
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '显示标签',
// type: 'switch',
// field: 'yAxis_label_style_opacity',
// optionField: 'yAxis.label.style.opacity',
// value: 1,
// active: 1,
// inactive: 0,
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '标签字体大小',
// type: 'inputNumber',
// field: 'yAxis_label_style_fontSize',
// optionField: 'yAxis.label.style.fontSize',
// value: 12,
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '标签字体颜色',
// type: 'colorPicker',
// field: 'yAxis_label_style_fill',
// optionField: 'yAxis.label.style.fill',
// // 是否多选
// multiple: false,
// value: '#8C8C8C',
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '轴线宽度',
// type: 'inputNumber',
// field: 'yAxis_line_lineWidth',
// optionField: 'yAxis.line.style.lineWidth',
// value: 0,
// tabName: 'custom',
// groupName: 'yAxis'
// },
// {
// label: '轴线颜色',
// type: 'colorPicker',
// field: 'yAxis_line_stroke',
// optionField: 'yAxis.line.style.stroke',
// // 是否多选
// multiple: false,
// value: '#d0d0d0',
// tabName: 'custom',
// groupName: 'yAxis'
// },
]
// 配置处理脚本
const optionHandler = 'option.legend = option.legendEnable ? {position: setting.find(settingItem=>settingItem.field === \'legendPosition\').value} : false;' +
' if (option.legendEnable) {\n' +
' option.legend.itemName = option.legendItemName\n' +
' };'
// 'option.yAxis.grid.line.style.lineDash = [4,setting.find(settingItem=>settingItem.field === \'yAxis_grid_line_style_lineDash\').value]'
// 数据处理脚本
const dataHandler = 'data = [data,data]'
// 模拟数据
const data = [
{ time: '2019-03', value: 350, count: 800 },
{ time: '2019-04', value: 900, count: 600 },
{ time: '2019-05', value: 300, count: 400 },
{ time: '2019-06', value: 450, count: 380 },
{ time: '2019-07', value: 470, count: 220 },
]
// 图表配置 new Line('domName', option)
const option = {
// 数据将要放入到哪个字段中
dataKey: 'data',
data:[data,data],
xField: 'time',
yField: ['value', 'count'],
geometryOptions: [
{
geometry: 'column',
},
{
geometry: 'line',
lineStyle: {
lineWidth: 2,
},
},
],
isStack: true,
// seriesField: 'type',
legendEnable: false,
legendItemName: {
style: {
fill: '#595959',
fontSize: 12,
fontWeight: 400
}
},
legendLayout: 'vertical',
legendPosition: 'top',
legend: false,
pattern: {
type: ''
},
// color: ['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'],
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
// 配置样式
style: {
fill: '#59F25F',
opacity: 0,
fontSize: 12
},
},
xAxis: {
title: {
text: '',
position: 'end',
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
label: {
autoRotate: false,
autoHide: true,
autoEllipsis: true,
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 1
}
},
tickLine: {
style: {
stroke: '#d0d0d0',
lineWidth: 1
}
}
},
yAxis: {
title: {
text: '',
position: 'end',
autoRotate: false,
// rotation: Math.PI / 2,
style: {
fill: '#8C8C8C',
fontSize: 12
}
},
grid: {
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 1,
lineDash: [4, 5],
strokeOpacity: 0.7
}
}
},
label: {
formatter: (v) => {
if (v < 1e3) return v
// 数值格式化为千分位
if (v >= 1e3 && v < 1e6) return `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
if (v >= 1e6 && v < 1e9) return `${(v / 1e6).toFixed(1)} M`
if (v >= 1e9 && v < 1e12) return `${(v / 1e9).toFixed(1)} B`
return `${(v / 10e8).toFixed(1)} B`
},
style: {
fill: '#8C8C8C',
fontSize: 12,
opacity: 1
}
},
line: {
style: {
stroke: '#d0d0d0',
lineWidth: 0
}
}
}
}
export default {
category,
version,
title,
chartType,
name,
option,
setting,
optionHandler,
dataHandler
}

@ -19,7 +19,7 @@ export function showSize (base64url) {
// 判断后两位是否为00如果是则删除00
return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
}
return size
return Number(size)
}
export function dataURLtoFile (dataurl, filename) {
@ -58,3 +58,43 @@ export function translateBlobToBase64 (blob, callback) {
reader.readAsDataURL(blob)
// 读取后result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
}
// 压缩方法
export function compressImage (base64, { width: w = 1280, height: h = 720, size = 200, quality = 1 }) {
return new Promise((resolve, reject) => {
const newImage = new Image()
newImage.src = base64
newImage.setAttribute('crossOrigin', 'Anonymous')
let imgWidth, imgHeight
newImage.onload = function () {
imgWidth = 1280
imgHeight = 720
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w
canvas.height = w * imgHeight / imgWidth
} else {
canvas.height = w
canvas.width = w * imgWidth / imgHeight
}
} else {
canvas.width = imgWidth
canvas.height = imgHeight
quality = 1
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(this, 0, 0, canvas.width, canvas.height)
let compressedBase64 = canvas.toDataURL('image/jpeg', quality) // 压缩语句
if (showSize(compressedBase64) > Number(size)) {
compressedBase64 = canvas.toDataURL('image/jpeg', quality - 0.2 > 0.4 ? quality - 0.2 : 0.4)
}
resolve(compressedBase64)
}
newImage.onerror = function () {
reject(new Error('Failed to load image'))
}
})
}

Loading…
Cancel
Save