Skip to content

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

优化新增、编辑颜色、国家布局 地图字加粗 ，选字体，地图标记滚动

parent 54fd6d73
Show whitespace changes
Inline Side-by-side
Showing with 240 additions and 53 deletions
src/assets/styles/common.css
View file @ 35174d87
......@@ -416,6 +416,16 @@ page {
.q-ma-lg{
margin:20px
}
.q-ma-xs{
margin-right: 5px;
margin-left: 5px;
}
.q-mr-xs{
margin-right: 5px;
}
.q-ml-xs{
margin-left: 5px;
}
.q-pa-lg{
padding:20px
}
......
src/components/Maps/MapAttributes/MarkAttributes.vue
View file @ 35174d87
......@@ -53,7 +53,22 @@
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div>
</div>
<div class="attr-items flex items-center grey-bg q-mt-lg">
<div style="font-size: 11px;width:50px;">加粗</div>
<div class="col flex">
<IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',3)"/>
<Slider class="filter-slider grow" :max="800" :min="400" :step="200" :value="attrs.fontWeight"
@update:value="value => {updateLabFontSizeHandler(value as number),attrs.fontWeight=value}" />
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',3)"/>
</div>
</div>
<div class="attr-items flex items-center q-mt-md">
<div style="font-size: 11px;width:50px;">字体</div>
<el-select size="mini" v-model="attrs.fontFamily" filterable @change="val=>updateLabFontFamilyHandler(val as number)" placeholder="请选择">
<el-option v-for="item in formatFonts" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div class="attr-items flex items-center q-mt-md">
<div style="font-size: 11px;width:50px;">对齐</div>
<el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择">
......@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2';
import { color as am4coreColor,Label} from "@amcharts/amcharts4/core";
import { watch } from 'vue';
import MapService from '@/services/MapService';
import { useFontStore } from '@/store'
const mapStore = useMapStore()
const { current,fillColor } = storeToRefs(mapStore)
const { formatFonts } = storeToRefs(useFontStore())
const attrs = reactive({
arrow:-1,
textEnable:false,
fontSize:12,
fontWeight:400,
fontFamily: '',
fontAlign:0,
fontText:'',
fontColor:'#000',
......@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => {
}
value = attrs.fontSize
updateLabFontSizeHandler(value as number)
}if(val==3){
if(symbol=='-'&&attrs.fontWeight>400){
attrs.fontWeight = attrs.fontWeight-200
}if(symbol=='+'&&attrs.fontWeight<800){
attrs.fontWeight = attrs.fontWeight+200
}
value = attrs.fontWeight
updateLabFontWeightHandler(value as number)
}
}
const updateFilter = (t: number, val: number) => {
......@@ -213,6 +240,8 @@ const createLabel = ()=>{
//label.fontWeight = 'bold'
attrs.fontSize = 13
attrs.fontWeight = 400
attrs.fontFamily = 'Microsoft Yahei'
attrs.fill = fillColor.value.realColor
attrs.text = '文字内容'
attrs.fontAlign = 0
......@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{
}, 500);
}
}
const updateLabFontWeightHandler = (val:number) =>{
let lab = getCurrentLabel()
if(lab){
lab.fontWeight=val
setTimeout(() => {
asyncAllMarkHandler()
}, 500);
}
}
const updateLabFontFamilyHandler = (val:number) =>{
let lab = getCurrentLabel()
if(lab){
lab.fontFamily=val
setTimeout(() => {
asyncAllMarkHandler()
}, 500);
}
}
const setLabelTextHandler = (val:string)=>{
let lab = getCurrentLabel()
if(lab){
......@@ -335,6 +382,8 @@ const setAttribute = ()=>{
attrs.textEnable = true
attrs.fontText = lab.text
attrs.fontSize = lab.fontSize??15
attrs.fontWeight = lab.fontWeight??400
attrs.fontFamily = lab.fontFamily??'Microsoft Yahei'
attrs.fontAlign = lab.marginBottom
attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String()
//attrs.fontSize =
......
src/components/Maps/MapAttributes/index.vue
View file @ 35174d87
......@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore)
right: 20px;
left: unset;
top: 45px;
bottom: 200px;
position: absolute;
z-index: 9;
overflow: auto;
}
.attr-box .attr-header {
......
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @ 35174d87
......@@ -42,9 +42,17 @@
<el-input v-model="titleValue" @blur="handleUpdateTitle()"
:placeholder="searchData.TemplateType!=2?'输入模板名称':'输入广告名称'" class="input-with-select"></el-input>
</div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>国家：</p>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.CountryName" class="m-2" placeholder="请选择国家">
<p class="q-mt-md row flex-between items-center">
<div><span class="Required q-mr-md">*</span>国家：</div>
<el-button v-if="!datas.EditAddCountryShow" class="button-new-tag ml-1"
style="width: 56px;"
size="small"
@click="EditAddDatas(0,0)">
+ 国家
</el-button>
</p>
<div class="row q-mt-md">
<el-select v-model="queryObj.CountryName" filterable class="m-2" placeholder="请选择国家">
<el-option
v-for="item in dispositionObj.CountryList"
:key="item.CountryValue"
......@@ -52,6 +60,36 @@
:value="item.CountryValue"
/>
</el-select>
<el-button v-if="!datas.EditAddCountryShow" class="button-new-tag q-ml-md ml-1"
@click="EditAddDatas(1,0)">
编辑
</el-button>
</div>
<div class="EditAddElement" v-if="datas.EditAddCountryShow">
<p class="q-mt-md row flex-between">
<span>{{datas.EditAddType==1?'编辑':'新增'}}国家：</span>
<span>
<el-button class="button-new-tag ml-1"
size="small" @click="CancelEditAdd(0)">
取消
</el-button>
<el-button class="button-new-tag ml-1 q-ml-xs"
:loading="datas.addEditLoading"
type="danger"
size="small" @click="setEditAdd(0)">
提交
</el-button>
</span>
</p>
<div class="row q-mt-md">
<span class="Required q-ma-xs">*</span>
<el-input
placeholder="国家名称"
v-model="datas.addEditCountry.CountryName"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
</div>
</div>
<template v-if="false">
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择线路：</p>
......@@ -107,9 +145,17 @@
+ 添加标签
</el-button>
</div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择颜色：</p>
<p class="q-mt-md row flex-between items-center">
<div><span class="Required q-mr-md">*</span>选择颜色：</div>
<el-button v-if="!datas.EditAddShow" class="button-new-tag ml-1"
style="width: 56px;"
size="small"
@click="EditAddDatas(0,1)">
+ 色值
</el-button>
</p>
<div class="row q-mt-md">
<el-select v-model="queryObj.ColorId" placeholder="请选择主色">
<!-- <el-select v-model="queryObj.ColorId" placeholder="请选择分类">
<el-option
key=""
label="不限"
......@@ -121,80 +167,83 @@
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select>
</div>
<div class="row q-mt-md">
<el-select v-model="queryObj.ColorStr" placeholder="请选择颜色"
</el-select> -->
<el-select class="" v-model="queryObj.ColorStr" filterable placeholder="请选择颜色"
@change="setCountryValue">
<!-- <el-option
key=""
label="不限"
value=""
/> -->
<el-option
v-for="item in dispositionObj.ColorList"
:key="item.ColorValue"
:label="`${item.ColorName} / ${item.ColorValue}`"
:label="`${item.ColorName}${item.ColorValue}`"
:value="item.ColorValue"
>
<template #default>
<!-- <el-tag
v-for="item in items"
:key="item.label"
:type="item.type"
effect="dark">
{{ item.label }}
</el-tag> -->
<el-tag
:color="item.ColorValue"
effect="dark" class="q-mr-md">
{{ item.label }}
</el-tag>
<span :style="{'color':item.ColorValue}">{{item.ColorName}}</span>
<span>{{item.ColorName}}</span>
<span class="q-ml-md">{{item.ColorValue}}</span>
</template>
</el-option>
</el-select>
<el-button v-if="!datas.addColorsShow" class="button-new-tag q-ml-md ml-1"
@click="datas.addColorsShow=!datas.addColorsShow">
+ 颜色
<el-button v-if="!datas.EditAddShow" class="button-new-tag q-ml-md ml-1"
@click="EditAddDatas(1,1)">
编辑
</el-button>
</div>
<template v-if="datas.addColorsShow">
<div class="EditAddElement" v-if="datas.EditAddShow">
<p class="q-mt-md row flex-between">
<span>新增颜色：</span>
<span>{{datas.EditAddType==1?'编辑':'新增'}}色值：</span>
<span>
<el-button class="button-new-tag ml-1"
size="small" @click="CancelAddColor()">
size="small" @click="CancelEditAdd(1)">
取消
</el-button>
<el-button class="button-new-tag ml-1 q-ml-xs"
:loading="datas.addColorLoading"
:loading="datas.addEditLoading"
type="danger"
size="small" @click="setColor()">
size="small" @click="setEditAdd(1)">
提交
</el-button>
</span>
</p>
<div class="row q-mt-md">
<span class="Required q-mr-xs">*</span>
<el-select v-model="datas.addEditColor.ColorId"
class="ml-1 w-20"
placeholder="分类"
size="small">
<el-option
key=""
label="不限"
value=""
/>
<el-option
v-for="item in ColorList"
:key="item.Id"
:label="`${item.Name}`"
:value="item.Id"
/>
</el-select>
<span class="Required q-ma-xs">*</span>
<el-input
placeholder="输入颜色名称"
v-model="datas.addColor.ColorName"
placeholder="色值名称"
v-model="datas.addEditColor.ColorName"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
<span class="Required q-mr-xs q-ml-sm">*</span>
<el-input
placeholder="例：#e5e3da"
v-model="datas.addColor.ColorValue"
:disabled="datas.EditAddType==1"
placeholder="#e5e3da"
v-model="datas.addEditColor.ColorValue"
class="ml-1 w-20 q-ml-sm"
size="small"
/>
</div>
</template>
</div>
<p class="q-mt-md"><span class="Required q-mr-md">*</span>选择季节：</p>
<div class="row wrap q-mt-md">
<el-select v-model="queryObj.SeasonName" class="m-2" placeholder="请选择季节">
......@@ -249,12 +298,19 @@
import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
const datas = reactive({
addColor: {
addEditCountry: {
CountryId: '',
CountryName: '',
},
addEditColor: {
ColorId: '',
ColorValue: '',
ColorName: '',
},
addColorLoading: false,
addColorsShow: false,
EditAddType: 0,//0新增 1编辑
addEditLoading: false,
EditAddShow: false,
EditAddCountryShow: false,
DataSource:{},
CountryValue: null,
})
......@@ -312,16 +368,81 @@
queryObj.value.Title = titleValue.value
}
const CancelAddColor = () =>{
datas.addColorsShow = false
datas.addColor = {
const EditAddDatas = (type:Number,num:Number) => {
datas.EditAddType = type
if(!num) {
datas.EditAddCountryShow=!datas.EditAddCountryShow
if(type) datas.addEditCountry = {
CountryId: '',
CountryName: queryObj.value.CountryName,
}
}
else {
datas.EditAddShow=!datas.EditAddShow
if(type) datas.addEditColor = {
ColorId: queryObj.value.ColorId,
ColorValue: queryObj.value.ColorStr,
ColorName: queryObj.value.ColorName,
}
}
}
const CancelEditAdd = (num:Number) =>{
if(!num){
datas.EditAddCountryShow = false
datas.addEditCountry = {
CountryId: '',
CountryName: '',
}
}else{
datas.EditAddShow = false
datas.addEditColor = {
ColorId: '',
ColorValue: '',
ColorName: '',
}
}
}
const setEditAdd = async (num:Number) => {
if(!num){
}else{
setColor()
}
}
const setCountry = async () => {
if(!datas.addEditCountry.CountryName){
ElMessage({
showClose: true,
message: '请完善国家名称',
type: 'warning',
})
return
}
try {
datas.addEditLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addEditCountry)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
message: '新增颜色成功',
type: 'success',
})
GetTemplateConfigDatas()
CancelEditAdd()
}else {
ElMessage({
showClose: true,
message: '新增颜色失败',
type: 'warning',
})
}
datas.addEditLoading = false
} catch (error) {}
}
const setColor = async () => {
if(!datas.addColor.ColorValue||!datas.addColor.ColorName){
if(!datas.addEditColor.ColorValue||!datas.addEditColor.ColorName){
ElMessage({
showClose: true,
message: '请完善颜色的名称及颜色16进制',
......@@ -329,7 +450,7 @@
})
return
}
if(datas.addColor.ColorValue.indexOf('#')==-1){
if(datas.addEditColor.ColorValue.indexOf('#')==-1){
ElMessage({
showClose: true,
message: "色号需要在最前面加 # 号",
......@@ -338,8 +459,8 @@
return
}
try {
datas.addColorLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addColor)
datas.addEditLoading = true
let dataRes = await ConfigService.SetTemplateConfigData(datas.addEditColor)
if (dataRes.data.resultCode == 1) {
ElMessage({
showClose: true,
......@@ -347,7 +468,7 @@
type: 'success',
})
GetTemplateConfigDatas()
CancelAddColor()
CancelEditAdd()
}else {
ElMessage({
showClose: true,
......@@ -355,7 +476,7 @@
type: 'warning',
})
}
datas.addColorLoading = false
datas.addEditLoading = false
} catch (error) {}
}
......@@ -534,6 +655,12 @@
</script>
<style lang="scss" scoped>
.EditAddElement{
box-shadow: 0px 1px 1px #f6f6f6;
background: #f6f6f6;
padding: 0 5px 10px 5px;
margin-top: 5px;
}
.origin-image {
height: 100px;
background-size: contain;
......
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