diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js index b9de24f2..09d5aa75 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js @@ -133,20 +133,103 @@ export const widgetMap = { ], }, { - name: '字体设置', + name: '起点设置', list: [ + { + type: 'el-switch', + label: '起点显示', + name: 'isShowSource', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '点大小级别', + name: 'sourcePointSize', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'vue-color', + label: '点颜色', + name: 'sourcePointColor', + required: false, + placeholder: '', + value: '#46bee9' + }, + { + type: 'el-input-number', + label: '文字大小', + name: 'sourceFontTextSize', + required: false, + placeholder: '', + value: 12, + }, + { + type: 'vue-color', + label: '文字颜色', + name: 'sourceFontTextColor', + required: false, + placeholder: '', + value: '#46bee9' + }, + { + type: 'el-select', + label: '文字粗细', + name: 'sourceFontTextWeight', + required: false, + placeholder: '', + selectOptions: [ + {code: 'normal', name: '正常'}, + {code: 'bold', name: '粗体'}, + {code: 'bolder', name: '特粗体'}, + {code: 'lighter', name: '细体'} + ], + value: 'normal' + }, + ], + }, + { + name: '终点设置', + list: [ + { + type: 'el-switch', + label: '终点显示', + name: 'isShowTarget', + required: false, + placeholder: '', + value: true + }, + { + type: 'el-input-number', + label: '点大小', + name: 'targetPointSize', + required: false, + placeholder: '', + value: 5, + }, + { + type: 'vue-color', + label: '点颜色', + name: 'targetPointColor', + required: false, + placeholder: '', + value: '#46bee9' + }, { type: 'el-input-number', label: '文字大小', - name: 'fontTextSize', + name: 'targetFontTextSize', required: false, placeholder: '', - value: 15, + value: 12, }, { type: 'vue-color', label: '文字颜色', - name: 'fontTextColor', + name: 'targetFontTextColor', required: false, placeholder: '', value: '#46bee9' @@ -154,7 +237,7 @@ export const widgetMap = { { type: 'el-select', label: '文字粗细', - name: 'fontTextWeight', + name: 'targetFontTextWeight', required: false, placeholder: '', selectOptions: [ @@ -208,27 +291,6 @@ export const widgetMap = { }, ], }, - { - name: '点设置', - list: [ - { - type: 'el-input-number', - label: '点大小', - name: 'pointSize', - required: false, - placeholder: '', - value: 5, - }, - { - type: 'vue-color', - label: '点颜色', - name: 'pointColor', - required: false, - placeholder: '', - value: '#46bee9' - }, - ], - }, { name: '线设置', list: [ @@ -318,7 +380,7 @@ export const widgetMap = { relactiveDom: 'dataType', relactiveDomValue: 'staticData', value: [ - {source: '北京市', target: '上海市', value: 95}, + /*{source: '北京市', target: '上海市', value: 95}, {source: '北京市', target: '广州市', value: 90}, {source: '北京市', target: '大连市', value: 80}, {source: '北京市', target: '南宁市', value: 70}, @@ -347,7 +409,194 @@ export const widgetMap = { {source: '广州市', target: '常州市', value: 40}, {source: '广州市', target: '北京市', value: 30}, {source: '广州市', target: '北海市', value: 20}, - {source: '广州市', target: '海口市', value: 10}, + {source: '广州市', target: '海口市', value: 10},*/ + + { + "target": "南京市", + "value": 1, + "source": "乐山市" + }, + { + "target": "丽江市", + "value": 3, + "source": "丽江市" + }, + { + "target": "洛阳市", + "value": 4, + "source": "深圳市" + }, + { + "target": "佛山市", + "value": 1, + "source": "北京市" + }, + { + "target": "南阳市", + "value": 2, + "source": "上海市" + }, + { + "target": "平顶山市", + "value": 4, + "source": "平顶山市" + }, + { + "target": "郑州市", + "value": 2, + "source": "银川市" + }, + { + "target": "淄博市", + "value": 2, + "source": "合肥市" + }, + { + "target": "安庆市", + "value": 1, + "source": "安庆市" + }, + { + "target": "杭州市", + "value": 2, + "source": "台州市" + }, + { + "target": "塔城地区", + "value": 1, + "source": "漯河市" + }, + { + "target": "塔城地区", + "value": 3, + "source": "塔城地区" + }, + { + "target": "乐山市", + "value": 1, + "source": "巴中市" + }, + { + "target": "佛山市", + "value": 1, + "source": "深圳市" + }, + { + "target": "商洛市", + "value": 1, + "source": "平顶山市" + }, + { + "target": "苏州市", + "value": 1, + "source": "上海市" + }, + { + "target": "合肥市", + "value": 2, + "source": "平顶山市" + }, + { + "target": "衡阳市", + "value": 3, + "source": "平顶山市" + }, + { + "target": "佛山市", + "value": 3, + "source": "佛山市" + }, + { + "target": "无锡市", + "value": 1, + "source": "宁波市" + }, + { + "target": "上海市", + "value": 5, + "source": "上海市" + }, + { + "target": "洛阳市", + "value": 3, + "source": "洛阳市" + }, + { + "target": "漯河市", + "value": 3, + "source": "平顶山市" + }, + { + "target": "上海市", + "value": 1, + "source": "呼和浩特市" + }, + { + "target": "广州市", + "value": 1, + "source": "深圳市" + }, + { + "target": "台州市", + "value": 1, + "source": "佛山市" + }, + { + "target": "乌鲁木齐市", + "value": 4, + "source": "深圳市" + }, + { + "target": "洛阳市", + "value": 2, + "source": "鹤岗市" + }, + { + "target": "淄博市", + "value": 1, + "source": "商洛市" + }, + { + "target": "南阳市", + "value": 1, + "source": "呼和浩特市" + }, + { + "target": "杭州市", + "value": 1, + "source": "杭州市" + }, + { + "target": "佛山市", + "value": 1, + "source": "台州市" + }, + { + "target": "普洱市", + "value": 2, + "source": "丽江市" + }, + { + "target": "深圳市", + "value": 1, + "source": "上海市" + }, + { + "target": "衡阳市", + "value": 1, + "source": "深圳市" + }, + { + "target": "平顶山市", + "value": 2, + "source": "商洛市" + }, + { + "target": "安阳市", + "value": 1, + "source": "南阳市" + } + ], }, { diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue index 42b6ecf3..b1a3ed4f 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/map/widgetLineMap.vue @@ -229,6 +229,7 @@ export default { data: [], }, { + // 起点 //name: tempData[0], type: 'effectScatter', coordinateSystem: 'geo', @@ -255,7 +256,36 @@ export default { } }, data: [], - } + }, + { + // 终点 + //name: tempData[0], + type: 'effectScatter', + coordinateSystem: 'geo', + zlevel: 2, + rippleEffect: { + brushType: 'stroke' + }, + label: { + normal: { + show: true, + position: 'right', + formatter: '{b}', + fontSize: 22, + } + }, + // 点的大小 + symbolSize: function (val) { + return val[2] / pointSize; + }, + itemStyle: { + normal: { + // 地图点颜色 + color: '#46bee9' + } + }, + data: [], + }, ] }, optionsSetup: {} @@ -314,10 +344,12 @@ export default { }, editorOptions() { this.setOptionsTitle(); - this.setOptionsText(); + //this.setOptionsText(); this.setOptionsSymbol(); - this.setOptionsPoint(); + //this.setOptionsPoint(); this.setOptionsLine(); + this.setOptionsSource(); + this.setOptionsTarget(); this.setOptionsColor(); this.setOptionsData(); }, @@ -341,10 +373,50 @@ export default { }; this.options.title = title; }, + // 起点设置 + setOptionsSource(){ + const optionsSetup = this.optionsSetup; + const series = this.options.series[2]; + const normal = { + show: optionsSetup.isShowSource, + position: 'right', + color: optionsSetup.sourceFontTextColor, + fontSize: optionsSetup.sourceFontTextSize, + fontWeight: optionsSetup.sourceFontTextWeight, + }; + const itemStyle = { + normal: { + color: optionsSetup.sourcePointColor, + } + }; + pointSize = optionsSetup.sourcePointSize; + series.label.normal = normal; + series.itemStyle = itemStyle; + }, + // 终点设置 + setOptionsTarget(){ + const optionsSetup = this.optionsSetup; + const series = this.options.series[3]; + const normal = { + show: optionsSetup.isShowTarget, + position: 'right', + color: optionsSetup.targetFontTextColor, + fontSize: optionsSetup.targetFontTextSize, + fontWeight: optionsSetup.targetFontTextWeight, + }; + const itemStyle = { + normal: { + color: optionsSetup.targetPointColor, + } + }; + pointSize = optionsSetup.targetPointSize; + series.label.normal = normal; + series.itemStyle = itemStyle; + }, // 地图字体设置 setOptionsText() { const optionsSetup = this.optionsSetup; - const lable = this.options.series[2].label; + const series = this.options.series; const normal = { show: true, position: 'right', @@ -352,7 +424,8 @@ export default { fontSize: optionsSetup.fontTextSize, fontWeight: optionsSetup.fontTextWeight, } - lable["normal"] = normal; + series[2].label["normal"] = normal; + series[3].label["normal"] = normal; }, // 图标设置 setOptionsSymbol(){ @@ -389,14 +462,15 @@ export default { // 点设置 setOptionsPoint() { const optionsSetup = this.optionsSetup; - const series = this.options.series[2]; + const series = this.options.series; pointSize = optionsSetup.pointSize const itemStyle = { normal: { color: optionsSetup.pointColor, } }; - series["itemStyle"] = itemStyle; + series[2]["itemStyle"] = itemStyle; + series[3]["itemStyle"] = itemStyle; }, // 线设置 setOptionsLine() { @@ -438,9 +512,15 @@ export default { }, staticDataFn(val) { const series = this.options.series; - series[0]["data"] = this.convertData(val) - series[1]["data"] = this.convertData(val) + series[0]["data"] = this.convertData(val); + series[1]["data"] = this.convertData(val); series[2]["data"] = val.map(function (dataItem) { + return { + name: dataItem.source, + value: geoCoordMap[dataItem.source].concat([dataItem.value]) + } + }); + series[3]["data"] = val.map(function (dataItem) { return { name: dataItem.target, value: geoCoordMap[dataItem.target].concat([dataItem.value]) @@ -466,9 +546,15 @@ export default { }, renderingFn(val) { const series = this.options.series; - series[0]["data"] = this.convertData(val) - series[1]["data"] = this.convertData(val) + series[0]["data"] = this.convertData(val); + series[1]["data"] = this.convertData(val); series[2]["data"] = val.map(function (dataItem) { + return { + name: dataItem.source, + value: geoCoordMap[dataItem.source].concat([dataItem.value]) + } + }); + series[3]["data"] = val.map(function (dataItem) { return { name: dataItem.target, value: geoCoordMap[dataItem.target].concat([dataItem.value])