Commit 35174d87 authored by zhengke's avatar zhengke

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

parent 54fd6d73
...@@ -416,6 +416,16 @@ page { ...@@ -416,6 +416,16 @@ page {
.q-ma-lg{ .q-ma-lg{
margin:20px 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{ .q-pa-lg{
padding:20px padding:20px
} }
......
...@@ -53,7 +53,22 @@ ...@@ -53,7 +53,22 @@
<IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/> <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
</div> </div>
</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 class="attr-items flex items-center q-mt-md">
<div style="font-size: 11px;width:50px;">对齐</div> <div style="font-size: 11px;width:50px;">对齐</div>
<el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择"> <el-select size="mini" v-model="attrs.fontAlign" @change="val=>setAlignChangeHandler(val as number)" placeholder="请选择">
...@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2'; ...@@ -106,12 +121,16 @@ import tinycolor from 'tinycolor2';
import { color as am4coreColor,Label} from "@amcharts/amcharts4/core"; import { color as am4coreColor,Label} from "@amcharts/amcharts4/core";
import { watch } from 'vue'; import { watch } from 'vue';
import MapService from '@/services/MapService'; import MapService from '@/services/MapService';
import { useFontStore } from '@/store'
const mapStore = useMapStore() const mapStore = useMapStore()
const { current,fillColor } = storeToRefs(mapStore) const { current,fillColor } = storeToRefs(mapStore)
const { formatFonts } = storeToRefs(useFontStore())
const attrs = reactive({ const attrs = reactive({
arrow:-1, arrow:-1,
textEnable:false, textEnable:false,
fontSize:12, fontSize:12,
fontWeight:400,
fontFamily: '',
fontAlign:0, fontAlign:0,
fontText:'', fontText:'',
fontColor:'#000', fontColor:'#000',
...@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => { ...@@ -151,6 +170,14 @@ const AddSubtract = (symbol: string,val: number) => {
} }
value = attrs.fontSize value = attrs.fontSize
updateLabFontSizeHandler(value as number) 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) => { const updateFilter = (t: number, val: number) => {
...@@ -213,6 +240,8 @@ const createLabel = ()=>{ ...@@ -213,6 +240,8 @@ const createLabel = ()=>{
//label.fontWeight = 'bold' //label.fontWeight = 'bold'
attrs.fontSize = 13 attrs.fontSize = 13
attrs.fontWeight = 400
attrs.fontFamily = 'Microsoft Yahei'
attrs.fill = fillColor.value.realColor attrs.fill = fillColor.value.realColor
attrs.text = '文字内容' attrs.text = '文字内容'
attrs.fontAlign = 0 attrs.fontAlign = 0
...@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{ ...@@ -293,6 +322,24 @@ const updateLabFontSizeHandler = (val:number) =>{
}, 500); }, 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)=>{ const setLabelTextHandler = (val:string)=>{
let lab = getCurrentLabel() let lab = getCurrentLabel()
if(lab){ if(lab){
...@@ -335,6 +382,8 @@ const setAttribute = ()=>{ ...@@ -335,6 +382,8 @@ const setAttribute = ()=>{
attrs.textEnable = true attrs.textEnable = true
attrs.fontText = lab.text attrs.fontText = lab.text
attrs.fontSize = lab.fontSize??15 attrs.fontSize = lab.fontSize??15
attrs.fontWeight = lab.fontWeight??400
attrs.fontFamily = lab.fontFamily??'Microsoft Yahei'
attrs.fontAlign = lab.marginBottom attrs.fontAlign = lab.marginBottom
attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String() attrs.fontColor = tinycolor(lab.fill?.hex??'#000000').toHex8String()
//attrs.fontSize = //attrs.fontSize =
......
...@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore) ...@@ -31,9 +31,10 @@ const { current } = storeToRefs(mapStore)
right: 20px; right: 20px;
left: unset; left: unset;
top: 45px; top: 45px;
bottom: 200px;
position: absolute; position: absolute;
z-index: 9; z-index: 9;
overflow: auto;
} }
.attr-box .attr-header { .attr-box .attr-header {
......
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