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

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

@ -19,10 +19,203 @@ export const widgetMap = {
name: 'layerName',
required: false,
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: [
{
type: 'el-input-number',
@ -58,4 +251,4 @@ export const widgetMap = {
},
]
}
}
}

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

@ -6,98 +6,6 @@
<script>
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 = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
@ -325,47 +233,7 @@ export default {
}
}
},
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(
series: [
{
//name: tempData[0],
type: "lines",
@ -379,17 +247,18 @@ export default {
},
lineStyle: {
normal: {
color: color[0],
color: '#a6c84c',
width: 0,
curveness: 0.2
}
},
data: this.convertData(tempData[1])
data: [],
},
{
name: tempData[0],
type: "lines",
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
@ -399,27 +268,27 @@ export default {
},
lineStyle: {
normal: {
color: color[0],
color: '#ffa022',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: this.convertData(tempData[1])
data: [],
},
{
name: tempData[0],
type: "effectScatter",
coordinateSystem: "geo",
//name: tempData[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: "stroke"
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
@ -427,77 +296,73 @@ export default {
},
itemStyle: {
normal: {
color: color[0]
color: '#46bee9'
}
},
data: [],
}
]
},
data: tempData[1].map(function (dataItem) {
optionsSetup: {}
};
},
computed: {
styleObj() {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
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
};
})
}
);
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
watch: {
value: {
handler(val) {
this.optionsStyle = val.position;
this.optionsData = val.data;
this.optionsSetup = val.setup;
this.editorOptions();
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 0,
curveness: 0.2
deep: true
}
},
data: convertData(GZData)
},);
created() {
this.optionsStyle = this.value.position;
this.optionsData = this.value.data;
this.optionsSetup = this.value.setup;
},
mounted() {
this.editorOptions();
},
/* convertData(data) {
methods: {
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) {
let sourceCoord = geoCoordMap[dataItem.source]
let targetCoord = geoCoordMap[dataItem.target]
if (sourceCoord && targetCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
fromName: dataItem.source,
toName: dataItem.target,
coords: [sourceCoord, targetCoord],
value: dataItem.value
}
)
}
}
return res;
},*/
convertData2(data) {
},
transData(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 (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
name: data[i].target,
value: data[i].value,
})
}
return res;
},
@ -533,28 +398,17 @@ export default {
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
},
staticDataFn(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 series = this.options.series;
series[0]["data"] = this.convertData(val)
series[1]["data"] = this.convertData(val)
series[2]["data"] = val.map(function (dataItem) {
return {
name: dataItem.target,
value: geoCoordMap[dataItem.target].concat([dataItem.value])
}
};
const data = convertData(val);
this.options.series[1]["data"] = data;
label["normal"] = normal;*/
}),
console.log(series)
},
dynamicDataFn(val, refreshTime) {
if (!val) return;
@ -574,28 +428,6 @@ export default {
});
},
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