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

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

@ -7,55 +7,248 @@
* @LastEditTime: 2021-09-28 14:17:20 * @LastEditTime: 2021-09-28 14:17:20
*/ */
export const widgetMap = { export const widgetMap = {
code: 'widget-map', code: 'widget-map',
type: 'chart', type: 'chart',
label: '中国地图', label: '中国地图',
icon: 'iconzhongguoditu', icon: 'iconzhongguoditu',
options: { options: {
setup: [ setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '路线图',
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
{ {
type: 'el-input-text', name: '标题设置',
label: '图层名称', list: [
name: 'layerName', {
required: false, type: 'el-switch',
placeholder: '', label: '标题',
value: '迁徙图', name: 'isNoTitle',
}, required: false,
], placeholder: '',
data: [], value: true
position: [ },
{ {
type: 'el-input-number', type: 'el-input-text',
label: '左边距', label: '标题',
name: 'left', name: 'titleText',
required: false, required: false,
placeholder: '', placeholder: '',
value: 0, value: ''
}, },
{ {
type: 'el-input-number', type: 'vue-color',
label: '上边距', label: '字体颜色',
name: 'top', name: 'textColor',
required: false, required: false,
placeholder: '', placeholder: '',
value: 0, value: '#fff'
}, },
{ {
type: 'el-input-number', type: 'el-select',
label: '宽度', label: '字体粗细',
name: 'width', name: 'textFontWeight',
required: false, required: false,
placeholder: '该容器在1920px大屏中的宽度', placeholder: '',
value: 600, selectOptions: [
}, {code: 'normal', name: '正常'},
{ {code: 'bold', name: '粗体'},
type: 'el-input-number', {code: 'bolder', name: '特粗体'},
label: '高度', {code: 'lighter', name: '细体'}
name: 'height', ],
required: false, value: 'normal'
placeholder: '该容器在1080px大屏中的高度', },
value: 400, {
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: '',
},
],
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: '',
value: 0,
},
{
type: 'el-input-number',
label: '宽度',
name: 'width',
required: false,
placeholder: '该容器在1920px大屏中的宽度',
value: 600,
},
{
type: 'el-input-number',
label: '高度',
name: 'height',
required: false,
placeholder: '该容器在1080px大屏中的高度',
value: 400,
},
]
} }
}

364
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,7 +233,75 @@ export default {
} }
} }
}, },
series: [] series: [
{
//name: tempData[0],
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "#fff",
symbolSize: 3
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
}
},
data: [],
},
{
type: "lines",
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: '#ffa022',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: [],
},
{
//name: tempData[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: '#46bee9'
}
},
data: [],
}
]
}, },
optionsSetup: {} optionsSetup: {}
}; };
@ -359,148 +335,37 @@ export default {
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
}, },
mounted() { mounted() {
this.initData2();
this.editorOptions(); this.editorOptions();
}, },
methods: { methods: {
initData() { convertData(data) {
const options = this.options;
options.series.push(
{
//name: tempData[0],
type: "lines",
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: "#fff",
symbolSize: 3
},
lineStyle: {
normal: {
color: color[0],
width: 0,
curveness: 0.2
}
},
data: this.convertData(tempData[1])
},
{
name: tempData[0],
type: "lines",
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[0],
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: this.convertData(tempData[1])
},
{
name: tempData[0],
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[0]
}
},
data: tempData[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
this.options = options;
},
initData2() {
const optins = this.options;
optins.series.push({
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
}
},
data: convertData(GZData)
},);
},
/* convertData(data) {
let res = [];
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 ("流入" == type) {
fromCoord = geoCoordMap[dataItem[1].name];
toCoord = geoCoordMap[dataItem[0].name];
}
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
},*/
convertData2(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 (fromCoord && toCoord) { if (sourceCoord && targetCoord) {
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;
}, },
transData(data) {
let res = [];
for (let i = 0; i < data.length; i++) {
res.push({
name: data[i].target,
value: data[i].value,
})
}
return res;
},
editorOptions() { editorOptions() {
this.setOptionsTitle(); this.setOptionsTitle();
this.setOptionsData(); this.setOptionsData();
@ -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