ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

路线图更新静态数据解析

Browse Source
qianming 3 years ago
parent 9241a593c5
commit d222e26c54
2 changed files with 340 additions and 315 deletions
Show Stats Download Patch File Download Diff File

197
report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-map.js
Unescape Escape View File

@ -19,10 +19,203 @@ export const widgetMap = {
name: 'layerName', name: 'layerName',
required: false, required: false,
placeholder: '', placeholder: '',
value: '迁徙图', value: '路线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{
name: '标题设置',
list: [
{
type: 'el-switch',
label: '标题',
name: 'isNoTitle',
required: false,
placeholder: '',
value: true
},
{
type: 'el-input-text',
label: '标题',
name: 'titleText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'textColor',
required: false,
placeholder: '',
value: '#fff'
},
{
type: 'el-select',
label: '字体粗细',
name: 'textFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'textFontSize',
required: false,
placeholder: '',
value: 20
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{code: 'center', name: '居中'},
{code: 'left', name: '左对齐'},
{code: 'right', name: '右对齐'},
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
},
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: ''
},
{
type: 'el-select',
label: '字体粗细',
name: 'subTextFontWeight',
required: false,
placeholder: '',
selectOptions: [
{code: 'normal', name: '正常'},
{code: 'bold', name: '粗体'},
{code: 'bolder', name: '特粗体'},
{code: 'lighter', name: '细体'}
],
value: 'normal'
},
{
type: 'el-input-number',
label: '字体大小',
name: 'subTextFontSize',
required: false,
placeholder: '',
value: 12
},
],
},
]
],
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
},
],
value: 'staticData',
},
{
type: 'el-input-number',
label: '刷新时间(毫秒)',
name: 'refreshTime',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
value: 5000
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: [
{source: '北京', target: '上海', value: 95},
{source: '北京', target: '广州', value: 90},
{source: '北京', target: '大连', value: 80},
{source: '北京', target: '南宁', value: 70},
{source: '北京', target: '南昌', value: 60},
{source: '北京', target: '拉萨', value: 50},
{source: '北京', target: '长春', value: 40},
{source: '北京', target: '包头', value: 30},
{source: '北京', target: '重庆', value: 20},
{source: '北京', target: '常州', value: 10},
{source: '上海', target: '包头', value: 95},
{source: '上海', target: '昆明', value: 90},
{source: '上海', target: '广州', value: 80},
{source: '上海', target: '郑州', value: 70},
{source: '上海', target: '长春', value: 60},
{source: '上海', target: '重庆', value: 50},
{source: '上海', target: '长沙', value: 40},
{source: '上海', target: '北京', value: 30},
{source: '上海', target: '丹东', value: 20},
{source: '上海', target: '大连', value: 10},
{source: '广州', target: '福州', value: 95},
{source: '广州', target: '太原', value: 90},
{source: '广州', target: '长春', value: 80},
{source: '广州', target: '重庆', value: 70},
{source: '广州', target: '西安', value: 60},
{source: '广州', target: '成都', value: 50},
{source: '广州', target: '常州', value: 40},
{source: '广州', target: '北京', value: 30},
{source: '广州', target: '北海', value: 20},
{source: '广州', target: '海口', value: 10},
],
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: '',
relactiveDom: 'dataType',
chartType: 'widget-piechart',
dictKey: 'MAP_PROPERTIES',
relactiveDomValue: 'dynamicData',
value: '',
}, },
], ],
data: [],
position: [ position: [
{ {
type: 'el-input-number', type: 'el-input-number',

306
report-ui/src/views/bigscreenDesigner/designer/widget/widgetMap.vue
Unescape Escape View File

@ -6,98 +6,6 @@
<script> <script>
import "../../../../../node_modules/echarts/map/js/china.js"; import "../../../../../node_modules/echarts/map/js/china.js";
let GZData = [
[
{
name: "广州"
},
{
name: "福州",
value: 95
}
],
[
{
name: "上海"
},
{
name: "太原",
value: 90
}
],
[
{
name: "上海"
},
{
name: "长春",
value: 80
}
],
[
{
name: "广州"
},
{
name: "重庆",
value: 70
}
],
[
{
name: "广州"
},
{
name: "西安",
value: 60
}
],
[
{
name: "广州"
},
{
name: "成都",
value: 50
}
],
[
{
name: "广州"
},
{
name: "常州",
value: 40
}
],
[
{
name: "广州"
},
{
name: "北京",
value: 30
}
],
[
{
name: "广州"
},
{
name: "北海",
value: 20
}
],
[
{
name: "广州"
},
{
name: "海口",
value: 10
}
]
];
let geoCoordMap = { let geoCoordMap = {
上海: [121.4648, 31.2891], 上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901], 东莞: [113.8953, 22.901],
@ -325,47 +233,7 @@ export default {
} }
} }
}, },
series: [] series: [
},
optionsSetup: {}
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
};
}
},
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.editorOptions();
},
deep: true
}
},
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsSetup = this.value.setup;
},
mounted() {
this.initData2();
this.editorOptions();
},
methods: {
initData() {
const options = this.options;
options.series.push(
{ {
//name: tempData[0], //name: tempData[0],
type: "lines", type: "lines",
@ -379,17 +247,18 @@ export default {
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: color[0], color: '#a6c84c',
width: 0, width: 0,
curveness: 0.2 curveness: 0.2
} }
}, },
data: this.convertData(tempData[1]) data: [],
}, },
{ {
name: tempData[0],
type: "lines", type: "lines",
zlevel: 2, zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: { effect: {
show: true, show: true,
period: 6, period: 6,
@ -399,27 +268,27 @@ export default {
}, },
lineStyle: { lineStyle: {
normal: { normal: {
color: color[0], color: '#ffa022',
width: 1, width: 1,
opacity: 0.4, opacity: 0.4,
curveness: 0.2 curveness: 0.2
} }
}, },
data: this.convertData(tempData[1]) data: [],
}, },
{ {
name: tempData[0], //name: tempData[0],
type: "effectScatter", type: 'effectScatter',
coordinateSystem: "geo", coordinateSystem: 'geo',
zlevel: 2, zlevel: 2,
rippleEffect: { rippleEffect: {
brushType: "stroke" brushType: 'stroke'
}, },
label: { label: {
normal: { normal: {
show: true, show: true,
position: "right", position: 'right',
formatter: "{b}" formatter: '{b}'
} }
}, },
symbolSize: function (val) { symbolSize: function (val) {
@ -427,77 +296,73 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: color[0] color: '#46bee9'
}
},
data: [],
} }
]
}, },
data: tempData[1].map(function (dataItem) { optionsSetup: {}
};
},
computed: {
styleObj() {
return { return {
name: dataItem[1].name, position: this.ispreview ? "absolute" : "static",
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.background
}; };
})
} }
);
this.options = options;
}, },
initData2() { watch: {
const optins = this.options; value: {
optins.series.push({ handler(val) {
type: 'lines', this.optionsStyle = val.position;
zlevel: 1, this.optionsData = val.data;
effect: { this.optionsSetup = val.setup;
show: true, this.editorOptions();
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
}, },
lineStyle: { deep: true
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
} }
}, },
data: convertData(GZData) created() {
},); this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsSetup = this.value.setup;
},
mounted() {
this.editorOptions();
}, },
methods: {
/* convertData(data) { convertData(data) {
let res = []; let res = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let dataItem = data[i]; let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name]; let sourceCoord = geoCoordMap[dataItem.source]
let toCoord = geoCoordMap[dataItem[1].name]; let targetCoord = geoCoordMap[dataItem.target]
if ("流入" == type) { if (sourceCoord && targetCoord) {
fromCoord = geoCoordMap[dataItem[1].name];
toCoord = geoCoordMap[dataItem[0].name];
}
if (fromCoord && toCoord) {
res.push({ res.push({
fromName: dataItem[0].name, fromName: dataItem.source,
toName: dataItem[1].name, toName: dataItem.target,
coords: [fromCoord, toCoord], coords: [sourceCoord, targetCoord],
value: dataItem[1].value value: dataItem.value
}); }
)
} }
} }
return res; return res;
},*/ },
convertData2(data) { transData(data) {
let res = []; let res = [];
for (let i = 0; i < data.length; i++) { for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({ res.push({
fromName: dataItem[0].name, name: data[i].target,
toName: dataItem[1].name, value: data[i].value,
coords: [fromCoord, toCoord], })
value: dataItem[1].value
});
}
} }
return res; return res;
}, },
@ -533,28 +398,17 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime); : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
}, },
staticDataFn(val) { staticDataFn(val) {
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const label = this.options.series[1]["label"]; const series = this.options.series;
/*const normal = { series[0]["data"] = this.convertData(val)
show: true, series[1]["data"] = this.convertData(val)
color: "#fff", series[2]["data"] = val.map(function (dataItem) {
fontWeight: "bold", return {
position: "inside", name: dataItem.target,
formatter: function(para) { value: geoCoordMap[dataItem.target].concat([dataItem.value])
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight
}
} }
}; }),
const data = convertData(val); console.log(series)
this.options.series[1]["data"] = data;
label["normal"] = normal;*/
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
if (!val) return; if (!val) return;
@ -574,28 +428,6 @@ export default {
}); });
}, },
renderingFn(val) { renderingFn(val) {
this.options.series[0]["data"] = val;
const optionsSetup = this.optionsSetup;
const label = this.options.series[1]["label"];
const normal = {
show: true,
color: "#fff",
fontWeight: "bold",
position: "inside",
formatter: function (para) {
return "{cnNum|" + para.data.value[2] + "}";
},
rich: {
cnNum: {
fontSize: optionsSetup.fontDataSize,
color: optionsSetup.fontDataColor,
fontWeight: optionsSetup.fontDataWeight
}
}
};
const data = convertData(val);
this.options.series[1]["data"] = data;
label["normal"] = normal;
} }
} }
}; };

Write Preview
Loading…
Cancel
Save