Skip to content

P
pptist
Commit b3ff5d7c authored by zhengke's avatar zhengke
Browse files
Options

上传图片弹窗 show 地图 编辑+；-

parent c39a1801
Hide whitespace changes
Inline Side-by-side
Showing with 273 additions and 103 deletions
src/assets/styles/common.css
View file @ b3ff5d7c
......@@ -241,6 +241,9 @@ page {
flex: 1;
min-height: 1px;
}
.grow{
flex-grow: 1;
}
.text-bold{
font-weight: 600;
}
......
src/components/Maps/MapAttributes/LineAttributes.vue
View file @ b3ff5d7c
......@@ -17,18 +17,30 @@
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',0)"/>
<Slider class="filter-slider grow" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
@update:value="value => updateFilter(0, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',0)"/>
</div>
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-dasharray q-mr-lg" title="虚线" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',1)"/>
<Slider class="filter-slider grow" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
@update:value="value => updateFilter(1, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',1)"/>
</div>
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-arc q-mr-lg" title="弯曲" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="0.6" :min="-0.6" :step="0.1" :value="attrs.controlPointDistance"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',2)"/>
<Slider class="filter-slider grow" :max="0.6" :min="-0.6" :step="0.1" :value="attrs.controlPointDistance"
@update:value="value => updateFilter(2, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div>
</div>
<div class="attr-items flex grey-bg items-center" style="border-bottom: 1px;padding: 0px;">
<div class="col arrow-type text-center" v-for="(x,i) in icons" @click="updateLinePoint(i)" :class="{'active':attrs.arrow==i}">
......@@ -67,6 +79,36 @@ const attrs = reactive({
} as any)
const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])
const AddSubtract = (symbol: string,val: number) => {
let value
if(val==0){
if(symbol=='-'&&attrs.strokeWidth>1){
attrs.strokeWidth--
}if(symbol=='+'&&attrs.strokeWidth<50){
attrs.strokeWidth++
}
value = attrs.strokeWidth
updateFilter(0, value as number)
}if(val==1){
if(symbol=='-'&&attrs.strokeDasharray>0){
let strokeDasharray = (attrs.strokeDasharray*100)-(0.1*100)
attrs.strokeDasharray = strokeDasharray/100
}if(symbol=='+'&&attrs.strokeDasharray<10){
attrs.strokeDasharray = attrs.strokeDasharray+0.1
}
value = attrs.strokeDasharray
updateFilter(1, value as number)
}if(val==2){
if(symbol=='-'&&attrs.controlPointDistance>-0.6){
let controlPointDistance = (attrs.controlPointDistance*100)-(0.1*100)
attrs.controlPointDistance = controlPointDistance/100
}if(symbol=='+'&&attrs.controlPointDistance<0.6){
attrs.controlPointDistance = attrs.controlPointDistance+0.1
}
value = attrs.controlPointDistance
updateFilter(2, value as number)
}
}
const updateFilter = (t: number, val: number) => {
switch (t) {
case 0:
......
src/components/Maps/MapAttributes/MarkAttributes.vue
View file @ b3ff5d7c
......@@ -20,13 +20,21 @@
</div>
<div class="attr-items flex items-center q-mt-lg">
<div style="font-size: 11px;width:50px;">边框</div>
<Slider class="filter-slider" :max="10" :min="0" :step="1" :value="attrs.strokeWidth"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',0)"/>
<Slider class="filter-slider" :max="10" :min="0" :step="1" :value="attrs.strokeWidth"
@update:value="value => updateFilter(0, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',0)"/>
</div>
</div>
<div class="attr-items flex items-center q-mt-lg">
<div style="font-size: 11px;width:50px;">大小</div>
<Slider class="filter-slider" :max="5" :min="0.1" :step="0.1" :value="attrs.scale"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',1)"/>
<Slider class="filter-slider grow" :max="5" :min="0.1" :step="0.1" :value="attrs.scale"
@update:value="value => updateFilter(1, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',1)"/>
</div>
</div>
<div class="attr-items flex items-center q-mt-lg grey-bg">
<div style="font-size: 11px; " class="col">文字</div>
......@@ -38,7 +46,12 @@
</div>
<div class="attr-items flex items-center grey-bg">
<div style="font-size: 11px;width:50px;">大小</div>
<Slider class="filter-slider" :max="72" :min="12" :step="1" :value="attrs.fontSize" @update:value="value => updateLabFontSizeHandler(value as number)" />
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',2)"/>
<Slider class="filter-slider grow" :max="72" :min="12" :step="1" :value="attrs.fontSize"
@update:value="value => {updateLabFontSizeHandler(value as number),attrs.fontSize=value}" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div>
</div>
<div class="attr-items flex items-center q-mt-md">
......@@ -111,6 +124,35 @@ const searchLoading = ref(false)
const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])
const positions = ref<{label:string,value:number}[]>([{label:'底部',value:0},{label:'顶部',value:1},{label:'靠右',value:2},{label:'靠左',value:3}])
const AddSubtract = (symbol: string,val: number) => {
let value
if(val==0){
if(symbol=='-'&&attrs.strokeWidth>0){
attrs.strokeWidth--
}if(symbol=='+'&&attrs.strokeWidth<10){
attrs.strokeWidth++
}
value = attrs.strokeWidth
updateFilter(0, value as number)
}if(val==1){
if(symbol=='-'&&attrs.scale>0.1){
let scale = (attrs.scale*100)-(0.1*100)
attrs.scale = scale/100
}if(symbol=='+'&&attrs.scale<5){
attrs.scale = attrs.scale+0.1
}
value = attrs.scale
updateFilter(1, value as number)
}if(val==2){
if(symbol=='-'&&attrs.fontSize>12){
attrs.fontSize--
}if(symbol=='+'&&attrs.fontSize<72){
attrs.fontSize++
}
value = attrs.fontSize
updateLabFontSizeHandler(value as number)
}
}
const updateFilter = (t: number, val: number) => {
switch (t) {
case 0:
......
src/components/Maps/MapAttributes/SpLineAttributes.vue
View file @ b3ff5d7c
......@@ -17,23 +17,40 @@
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',0)"/>
<Slider class="filter-slider grow" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
@update:value="value => updateFilter(0, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',0)"/>
</div>
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-dasharray q-mr-lg" title="虚线" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',1)"/>
<Slider class="filter-slider" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
@update:value="value => updateFilter(1, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',1)"/>
</div>
</div>
<div class="attr-items flex items-center">
<IconRotationHorizontal class="q-mr-lg" title="横向节点" style="margin-top: 5px;" />
<Slider class="filter-slider" :max="10" :min="-10" :step="0.1" :value="attrs.tensionX"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',2)"/>
<Slider class="filter-slider grow" :max="10" :min="-10" :step="0.1" :value="attrs.tensionX"
@update:value="value => updateFilter(2, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div>
</div>
<div class="attr-items flex items-center">
<IconRotationVertical class="q-mr-lg" title="Y轴弯曲" style="margin-top: 5px;font-weight: bold;" />
<Slider class="filter-slider" :max="10" :min="-10" :step="0.1" :value="attrs.tensionY"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',3)"/>
<Slider class="filter-slider grow" :max="10" :min="-10" :step="0.1" :value="attrs.tensionY"
@update:value="value => updateFilter(3, value as number)" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',3)"/>
</div>
</div>
<div class="attr-items flex grey-bg items-center" style="border-bottom: 1px;padding: 0px;">
<div class="col arrow-type text-center" v-for="(x,i) in icons" @click="updateLinePoint(i)" :class="{'active':attrs.arrow==i}">
......@@ -71,7 +88,45 @@ const attrs = reactive({
arrow:-1
} as any)
const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])
const AddSubtract = (symbol: string,val: number) => {
let value
if(val==0){
if(symbol=='-'&&attrs.strokeWidth>1){
attrs.strokeWidth--
}if(symbol=='+'&&attrs.strokeWidth<50){
attrs.strokeWidth++
}
value = attrs.strokeWidth
updateFilter(0, value as number)
}if(val==1){
if(symbol=='-'&&attrs.strokeDasharray>0){
let strokeDasharray = (attrs.strokeDasharray*100)-(0.1*100)
attrs.strokeDasharray = strokeDasharray/100
}if(symbol=='+'&&attrs.strokeDasharray<10){
attrs.strokeDasharray = attrs.strokeDasharray+0.1
}
value = attrs.strokeDasharray
updateFilter(1, value as number)
}if(val==2){
if(symbol=='-'&&attrs.tensionX>-10){
let tensionX = (attrs.tensionX*100)-(0.1*100)
attrs.tensionX = tensionX/100
}if(symbol=='+'&&attrs.tensionX<10){
attrs.tensionX = attrs.tensionX+0.1
}
value = attrs.tensionX
updateFilter(2, value as number)
}if(val==3){
if(symbol=='-'&&attrs.tensionY>-10){
let tensionY = (attrs.tensionY*100)-(0.1*100)
attrs.tensionY = tensionY/100
}if(symbol=='+'&&attrs.tensionY<10){
attrs.tensionY = attrs.tensionY+0.1
}
value = attrs.tensionY
updateFilter(3, value as number)
}
}
const updateFilter = (t: number, val: number) => {
switch (t) {
case 0:
......
src/components/Maps/MapAttributes/TextAttributes.vue
View file @ b3ff5d7c
......@@ -11,8 +11,12 @@
</div>
<div class="attr-items flex items-center">
<i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
<Slider class="filter-slider" :max="72" :min="11" :step="1" :value="attrs.fontSize"
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-')"/>
<Slider class="filter-slider grow" :max="72" :min="11" :step="1" :value="attrs.fontSize"
@update:value="value => current.fontSize = value" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+')"/>
</div>
</div>
<div class="attr-items grey-bg" style="border-top-width: 1px; font-size: 11px;padding: 10px;">
<el-input input-style="border: none !important; background: none !important;" @input="changeTextHandler" v-model="attrs.text" :rows="5" type="textarea" placeholder="文字..." />
......@@ -43,6 +47,14 @@ import { watch } from 'vue';
const mapStore = useMapStore()
const { current,fillColor } = storeToRefs(mapStore)
const attrs = reactive({} as any)
const AddSubtract = (symbol: string) => {
if(symbol=='-'&&attrs.fontSize>11){
attrs.fontSize--
}if(symbol=='+'&&attrs.fontSize<72){
attrs.fontSize++
}
current.value.fontSize = attrs.fontSize
}
const updateFillHandler = (val:any) =>{
attrs.fill = tinycolor(val).toHex8String()
current.value.fill = am4coreColor(attrs.fill)
......
src/views/Editor/CanvasTool/UploadPicture.vue
View file @ b3ff5d7c
<template>
<el-dialog v-model="showVisible" :show-close="false" :close-on-press-escape="false"
:close-on-click-modal="false" style="width: 680px;">
<template #header>
<div class="text-title">选择、上传图片</div>
</template>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="ERP资料库" name="1">
<el-row class="q-mb-md">
<el-col :span="6">
<el-select v-model="datas.queryMsg.Type" class="m-2"
@change="SearchHandler()">
<el-option
v-for="item in typeLists"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="18">
<el-input v-model="datas.queryMsg.Name"
placeholder="输入关键字快速查找" clearable
class="input-with-select q-pl-lg" @keyup.enter="SearchHandler()">
<template #append>
<el-button type="primary" @click="SearchHandler">搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<div class="row UploadPicture-box" v-loading="datas.loading">
<div v-for="(item,index) in datas.imgList" class="UploadPicture-list">
<div class="UploadPicture-listBox">
<img :src="item.Path" class="rounded" @click="getImgs(item,index)"/>
<div class="UploadPicture-Hover" v-if="item.show">
<div>
<el-icon :size="20"><CircleCheckFilled/></el-icon>
<div class="UploadPicture-from">
<div class="UploadPicture-fromB rounded">
<div>
<div class="text-title">选择、上传图片</div>
</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="ERP资料库" name="1">
<el-row class="q-mb-md">
<el-col :span="6">
<el-select v-model="datas.queryMsg.Type" class="m-2"
@change="SearchHandler()">
<el-option
v-for="item in typeLists"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="18">
<el-input v-model="datas.queryMsg.Name"
placeholder="输入关键字快速查找" clearable
class="input-with-select q-pl-lg" @keyup.enter="SearchHandler()">
<template #append>
<el-button type="primary" @click="SearchHandler">搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<div class="row UploadPicture-box" v-loading="datas.loading">
<div v-for="(item,index) in datas.imgList" class="UploadPicture-list">
<div class="UploadPicture-listBox">
<img :src="item.Path" class="rounded" @click="getImgs(item,index)"/>
<div class="UploadPicture-Hover" v-if="item.show">
<div>
<el-icon :size="20"><CircleCheckFilled/></el-icon>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="q-mt-md" style="display: flex;justify-content: center;">
<el-pagination
v-model:current-page="currentPage"
:page-size="datas.queryMsg.pageSize"
:small="small"
:disabled="disabled"
:background="background"
layout="prev, pager, next"
:total="datas.queryMsg.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-tab-pane>
<el-tab-pane label="第三方资源" name="4">
<SpiderResource @change="(payload:string)=> spiderImgUrl=payload"></SpiderResource>
</el-tab-pane>
<el-tab-pane label="本地图" name="2">
<FileInput @change="files => insertImageElement(files)">
<div class="upload-box">
<img v-if="imgPath" :src="imgPath" style="height: 200px;"/>
<div v-else>
<el-icon size="80" color="#a8abb2" class="el-icon--upload">
<upload-filled/>
</el-icon>
<p><em>点击上传图片</em></p>
<div class="q-mt-md" style="display: flex;justify-content: center;">
<el-pagination
v-model:current-page="currentPage"
:page-size="datas.queryMsg.pageSize"
:small="small"
:disabled="disabled"
:background="background"
layout="prev, pager, next"
:total="datas.queryMsg.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-tab-pane>
<el-tab-pane label="第三方资源" name="4">
<SpiderResource @change="(payload:string)=> spiderImgUrl=payload"></SpiderResource>
</el-tab-pane>
<el-tab-pane label="本地图" name="2">
<FileInput @change="files => insertImageElement(files)">
<div class="upload-box">
<img v-if="imgPath" :src="imgPath" style="height: 200px;"/>
<div v-else>
<el-icon size="80" color="#a8abb2" class="el-icon--upload">
<upload-filled/>
</el-icon>
<p><em>点击上传图片</em></p>
</div>
</div>
</FileInput>
</el-tab-pane>
<el-tab-pane label="图片地址" name="3">
<div class="row wrap q-mt-md">
<el-input v-model="imgUrl" placeholder="输入图片的地址" class="input-with-select"></el-input>
</div>
</FileInput>
</el-tab-pane>
<el-tab-pane label="图片地址" name="3">
<div class="row wrap q-mt-md">
<el-input v-model="imgUrl" placeholder="输入图片的地址" class="input-with-select"></el-input>
</el-tab-pane>
</el-tabs>
<div class="q-mt-lg row items-center">
<div class="col">
</div>
<div>
<el-button class="q-ml-lg" @click="close()">取消</el-button>
<el-button type="primary" class="q-ml-lg" @click="setImgs()">确定</el-button>
</div>
</el-tab-pane>
</el-tabs>
<div class="q-mt-lg row items-center">
<div class="col">
</div>
<div>
<el-button class="q-ml-lg" @click="close()">取消</el-button>
<el-button type="primary" class="q-ml-lg" @click="setImgs()">确定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
......@@ -106,8 +108,7 @@ import type { PPTImageElement, SlideBackground } from '@/types/slides'
import FileInput from '@/components/FileInput.vue'
const showVisible = ref(true)
const activeName = ref("1")
const imgPoolVisibleStore = useScreenStore()
const imgReplaceVisibleStore = useScreenStore()
const imgVisibleStore = useScreenStore()
const imageFile = ref({})
const imgOnline = ref('')
......@@ -286,9 +287,9 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
}
const close = () =>{
showVisible.value = false
imgPoolVisibleStore.setImgPoolVisible(false)
imgReplaceVisibleStore.setImgReplaceVisible(false)
// showVisible.value = false
imgVisibleStore.setImgPoolVisible(false)
imgVisibleStore.setImgReplaceVisible(false)
}
const SearchHandler = async () => {
datas.imgList = []
......@@ -320,6 +321,21 @@ const getImgList = async () =>{
getImgList()
</script>
<style lang="scss" scoped>
.UploadPicture-from{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(23,23,23,.5);
}
.UploadPicture-fromB{
width: 680px;
margin: 150px auto 0;
background: #fff;
padding: 20px;
}
.col #tippy-30{
z-index: 99999 !important;
}
......
src/views/Editor/CanvasTool/index.vue
View file @ b3ff5d7c
......@@ -93,7 +93,7 @@
</Modal>
<Maps :visible="mapVisibleStatus" @closed="mapVisibleStatus=false" @success="createMapImageHandler" v-if="mapVisibleStatus"></Maps>
<!-- 上传图片 -->
<UploadPicture v-if="imgPoolVisible"></UploadPicture>
<UploadPicture v-show="imgPoolVisible"></UploadPicture>
</div>
</template>
......
src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
View file @ b3ff5d7c
......@@ -73,7 +73,7 @@
<Button class="full-width-btn" @click="resetImage()"><IconUndo class="btn-icon" /> 重置样式</Button>
<Button class="full-width-btn" @click="setBackgroundImage()"><IconTheme class="btn-icon" /> 设为背景</Button>
<!-- 上传图片 -->
<UploadPicture v-if="imgReplaceVisible"></UploadPicture>
<UploadPicture v-show="imgReplaceVisible"></UploadPicture>
</div>
</template>
......
src/views/Editor/Toolbar/index.vue
View file @ b3ff5d7c
......@@ -44,28 +44,28 @@ const elementTabs = computed<ElementTabs[]>(() => {
{ label: '样式', key: ToolbarStates.EL_STYLE },
{ label: '符号', key: ToolbarStates.SYMBOL },
{ label: '位置', key: ToolbarStates.EL_POSITION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION }
// { label: '动画', key: ToolbarStates.EL_ANIMATION }
]
}
return [
{ label: '样式', key: ToolbarStates.EL_STYLE },
{ label: '位置', key: ToolbarStates.EL_POSITION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION },
// { label: '动画', key: ToolbarStates.EL_ANIMATION },
]
})
const slideTabs = ref([] as any)
if(model.value&&model.value!=2){
slideTabs.value = [
{ label: '设计', key: ToolbarStates.SLIDE_DESIGN },
{ label: '切换', key: ToolbarStates.SLIDE_ANIMATION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION },
// { label: '切换', key: ToolbarStates.SLIDE_ANIMATION },
// { label: '动画', key: ToolbarStates.EL_ANIMATION },
{ label: '模版数据', key: ToolbarStates.EL_TEMPLATEDATA },
]
}else {
slideTabs.value = [
{ label: '设计', key: ToolbarStates.SLIDE_DESIGN },
{ label: '切换', key: ToolbarStates.SLIDE_ANIMATION },
{ label: '动画', key: ToolbarStates.EL_ANIMATION },
// { label: '动画', key: ToolbarStates.EL_ANIMATION },
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment